Página de blog con tema

Parte de la sección JavaScript en Acción del Journey de HTML de Coddy. Lección 27 de 27.

Desafío

Fácil

En este desafío, tenemos una página de blog de fotografía llamada Lens & Light. Incluye publicaciones de blog sobre consejos de fotografía, un botón para alternar entre los temas oscuro y claro, y un sencillo formulario de suscripción al boletín que muestra un mensaje emergente al enviarlo.

Ya tenemos preparados el HTML y el CSS para esta página de blog de fotografía. Tu tarea es añadir la funcionalidad de JavaScript:

Cambio de tema: Añade un detector de eventos al botón de alternancia. Cuando se haga clic en el botón, alterna la clase dark-mode en <body> para que cambie el tema.
Mensaje emergente, Cuando se envíe el formulario, haz visible el mensaje emergente eliminando la clase "hidden" del elemento del mensaje emergente y añadiendo la clase "show" al elemento del mensaje emergente

Pruébalo tú mismo

<!DOCTYPE html>
<html>
<head>
  <title>Photographer's Blog</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Lens & Light</h1>
    <button id="themeToggle">Toggle Theme</button>
  </header>

  <main>
    <article class="post">
      <h2>Capturing Golden Hour</h2>
      <p>
        The hour before sunset and after sunrise brings warm, soft light that adds 
        depth and atmosphere to portraits and landscapes. Every photographer should 
        experiment with golden hour lighting.
      </p>
    </article>

    <article class="post">
      <h2>5 Tips for Street Photography</h2>
      <p>
        Look for interesting shadows, capture candid emotions, blend into the crowd, 
        use a prime lens, and always be ready to click. Street photography is about 
        telling raw and authentic stories.
      </p>
    </article>

    <section class="newsletter">
      <h3>Subscribe to Photo Notes</h3>
      <form id="newsletterForm">
        <input type="email" id="email" placeholder="Enter your email">
        <button type="submit">Sign Up</button>
      </form>
    </section>
  </main>

  <div id="toast" class="toast hidden">Subscribed successfully! 📸</div>

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