Показать 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>