Menu
CoddyTech

Trang blog có giao diện

Thuộc phần JavaScript trong thực tế trong hành trình HTML của Coddy. Bài học 27 trên 27.

challenge icon

Thử thách

Dễ

Trong thử thách này, chúng ta có một trang blog nhiếp ảnh tên là Lens & Light. Trang có các bài đăng chia sẻ mẹo chụp ảnh, nút chuyển đổi giữa giao diện sáng và tối, cùng biểu mẫu đăng ký nhận bản tin đơn giản, hiển thị thông báo bật lên khi gửi.

HTML và CSS cho trang blog nhiếp ảnh này đã sẵn sàng. Nhiệm vụ của bạn là thêm chức năng JavaScript:

  1. Chuyển đổi giao diện: Thêm trình lắng nghe sự kiện vào nút chuyển đổi. Khi nhấn nút, hãy bật hoặc tắt lớp dark-mode trên <body> để thay đổi giao diện.
  2. Thông báo bật lên: Khi biểu mẫu được gửi, hãy hiện thông báo bằng cách xóa lớp "hidden" khỏi phần tử thông báo và thêm lớp "show" vào phần tử thông báo.

Tự làm thử

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

Tất cả bài học trong JavaScript trong thực tế

Tự luyện tập: Playground Web