Show the Toast Message

Part of the JavaScript in Action section of Coddy's HTML journey — lesson 11 of 27.

Challenge

Easy

Create a form that shows a success message when submitted. A toast message should appear saying the submission was successful, then disappear after 3 seconds.

Steps to complete in JavaScript:

Add the event listener:
- Get the form element and store it in a variable
- Get the toast element and store it in a variable
- Add a "submit" event listener to the form
Inside the event listener:
- Use event.preventDefault() to stop the page from refreshing
- Show the toast by adding the "show" class
- Remove the "hidden" class from the toast

Try it yourself

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