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

Как сделать на JS конвертер валюты, просто и быстро
Метки: / /

В этой статье я расскажу как сделать на js конвертер валюты, думаю будет очень интересно и полезно, особенно тем кто реализует RestAPI, так как это может уменьшить нагрузку на ваш сервер.

Мы уже делали конвертер валют, но на PHP, что узнать как это сделать, прочитайте эту статью «Как добавить курс и конвертер валют на PHP».

Основы создания:

Начнём с основ создания, то есть сделаем HTML файл в котором будем выводить нынешний курс, для этого создадим файл «index.html», вот что в нём должно быть.

Тут не чего особо говорить, разве что в тег span мы будем выводить сколько сейчас стоит валюта.

Теперь создадим файл «script.js», там будет весь основной код, так же для получения данных, мы будем использовать библиотеку axios.js, подключим её через CDN.

Дальше переходим во файл «script.js» в нём берём все элементы которые нам нужны и получаем данные из удалённого сервера, выводим их в HTML, вот код:

Вот что должно у вас получиться:

Конвертируем валюту на JS

Как видите всё работает, мы в начали берём элементы куда будем выводить стоимость одного евро и доллара, потом создаём объект где будем хранить валюту.

Потом отправляем GET запрос и в ответе получаем объект со всеми данными о валютах, ложим нужные валюты в наш объект и выводим данные.

Таким образом мы получили всё что нам нужно.

Как сделать конвертер валют в JavaScript:

Теперь сделаем полноценный конвертер валют, будем вводить число валюты и конвертировать в рубли, для это в начале сделаем в HTML инпут.

Теперь дополним наш JavaScript файл, вот что мы в нём сделаем:

В начали тут всё примерно так же как и в первом варианте, разве что ещё берём несколько элементов, это для вывода конвертированной валюты в рубли  и поля для ввода этой валюты.

Потом мы начинаем отслеживать событие изменение полей, внутри проверяем, если в поле введено не число, то выводим ошибку, иначе если пустая строка, то выводим ноль, иначе выводим конвертированную валюту в рубли, так делаем с евро и долларом.

Так же при выводе мы округляем получившееся число, для лучшего понимания, вот что в итоге вышло:

как сделать конвертер валют в javascript

Вы сможете сами проверить как всё работает, я оставлю код для скачивания.

Вывод:

В этой статье вы прочитали как сделать на js конвертер валюты, думаю вам было интересно и полезно.

Подписываетесь на соц-сети:

Поделится:

Также рекомендую:

Подписаться
Уведомить о
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии
0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x
()
x