Page de blog avec thème

Fait partie de la section JavaScript en action du Journey HTML de Coddy. Leçon 27 sur 27.

Défi

Facile

Dans ce défi, nous avons une page de blog consacrée à la photographie appelée Lens & Light. Elle comprend des articles de blog sur les conseils de photographie, un bouton permettant de basculer entre les thèmes sombre et clair, ainsi qu’un simple formulaire d’inscription à la newsletter qui affiche un message toast lors de sa soumission.

Le HTML et le CSS de cette page de blog consacrée à la photographie sont déjà prêts. Ta tâche consiste à ajouter les fonctionnalités JavaScript :

Changement de thème : ajoute un écouteur d’événement au bouton de basculement. Lorsque le bouton est cliqué, bascule la classe dark-mode sur <body> afin de modifier le thème.
Message toast : lorsque le formulaire est envoyé, rends 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>