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>