Toast Mesajını Göster

Coddy'nin HTML Journey'sinin JavaScript in Action bölümünün bir parçası — ders 11 / 27.

Görev

Kolay

Gönderildiğinde bir başarı mesajı gösteren bir form oluşturun. Gönderimin başarılı olduğunu belirten bir toast mesajı görünmeli ve ardından 3 saniye sonra kaybolmalıdır.

JavaScript'te tamamlanacak adımlar:

Olay dinleyiciyi (event listener) ekleyin:
- form öğesini alın ve bir değişkende saklayın
- toast öğesini alın ve bir değişkende saklayın
- Forma bir "submit" olay dinleyicisi ekleyin
Olay dinleyicinin içinde:
- Sayfanın yenilenmesini durdurmak için event.preventDefault() kullanın
- "show" sınıfını ekleyerek toast mesajını gösterin
- Toast öğesinden "hidden" sınıfını kaldırın

Kendin dene

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

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

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