تطبيق قائمة المهام

هذا العمل عبارة عن تطبيق قائمة المهام (To-Do List) مبني باستخدام React وTypeScript مع Tailwind CSS للتنسيق. الميزات الرئيسية إضافة مهام جديدة: يمكن للمستخدم إدخال مهمة جديدة في حقل النص والضغط على زر "Add" لإضافتها إلى القائمة. تحديد المهام كمكتملة: يمكن للمستخدم النقر على الدائرة بجانب المهمة لتحديدها كمكتملة، وسيتم وضع خط عليها وتغيير لونها. حذف المهام: يمكن للمستخدم حذف أي مهمة بالنقر على أيقونة سلة المهملات التي تظهر عند تمرير المؤشر فوق المهمة. تخزين البيانات محليًا: يتم تخزين المهام في التخزين المحلي للمتصفح (localStorage)، مما يعني أن المهام ستبقى موجودة حتى بعد إعادة تحميل الصفحة. واجهة مستخدم جذابة: يستخدم التطبيق تدرجًا لونيًا جميلًا في الخلفية وتصميمًا أنيقًا للبطاقة الرئيسية. إحصائيات المهام: يعرض التطبيق عدد المهام المكتملة من إجمالي عدد المهام في أسفل القائمة. التقنيات المستخدمة React: إطار عمل JavaScript لبناء واجهات المستخدم TypeScript: لغة برمجة توفر أنواع بيانات ثابتة لتحسين جودة الكود Tailwind CSS: إطار عمل CSS لتصميم واجهة المستخدم بسرعة Lucide React: مكتبة أيقونات مستخدمة للأزرار والعناصر المرئية Vite: أداة بناء سريعة للتطوير الحديث هيكل المشروع المشروع يتبع هيكل تطبيق React قياسي مع Vite، حيث يوجد مكون رئيسي واحد (App.tsx) يحتوي على كل منطق التطبيق، بما في ذلك إدارة الحالة باستخدام React Hooks وتخزين البيانات في localStorage. كيفية الاستخدام أدخل نص المهمة في حقل الإدخال اضغط على زر "Add" لإضافة المهمة انقر على الدائرة بجانب المهمة لتحديدها كمكتملة