Ẩn 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 12 trên 27.

Thử thách

Dễ

Ẩn thông báo sau 3 giây.

Ta không muốn thông báo cứ hiển thị mãi, vậy nên hãy ẩn nó sau một khoảng chờ ngắn:

Dùng setTimeout() để tạo khoảng chờ 3 giây.
Bên trong hàm timeout, thêm lớp "hidden" vào phần tử thông báo.
Đồng thời xóa lớp "show" khỏi phần tử thông báo để nó biến mất mượt mà.

Tự làm thử

<!DOCTYPE html>
<html>
<head>
  <title>Form with Toast</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h2>Subscribe to our Newsletter</h2>
    <form id="myForm">
      <input type="text" id="name" placeholder="Enter your name">
      <button type="submit">Submit</button>
    </form>
  </div>

  <!-- Thông báo nhanh -->
  <div id="toast" class="toast hidden">Form submitted successfully!</div>

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