The Weather

مشروع "The Weather" هو تطبيق ويب يعرض حالة الطقس للمدن المختارة باستخدام بيانات من OpenWeather API. يتميز التطبيق بتصميم أنيق وسهل الاستخدام، حيث يعرض درجة الحرارة الحالية، أدنى وأعلى درجات الحرارة، وصفًا لحالة الطقس، وأيقونة تعبيرية للطقس الحالي.

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

React + TypeScript ️

Tailwind CSS

Material-UI (MUI) ️

Axios (لجلب البيانات من API)

Moment.js ⏳ (لتنسيق التاريخ والوقت)

المميزات الأساسية:

عرض الطقس في الوقت الفعلي ⏳

يتم جلب بيانات الطقس بناءً على الموقع المختار.

يتم تحويل درجات الحرارة من Kelvin إلى Celsius.

تحديد المدينة

يمكن للمستخدم اختيار مدينة من قائمة منسدلة.

يتم جلب بيانات الطقس للمدينة المحددة.

تصميم عصري وتفاعلي

الخلفية عبارة عن Gradient أزرق أنيق.

واجهة مستخدم بسيطة وسهلة القراءة.

استخدام MUI لعناصر الـ UI مثل الأزرار وصندوق الاختيار.

تنسيق الوقت والتاريخ

يتم عرض التاريخ والوقت في أعلى البطاقة بشكل منسق.

يتم استخدام مكتبة Moment.js لتنسيق العرض.

أيقونات الطقس الديناميكية

يتم تحميل أيقونة الطقس مباشرة من OpenWeather API.

تتغير الأيقونة بناءً على حالة الطقس.

طريقة العمل:

عند تحميل التطبيق، يتم عرض الطقس بشكل افتراضي لمدينة الإسكندرية، مصر.

يتم إرسال طلب API إلى OpenWeatherMap لاسترجاع بيانات الطقس.

عند اختيار مدينة جديدة من القائمة، يتم تحديث البيانات تلقائيًا.

يتم عرض المعلومات بشكل منظم في بطاقة تحتوي على:

اسم الدولة

درجة الحرارة الحالية ️

الحد الأدنى والحد الأقصى لدرجة الحرارة ️

وصف حالة الطقس

أيقونة الطقس ️

توقيت التحديث الحالي ⏰