Objetivo

Aplicar fundamentos básicos de JavaScript para transformar una landing page estática en una página dinámica, utilizando:

• Manipulación del DOM
• Eventos del usuario
• Cambios dinámicos de contenido
• Validación básica de formulario
• Interacción visual sin frameworks

🛠 Tecnologías a utilizar

• HTML5
• CSS3
• JavaScript (Vanilla JS)
• DOM + Eventos

❌ No se permite el uso de frameworks o librerías externas (Bootstrap, Tailwind, React, etc.)

📌 Descripción de la práctica

A partir de la Landing Page Personal realizada en la práctica anterior, deberan agregar funcionalidades interactivas con JavaScript.

Requisitos obligatorios

La landing page debe incluir las siguientes mejoras:

1. Botón funcional en el Hero

El botón principal debe responder a un clic.

Ejemplo esperado:

• Mostrar un mensaje
• Desplazar a la sección de servicios
• Abrir un modal

📄 script.js

const botonHero = document.querySelector(".hero button");

botonHero.addEventListener("click", () => {
  alert("¡Gracias por visitar mi landing page!");
});

2. Interacción en las cards de servicios

Cada card debe reaccionar al pasar el mouse.

En un archivo script.js

const cards = document.querySelectorAll(".card");

cards.forEach((card) => {
  card.addEventListener("mouseenter", () => {
    card.style.transform = "scale(1.05)";
    card.style.transition = "0.3s";
  });

  card.addEventListener("mouseleave", () => {
    card.style.transform = "scale(1)";
  });
});

3. Botón de modo oscuro

Agregar un botón en el header que permita cambiar el tema de la página.

HTML

<button id="darkModeBtn">🌙</button>

JavaScript

const darkBtn = document.getElementById("darkModeBtn");

darkBtn.addEventListener("click", () => {
  document.body.classList.toggle("dark");
});

CSS

.dark {
  background-color: #111;
  color: white;
}

.dark .card {
  background-color: #222;
}

4. Sección nueva: Contacto con formulario

Agregar una sección al final antes del footer:

HTML

<section class="contact">
  <h2>Contacto</h2>

  <form id="contactForm">
    <input type="text" id="name" placeholder="Tu nombre">
    <input type="email" id="email" placeholder="Tu correo">
    <button type="submit">Enviar</button>
  </form>

  <p id="message"></p>
</section>

5. Validación básica con JavaScript

El formulario debe validar que los campos no estén vacíos.

En un archivo script.js

const form = document.getElementById("contactForm");
const mensaje = document.getElementById("message");

form.addEventListener("submit", (e) => {
  e.preventDefault();

  const nombre = document.getElementById("name").value;
  const correo = document.getElementById("email").value;

  if (nombre === "" || correo === "") {
    mensaje.textContent = "⚠️ Por favor completa todos los campos.";
    mensaje.style.color = "red";
  } else {
    mensaje.textContent = "✅ Mensaje enviado correctamente.";
    mensaje.style.color = "green";
    form.reset();
  }
});

---

Entregables

El estudiante deberá entregar:

• index.html
• styles.css
• script.js

Criterios de evaluación

Elemento evaluado	Puntos
Botón Hero funcional	20
Cards interactivas	20
Modo oscuro implementado	20
Formulario agregado	20
Validación con JS correcta	20
Total	100

Resultado esperado

Una landing page que sea:

• moderna
• interactiva
• dinámica
• funcional
• primer paso hacia aplicaciones web reales

Próxima práctica

En la siguiente unidad se desarrollará un proyecto más completo:

📌 Menú responsive + Modal + Galería dinámica con JavaScript