Afficher le message Toast

Fait partie de la section JavaScript en action du Journey HTML de Coddy. Leçon 11 sur 27.

Défi

Facile

Créez un formulaire qui affiche un message de réussite lors de son envoi. Un message toast doit apparaître pour indiquer que l’envoi a réussi, puis disparaître après 3 secondes.

Étapes à réaliser en JavaScript :

Ajoutez l’écouteur d’événement :
- Obtenez l’élément form et stockez-le dans une variable
- Obtenez l’élément toast et stockez-le dans une variable
- Ajoutez un écouteur d’événement "submit" au formulaire
À l’intérieur de l’écouteur d’événement :
- Utilisez event.preventDefault() pour empêcher le rechargement de la page
- Affichez le toast en ajoutant la classe "show"
- Supprimez la classe "hidden" du toast

Essayez vous-même

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