کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 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);
text-align: center;
width: 300px;
}
h1 {
margin-bottom: 20px;
}
input, select, button {
padding: 10px;
font-size: 16px;
margin: 10px 0;
width: 100%;
}
button {
cursor: pointer;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
}
.result {
margin-top: 20px;
font-size: 20px;
font-weight: bold;
color: #333;
}
```
### 3. **JavaScript**
سپس منطق تبدیل ارز را با JavaScript پیاده‌سازی می‌کنیم.
```javascript
// نرخ تبدیل ارزها
const exchangeRates = {
USD: { EUR: 0.85, IRR: 42000, GBP: 0.75, USD: 1 },
EUR: { USD: 1.18, IRR: 49500, GBP: 0.88, EUR: 1 },
IRR: { USD: 0.000024, EUR: 0.000020, GBP: 0.000017, IRR: 1 },
GBP: { USD: 1.33, EUR: 1.14, IRR: 59000, GBP: 1 }
};
document.getElementById('convertBtn').addEventListener('click', function() {
const amount = parseFloat(document.getElementById('amount').value);
const currencyFrom = document.getElementById('currencyFrom').value;
const currencyTo = document.getElementById('currencyTo').value;
// بررسی اعتبار مقدار ورودی
if (isNaN(amount) || amount <= 0) {
document.getElementById('result').textContent = 'لطفاً مقدار معتبری وارد کنید.';
return;
}
// تبدیل ارز
const convertedAmount = (amount * exchangeRates[currencyFrom][currencyTo]).toFixed(2);
// نمایش نتیجه
document.getElementById('result').textContent = `${amount} ${currencyFrom} برابر است با ${convertedAmount} ${currencyTo}`;
});
```
### توضیحات کد:
1. **HTML**: شامل ورودی برای مقدار ارز، انتخاب ارز مبدا و مقصد، و دکمه تبدیل است.
2. **CSS**: طراحی ساده برای ایجاد یک رابط کاربری زیبا و کاربرپسند.
3. **JavaScript**:
- **نرخ تبدیل**: یک شیء برای نگهداری نرخ‌های تبدیل ارزها.
- **رویداد کلیک**: وقتی کاربر بر روی دکمه "تبدیل" کلیک می‌کند، مقدار و ارزهای انتخاب شده را دریافت می‌کند و تبدیل را انجام می‌دهد.
- **بررسی اعتبار**: بررسی می‌کند که مقدار ورودی معتبر باشد.
- **نمایش نتیجه**: نتیجه تبدیل را در بخش مشخص شده نمایش می‌دهد.
### نتیجه‌گیری
این پروژه **تبدیل‌کننده ارز** یک مثال عالی برای استفاده از مفاهیم JavaScript مانند دستکاری DOM و رویدادهای کاربر است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند دریافت نرخ‌های واقعی از یک API اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی **تبدیل‌کننده ارز** با استفاده از HTML، CSS و JavaScript می‌باشد
