توضیحات کوتاه و لینک دانلود
توضیحات کامل در مورد فایل
دانلود اسکریپت JavaScript HTML اپلیکیشن آبوهوا از طریق API OpenWeatherMap
این فایل یک اپلیکیشن کامل آبوهوا است که با HTML، CSS و JavaScript طراحی شده و بهصورت مستقیم با سرویس OpenWeatherMap ارتباط برقرار میکند. کاربر پس از وارد کردن نام شهر، میتواند اطلاعات کامل و پیشرفته وضعیت آبوهوا را مشاهده کند. رابط کاربری کاملاً مدرن، واکنشگرا و فارسیسازی شده است و از تاریخ شمسی (جلالی) نیز پشتیبانی میکند.
نمونه تصاویر در زمان اجرا
امکانات و ویژگیهای رابط کاربری (UI)
1. طراحی گرافیکی مدرن و انیمیشنی
فایل شامل یک تم جذاب با:
-
پسزمینه گرادیانی سهرنگ
-
افکتهای پویا و متحرک نور و گرادیان
-
کارت شیشهای (Glassmorphism)
-
آیکون آبوهوا با انیمیشن شناور و افکت درخشندگی
-
انیمیشنهای hover و focus حرفهای
این طراحی باعث میشود که برنامه ظاهر بسیار حرفهای و درجهیکی داشته باشد.
2. جستجوی هوشمند شهرها
کاربر میتواند شهر موردنظر را جستجو کند؛ برنامه:
-
خطای «شهر یافت نشد» را نمایش میدهد
-
در صورت عدم ورود نام شهر هشدار میدهد
-
در حال دریافت اطلاعات، حالت Loading نشان میدهد
3. نمایش کامل وضعیت آبوهوا
پس از دریافت اطلاعات از API، بخش زیر نمایش داده میشود:
-
آیکون رسمی آبوهوا از OpenWeather
-
نام شهر و کشور
-
تاریخ شمسی کامل همراه با نام روز
-
دمای فعلی
-
دمای کمینه و بیشینه
-
توضیحات وضعیت (آفتابی، ابری، بارانی...)
-
رطوبت
-
سرعت باد
-
فشار هوا
-
میزان دید افقی (Visibility)
تمام این اطلاعات با طراحی زیبای کارتهای جداگانه نمایش داده شدهاند.
4. پیشبینی ۵ روز آینده
برنامه بهصورت خودکار پنج روز آینده را نیز تحلیل میکند:
-
تاریخ هر روز بهصورت شمسی
-
آیکون روزانه وضعیت هوا
-
میانگین دما
-
توضیح آبوهوا
نمایش این اطلاعات در قالب کارتهای افقی/عمودی (مطابق اندازه صفحه) انجام میشود.
5. پشتیبانی کامل از موبایل (Responsive)
برنامه کاملاً واکنشگراست و در موبایل، تبلت و دسکتاپ بدون مشکل و با چیدمان مناسب نمایش داده میشود.
امکانات بخش جاوااسکریپت
1. تبدیل تاریخ میلادی به شمسی (کد کامل و استاندارد شما)
در این فایل از همان کدی که خودتان ارائه کرده بودید استفاده شده و تاریخ امروز و تاریخهای پیشبینی بهشکل جلالی نمایش داده میشوند.
2. ارتباط API با OpenWeatherMap
با استفاده از fetch، درخواستهای زیر ارسال میشود:
-
/weatherبرای وضعیت فعلی -
/forecastبرای پیشبینی ۵ روزه
تمام دادهها بهصورت JSON دریافت و پردازش میشوند.
3. ساخت و تزریق عناصر HTML
برای پیشبینی پنجروزه، کارتهای جدید بهصورت داینامیک ساخته میشوند.
4. رویدادهای کاربردی
-
دریافت آبوهوا با Enter
-
دریافت آبوهوا با دکمه کلیک
-
جستجوی اولیه برای «Tehran» هنگام بارگذاری صفحه
مناسب برای چه کسانی است؟
این فایل برای توسعهدهندگان، دانشجویان، طراحان وب و هر کسی که میخواهد:
-
یک ابزار زیبا و حرفهای آبوهوا بسازد
-
با APIهای REST کار کند
-
پروژههای HTML/CSS/JS را تقویت کند
-
از تاریخ جلالی در پروژههای خود استفاده کند
بسیار مناسب و آماده استفاده است.
نکته مهم
برای استفاده عملی، باید:
-
کلید API را در بخش
API.keyجایگزین کلید شخصی خود در OpenWeatherMap کنید.
برای شما کاربران عزیز پیشنهاد دانلود داده می شود.
نظرات کاربران