Mostra il messaggio Toast

Fa parte della sezione JavaScript in azione del percorso HTML di Coddy. Lezione 11 di 27.

Sfida

Facile

Crea un modulo che mostri un messaggio di successo al momento dell’invio. Dovrebbe apparire un messaggio toast che indica che l’invio è avvenuto correttamente, per poi scomparire dopo 3 secondi.

Passaggi da completare in JavaScript:

Aggiungi il listener di eventi:
- Recupera l’elemento form e memorizzalo in una variabile
- Recupera l’elemento toast e memorizzalo in una variabile
- Aggiungi un listener di eventi "submit" al modulo
All’interno del listener di eventi:
- Usa event.preventDefault() per impedire l’aggiornamento della pagina
- Mostra il toast aggiungendo la classe "show"
- Rimuovi la classe "hidden" dal toast

Provalo tu

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