Página de Blog com Tema

Parte da seção JavaScript in Action do Journey de HTML da Coddy. Lição 27 de 27.

Desafio

Fácil

Neste desafio, temos uma página de blog de fotografia chamada Lens & Light. Ela inclui postagens de blog sobre dicas de fotografia, um botão para alternar entre os temas claro/escuro e um formulário simples de inscrição em newsletter que mostra uma mensagem toast quando enviado.

Já temos o HTML e o CSS prontos para esta página de blog de fotografia. Sua tarefa é adicionar a funcionalidade JavaScript:

Alternância de tema – Adicione um event listener ao botão de alternância. Quando o botão for clicado, alterne a classe dark-mode no <body> para que o tema mude.
Mensagem toast – Quando o formulário for enviado, torne o toast visível removendo a classe "hidden" do elemento toast e adicionando a classe "show" ao elemento toast

Experimente você mesmo

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