الدرس 6 من 8
إشعارات عابرة
- 14 دقيقة
- 6 معايير للتصحيح
- 3 تلميحات
- إلى المطلوب
هدف الدرس
تظهر، وتُعلَن، ثم تختفي
الشرح
الإشعار العابر رسالة قصيرة تؤكّد ما حدث — «تم الحفظ» — ثم تختفي وحدها. ومن لا يرى الشاشة لا يعرف بها ما لم تُعلَن.
الإعلان يأتي من منطقة حيّة: حاوية عليها role="status"، وكل نصّ يُضاف داخلها يقرؤه قارئ الشاشة بهدوء حين يفرغ ممّا يقرؤه. أما role="alert" فيقاطعه فورًا — احفظه للأخطاء.
الفخّ: إنشاء المنطقة مع الرسالة. قارئ الشاشة يراقب المناطق الموجودة سلفًا، فالمنطقة التي تولد ونصّها فيها لا تُعلَن غالبًا. ضعها في الصفحة فارغة من البداية، وأضف الرسائل داخلها.
المطلوب
اجعل #toasts منطقة role="status"، واكتب toast(message) تضيف داخلها عنصرًا بالصنف toast فيه نصّ الرسالة، وتحذفه بعد 400 جزء من الثانية — مهلة قصيرة ليسهل التصحيح، وفي الواقع أربع ثوانٍ فأكثر. ثم اربط #save بـ toast('تم الحفظ').
معايير التصحيح
6 معايير- المنطقة الحيّة في الصفحة من البداية
- toast تضيف رسالة بنصّها داخل المنطقة
- تبقى وقتًا يكفي لقراءتها
- وتختفي وحدها بعد المهلة
- لكل رسالة مؤقّتها
- زرّ الحفظ يطلق إشعارًا