В этой статье я расскажу как сделать на js конвертер валюты, думаю будет очень интересно и полезно, особенно тем кто реализует RestAPI, так как это может уменьшить нагрузку на ваш сервер.
Мы уже делали конвертер валют, но на PHP, что узнать как это сделать, прочитайте эту статью «Как добавить курс и конвертер валют на PHP».
Основы создания:
Начнём с основ создания, то есть сделаем HTML файл в котором будем выводить нынешний курс, для этого создадим файл «index.html», вот что в нём должно быть.
1 2 3 4 | <div class="valute"> <p>EUR: <span class="eur"></span></p> <p>USD: <span class="usd"></span></p> </div> |
Тут не чего особо говорить, разве что в тег span мы будем выводить сколько сейчас стоит валюта.
Теперь создадим файл «script.js», там будет весь основной код, так же для получения данных, мы будем использовать библиотеку axios.js, подключим её через CDN.
1 | <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> |
Дальше переходим во файл «script.js» в нём берём все элементы которые нам нужны и получаем данные из удалённого сервера, выводим их в HTML, вот код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | // Элемент для вывода евро const EURviuw = document.querySelector('.eur') // Элемент для вывода доллара const USDviuw = document.querySelector('.usd') // Объект валют const valute = { EUR: "", USD: "" } // Делаем GET запрос на сервер axios.get("https://www.cbr-xml-daily.ru/daily_json.js") .then((res) => { // Получаем результат // Берём евро valute.EUR = res.data.Valute.EUR.Value // Берём доллар valute.USD = res.data.Valute.USD.Value // Выводим евро EURviuw.textContent = valute.EUR // Выводим доллар USDviuw.textContent = valute.USD }) |
Вот что должно у вас получиться:
Как видите всё работает, мы в начали берём элементы куда будем выводить стоимость одного евро и доллара, потом создаём объект где будем хранить валюту.
Потом отправляем GET запрос и в ответе получаем объект со всеми данными о валютах, ложим нужные валюты в наш объект и выводим данные.
Таким образом мы получили всё что нам нужно.
Как сделать конвертер валют в JavaScript:
Теперь сделаем полноценный конвертер валют, будем вводить число валюты и конвертировать в рубли, для это в начале сделаем в HTML инпут.
1 2 3 4 5 6 7 | <hr> <div class="convert"> <p>Евро в рублях: <span class="eur-in-rub">0 Руб</span></p> <p>Евро: <input type="text" class="eur-input"></p> <p>Доллар в рублях: <span class="usd-in-rub">0 Руб</span></p> <p>Доллар: <input type="text" class="usd-input"></p> </div> |
Теперь дополним наш JavaScript файл, вот что мы в нём сделаем:
Произошла ошибка. Попробуйте ещё раз позднее. |
В начали тут всё примерно так же как и в первом варианте, разве что ещё берём несколько элементов, это для вывода конвертированной валюты в рубли и поля для ввода этой валюты.
Потом мы начинаем отслеживать событие изменение полей, внутри проверяем, если в поле введено не число, то выводим ошибку, иначе если пустая строка, то выводим ноль, иначе выводим конвертированную валюту в рубли, так делаем с евро и долларом.
Так же при выводе мы округляем получившееся число, для лучшего понимания, вот что в итоге вышло:
Вы сможете сами проверить как всё работает, я оставлю код для скачивания.
Вывод:
В этой статье вы прочитали как сделать на js конвертер валюты, думаю вам было интересно и полезно.
Подписываетесь на соц-сети:
Оценка:
Загрузка...