Thông báo toast

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

Thông báo toast là một thông báo nhỏ xuất hiện thoáng qua trên màn hình để phản hồi cho người dùng. Thông báo thường tự mờ dần sau vài giây.

Tạo cấu trúc HTML cơ bản:

<div class="container">
    <button id="showToast">Show Toast</button>
    <div id="toast" class="hidden">This is a toast message!</div>
</div>

Thêm CSS để định dạng thông báo nổi. Ta dùng hai lớp: .hidden để giữ thông báo ẩn và .show để hiển thị thông báo.

.toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    background-color: #333;
    color: white;
    padding: 15px 25px;
}
.show {
    opacity: 1;
}
.hidden {
    display: none;
}

Giờ hãy thêm JavaScript để hiện và ẩn thông báo dạng toast:

const showToastBtn = document.getElementById('showToast');
const toast = document.getElementById('toast');

showToastBtn.addEventListener('click', function() {
    toast.classList.remove('hidden');
    toast.classList.add('show');

    setTimeout(function() {
        toast.classList.remove('show');
        toast.classList.add('hidden');
    }, 3000);
});

Đoạn code này làm cho thông báo hiện ra khi bạn nhấp vào nút, rồi tự động ẩn sau 3 giây.

Thử thách

Dễ

Mục tiêu của bạn là tạo kiểu đẹp cho thông báo toast và chuẩn bị để nó xuất hiện rồi biến mất.

Đặt thông báo toast ở giữa phía dưới trang bằng position: fixed cùng với bottom và left.
Thêm màu nền và đổi màu chữ để dễ đọc.
Thêm một chút vùng đệm để nội dung thông báo không bị chật chội.
Bo tròn các góc.
Đặt độ mờ thành 0 để thông báo mặc định bị ẩn, trước khi JavaScript hiển thị nó.

Tự làm thử

<!DOCTYPE html>
<html>
<head>
  <title>Toast Notification Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>My Profile Settings</h1>
  </header>

  <main>
    <p>Update your profile and save changes. A toast message will confirm your action.</p>
    <button id="showToast">Save Changes</button>
  </main>

  <!-- Thông báo bật lên -->
  <div id="toast" class="toast hidden">✅Your changes have been saved!</div>

  <script src="script.js"></script>
</body>
</html>