הצגת הודעת Toast

חלק מהיחידה JavaScript בפעולה במסלול ה-HTML של Coddy. שיעור 11 מתוך 27.

אתגר

קל

צור טופס שמציג הודעת הצלחה לאחר שליחתו. הודעת Toast תופיע ותציין שהשליחה הצליחה, ואז תיעלם לאחר 3 שניות.

שלבים לביצוע ב-JavaScript:

הוסף מאזין לאירוע:
- קבל את רכיב ה-form ושמור אותו במשתנה
- קבל את רכיב ה-toast ושמור אותו במשתנה
- הוסף לטופס מאזין לאירוע "submit"
בתוך מאזין האירוע:
- השתמש ב-event.preventDefault() כדי למנוע מהדף להתרענן
- הצג את הודעת ה-toast על ידי הוספת המחלקה "show"
- הסר את המחלקה "hidden" מה-toast

נסו בעצמכם

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

  <!-- הודעת טוסט -->
  <div id="toast" class="toast hidden">Form submitted successfully!</div>

  <script src="script.js"></script>
</body>
</html>