Hiển thị 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 11 trên 27.

Thử thách

Dễ

Tạo một biểu mẫu hiển thị thông báo thành công khi được gửi. Một thông báo dạng toast sẽ xuất hiện cho biết biểu mẫu đã gửi thành công, rồi biến mất sau 3 giây.

Các bước thực hiện bằng JavaScript:

Thêm bộ lắng nghe sự kiện (event listener):
- Lấy phần tử form và lưu vào một biến
- Lấy phần tử toast và lưu vào một biến
- Thêm bộ lắng nghe sự kiện "submit" vào biểu mẫu
Bên trong bộ lắng nghe sự kiện:
- Dùng event.preventDefault() để ngăn trang tải lại
- Hiển thị thông báo toast bằng cách thêm lớp "show"
- Xóa lớp "hidden" khỏi thông báo toast

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 bật lên -->
  <div id="toast" class="toast hidden">Form submitted successfully!</div>

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