Page de blog avec thème

Fait partie de la section JavaScript in Action du Journey HTML de Coddy — leçon 27 sur 27.

Défi

Facile

Dans ce défi, nous avons une page de blog de photographie appelée Lens & Light. Elle comprend des articles de blog sur des conseils de photographie, un bouton de basculement de thème sombre/clair, et un formulaire d'inscription à la newsletter simple qui affiche un message toast lors de la soumission.

Nous avons déjà le HTML et le CSS prêts pour cette page de blog de photographie. Votre tâche est d'ajouter la fonctionnalité JavaScript :

Changement de thème – Ajoutez un écouteur d'événement au bouton de basculement. Lorsque le bouton est cliqué, basculez la classe dark-mode sur le <body> pour que le thème change.
Message toast – Lorsque le formulaire est soumis, rendez le toast visible en supprimant la classe "hidden" de l'élément toast et en ajoutant la classe "show" à l'élément toast

Essayez vous-même

<!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>