Currency Converter (конвертер валют bank.gov.ua) на JS

5 (100%) 15 vote[s]

Идея сделать простенький Currency Converter (онлайн-конвертер валют), привязанный к официальному курсу Национального банка Украины, возникла из простых соображений. Во-первых, можно моментально получить полную картину всех ходовых валют и конвертировать их. А поиграться с другими видами валют (и заодно узнать, что такое CAD , INR etc) можно и в Google. После недолгих раздумий именно такая форма показалась наиболее оптимальной (и простой). Кроме того, любой интерактивный элемент делает страничку более привлекательной.

Конвертер валют

Конвертер валют
bank.gov.ua

UAH в USD

USD в UAH

UAH в EUR

EUR в UAH

UAH в RUB

RUB в UAH

USD в RUB

RUB в USD

Дата

Исходный код смотрите на CodePen:

See the Pen
Currency Converter bank.gov.ua
by Alla (@AllaJan)
on CodePen.

Долго ли, коротко ли… (если приложение не отвечает — перезагрузите страницу; это издержки, чтобы не делать его на отдельной странице).

Рассмотрим поподробнее: Ajax, parseFloat

Термин Ajax обозначает архитектуру веб-приложений, которая основана на взаимодействии с протоколом HTTP и объектом XMLHttpRequest. (В действительности для многих объект XMLHttpRequestи Ajax являются синонимами.) Ajax – это акроним от «Asynchronous JavaScript and XML» (асинхронный JavaScript и XML).

Основные функции запросов ajax:

<script type="text/javascript">
function SendGet() {
	//отправляю GET запрос и получаю ответ
	$$a({
		type:'get',//тип запроса: get,post либо head
		url:'ajax.php',//url адрес файла обработчика
		data:{'q':'1'},//параметры запроса
		response:'text',//тип возвращаемого ответа text либо xml
		success:function (data) {//возвращаемый результат от сервера
			$$('result',$$('result').innerHTML+'<br />'+data);
		}
	});
}

function SendPost() {
	//отправляю POST запрос и получаю ответ
	$$a({
		type:'post',//тип запроса: get,post либо head
		url:'ajax.php',//url адрес файла обработчика
		data:{'z':'1'},//параметры запроса
		response:'text',//тип возвращаемого ответа text либо xml
		success:function (data) {//возвращаемый результат от сервера
			$$('result',$$('result').innerHTML+'<br />'+data);
		}
	});
}

function SendHead() {
	//отправляю HEAD запрос и получаю заголовок
	$$a({
		type:'head',//тип запроса: get,post либо head
		url:'ajax.php',//url адрес файла обработчика
		response:'text',//тип возвращаемого ответа text либо xml
		success:function (data) {//возвращаемый результат от сервера
			$$('result',$$('result').innerHTML+'<br />'+data);
		}
	});
}
</script>

Чтобы добавить больше параметров в запрос, достаточно их дописать через запятую:

data:{'q':'1','z':'1','s':'2'},//параметры запроса

Примерный скрипт фала запроса ajax:

<script type="text/javascript">
function Send() {
	$$a({
		type:'get',//тип запроса: get,post либо head
		url:'',//url адрес файла обработчика
		data:{},//параметры запроса
		response:'text',//тип возвращаемого ответа text либо xml
		header:{//заголовки запроса, работают только если установлен response:'xml'
			'Content-Type':'application/x-www-form-urlencoded; charset=windows-1251',
			'Referer':location.href
		},
		async:true,//асинхронный если установлено true или синхронный запрос если false
		username:'',//имя пользователя если требуется для авторизации
		password:'',//пароль пользователя если требуется для авторизации
		errrep:true,//отображение ошибок error если true
		error:function(num) {//ошибки запроса
			var arr=['Your browser does not support Ajax',
						'Request failed',
						'Address does not exist',
						'The waiting time left'];
			alert(arr[num]);
		},
		status:function (number) {//код состояния отправки от 1 до 4
			alert(number);//вывожу код состояния отправки
		},
		endstatus:function (number) {//код состояния запроса например 404, 200
			alert(number);//вывожу код состояния запроса
		},
		success:function (data) {//возвращаемый результат от сервера
			alert(data);//вывожу результат запроса
		},
		timeout:5000//таймаут запроса
	});
}
</script>

Для начала нужно выяснить, как выглядит файл XML, к которому мы будем обращаться. Идем по ссылке и смотрим атрибуты. Нам надо: аббревиатура (<cc>) и коэффициент (<rate>). По этим параметрам и будем отправлять запрос. Искать будем в <currency>, а именно text USD, EUR, RUB. Для солидности возьмем оттуда и дату составления курса валют (<exchangedate>) и тоже добавим ее в нашу форму запроса.

Вначале нужно подключить ajax в наш файл:

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Соответственно, запрос в нашем js-коде выглядит так:

