Tampilkan Pesan Toast

Termasuk bagian JavaScript dalam Aksi dalam perjalanan HTML di Coddy. Pelajaran 11 dari 27.

Tantangan

Mudah

Buat formulir yang menampilkan pesan sukses saat dikirim. Pesan toast akan muncul yang menyatakan bahwa pengiriman berhasil, lalu menghilang setelah 3 detik.

Langkah-langkah yang harus diselesaikan di JavaScript:

Tambahkan event listener:
- Ambil elemen form dan simpan ke dalam variabel
- Ambil elemen toast dan simpan ke dalam variabel
- Tambahkan event listener "submit" ke form
Di dalam event listener:
- Gunakan event.preventDefault() untuk menghentikan halaman agar tidak dimuat ulang
- Tampilkan toast dengan menambahkan class "show"
- Hapus class "hidden" dari toast

Coba sendiri

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

  <!-- Notifikasi singkat -->
  <div id="toast" class="toast hidden">Form submitted successfully!</div>

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