Goal Progress Tracker Web App – JavaScript, LocalStorage, Live Progress, Responsive UI

قمت بتطوير تطبيق ويب احترافي لتتبع الأهداف (Goal Tracker) باستخدام HTML, CSS, JavaScript, مع تخزين البيانات في LocalStorage لضمان بقاء الأهداف محفوظة حتى بعد إغلاق المتصفح.

التطبيق يسمح للمستخدم بإضافة أهدافهم اليومية أو طويلة المدى، ويقوم بحساب:

عدد الأيام التي مرّت منذ بدء الهدف

عدد الأيام المتبقية حتى الوصول له

نسبة الإنجاز (Progress %) مع شريط تقدّم ديناميكي

رسالة خاصة تظهر عند اكتمال الهدف

تحديث مباشر (Live Counter) كل ثانية

إمكانية إعادة ضبط الهدف (Reset)

إمكانية حذف الهدف بشكل كامل (Delete)

أهم المميزات اللي نفذتها

LocalStorage Integration

حفظ جميع الأهداف بحيث تفضل موجودة حتى بعد إعادة فتح الموقع.

Live Countdown

تحديث الأيام المتبقية والـ progress bar كل ثانية بدون Refresh.

Dynamic Progress Bar

شريط تقدم متغير تلقائيًا حسب أيام العمل على الهدف.

Reset Goal

إعادة الهدف ليوم جديد بضغطة واحدة.

Delete Goal

مسح الهدف مع تأكيد قبل الحذف.

Fully Responsive

التطبيق مناسب للموبايل، التابلت، والكمبيوتر.

Clean UI

تصميم بسيط ومنظّم يسهل على المستخدم تتبع أهدافه.

التقنيات المستخدمة

HTML5

CSS3

JavaScript (Vanilla)

LocalStorage

Responsive Web Design