دنیای پروژه

جزئیات محصول

دانلود پروژه کاربردی ساده برای ایجاد یک **برنامه آب و هوا** با استفاده از HTML، CSS و JavaScript

دانلود پروژه کاربردی ساده برای ایجاد یک **برنامه آب و هوا** با استفاده از HTML، CSS و JavaScript

قیمت: 35,000 تومان

خرید فایل


مشاهده پیشنمایش

پیشنمایش برای محصولاتی که نیاز به نمایش دمو دارند می باشد

 کاربران گرامی در این پروژه به شما پروژه کاربردی  با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر  پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.

در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه  های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد



 در اینجا یک پروژه ساده برای ایجاد یک **برنامه آب و هوا** با استفاده از HTML، CSS و JavaScript ارائه می‌شود. این برنامه به کاربران اجازه می‌دهد تا وضعیت آب و هوا را برای یک شهر خاص بررسی کنند.
 
### 1. **HTML**
ابتدا ساختار HTML را برای برنامه آب و هوا ایجاد می‌کنیم.
 
```html
   
   
    برنامه آب و هوا
   
   
       

برنامه آب و هوا

       
       
       
   
   
```
 
### 2. **CSS**
سپس از CSS برای طراحی صفحه برنامه استفاده می‌کنیم.
 
```css
body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
    background-color: #e0f7fa;
    font-family: Arial, sans-serif;
}
 
.container {
    text-align: center;
    border: 1px solid #ccc;
    padding: 20px;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
 
input {
    margin: 10px 0;
    padding: 10px;
    width: 250px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}
 
button {
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    background-color: #007bff;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s;
}
 
button:hover {
    background-color: #0056b3;
}
 
#weatherResult {
    margin-top: 20px;
    font-size: 18px;
}
```
 
### 3. **JavaScript**
اکنون به سراغ پیاده‌سازی منطق برنامه با JavaScript می‌رویم. برای دریافت داده‌های آب و هوا از API استفاده می‌کنیم.
 
```javascript
const apiKey = 'YOUR_API_KEY'; // جایگزین با کلید API خود از OpenWeatherMap
const weatherResult = document.getElementById('weatherResult');
const getWeatherBtn = document.getElementById('getWeatherBtn');
 
getWeatherBtn.addEventListener('click', () => {
    const city = document.getElementById('cityInput').value;
    if (city) {
        getWeather(city);
    } else {
        weatherResult.innerText = 'لطفا نام شهر را وارد کنید';
    }
});
 
function getWeather(city) {
    const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;
    
    fetch(url)
        .then(response => {
            if (!response.ok) {
                throw new Error('شهر یافت نشد');
            }
            return response.json();
        })
        .then(data => {
            const temp = data.main.temp;
            const description = data.weather[0].description;
            const humidity = data.main.humidity;
            weatherResult.innerHTML = `
               

وضعیت آب و هوا در ${city}

               

دمای فعلی: ${temp}°C

               

توضیحات: ${description}

               

رطوبت: ${humidity}%

            `;
        })
        .catch(error => {
            weatherResult.innerText = error.message;
        });
}
```
 
### توضیحات کد:
1. **HTML**: شامل عنوان، ورودی برای نام شهر، دکمه برای دریافت اطلاعات آب و هوا و فضایی برای نمایش نتایج است.
2. **CSS**: طراحی ساده برای صفحه برنامه و دکمه‌ها.
3. **JavaScript**:
   - **API**: از OpenWeatherMap برای دریافت اطلاعات آب و هوا استفاده می‌شود. برای استفاده از این API، باید یک کلید API ایجاد کنید و آن را در متغیر `apiKey` قرار دهید.
   - **تابع `getWeather`**: اطلاعات آب و هوا را از API دریافت کرده و نتایج را نمایش می‌دهد.
   - **مدیریت خطا**: در صورت عدم یافتن شهر، پیام خطا نمایش داده می‌شود.
 
### نتیجه‌گیری
این پروژه یک برنامه آب و هوای ساده است که می‌تواند به کاربران کمک کند تا وضعیت آب و هوا را برای شهرهای مختلف بررسی کنند. می‌توانید ویژگی‌های بیشتری مانند پیش‌بینی‌های آب و هوایی، نمایش نقشه، یا طراحی زیباتر را به این برنامه اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده: دانلود پروژه کاربردی ساده برای ایجاد یک **برنامه آب و هوا** با استفاده از HTML، CSS و JavaScript می‌باشد