Как написать конвертер валют javascript: Конвертер валют на JavaScript Хабр Фриланс

В этой статье вы прочитали как сделать на js конвертер валюты, думаю вам было интересно и полезно. Теперь создадим файл «script.js», там будет весь основной код, так же для получения данных, мы будем использовать библиотеку axios.js, подключим её через CDN. Начнём с основ создания, то есть сделаем HTML файл в котором будем выводить нынешний курс, для этого создадим файл «index.html», вот что в нём должно быть. В этой статье я расскажу как сделать на js конвертер валюты, думаю будет очень интересно и полезно, особенно тем кто реализует RestAPI, так как это может уменьшить нагрузку на ваш сервер. Если мы захотим изменить дизайн или логику со списком элементов , то нам не придется редактировать десяток разных компонентов, а достаточно будет внести изменения в Convertible. Мы уже рассматривали декомпозицию в четвертой части цикла, и вот она снова во всей красе показывает, как сокращение кода может упростить жизнь разработчика.

Напишем мы ее в отдельном файле parser.js (можете разместить его где удобно, а я пока оставлю в папке src). И получившуюся переменную отправляем в код между тегами Select. Тут не чего особо говорить, разве что в тег span мы будем выводить сколько сейчас стоит валюта.

Вместо этого создадим массив со всеми возможными значениями для конвертации и передадим его в компонент как пропс. Только в этом компоненте мы заменим названия переключателей. Вместо Calculator и Converter сделаем Money и Distance. Парсер получится простеньким и уложится в одну функцию.

Вместо заключения

Для этого надо открыть страницу с информацией и нажать сочетание клавиш Shift + Ctrl + C. Откроются инструменты разработчика и появится возможность выделить любой элемент на странице, чтобы посмотреть его код. Я выбираю блок с названием валюты и вижу, что это компонент таблицы. Получаем актуальные данные курса рубля ко всем валютам.

Разные методы вычисления, разные массив со списками метрик и т.п. Для начала создадим компонент Menu в файле Converter.jsx и полностью скопируем туда код из того Menu, что находится в файле App.jsx. Тут стоит отметить, что мы делаем каст (преобразование типа данных) значения x в Number, потому что по умолчанию метод getData возвращает нам строку, а не число. Этого поведения можно избежать, если добавить каст прямо внутри getData.

Конвертер валют на JavaScript. Видео урок

В начали тут всё примерно так же как и в первом варианте, разве что ещё берём несколько элементов, это для вывода конвертированной валюты в рубли  и поля для ввода этой валюты. Как видите всё работает, мы в начали берём элементы куда будем выводить стоимость одного евро и доллара, потом создаём объект где будем хранить валюту. Но и это не все, так как нам приходится для каждого вида метрик создавать новый компонент с большим количеством повторяющейся логики. Это замедляет процесс разработки и делает код слишком объемным и неудобным для редактирования. Поэтому надо преобразовать компонент с блоками Select во что-то более универсальное.

• Но и это не все, так как нам приходится для каждого вида метрик создавать новый компонент с большим количеством повторяющейся логики.
• Этого поведения можно избежать, если добавить каст прямо внутри getData.
• Надо заменить внутренний текст в option и value в option.
• Мы уже делали конвертер валют, но на PHP, что узнать как это сделать, прочитайте эту статью «Как добавить курс и конвертер валют на PHP».
• Мы оставим в нем тот же код, но сам компонент переименуем в Convertible, чтобы отразить его новую сущность.

Чтобы не городить в кучу все виды метрик (а их может быть очень много), лучше выделим их все в отдельные меню. Далее будет код, отвечающий непосредственно за добычу данных. Он довольно специфичный, потому что использует массив для хранения блока с информацией о конкретной валюте. Постараюсь разъяснить его принцип работы максимально доступно. Мы уже делали конвертер валют, но на PHP, что узнать как это сделать, прочитайте эту статью «Как добавить курс и конвертер валют на PHP». Мы оставим в нем тот же код, но сам компонент переименуем в Convertible, чтобы отразить его новую сущность.

