تطبيق WindyX: عمل واجهة أمامية وربطها مع API بإستخدام JavaScript | HTML | CSS

WindyX هو تطبيق ويب يُتيح للمستخدمين الحصول على معلومات الطقس للمواقع التي يهتمون بها بسهولة وسرعة.

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

- بُنية صفحات الويب: HTML

- تنسيق صفحات الويب: CSS

- تفاعلية صفحات الويب: JavaScript

الميزات

البحث عن الطقس حسب المدينة

- يمكن للمستخدم اختيار مدينة من قائمة منسدلة مُحددة مسبقًا.

- يمكن للمستخدم أيضًا إدخال اسم المدينة والدولة يدويًا للحصول على تفاصيل الطقس.

- يتم تطبيق "تأخير التنفيذ" (Debouncing) لمدة 3 ثوانٍ قبل جلب البيانات سواء من القائمة أو من الإدخال اليدوي.

- يتم التعامل مع الأخطاء الناتجة عن إدخال اسم مدينة أو دولة غير صحيح.

الاحتفاظ بآخر بحث

- عند زيارة المستخدم للموقع مرة أخرى، يتم عرض بيانات الطقس الخاصة بآخر مدينة تم البحث عنها.

- إذا لم يكن هناك بحث سابق، يتم عرض رسالة ترحيبية.

عرض معلومات الطقس

- يتم جلب بيانات الطقس باستخدام واجهة OpenWeatherMap API.

- يتم عرض درجة الحرارة، وصف حالة الطقس، نسبة الرطوبة، وسرعة الرياح.

- يتم عرض أيقونة مناسبة لحالة الطقس الحالية.

- يتم تغيير خلفية الصفحة لتناسب حالة الطقس (مثل مشمس، ممطر...).

دعم الوضعين الليلي والنهاري

- يتم تطبيق أنماط تصميم مختلفة حسب وضع العرض: فاتح أو داكن.

نظام تسجيل الدخول

- لا يمكن الوصول للصفحة الرئيسية إلا بعد تسجيل الدخول بنجاح.

تصميم بصري جذّاب واحترافي

- تصميم واجهة مستخدم ملفتة بصريًا تعزز تجربة الاستخدام.

تغيير وحدة قياس درجة الحرارة

- يمكن للمستخدم التبديل بين فهرنهايت (°F) ودرجة مئوية (°C) والعكس.