var course = 0;
   $.ajax({
      type: 'get',
      url: 'https://bank.gov.ua/NBUStatService/v1/statdirectory/exchange',
      dataType: 'xml',
      success: function(response) {
           $(response).find("currency").each(function(i,elem) {
              if($(elem).find('cc').text() == 'USD') { 
                 course = +$(elem).find('rate').text();
              }
			  if($(elem).find('cc').text() == 'EUR') { 
                 course1 = +$(elem).find('rate').text();
              }
			  if($(elem).find('cc').text() == 'RUB') { 
                 course2 = +$(elem).find('rate').text();
              }
			     { 
                 data = $(elem).find('exchangedate').text();
                 }
        })   
     }
});

После того, как мы получили данные, производим расчеты. Поскольку мы будем получать строки, то для проведения математических операций мы преобразуем их в десятичное число с плавающей запятой. Это нам поможет сделать функция parseFloat(). После объявления переменных, выполняем расчет и возвращаем его в нашу форму HTML:

$('input').on('keyup',function(){
    var value1, value3, value4, value5, value6, value7, value8, value9;
    value1 = parseFloat($('#val1').val()).toFixed(2);
    value3 = parseFloat($('#val3').val()).toFixed(2);
	value4 = parseFloat($('#val4').val()).toFixed(2);
    value5 = parseFloat($('#val5').val()).toFixed(2);
	value6 = parseFloat($('#val6').val()).toFixed(2);
    value7 = parseFloat($('#val7').val()).toFixed(2);
	value8 = parseFloat($('#val8').val()).toFixed(2);
    value9 = parseFloat($('#val9').val()).toFixed(2);
	
    $('#rezultat1').val(data);
       
            $('#rezultat2').val(value3 / course);
            $('#rezultat').val(value1 * course);
		
            $('#rezultat4').val(value4 / course1);
            $('#rezultat5').val(value5 * course1);
			
			$('#rezultat6').val(value6 / course2);
            $('#rezultat7').val(value7 * course2);
			
			$('#rezultat8').val(value8 / (course2/course));
            $('#rezultat9').val(value9*course2/course);
			
    });
	

В нашей HTML форме устанавливаем исходные значения value=»». Зачем? Js запускается при любом вводе в любую ячейку и просчитывает их все. Чтобы не портить внешний вид выводом NaN (при отсутствии значений), просто вставим исходные значения, которые наглядно будут отображать текущий курс: для UAH в USD — 100, для USD в UAH — 1, для UAH в EUR — 100, для EUR в UAH — 1 и т. д.

 <body>
  
   <h1>Конвертер валют<br>bank.gov.ua</h1>
   
  
<form id="content" class="hid">
     <dl>
         <p>UAH в USD</p><input type='text' id='val3' value="100"><!--здесь ставим 100 и так далее -->
         <input type='text' id='rezultat2' disabled>

         <p>USD в UAH</p><input type='text' id='val1' value="1">
         <input type='text' id='rezultat' disabled>
		 
		 <p>UAH в EUR</p><input type='text' id='val4' value="100">
         <input type='text' id='rezultat4' disabled>

         <p>EUR в UAH</p><input type='text' id='val5' value="1">
         <input type='text' id='rezultat5' disabled>
		 
		 
	 </dl>
</form>
<form id="content" class="hid2">
     <dl>	 
		 <p>UAH в RUB</p><input type='text' id='val6' value="1">
         <input type='text' id='rezultat6' disabled>

         <p>RUB в UAH</p><input type='text' id='val7' value="1">
         <input type='text' id='rezultat7' disabled>
		 
		 <p>USD в RUB</p><input type='text' id='val8' value="1">
         <input type='text' id='rezultat8' disabled>

         <p>RUB в USD</p><input type='text' id='val9' value="100">
         <input type='text' id='rezultat9' disabled>

         
	  </dl>
</form>
<form id="content" class="hid3">
      
        <p>Дата</p><input type='text' id='rezultat1'disabled>
	  
</form>    

Кстати, для вставки в сайт, в HTML коде нужно изменить теги, например, main на form, как в варианте выше (вариант, что на codepen, писался как отдельная страница), убрать ненужные теги, чтобы форма стала частью контента страницы, а не отдельной страницей.

Общее описание: состоит из 3-х блоков, которые позиционируются в зависимости от ширины экрана при помощи медиа-запросов.

Помним, что если делать одной страницей, то стили прописываем перед закрывающим тегом </head>, завернув их в теги <style></style>. А скрипт вставляем внизу, перед закрывающим тегом </body> и заворачиваем его в <script></script>. О разметке HTML и стилях читайте в других статьях или в ссылках, указанных в них и в этой статье выше.

И напоследок: с 16.00 до 18.00 по Киеву выводится только курс доллара (остальное обновляется). Поэтому в этот период другие данные от сервера поступать не будут.

В общих чертах, всё.

Читайте больше по теме:

Подписаться
Уведомление о
guest
0 комментариев
Inline Feedbacks
View all comments
Просмотры: 409

Популярные записи