Weather Web application

يمثل هذا الكود تطبيق ويب تفاعلي لمعرفة حالة الطقس، ويتميز بتصميم ديناميكي يتغير بناءً على حالة الطقس الحالية.

ينقسم عمل الكود إلى شقين رئيسيين:

أولاً: هيكل الصفحة وتصميمها (HTML & CSS)

تم بناء واجهة المستخدم باستخدام HTML و CSS مخصص، مع التركيز على الجمالية من خلال خطوط أنيقة (Cormorant Garamond و Yuji Syuku) وتأثيرات بصرية متقدمة.

يعتمد التصميم على خلفيات ديناميكية (bg-layer) تتغير لتعكس حالة الطقس (يوم عادي، يوم حار، يوم ممطر، ليل حار، ليل ممطر)، وتتداخل هذه الخلفيات مع طبقة شبه شفافة (overlay) لضمان وضوح النصوص.

يحتوي التصميم على حركة (Animation) مستمرة تمثل تساقط بتلات متوهجة (petals) لإضفاء طابع جمالي وحيوي على الصفحة.

يضم التطبيق حقل بحث (searchForm) لإدخال اسم المدينة، متبوعاً بزر للبحث.

يعرض قسم النتائج (resultCard) اسم المدينة، درجة الحرارة، وحالة الطقس بتنسيق أنيق، مع إخفاء هذا القسم مبدئياً حتى يتم جلب البيانات.

يوجد مؤشر تحميل تفاعلي (spinner) يظهر أثناء جلب البيانات.

ثانياً: المنطق البرمجي (JavaScript)

جلب الإحداثيات (Geocoding): عند إدخال اسم المدينة والضغط على بحث، تقوم دالة getCoordinates بالاتصال بـ API الخاص بـ Open-Meteo لتحويل اسم المدينة إلى إحداثيات (خط العرض وخط الطول).

جلب بيانات الطقس (Weather Data): باستخدام الإحداثيات المسترجعة، تقوم دالة getWeather بالاتصال بـ API آخر لجلب درجة الحرارة الحالية، ورمز حالة الطقس (weatherCode)، وما إذا كان الوقت نهاراً أم ليلاً (isDay).

تحديد حالة الطقس (Status Determination): تقوم دالة getWeatherStatus بتحليل البيانات المسترجعة لتصنيف حالة الطقس إلى فئات (مثل: مطر، حار، عادي) ودمجها مع وقت اليوم لتحديد الفئة النهائية (مثلاً: day-rain أو night-hot).

عرض النتائج (Rendering): تقوم الدالة render بتحديث واجهة المستخدم، حيث تغير فئة الخلفية (className) بناءً على حالة الطقس النهائية، وتحدث النصوص لتعرض اسم المدينة، درجة الحرارة المقربة، وحالة الطقس الوصفية، ثم تُظهر قسم النتائج.

إدارة الأحداث (Event Handling): يقوم معالج الأحداث المربوط بنموذج البحث بمنع إعادة تحميل الصفحة الافتراضي، وإخفاء النتائج السابقة، وإظهار مؤشر التحميل، وتشغيل سلسلة الدوال المذكورة أعلاه. كما يتضمن آلية لمعالجة الأخطاء (مثل عدم العثور على المدينة) وعرض رسالة خطأ للمستخدم.