Blog Page with Theme

Part of the JavaScript in Action section of Coddy's HTML journey — lesson 27 of 27.

Challenge

Easy

In this challenge, we have a photography blog page called Lens & Light. It includes blog posts about photography tips, a dark/light theme toggle button, and a simple newsletter signup form that shows a toast message when submitted.

We already have the HTML and CSS ready for this photography blog page. Your task is to add the JavaScript functionality:

Theme switch – Add an event listener to the toggle button. When the button is clicked, toggle the class dark-mode on the <body> so the theme changes.
Toast message –When the form is submitted, make the toast visible by removing the "hidden" class from the toast element and adding the "show" class to the toast element

Try it yourself

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