Wyświetlanie komunikatu Toast

Część sekcji JavaScript w praktyce ścieżki HTML w Coddy. Lekcja 11 z 27.

Wyzwanie

Łatwy

Utwórz formularz, który po przesłaniu wyświetla komunikat o powodzeniu. Powinien pojawić się komunikat typu toast informujący, że formularz został pomyślnie przesłany, a następnie zniknąć po 3 sekundach.

Kroki do wykonania w JavaScript:

Dodaj nasłuchiwanie zdarzenia:
- Pobierz element form i zapisz go w zmiennej
- Pobierz element toast i zapisz go w zmiennej
- Dodaj do formularza nasłuchiwanie zdarzenia "submit"
Wewnątrz funkcji obsługującej zdarzenie:
- Użyj event.preventDefault(), aby zapobiec odświeżeniu strony
- Wyświetl toast, dodając klasę "show"
- Usuń klasę "hidden" z elementu toast

Spróbuj swoich sił

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

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

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