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.
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:
- 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-modetrên<body>để thay đổi giao diện. - 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ế
9Thử thách cuối cùng
Mục FAQ tương tác dạng thu gọnBiểu mẫu đăng nhậpThanh điều hướng thích ứngTrang blog có giao diệnTự luyện tập: Playground Web