Scribd
Cargar
0 vistas2 páginas

Actividad - JavaScript Clase 1

La actividad consiste en crear una página web utilizando HTML y JavaScript, donde se implementan diversas funcionalidades interactivas. Se deben cambiar el contenido y estilo de un h1 al hacer clic en un botón, agregar un botón de reset, alternar clases CSS, mostrar texto en tiempo real desde un input y crear un contador con límites. Se enfatiza el uso de event listeners y métodos de selección de elementos en JavaScript.

Cargado por

barbie.bourel30
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
0 vistas2 páginas

Actividad - JavaScript Clase 1

La actividad consiste en crear una página web utilizando HTML y JavaScript, donde se implementan diversas funcionalidades interactivas. Se deben cambiar el contenido y estilo de un h1 al hacer clic en un botón, agregar un botón de reset, alternar clases CSS, mostrar texto en tiempo real desde un input y crear un contador con límites. Se enfatiza el uso de event listeners y métodos de selección de elementos en JavaScript.

Cargado por

barbie.bourel30
Derechos de autor
© All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd

Actividad — JavaScript Clase 1

Todo el trabajo va en dos archivos: [Link] y [Link]. El HTML define la estructura, el JS define el
comportamiento. No uses onclick en el HTML.

Parte 1 — Cambiar contenido


Paso 1 — Estructura base
Creá un archivo [Link] con:

• Un h1 con el texto "Hola".


• Un párrafo con cualquier texto.
• Un botón con el texto "Cambiar".
• La etiqueta script apuntando a [Link] al final del body.

Paso 2 — Seleccionar y modificar


En [Link] seleccioná el h1 y el botón. Cuando el usuario haga click en el botón, el h1 tiene que cambiar su texto a
"Texto cambiado" y su color a cualquier color que elijas.

Usá getElementById o querySelector para seleccionar. Usá addEventListener con el evento 'click'. Usá
textContent para cambiar el texto y [Link] para cambiar el color.

Paso 3 — Agregar un segundo botón


Agregá un botón "Resetear" en el HTML. Cuando el usuario lo presione, el h1 tiene que volver al texto y color
originales.

Parte 2 — Clases CSS


Paso 4 — Toggle de clase
Agregá en el HTML un div con cualquier texto y un botón "Activar". En el CSS definí dos estilos distintos para ese
div: uno sin clase y otro con la clase "activo" (diferente color de fondo, por ejemplo). En [Link] hacé que el botón
agregue o quite la clase "activo" con [Link] cada vez que se presiona.

Parte 3 — Evento input


Paso 5 — Leer lo que escribe el usuario
Agregá un input de texto en el HTML y un párrafo vacío debajo. Cada vez que el usuario escriba algo en el input,
el párrafo tiene que mostrar en tiempo real: "Hola, [lo que escribió]!". Usá el evento 'input' y leé el valor con
[Link].
Parte 4 — Variable que cambia
Paso 6 — Contador
Agregá en el HTML un div que muestre el número 0 y dos botones: "+" y "-". En [Link] definí una variable let
contador = 0. Cada vez que se presione "+" sumá 1 al contador y mostrá el nuevo valor en el div. Cada vez que se
presione "-" restá 1 y mostrá el nuevo valor.

Extra — Límites en el contador


Hacé que el contador no pueda bajar de 0. Si el contador ya es 0 y el usuario presiona "-", no hacés nada. Vas a
necesitar un condicional if para verificar el valor antes de restar.

También podría gustarte