کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
در اینجا یک پروژه ساده برای ایجاد یک **تبدیل‌کننده دما** با استفاده از HTML، CSS و JavaScript ارائه شده است. این برنامه به کاربران اجازه می‌دهد تا دما را از فارنهایت به سلسیوس و بالعکس تبدیل کنند.
### 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: 300px;
text-align: center;
}
h1 {
margin-bottom: 20px;
}
.converter {
display: flex;
flex-direction: column;
align-items: center;
}
input {
padding: 10px;
margin-bottom: 10px;
width: 80%;
}
select {
padding: 10px;
margin-bottom: 10px;
width: 80%;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
}
.result {
margin-top: 20px;
font-size: 20px;
font-weight: bold;
color: #333;
}
```
### 3. **JavaScript**
سپس منطق برنامه را با JavaScript پیاده‌سازی می‌کنیم. این بخش شامل تبدیل دما از فارنهایت به سلسیوس و بالعکس است.
```javascript
// انتخاب عناصر HTML
const tempInput = document.getElementById('tempInput');
const unitInput = document.getElementById('unitInput');
const convertBtn = document.getElementById('convertBtn');
const resultDiv = document.getElementById('result');
// تابع تبدیل دما
convertBtn.addEventListener('click', function() {
const temperature = parseFloat(tempInput.value);
const unit = unitInput.value;
let convertedTemp;
if (unit === 'C') {
// تبدیل سلسیوس به فارنهایت
convertedTemp = (temperature * 9/5) + 32;
resultDiv.textContent = `${temperature} درجه سلسیوس برابر است با ${convertedTemp.toFixed(2)} درجه فارنهایت`;
} else {
// تبدیل فارنهایت به سلسیوس
convertedTemp = (temperature - 32) * 5/9;
resultDiv.textContent = `${temperature} درجه فارنهایت برابر است با ${convertedTemp.toFixed(2)} درجه سلسیوس`;
}
});
```
### توضیحات کد:
1. **HTML**: شامل عنوان برنامه، ورودی برای دما، انتخاب واحد (سلسیوس یا فارنهایت) و دکمه‌ای برای انجام تبدیل است.
2. **CSS**: طراحی ساده برای ایجاد یک رابط کاربری زیبا و کاربرپسند.
3. **JavaScript**:
- **انتخاب عناصر HTML**: انتخاب ورودی دما، واحد دما، دکمه تبدیل و بخش نمایش نتیجه.
- **تابع تبدیل دما**: با کلیک بر روی دکمه، دما از واحد انتخاب شده به واحد دیگر تبدیل و نمایش داده می‌شود.
### نتیجه‌گیری
این پروژه **تبدیل‌کننده دما** یک مثال عالی برای استفاده از مفاهیم JavaScript مانند دستکاری DOM و رویدادهای کاربر است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند انتخاب واحد دما (کلوین) یا افزودن قابلیت تاریخچه تبدیل‌ها اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی **تبدیل‌کننده دما** با استفاده از HTML، CSS و JavaScript می‌باشد
