کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 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: 80%;
max-width: 400px;
text-align: center;
}
h1 {
margin-bottom: 20px;
}
.form-group {
margin-bottom: 15px;
}
input[type="number"], select {
width: 100%;
padding: 10px;
font-size: 16px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
margin-top: 15px;
}
.result {
margin-top: 20px;
font-size: 24px;
font-weight: bold;
color: #333;
}
```
### 3. **JavaScript**
سپس منطق برنامه را با JavaScript پیاده‌سازی می‌کنیم. این بخش شامل تبدیل ارز و دریافت نرخ تبدیل از یک API است.
```javascript
const convertBtn = document.getElementById('convertBtn');
const resultDiv = document.getElementById('result');
// نرخ تبدیل ارز
const exchangeRates = {
USD: 1,
EUR: 0.85,
IRR: 42000,
GBP: 0.75,
JPY: 110,
};
// تابع برای تبدیل ارز
function convertCurrency() {
const amount = document.getElementById('amount').value;
const fromCurrency = document.getElementById('fromCurrency').value;
const toCurrency = document.getElementById('toCurrency').value;
if (amount === '' || amount <= 0) {
resultDiv.textContent = 'لطفاً مقدار معتبری وارد کنید.';
return;
}
// تبدیل مقدار به دلار
const amountInUSD = amount / exchangeRates[fromCurrency];
// تبدیل دلار به ارز هدف
const convertedAmount = amountInUSD * exchangeRates[toCurrency];
// نمایش نتیجه
resultDiv.textContent = `${amount} ${fromCurrency} برابر با ${convertedAmount.toFixed(2)} ${toCurrency}`;
}
// افزودن رویداد کلیک به دکمه تبدیل
convertBtn.addEventListener('click', convertCurrency);
```
### توضیحات کد:
1. **HTML**: شامل ورودی مقدار، انتخاب ارز مبدا و مقصد، دکمه تبدیل و یک بخش برای نمایش نتیجه است.
2. **CSS**: طراحی ساده و کاربرپسند برای برنامه تبدیل ارز.
3. **JavaScript**:
- **نرخ تبدیل**: آرایه‌ای از نرخ‌های تبدیل ارز به دلار.
- **تابع `convertCurrency`**: برای تبدیل ارز با استفاده از نرخ‌ها و نمایش نتیجه.
- **رویداد کلیک**: برای اجرای تابع تبدیل وقتی که دکمه "تبدیل" فشرده می‌شود.
### نتیجه‌گیری
این پروژه **برنامه تبدیل ارز** یک مثال عالی برای یادگیری نحوه کار با JavaScript، HTML و CSS است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند دریافت نرخ تبدیل به‌روز از یک API واقعی، افزودن ارزهای بیشتر و یا بهبود طراحی رابط کاربری اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی **برنامه تبدیل ارز** با استفاده از HTML، CSS و JavaScript می‌باشد
