Menu
CoddyTech
flag Ar iconالعربيةdown icon

إخفاء رسالة Toast

جزء من قسم JavaScript قيد التطبيق في رحلة HTML على Coddy. الدرس 12 من 27.

challenge icon

التحدي

سهل

إخفاء رسالة التنبيه (Toast) بعد 3 ثوانٍ.

لا نريد أن تبقى رسالة التنبيه (toast) للأبد، لذا دعنا نخفيها بعد تأخير قصير:

  1. استخدم setTimeout() لإنشاء تأخير لمدة 3 ثوانٍ.
  2. داخل دالة المهلة (timeout function)، أضف فئة "hidden" إلى عنصر التنبيه (toast).
  3. قم أيضاً بإزالة فئة "show" من عنصر التنبيه (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>

جميع دروس JavaScript قيد التطبيق

تدرّب بنفسك: Playground لـ Web