کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
در اینجا یک پروژه ساده برای ایجاد یک **داشبورد آب و هوا** با استفاده از HTML، CSS و JavaScript ارائه شده است. این برنامه به کاربران اجازه می‌دهد تا آب و هوای یک شهر خاص را مشاهده کنند. برای این کار از API آب و هوا (مانند OpenWeatherMap) استفاده می‌شود.
### 1. **HTML**
ابتدا ساختار HTML را برای داشبورد آب و هوا ایجاد می‌کنیم.
```html
داشبورد آب و هوا
داشبورد آب و هوا
```
### 2. **CSS**
برای طراحی ظاهری داشبورد آب و هوا از CSS استفاده می‌کنیم.
```css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 80%;
max-width: 400px;
text-align: center;
}
h1 {
margin-bottom: 20px;
}
input {
padding: 10px;
width: 100%;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
margin-bottom: 20px;
}
.result {
margin-top: 20px;
font-size: 18px;
color: #333;
}
```
### 3. **JavaScript**
سپس منطق برنامه را با JavaScript پیاده‌سازی می‌کنیم. برای این کار از API آب و هوا استفاده می‌کنیم. به یاد داشته باشید که باید یک کلید API از OpenWeatherMap یا یک سرویس مشابه دریافت کنید.
```javascript
// کلید API خود را اینجا قرار دهید
const apiKey = 'YOUR_API_KEY';
// انتخاب دکمه و بخش نمایش نتیجه
const getWeatherBtn = document.getElementById('getWeatherBtn');
const weatherResultDiv = document.getElementById('weatherResult');
// افزودن رویداد کلیک به دکمه
getWeatherBtn.addEventListener('click', function() {
const city = document.getElementById('cityInput').value;
// درخواست به API آب و هوا
fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`)
.then(response => {
if (!response.ok) {
throw new Error('شهر پیدا نشد!');
}
return response.json();
})
.then(data => {
const temperature = data.main.temp;
const weatherDescription = data.weather[0].description;
const cityName = data.name;
// نمایش نتیجه
weatherResultDiv.textContent = `در ${cityName} دما: ${temperature}°C و وضعیت: ${weatherDescription}`;
})
.catch(error => {
weatherResultDiv.textContent = error.message;
});
});
```
### توضیحات کد:
1. **HTML**: شامل عنوان برنامه، ورودی برای نام شهر و دکمه‌ای برای دریافت آب و هوا است.
2. **CSS**: طراحی ساده و کاربرپسند برای داشبورد آب و هوا.
3. **JavaScript**:
- **API**: از `fetch` برای درخواست به API آب و هوا استفاده می‌شود.
- **نتیجه**: پس از دریافت اطلاعات، دما و وضعیت آب و هوا نمایش داده می‌شود.
### نتیجه‌گیری
این پروژه **داشبورد آب و هوا** یک مثال عالی برای یادگیری نحوه کار با APIها و دستکاری DOM در JavaScript است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند نمایش پیش‌بینی آب و هوا برای چند روز آینده اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی **داشبورد آب و هوا** با استفاده از HTML، CSS و JavaScript می‌باشد
