Afficher le message Toast

Fait partie de la section JavaScript in Action du Journey HTML de Coddy — leçon 11 sur 27.

Défi

Facile

Créez un formulaire qui affiche un message de succès lors de sa soumission. Un message toast doit apparaître indiquant que la soumission a réussi, puis disparaître après 3 secondes.

Étapes à réaliser en JavaScript :

Ajouter l'écouteur d'événement :
- Récupérez l'élément form et stockez-le dans une variable
- Récupérez 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 la page de s'actualiser
- 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>