В этом уроке мы с вами сделаем приложение Конвентер валют. Это приложение будет получат информацию о курсе необходимой валюты с другого сайта, выполнять подсчеты, и выводить данные в этом окне. Давайте начнем его создавать.
Сперва создадим папку weatherApp, т.е. приложение погоды. Создадим внутри этой папки файл index.html. Добавим необходимые теги.
В приложении у меня будет использоваться картинка со стрелками. Ее я загружу с сайта font-awesome. Для этого надо добавить ссылку на их css-файл. Можно конечно бло разместить картинку в файлах своего сайта, но я реших воспользоваться таким способом. Далее укажу ссылку на наш файл css. Когда мы загружаем какие-то статические ресурсы с другого сайта, например, файл css, или картинки, мы не используем API другого сайта, так как API не участвует в создании этих файлов. Они просто готовые лежат на другом сайте и вы используете эти файлы по ссылке.
Теперь переходим к тегу body.
Сам конвертер валют будет валют будет находится внутри тега div. Зачастую такие таким тегам, внутри которого находится само приложение задают id wrapper, т.е. обертка.
Первым тегом внутри тега див будет заголовок h1.
А дальше будет идти форма. Внутри формы сперва будет поле для ввода значения. Значение по умолчанию будет 1.
Далее мы должны создать такой раздел. Начнем его создавать с тега див с id drop-list, т.е. выпадающий список.
Создаем первый выпадающий список. У этого див id будет from. Т.е. здесь мы указываем валюту, которую собираемся конвертировать. Текст рядом с этим выпадающим списком будет такой. Далее создаем непосредственно сам выпадающий список. Сперва у нас идет флаг страны. Флаги мы тоже подключим удаленно. Итак, нам нужен флаг США. Получить его удаленно можно по ссылке. Сперва пишем домен потом необходимый размер, и потом сам файл с картинкой. Далее пишем тег селект, т.е. тег который отвечает за выпадающий список, и внутри пока ничего не пишем. Сам список мы вставим с помощью JAvaScript.
После первого списка у нас идет иконка стрелок. Помните, мы в head добавляли css файл другого сайта. чтобы подгрузить картинку со стрелками оттуда, надо писать так. О том как загружать картинки с их сайта я просто прочитал в их документации. Сперва пишем тег див где будет хранится картинка, потом строчный тег i, что бы этот тег заменился на картинку, надо написать такой класс.
Готово. Теперь надо создать второй выпадающий список с российским флагом. Просто скопируем эти теги, поменям текст и флаг.
Остается создать раздел с результатом. и кнопку. Id у раздела с результатом будет exchange-rate, т.е. обменный курс. А текст у кнопки буде “Узнать обменный курс”.
HTML код готов. Двигаемся дальше, а дальше мы создадим css-файл.
В файле css сперва импортируем шрифт c сайта google fonts с помощью at-правила import.
Далее для всех тегов уберем поля.
Еще создадим css-переменную с цветом, который мы будем использовать много раз:
И также сделаем так, чтобы для блочных тегов размеры отступов и полей входили в общую ширину этих тегов.
Переходим к тегу body:
Зададим ему dispay flex. Align items и justify-content будем center, минимальная высота будет 100vh, т.е. 100% от высоты окна браузера. Фоновой цвет зададим такой. А шрифт будет Poppins, который мы загрузим с сайта гугл фонтс.
Далее с помощью псевдоэлемента selection сделаем так, чтобы при выделении текст становился белым, а само выделение фиолетовым.
Теперь зададим стиль тегу с id wrapper. Давайте в этот раз я буду задавать размеры в пикселях.
Переходим к тегу h1
Двигаемся дальше. А дальше у нас форма.
Далее задам стили с помощью псевдокласса where для input, select, button. Использую я псевдокласс where, так как у него нулевая специфичность , и так будет удобно потом для некоторых тего переопределить некоторые стили.
Далее зададим стиль для абзаца, для вывода результата и кнопки.
Переходим отдельно к тегу input.
И здесь вернем рамку тегу инпут, которую мы отменили в псевдоклассе where. А так как псевдокласс where имеет нулевую специфичность, то данное правило сработает без проблем.
Если input будет в фокусе, то поменяем цвет рамки.
Переходим к разделу с выпадающими списками.
сделаем так чтобы у двух выпадающих списков и картинки со стрелочками было одинаковое промежуточное расстояние. С помощью свойства justify-content и значения space-between.
Теперь переходим к javascript. Код мы будем писать в отдельный файлах с расширением js, а не в html файле как мы это делали раньше. Создадим папку js где мы будем хранить файлы javaScript. Первый файл мы создавать не будем, а просто воспользуемся уже готовым. Называется он country-list где просто хранитмся объект у которого ключи – это коды валют, а значения это кода стран. Мы могли бы сами такое набрать, но на это бы ушло слишком много времени. А второй js файл мы создадим сами и назовем его просто script. Теперь подлючим эти два файла к нашей html странице с помощью тега script.
Начинаем писать javascript код. Сперва выберем все теги селект.
Затем через запятую отдельно выберем селект с id from, затем отдельно выберем select c id to, и еще получим доступ к кнопке.
Теперь нам надо создать теги option для тега select c кодами валют. Их нам надо создать для обоих тегов select. Но как это сделать?
Как мы знаем у нас есть два тега селект, а значит в переменной-массиве dropList их тоже два.
Нам надо написать такой код, чтобы программа добавила все ключи валют сперва в первый тег select, а потом во второй. Воспользуемся циклом for. Создадим переменную i равной 0. Эту переменную мы будем использовать для доступа сперва к первому, а потом ко второму тегу select в переменной dropList. Значит нам нужны будут значения 0, это первый тег select в массиве dropList и 1 – это уже второй тег селект Значит когда i будет равна двум мы должны прекратить цикл. Т.е. в условии пишем i<2, или i меньше количества значений в массиве, которых тоже 2. Получить количество значений в массиве мы можем с помощью свойства lenght. Затем пишем i++.
Теперь нам надо пройтись по всем ключам объекта. Этом мы сделаем с помощью for in. Создадим в скобках переменную currencyCode т.е. код валюты, дальше ставим in указываем объект countryList. Т.е. эта переменная пройдется по всем ключам объекта countryList. Затем создадим переменную optionTag , которая по сути и будет тегом option. Внутри этой переменной будет храниться такой текст. Пишем открывающий тег option, затем код валюты, и закрываем тег option. Затем добавляем эту строку внутрь тега select с помощью метода insertAdjacentHTML. В первом параметре указываем beforeend, во втором нашу переменную optionTag.
Т.е. сперва i будет равно 0, и все ключи добавятся в первый тег select, потом i станет равной одному и все ключи добавятся во второй тег select. А когда i станер равен двум, цикл прекратится.
Но теперь нам надо выбрать валюты по умолчанию. Для первого select это должен быть американский доллар, а для второго select это должен быть российский рубль.
Для этого создадим переменную select. И теперь когда currency code будет равной USD то select должен быт равен тексту “selected, в противном случае он должен быть равен пустой строке”. Начинаем набирать. Так как мы хотим, чтобы доллар был по умолчанию для первого тега select, то нам необходимо условие если i — 0.
И далее значение этой переменной мы добавим сюда в качестве атрибута.
Т.е. когда currency_code будет равной USD, то переменная selected будет равна тексту selected, и данный тег option будет выбран по умолчанию. А когда i не равно 0, т.е. равна 1, переменная будет иметь текст selected когда currency code будет равен RUB.
Вот эот весь код вообще можно написать в одну строку с помощью тернарного оператора. Давайте его перепишем.
Теперь нам надо будет менять флаг, когда пользователь выберет другую валюту. По умолчанию мы поставили в html коде флаги США и России.
Сделать это достаточно просто. Надо просто прикрепить к тегам select слушатель с событием change. Событие change срабатывает, когда значение элемента формы изменяется, и это событие используется в основном с элементами, такими как <input>, <select> и <textarea>. В нашем случае – это тег select.
Данный слушатель прикрепится к двум тегам селект благодаря переменной i. В качестве второго параметра будет стрелочная функция. В качестве, параметра у нее, как мы знаем выступает событие которое мы назовем просто e.
Внутри стрелочной функции сперва создадим переменную imgTag в которой будет необходимый нам тег img. В качестве значения сперва пишем событие e, дальше пишем свойство target, так мы получили доступ к тегу select, затем набираем свойство parentElement, так мы получаем родительский тег для select – а это тег тег div с id select box. И в этом теге див мы должны найти тег img. Это мы сделаем с помощью метода querySelector.
Далее мы должны изменить у этого тега ссылку на картинку. Это можно сделать с помощью свойства src. Указываем нужный только для названия странны пишем сперва объект country_list, затем ставим квадратные скобки, внутри квадратных скобок сперва пишем событие, таргет, и свойство value. Свойство value для тега селект будет равняться тексту выбранного тега option, что нам и нужно. Т.е. этот код будет возвращать нам код страны. И обязательно нам надо сделать код страны прописными буквами в ссылке с помощью метода toLowerCase.
Теперь пришло время создать функцию getExchangeRate который будет получать актуальный курс валюты, рассчитывать сколько это в рублях и выводит на экран.
Сперва получим доступ ко значению в поле ввода. Затем получим доступ где у нас будет выводиться результат. Далее создадим переменную amountVal значение которой будет равна значению в поле ввода. Теперь нам надо сделать так, что если пользователь введет 0 или оставит поле пустым, то значение в поле будет 1.
Двигаемся дальше.
А дальше, до подсчетов, мы отобразим текст “Ищу результат…”. За поле у нас отвечает exchangeRate, и воспользуемся свойством innerText, чтобы добавить текст.
Затем надо нам зайти на сайт exgangeRate, с Api которого мы и будем взаимодействовать. Регистрируемся.
Как видите у нас есть 1500 бесплатных обращений к этому сайту, точнее к его API с помощью данной ссылки. В этом месте мы будем вставлять необходимый курс валюты. По умолчанию здесь стоит доллар. Давайте посмотрим что возвратит данная ссылка. А возвратит она такой текст в формате JSON. И нас интересует из всего этого только conversion_rates где отображаются курс доллара по отношению ко всем остальным валютам. КОгда мы преобразуем этот JSON в объект, то conversion Rate будет внутренним объектом этого объекта.
Итак создадим переменную в значении которого будет эта ссылка.
Только в качестве валюты будет текущее значение первого selecta.
Далее делаем запрос к API сайта с помощью функции fetch. В параметре будет переменная url. Далее пишем then. Возвращаемый промис назовем response, и превратим его в объект. Как вы уже знаете метод Json также возвращает промис, но уже в виде объекта. Значит мы можем написать еще один метод then.
Создадим переменную, которая будет содержать курс первой валюты по отношению ко второй. Здесь как раз таки мы и обратимся ко внутреннему объекту conversion_rates. Обращаться к его свойствам мы будем через квадратные скобки, потому что только так мы можем обратиться к свойству с помощью текста. Затем вычисляем сколько первой валюты мы хотим перевести во вторую и применим к результату метод toFixed в параметре которого мы укажем сколько знаков после запятой следует отобразить. Нас устроит два. Здесь мы поставили скобки так как нам сперва надо вычислить это выражение, а потом уже применить к результату метод toFixed.
И далее выведем результат. Также обработаем ошибку если что-то пойдет не так. Далее запучтим функцию когда страница загрузится:
И когда мы нажмем на кнопку.
Проверяем. Все работает. КРоме этой кнопки. А это будет ваша домашняя работа – сделать так чтобы при нажатии на нее значение первого селекта становилось значением второго селекта и наоборот. Также вы должны тоже самое сделать и с флагами, а затем запустить функцию getExhangeRate.
