دانلود اسکریپت JavaScript HTML اپلیکیشن آب‌وهوا از طریق API OpenWeatherMap

دانلود اسکریپت 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 کنید.

برای شما کاربران عزیز پیشنهاد دانلود داده می شود.