Показать Toast-сообщение

Часть раздела JavaScript in Action путешествия по HTML на Coddy. Урок 11 из 27.

Задание

Легко

Создайте форму, которая при отправке показывает сообщение об успехе. Должно появиться всплывающее уведомление (toast) с текстом о том, что отправка прошла успешно, а затем исчезнуть через 3 секунды.

Шаги для выполнения на JavaScript:

Добавьте слушатель событий:
- Получите элемент form и сохраните его в переменную
- Получите элемент toast и сохраните его в переменную
- Добавьте слушатель события "submit" к форме
Внутри слушателя событий:
- Используйте event.preventDefault(), чтобы предотвратить обновление страницы
- Покажите уведомление, добавив класс "show"
- Удалите класс "hidden" у уведомления

Попробуйте сами

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

  <!-- Тост -->
  <div id="toast" class="toast hidden">Form submitted successfully!</div>

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