עמוד בלוג עם ערכת נושא

חלק מהיחידה JavaScript בפעולה במסלול ה-HTML של Coddy. שיעור 27 מתוך 27.

אתגר

קל

באתגר הזה יש לנו עמוד בלוג צילום בשם Lens & Light. הוא כולל פוסטים בבלוג על טיפים לצילום, כפתור להחלפה בין ערכת נושא כהה לבהירה, וטופס הרשמה פשוט לניוזלטר שמציג הודעת toast לאחר שליחתו.

כבר הכנו את ה-HTML ואת ה-CSS של עמוד בלוג הצילום הזה. המשימה שלך היא להוסיף את הפונקציונליות של JavaScript:

החלפת ערכת נושא: הוסף מאזין אירועים לכפתור ההחלפה. כשלוחצים על הכפתור, החלף את המחלקה dark-mode של <body> כדי לשנות את ערכת הנושא.
הודעת toast, כששולחים את הטופס, הפוך את הודעת ה-toast לגלויה על ידי הסרת המחלקה "hidden" מאלמנט ה-toast והוספת המחלקה "show" לאלמנט ה-toast

נסו בעצמכם

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