صفحة مدونة مع سمة

جزء من قسم JavaScript in Action في رحلة 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>