Title: Actividad 8: Interactividad con botones y estilos
Course: 2025 - LI - Desarrollo Web del Lado del Servidor 2-2 > Section: Unidad 1 - Introducción al Desarrollo Web

Objetivo

Aprender a utilizar JavaScript para manipular los estilos de elementos HTML mediante botones, reforzando el uso del DOM y el atributo style.

Instrucciones

1. Identificación
Al inicio del documento coloca tu nombre completo y el nombre del profesor.
2. Archivos base
Copia el siguiente código como plantilla en tu editor. Tus cambios van en el archivo script.js.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Actividad 8 - Cambiando estilos</title>
  <style>
    .caja {
      width: 200px;
      height: 200px;
      background-color: lightblue;
      margin: 20px auto;
      text-align: center;
      line-height: 200px;
      font-size: 18px;
      border: 2px solid black;
    }
    .botones {
      text-align: center;
      margin-top: 20px;
    }
    button {
      margin: 5px;
      padding: 10px 15px;
    }
  </style>
</head>
<body>
  <div class="caja" id="caja">Texto de ejemplo</div>

  <div class="botones">
    <button id="colorBtn">Cambiar color</button>
    <button id="fuenteBtn">Cambiar tamaño de letra</button>
    <button id="resetBtn">Restablecer</button>
  </div>

  <script src="script.js"></script>
</body>
</html>


1. Tu tarea en JavaScript (archivo script.js)
Implementa lo siguiente usando addEventListener:
  - Al dar clic en el botón “Cambiar color”, cambia el color de fondo de la caja a otro (ejemplo: verde, rojo o amarillo).
  - Al dar clic en el botón “Cambiar tamaño de letra”, aumenta el tamaño del texto dentro de la caja.
  - Al dar clic en el botón “Restablecer”, regresa la caja a sus valores originales (lightblue, 18px de texto).
2. Reflexión personal
Escribe 5–6 líneas explicando:
  - ¿Cómo se relaciona el DOM con la manipulación de estilos?
  - ¿Qué fue lo más sencillo y lo más complicado de la actividad?
3. Evidencia
  - Captura de la página funcionando con los tres botones.
  - Copia de tu archivo script.js.
  - Todo en un solo archivo PDF.

Método de entrega

Convierte tu evidencia en un archivo PDF y súbelo a la plataforma.

Objetivo

Aprender a utilizar JavaScript para manipular los estilos de elementos HTML mediante botones, reforzando el uso del DOM y el atributo style.

Instrucciones

1. Identificación
Al inicio del documento coloca tu nombre completo y el nombre del profesor.
2. Archivos base
Copia el siguiente código como plantilla en tu editor. Tus cambios van en el archivo script.js.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Actividad 8 - Cambiando estilos</title>
  <style>
    .caja {
      width: 200px;
      height: 200px;
      background-color: lightblue;
      margin: 20px auto;
      text-align: center;
      line-height: 200px;
      font-size: 18px;
      border: 2px solid black;
    }
    .botones {
      text-align: center;
      margin-top: 20px;
    }
    button {
      margin: 5px;
      padding: 10px 15px;
    }
  </style>
</head>
<body>
  <div class="caja" id="caja">Texto de ejemplo</div>

  <div class="botones">
    <button id="colorBtn">Cambiar color</button>
    <button id="fuenteBtn">Cambiar tamaño de letra</button>
    <button id="resetBtn">Restablecer</button>
  </div>

  <script src="script.js"></script>
</body>
</html>


1. Tu tarea en JavaScript (archivo script.js)
Implementa lo siguiente usando addEventListener:
  - Al dar clic en el botón “Cambiar color”, cambia el color de fondo de la caja a otro (ejemplo: verde, rojo o amarillo).
  - Al dar clic en el botón “Cambiar tamaño de letra”, aumenta el tamaño del texto dentro de la caja.
  - Al dar clic en el botón “Restablecer”, regresa la caja a sus valores originales (lightblue, 18px de texto).
2. Reflexión personal
Escribe 5–6 líneas explicando:
  - ¿Cómo se relaciona el DOM con la manipulación de estilos?
  - ¿Qué fue lo más sencillo y lo más complicado de la actividad?
3. Evidencia
  - Captura de la página funcionando con los tres botones.
  - Copia de tu archivo script.js.
  - Todo en un solo archivo PDF.

Método de entrega

Convierte tu evidencia en un archivo PDF y súbelo a la plataforma.