کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
در اینجا یک پروژه ساده برای ایجاد یک **برنامه آب و هوا** با استفاده از JavaScript، HTML و CSS ارائه شده است. این برنامه به کاربران اجازه می‌دهد تا وضعیت آب و هوای یک شهر خاص را با استفاده از یک 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: 90%;
max-width: 400px;
text-align: center;
}
h1 {
margin-bottom: 20px;
}
input {
padding: 10px;
width: 70%;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
padding: 10px;
font-size: 16px;
cursor: pointer;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
margin-left: 5px;
}
button:hover {
background-color: #218838;
}
.result {
margin-top: 20px;
font-size: 18px;
color: #333;
}
```
### 3. **JavaScript**
سپس منطق برنامه را با JavaScript پیاده‌سازی می‌کنیم. این بخش با استفاده از API وضعیت آب و هوا را دریافت می‌کند.
```javascript
const apiKey = 'YOUR_API_KEY'; // کلید API خود را اینجا وارد کنید
const getWeatherBtn = document.getElementById('getWeatherBtn');
const weatherResult = document.getElementById('weatherResult');
getWeatherBtn.addEventListener('click', function() {
const city = document.getElementById('cityInput').value;
if (city) {
fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`)
.then(response => response.json())
.then(data => {
if (data.cod === 200) {
const temp = data.main.temp;
const weatherDescription = data.weather[0].description;
weatherResult.innerHTML = `دما: ${temp}°C
توضیحات: ${weatherDescription}`;
} else {
weatherResult.innerHTML = 'شهر پیدا نشد. لطفاً نام شهر را دوباره بررسی کنید.';
}
})
.catch(error => {
console.error('Error:', error);
weatherResult.innerHTML = 'خطا در دریافت اطلاعات. لطفاً دوباره تلاش کنید.';
});
} else {
weatherResult.innerHTML = 'لطفاً نام شهری را وارد کنید.';
}
});
```
### توضیحات کد:
1. **HTML**: شامل عنوان برنامه، ورودی برای نام شهر و دکمه‌ای برای دریافت وضعیت آب و هوا است.
2. **CSS**: طراحی ساده برای ایجاد یک رابط کاربری زیبا و کاربرپسند.
3. **JavaScript**:
- **API**: با استفاده از OpenWeatherMap برای دریافت وضعیت آب و هوا.
- **fetch**: استفاده از `fetch` برای برقراری ارتباط با API و دریافت اطلاعات.
- **دریافت داده**: اطلاعات آب و هوای شهر وارد شده نمایش داده می‌شود، و در صورت وجود خطا، پیام مناسبی به کاربر نمایش داده می‌شود.
### نتیجه‌گیری
این پروژه **برنامه آب و هوا** یک مثال عالی برای یادگیری نحوه کار با APIها و انجام درخواست‌های HTTP با استفاده از JavaScript است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند پیش‌بینی‌های روزانه یا اطلاعات بیشتر در مورد آب و هوا اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی **برنامه آب و هوا** با استفاده از JavaScript، HTML و CSS می‌باشد