Все они хранятся в единых блоках tr, а это позволит нам настроить относительно несложный алгоритм для поиска необходимого контента на banki.ru и последующего его использования в приложении. Нас интересует название валюты и ее стоимость по отношению к рублю (на текущий момент этого будет достаточно). Отсутствие внятных классов для названия и суммы усложняет задачу. Придется «генерировать костыли» и кустарными методами пробираться к необходимой информации. Чтобы сделать свой парсер, надо сначала выбрать источник данных. Я рекомендую использовать его, потому что алгоритм настроен конкретно под этот ресурс и может не работать на других похожих сайтах.

Мы возьмем тот же код и вытащим его в отдельный компонент. Надо заменить внутренний текст в option и value в option. Для конвертации валют (пока что) понадобится отдельный компонент. Для этого не будем далеко ходить, а скопируем уже имеющийся у нас код. То есть тот, что используется для конвертации метров в сантиметры.

Настраиваем axis и cheerio

Чтобы это реализовать, создадим переменную selection и в ней запишем функцию перебора массива data. Мы уже делали выпадающее меню в прошлых частях, когда необходимо было создать переключатель между калькулятором и конвертером. Теперь нам нужен еще один подобный переключатель, но уже для разных видов конвертеров.

В этот раз мы добавим в него конвертер валют, который в реальном времени собирает данные о курсах с сайта banki.ru и предоставляет информацию в интерфейсе нашего приложения. Теперь вместо отдельных компонентов Money или Distance мы можем отправить в метод return переменную converter, и уже она будет решать, какой вид конвертера доступен пользователю. Не придется городить десятки видов конвертации на одной странице.

Создаем калькулятор-конвертер на базе React. Часть 8: Конвертер валют и собственный парсер данных

Парсер – это инструмент, позволяющий собрать данные с сайта и при необходимости отфильтровать их, чтобы выудить конкретный кусок информации с какой-либо страницы. Проверка курса валют – лишь одна из сотен, применяющихся на практике. Парсить можно практически любой контент из сети, где это не запрещается владельцами сайтов и нет специальной защиты, мешающей делать запросы не через обычный браузер. Вся работа будет поделена на три шага – мы будем создавать парсер курса валют со стороннего ресурса, компонент для конвертации валют и переключатель для изменения типа данных для конвертации. Таким же образом можно создать массивы data для неограниченного количества метрик и вообще вывести их в отдельный файл, чтобы они не мешались с основной логикой компонента. Перед тем как приступить к написанию кода парсера, я проверил, откуда именно мне нужно будет добывать данные.

Дополнительная логика конвертера (та, что не связана с парсингом) прописывается в компоненте converter. Пока мы не вывели все формулы в отдельные функции и файлы, создадим новый метод прямо внутри Converter и назовем его convertMoney. Это будет асинхронная функция для расчета курса валют на основе информации из парсера.

Выводим их на страницу и после на основании введенной суммы высчитываем сумму. И еще заметьте, что референсы теперь передаются как пропсы, потому что мы вывели уже существующую логику в отдельный компонент. Соответственно, теперь все методы и элементы, связанные с родительским компонентом, должны передаваться как пропсы. Теперь сделаем полноценный конвертер валют, будем вводить число валюты и конвертировать в рубли, для это в начале сделаем в HTML инпут. Нам остается лишь передавать в этот компонент разные пропсы.

Такой подход позволит упростить повторное создание и использование компонентов, так как не придется заново указывать весь список конвертируемых элементов в одном блоке данных. После можно будет обработать пропс внутри компонента и распределить каждый элемент массива в блоке Select так, чтобы он отображался в качестве блока . Если на первом этапе вы по какой-то причине пропустили настройку и установку Axios с Cheerio, то стоит сделать это сейчас. Обе утилиты необходимы, чтобы добыть нужную информацию о странице и после этого отфильтровать необходимые данные.