إظهار رسالة Toast

جزء من قسم JavaScript in Action في رحلة HTML على Coddy — الدرس 11 من 27.

التحدي

سهل

قم بإنشاء نموذج (form) يعرض رسالة نجاح عند إرساله. يجب أن تظهر رسالة toast تشير إلى أن الإرسال تم بنجاح، ثم تختفي بعد 3 ثوانٍ.

الخطوات المطلوب تنفيذها في JavaScript:

أضف مستمع الأحداث (event listener):
- احصل على عنصر الـ 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>

  <!-- Toast -->
  <div id="toast" class="toast hidden">Form submitted successfully!</div>

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