Pagina blog con tema

Fa parte della sezione JavaScript in azione del percorso HTML di Coddy. Lezione 27 di 27.

Sfida

Facile

In questa sfida, abbiamo una pagina di blog di fotografia chiamata Lens & Light. Include articoli con consigli di fotografia, un pulsante per alternare il tema chiaro/scuro e un semplice modulo di iscrizione alla newsletter che mostra un messaggio toast al momento dell'invio.

Abbiamo già pronto l'HTML e il CSS per questa pagina di blog di fotografia. Il tuo compito è aggiungere le funzionalità JavaScript:

Cambio del tema: aggiungi un listener di eventi al pulsante di attivazione. Quando si fa clic sul pulsante, attiva o disattiva la classe dark-mode su <body> in modo che il tema cambi.
Messaggio toast, Quando il modulo viene inviato, rendi visibile il toast rimuovendo la classe "hidden" dall'elemento toast e aggiungendo la classe "show" all'elemento toast

Provalo tu

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