کاربران گرامی در این پروژه به شما پروژه کاربردی با جاوا اسکریپت را قرارداده ایم شما عزیزان می توانید از بخش دانلود پروژه کاربردی با جاوااسکریپت سایر پروژه هایی که با جاوا اسکریپت طراحی شده اند را مشاهده و دانلود کنید.
در صورتی که نیاز به آموزش حضوری و یا غیر حضوری این پروژه داشتید میتوانید با ما در ارتباط باشید تا این پروژه را به شما آموزش دهیم حتی میتوانید در صورت دلخواه پروژه را به خواسته شما شخصی سازی کنیم لازم به ذکر است که تیم پروژه در صفحه دانلود پروژه کاربردی پروژه های مختلفی را به زبان های مختلف برنامه نویسی قرار داده است .شماره تماس با پرپروژه 09050394455 می باشد
### تبدیل‌کننده ارز ساده با استفاده از جاوا اسکریپت و کد منبع
در اینجا یک پروژه ساده برای ایجاد یک **تبدیل‌کننده ارز** با استفاده از HTML، CSS و JavaScript ارائه شده است. این برنامه به کاربران این امکان را می‌دهد تا ارزهای مختلف را تبدیل کنند.
### ۱. **HTML**
ابتدا ساختار HTML را برای تبدیل‌کننده ارز ایجاد می‌کنیم.
```html
تبدیل‌کننده ارز
تبدیل‌کننده ارز
```
### ۲. **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;
}
h1 {
text-align: center;
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
}
input,
select {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
padding: 10px 15px;
font-size: 16px;
cursor: pointer;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
width: 100%;
}
button:hover {
background-color: #218838;
}
.result {
margin-top: 20px;
font-size: 20px;
color: #333;
text-align: center;
}
```
### ۳. **JavaScript**
سپس منطق تبدیل ارز را با JavaScript پیاده‌سازی می‌کنیم. این بخش شامل تبدیل مقادیر بر اساس نرخ‌های تبدیل است.
```javascript
// نرخ تبدیل ارزها
const exchangeRates = {
USD: 1,
EUR: 0.85,
IRR: 42000,
GBP: 0.75
};
// انتخاب عناصر HTML
const amountInput = document.getElementById('amount');
const fromCurrencySelect = document.getElementById('fromCurrency');
const toCurrencySelect = document.getElementById('toCurrency');
const convertBtn = document.getElementById('convertBtn');
const resultDiv = document.getElementById('result');
// افزودن رویداد کلیک برای دکمه تبدیل
convertBtn.addEventListener('click', function() {
// دریافت مقادیر ورودی
const amount = parseFloat(amountInput.value);
const fromCurrency = fromCurrencySelect.value;
const toCurrency = toCurrencySelect.value;
// بررسی مقادیر ورودی
if (isNaN(amount) || amount <= 0) {
resultDiv.textContent = 'لطفاً مقدار معتبر وارد کنید!';
return;
}
// محاسبه مقدار تبدیل شده
const convertedAmount = (amount / exchangeRates[fromCurrency]) * exchangeRates[toCurrency];
// نمایش نتیجه
resultDiv.textContent = `${amount} ${fromCurrency} برابر با ${convertedAmount.toFixed(2)} ${toCurrency} است.`;
});
```
### توضیحات کد:
1. **HTML**:
- شامل عنوان، فیلد ورودی برای مقدار، انتخاب ارز مبدا و مقصد و یک دکمه برای تبدیل ارز است.
2. **CSS**:
- طراحی ساده و زیبا برای تبدیل‌کننده ارز.
3. **JavaScript**:
- **نرخ تبدیل ارزها**: یک شیء شامل نرخ‌های تبدیل برای ارزهای مختلف.
- **محاسبه تبدیل**: وقتی کاربر روی دکمه تبدیل کلیک می‌کند، مقدار تبدیل شده محاسبه و نمایش داده می‌شود. همچنین ورودی‌ها بررسی می‌شوند تا از اعتبار آن‌ها اطمینان حاصل شود.
### نتیجه‌گیری
این **تبدیل‌کننده ارز** یک مثال ساده و کاربردی از استفاده از HTML، CSS و JavaScript برای ایجاد ابزاری مفید است. شما میتوانید این پروژه را گسترش دهید و ویژگی‌های بیشتری مانند اضافه کردن نرخ‌های تبدیل آنلاین یا تبدیل ارزهای بیشتری را اضافه کنید. از کدنویسی لذت ببرید!
| صفحه قابل مشاهده:
دانلود پروژه کاربردی تبدیل‌کننده ارز ساده با استفاده از جاوا اسکریپت و کد منبع می‌باشد
