صفحة مدونة مع مظهر (Theme)

جزء من قسم JavaScript in Action في رحلة HTML على Coddy. الدرس 27 من 27.

التحدي

سهل

في هذا التحدي، لدينا صفحة مدونة تصوير فوتوغرافي تسمى Lens & Light. تتضمن منشورات مدونة حول نصائح التصوير الفوتوغرافي، وزر تبديل المظهر الداكن/الفاتح، ونموذج اشتراك بسيط في النشرة الإخبارية يعرض رسالة toast عند إرساله.

لدينا بالفعل ملفات HTML و CSS جاهزة لصفحة مدونة التصوير هذه. مهمتك هي إضافة وظائف JavaScript:

تبديل المظهر (Theme switch) – أضف مستمع أحداث (event listener) إلى زر التبديل. عند النقر على الزر، قم بتبديل الفئة 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>