? Medicine Expiry Tracker
تفاصيل العمل
✅ التقنيات المستخدمة
HTML5
CSS3
JavaScript (Vanilla JS)
Local Storage
Chart.js
PWA Basics
✅ المميزات الحالية
1. إضافة دواء
يمكن للمستخدم:
إدخال اسم الدواء
تحديد تاريخ انتهاء الصلاحية
حفظ الدواء مباشرة
2. تخزين البيانات
تم استخدام:
Local Storage
لحفظ البيانات داخل المتصفح بدون الحاجة إلى:
Back-End
Database
3. عرض قائمة الأدوية
يتم عرض:
اسم الدواء
تاريخ الانتهاء
عدد الأيام المتبقية
حالة الدواء
4. حالات الأدوية الذكية
✅ Safe
الدواء صالح وباقي أكثر من 30 يوم.
⚠️ Warning
الدواء قرب ينتهي (أقل من 30 يوم).
❌ Expired
الدواء منتهي الصلاحية.
5. حذف الأدوية
إمكانية حذف أي دواء بسهولة.
6. تعديل الأدوية
إمكانية تعديل:
اسم الدواء
تاريخ الانتهاء
7. البحث
Search داخل قائمة الأدوية.
8. ترتيب تلقائي
يتم ترتيب الأدوية حسب الأقرب انتهاء.
9. Dashboard Statistics
عرض:
إجمالي الأدوية
الأدوية القريبة من الانتهاء
الأدوية المنتهية
10. Charts
تم استخدام:
Chart.js
لعرض:
Safe
Warning
Expired
في شكل رسم بياني.
11. Dark Mode
إمكانية التبديل بين:
Light Mode
Dark Mode
12. Toast Notifications
تنبيهات احترافية بدل:
alert()
13. Browser Notifications
تنبيه المستخدم عند قرب انتهاء دواء.
14. Alert Sound
تشغيل صوت تنبيه عند وجود دواء قرب انتهاء الصلاحية.
15. Export JSON
تصدير البيانات كملف:
JSON
16. Responsive Design
الموقع متوافق مع:
Desktop
Tablet
Mobile
17. Full Screen Layout
واجهة ثابتة بدون Scroll للصفحة بالكامل.
18. PWA Support
تم تجهيز المشروع ليعمل كتطبيق:
Progressive Web App
✅ هيكل المشروع
medicine-tracker/
│
├── index.html
├── style.css
├── script.js
└── manifest.json