Página de blog con tema

Parte de la sección JavaScript in Action 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 el tema oscuro/claro y un formulario de suscripción al boletín informativo simple que muestra un mensaje emergente (toast) al enviarse.

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

Cambio de tema – Agrega un escuchador de eventos (event listener) al botón de alternancia. Cuando se haga clic en el botón, alterna la clase dark-mode en el <body> para que el tema cambie.
Mensaje emergente (toast) – Cuando se envíe el formulario, haz que el toast sea visible eliminando la clase "hidden" del elemento toast y agregando la clase "show" al elemento toast.

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>