دانلود رایگان قالب Total وردپرس

خوب نبودخوبخیلی خوبعالیخیلی عالی (1 votes, average: 5٫00 out of 5)

در ابتدا صفحه‌ای به نام currency.html می‌سازیم که در آن یک جدول و چند dropDown list برای انتخاب واحد پول و دو input برای گرفتن و نمایش واحد‌ها خواهم داشت.
Currency.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Currency Converter</title>
</head>
<body>

<div id="box">

<h2>Currency Converter</h2>
<table>
<tr>
<td>
<input type="text" id="fromAmount" value="1"/>
</td>
<td>
<select id="from">
<option value="AUD">Australian Dollar(AUD)</option>
<option value="BNG">Bulgarian Lec(BNG)</option>
<option value="CAD">Canadian Dollar(CAD)</option>
<option value="CHF">Swiss franc(CHF)</option>
<option value="USD" selected>US Dollar(USD)</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="text" id="toAmount"/>
</td>
<td>
<select id="to">
<option value="AUD">Australian Dollar(AUD)</option>
<option value="BNG">Bulgarian Lec(BNG)</option>
<option value="CAD" selected>Canadian Dollar(CAD)</option>
<option value="CHF">Swiss franc(CHF)</option>
<option value="USD">US Dollar(USD)</option>
</select>
</td>
</tr>
</table>
</div>
</body>
</html>

حال تنها کاری که باید انجام شود، فرستادن طلاعات به این آدرس http://api.fixer.io/latest?symbols=USD,RUB است.
سپس گرفتن اطلاعات و محاسبه تبدیل ارز را انجام می‌دیهم .

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Currency Converter</title>
<script>

function convertCurrency() {

var from = document.getElementById("from").value;
var to = document.getElementById("to").value;

var xmlHttpReq = new XMLHttpRequest();
var url = "http://api.fixer.io/latest?symbols=" + from + "," + to;

xmlHttpReq.open("GET", url, true);
xmlHttpReq.send();

xmlHttpReq.onreadystatechange = function () {

if (xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200) {

var result = xmlHttpReq.responseText;
var jsResult = JSON.parse(result);

var oneUnit = jsResult.rates[to]/jsResult.rates[from];
var amt = document.getElementById("fromAmount").value;
document.getElementById("toAmount").value = (oneUnit*amt).toFixed(2);

}

}

}

</script>

</head>
<body onload="convertCurrency();">

<div id="box">

<h2>Currency Converter</h2>
<table>
<tr>
<td>
<input type="text" id="fromAmount" value="1" onkeyup="convertCurrency();"/>
</td>
<td>
<select id="from" onchange="convertCurrency();">
<option value="AUD">Australian Dollar(AUD)</option>
<option value="BNG">Bulgarian Lec(BNG)</option>
<option value="CAD">Canadian Dollar(CAD)</option>
<option value="CHF">Swiss franc(CHF)</option>
<option value="USD" selected>US Dollar(USD)</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="text" id="toAmount"/>
</td>
<td>
<select id="to" onchange="convertCurrency();">
<option value="AUD">Australian Dollar(AUD)</option>
<option value="BNG">Bulgarian Lec(BNG)</option>
<option value="CAD" selected>Canadian Dollar(CAD)</option>
<option value="CHF">Swiss franc(CHF)</option>
<option value="USD">US Dollar(USD)</option>
</select>
</td>
</tr>
</table>
</div>
</body>
</html>

jsonpic4

آموزش ما اینجا تمام می‌شود. در مورد json بیشتر تحقیق کنید، کدهایی که با هم نوشتیم را بهبود ببخشید و خود از ابتدا آنها را بنویسید.

موفق و شاد باشید.

پوریا پرهامی

پوریا پرهامی هستم، چند سالی هست که در مجموعه دارکوب وب فعالیت می‌کنم. عمده‌ی فعالیت من در زمینه برنامه نویسی هستش. همچنین به هوش مصنوعی و آموزش زبان‌های برنامه نویسی علاقه دارم.

[yuzo_related]

خبرنامه دارکوب وب

با عضویت در خبرنامه دارکوب وب، هر هفته یک ایمیل از آخرین مقالات و تخفیفات هیجان انگیز ما مطلع شوید.

0 پاسخ

دیدگاه خود را ثبت کنید

تمایل دارید در گفتگوها شرکت کنید؟
در گفتگو ها شرکت کنید.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.