Todo List application using TypeScript قائمه مهام يومية
تفاصيل العمل
هذا تطبيق قائمة مهام (Todo List) تم تطويره باستخدام TypeScript وتم تحويله إلى JavaScript. يتميز التطبيق بواجهة مستخدم أنيقة وسهلة الاستخدام مع الوظائف الأساسية لإدارة المهام اليومية.
الميزات الرئيسية للتطبيق:
إضافة مهام جديدة: يمكن للمستخدم إدخال نص المهمة في حقل الإدخال والضغط على زر "Add" لإضافتها إلى القائمة.
تحرير المهام: يمكن تعديل أي مهمة موجودة من خلال زر "Edit" الذي يملأ حقل الإدخال بالنص الحالي للمهمة ليتم تعديله.
حذف المهام: يمكن إزالة أي مهمة من القائمة عن طريق زر "Delete" الموجود بجانب كل مهمة.
تمييز المهام المكتملة: يمكن للمستخدم تحديد المهام المكتملة من خلال النقر على مربع الاختيار المخصص، مما يؤدي إلى وضع خط على النص وتغيير لون المربع.
تصفية المهام: يوفر التطبيق زرين للتصفية: "All" لعرض جميع المهام و"Completed" لعرض المهام المكتملة فقط.
إحصاء المهام المتبقية: يعرض التطبيق عدد المهام غير المكتملة في أسفل القائمة.
إزالة المهام المكتملة: يمكن للمستخدم حذف جميع المهام المكتملة دفعة واحدة باستخدام زر "Clear Completed".
تخزين البيانات محليًا: يستخدم التطبيق localStorage لحفظ المهام، مما يضمن استمرارية البيانات حتى بعد إغلاق المتصفح أو إعادة تحميل الصفحة.
التصميم والواجهة:
تصميم عصري: يتميز التطبيق بألوان هادئة مع ظلال وزوايا مستديرة.
عناصر تفاعلية: تتغير ألوان الأزرار عند تمرير المؤشر فوقها لتعزيز تجربة المستخدم.
عرض منظم: تُعرض المهام في شكل جدول واضح مع صفوف متناوبة اللون لتحسين القراءة.
مربعات اختيار مخصصة: تم تصميم مربعات الاختيار بشكل جمالي مع تأثيرات حركية عند التحديد.
تخطيط متجاوب: تم تصميم التطبيق ليكون مناسبًا لمختلف أحجام الشاشات.
التقنيات المستخدمة:
TypeScript: للتطوير بنظام أنواع قوي يساعد في تجنب الأخطاء.
JavaScript: الناتج المترجم من TypeScript للتنفيذ في المتصفح.
DOM Manipulation: إنشاء وتعديل عناصر واجهة المستخدم بشكل ديناميكي.
Event Handling: التعامل مع أحداث المستخدم مثل النقرات والتمرير.
Local Storage API: لتخزين المهام بشكل دائم في المتصفح.
CSS Styling: أنماط متقدمة لتقديم واجهة مستخدم جذابة.
هذا التطبيق مثالي للاستخدام اليومي في تنظيم المهام، ويمكن استخدامه كنموذج تعليمي لتطوير تطبيقات واجهة المستخدم الحديثة