دانلود رایگان قالب 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 بیشتر تحقیق کنید، کدهایی که با هم نوشتیم را بهبود ببخشید و خود از ابتدا آنها را بنویسید.

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

پوریا پرهامی

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

مقالات پیشنهادی دارکوب وب

پاسخ

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

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

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

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

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

READ  آموزش JSON مقدماتی قسمت چهار