В этом уроке мы с вами сделаем приложение Конвентер валют. Это приложение будет получат информацию о курсе необходимой валюты с другого сайта, выполнять подсчеты, и выводить данные в этом окне. Давайте начнем его создавать.
Сперва создадим папку Exchange Rate, т.е. обменный курс. Создадим внутри этой папки файл index.html. Добавим необходимые теги.
В приложении у меня будет использоваться картинка со стрелками. Ее я загружу с сайта font-awesome. (https://cdnjs.com/libraries/font-awesome) Для этого нам надо на этом сайте скопировать эту ссылку на их css файл и добавить на наш сайт с помощью тега линк.. Можно конечно было разместить картинку в файлах нашего сайта, но я реших воспользоваться таким способом. Теперь создадим наш css файл с именем style и тоже подключим к html файлу.
Теперь переходим к тегу body.
Сам конвертер валют будет находится внутри тега div. Зачастую такие таким тегам, внутри которого находится само приложение задают id wrapper, т.е. обертка.
Первым тегом внутри тега див будет заголовок h1.
А дальше будет идти форма. Внутри формы будут два раздела. В первом разделе будут находится поле для вода и кнопка. Начинаем набирать этот раздел. Он будет находится внутри тега секшн. Далее будет идти текст Введите сумму. Затем идет поле. Значение по умолчанию будет 1.
Теперь мы должны создать раздел, где мы будем выбирать необходимые валюты. Для этого также используем тег section. Id будет drop-lists, т.е. выпадающие списки.
Создаем первый выпадающий список. У этого див id будет from. Т.е. здесь мы указываем валюту, которую собираемся конвертировать. Текст рядом с этим выпадающим списком будет такой. Далее создаем эту часть выпадающего списка. Всё это будет находится внутри тега div с классом select-box. Внутри этого div cперва у нас идет флаг страны. Флаги мы тоже подключим удаленно. Итак, нам нужен флаг США. Получить его удаленно можно по такой по ссылке. Ставим слэш, пишем необходимый размер, и потом сам файл с картинкой.
Далее пишем тег селект, т.е. тег который отвечает за сам выпадающий список, и внутри пока ничего не пишем. Сам список мы вставим с помощью JAvaScript.
После первого списка у нас идет иконка стрелок. Помните, мы в head добавляли css файл другого сайта. Чтобы подгрузить картинку со стрелками оттуда, надо писать так. Сперва пишем тег див, внутри которого будет хранится картинка, потом строчный тег i. Чтобы на месте этого тега i появилась картинка, надо написать такой класс.
Готово. Теперь надо создать второй выпадающий список с российским флагом. Просто скопируем эти теги, поменям текст и флаг.
Остается создать раздел с результатом. и кнопку. Id у раздела с результатом будет exchange-rate, т.е. обменный курс. А текст у кнопки буде “Узнать обменный курс”.
HTML код готов. Переходим к CSS. Я решил с этой практики больше не проговаривать каждое свойство CSS, так как это затягивает видео, да и все эти свойства думаю вам уже известны. Поэтому я сейчас молча наберу все CSS стили. Если вам будет, что-то непонятно в этом css-коде, то пишите в комментариях, я сразу же отвечу. Итак, начнем.
Теперь переходим к javascript. Код мы будем писать в отдельный файлах с расширением js, а не в html файле как мы это делали раньше. Создадим папку js где мы будем хранить файлы javaScript. Первый файл мы создавать не будем, а просто воспользуемся уже готовым. Называется он country-list где просто ,будет хранится объект у которого ключи – это коды валют, а значения это кода стран. Перенесем необходимый файл в папку.
Мы могли бы сами такое набрать, но на это бы ушло слишком много времени. А второй js файл мы создадим сами и назовем его просто script. Теперь подключим эти два файла к нашей html странице с помощью тега script.
Начинаем писать javascript код. Сперва выберем все теги селект. А их у нас всего два.
Затем через запятую отдельно выберем селект который находится в див с id from, далее отдельно выберем select который находится в див c id to, и еще получим доступ к кнопке.
Теперь нам надо создать теги option для тегов select c кодами валют. Но как это сделать?
Как мы знаем у нас есть два тега селект, а значит в переменной-массиве dropList их тоже два.
Нам надо написать такой код, чтобы программа добавила все ключи валют сперва в первый тег select, а потом во второй. Для этого мы можем воспользоваться циклом for, где когда переменная i будет равна 0, то мы внутри этого цикла фор добавим все ключи валют в первый тег селект, так как первый тег селект находится в порядковом номере 0 в массиве DROP_LISTS, а затем когда i будет равна 1, то мы добавим все ключи во второй тег селект. Далее когда i будет равна 2, то мы просто завершим цикл for.
Создадим необходимый цикл for. Когда i будет равна двум мы должны прекратить цикл. Т.е. в условии пишем i<2, или i меньше количества значений в массиве, которых тоже 2. Получить количество значений в массиве мы можем с помощью свойства lenght. Затем пишем i++.
Итак цикл фор готов. Теперь в теле этого цикла фор нам надо добавить все ключи в первый тег select, а потом во второй. Это можно сделать с помощью цикла for in где мы создадим переменную, которая пробежится по всем ключам объекта и добавит их сперва в первый тег селект, а когда наш этот цикл фор перейдет на следующую итерацию, то фор ин добавит все ключи во второй тег селект.
Давайте его наберем.
В теле этого фор ин нам надо создать константу или переменную, которая будет содержать html код в формате текса, который мы и будем добавлять в тег селект. Между тегами опшин добавим ключ текущей итерации фор ин.
И теперь нам остается только добавить этот код в текущий тег select.
А добавим мы его в тег селект с помощью нового для нас метода – insertAdjacentHTML.
Чтобы добавить код html код html на страницу мы уже использовали методы InnerHTML и AppendChild. Теперь узнали еще про метод insertAdjacentHTML. Но чем же все эти методы отличаются друг от друга?
Когда вы добавляете html-код в тег select, через метод innerHTML, то если внутри этого тега select есть другие теги, то они прото перезапишутся на ваш код. Т.е. в данном случае этот метод не поможет, так как будет постоянно перезаписывать код а не добавлять его.
Метод AppendChild добавляет только DOM объекты. Т.е. вы не можете просто добавить html код в виде текста, как мы это делали с методом innerHTML. В прошлой практике мы создавали эти DOM объекты с помощью метода createElement, а затем добавляли их на сайт с помощью метода appendChild.
Метод insertAdjacentHTML похож на innerHTML тем, что мы также можем добавить html код в метод как обычную строку, но в отличие от innerHTML, insertAdjacentHTML не заменяет код, а добавляет его. У данного метода два параметра.
В первом парметре указываем где будет данный находится добавляемый нами код. Всего 4 варианта. Допустим мы собираемся добавить тег article в тег section. Итак, параметры такие:
- ‘beforebegin’ – вставляет тег артикл перед тегом section.
- ‘afterbegin’ – вставляет артикл как первый дочерний тег section
- ‘beforeend’ – вставляет артикл перед закрывающим тегом секшин
- ‘afterend’ – вставляет артикл после тега секшн.
Переходим к нашему коду, чтобы добавить необходимый html код сперва пишем текущий тег select, затем пишем метод insertAdjacentHTML, в первом параметре укажем ‘beforeend’, а во втором укажем переменную optionTag где и будет хранится необходимый html код.
Вроде бы всё, но на самом деле нет. Нам же нужны валюты по умолчанию: а это доллар для первого тега select, и рубль для второго. Мы это сделаем так, для начала создадим переменную selected, которая будет внутри себя содержать текст аргумента для тега опшин. Добавим этот аргумент в тег опшин. И теперь нам надо прописать условие так, если мы имеем дело с первым тегом select и ключ равен USD, томы должны в переменную selected добавить текст selected. А если для первого тега select ключ не равен USD то мы добавим значение пустой строки.
Получится так, что когда для первого тега select ключ будет равен USD, то данный тег опшин будет иметь атрибут selected, и данная валюта будет по умолчанию для первого тега select. Давайте наберем этот код.
Так, но нам же нужно и для второго тега селект поставить валюту по умолчанию. Давайте добавим еще условие.
А давайте сократим этот код, переписав его в тернарный оператор.
Давайте проверим наш код. Как видите списки загрузились. Но если мы выберем другую валюту, то флаг не поменяется. Надо это исправить. Как мы это сделаем? Мы просто подключим к каждому тегу селект слушатель, который будет реагировать на изменения в этом элементе формы.
Сперва пишем текущий тег селект. Добавляем к нему слушатель, так как это элемент формы, событие нам нужно change. Во втором параметре создадим стрелочную функцию. параметр для события назовем event..
Внутри стрелочной функции сперва создадим переменную imgTag в которой будет необходимый нам тег img. В качестве значения сперва пишем событие event, дальше пишем свойство target, так мы получим доступ к тегу select c которым взаимодействует пользователь, затем набираем свойство parentElement, так мы получим родительский тег для select – а это тег тег div с id select box. И в этом теге див мы должны найти тег img. Это мы сделаем с помощью метода querySelector.
Затем мы должны изменить у этого тега имдж ссылку на картинку. Это можно сделать с помощью свойства src. Указываем нужный , только для названия странны пишем сперва объект country_list, затем ставим квадратные скобки, так как мы в квадратных скобках укажем выражение для обращения к нужному свойству объекта country_list. Итак внутри квадратных скобок сперва пишем событие, затем таргет, и свойство value. Свойство value для тега селект будет равняться тексту выбранного тега option, что нам и нужно. Т.е. этот код будет возвращать нам код страны. И обязательно нам надо сделать в ссылке код страны прописными буквами с помощью метода toLowerCase. Проверяем. Как видите, всё работает.
Теперь пришло время создать функцию getExchangeRate который будет получать актуальный курс валюты, рассчитывать сколько это в рублях и выводит на экран.
Сперва получим доступ ко значению в поле ввода. Затем получим доступ где у нас будет выводиться результат. Далее создадим переменную amountVal значение которой будет равна значению в поле ввода. Теперь нам надо сделать так, что если пользователь введет 0 или оставит поле пустым, то значение в поле будет 1. И значение переменной тоже будет 1
Двигаемся дальше.
А дальше, до подсчетов, мы отобразим текст “Ищу результат…” в соответствующем месте программы. За вывод текста у нас отвечает див с айди exchangeRate. Воспользуемся свойством innerText, чтобы добавить текст.
Затем надо нам зайти на сайт exgangeRate, с Api которого мы и будем взаимодействовать (https://www.exchangerate-api.com/). Регистрируемся.
Как видите у нас есть 1500 бесплатных обращений к этому сайту, точнее к его API с помощью данной ссылки. В этом месте мы будем вставлять необходимый курс валюты. По умолчанию здесь стоит доллар. Давайте посмотрим что возвратит данная ссылка. А возвратит она такой текст в формате JSON. И нас интересует из всего этого только conversion_rates где отображаются курс доллара по отношению ко всем остальным валютам. КОгда мы преобразуем этот JSON в объект, conversion Rate будет его свойством или внутренним объектом.
Итак создадим переменную в значении которого ссылка с сайта.
Только в качестве валюты у нас будет текущее значение первого selecta.
Далее делаем запрос к API сайта с помощью функции fetch. В параметре будет переменная url. Затем пишем then. Возвращаемый промис назовем response, и превратим его в объект. Как вы, наверное, помните метод Json также возвращает промис с объектом полученного их текста JSON. Значит мы можем написать еще один метод then.
Создадим переменную, которая будет содержать курс первой валюты по отношению ко второй. Здесь как раз таки мы и обратимся ко внутреннему объекту conversion_rates. Обращаться к его свойствам мы будем через квадратные скобки, потому что только так, повторюсь, мы можем обратиться к свойству с помощью выражения. Затем вычисляем сколько первой валюты мы хотим перевести во вторую и применим к результату метод toFixed в параметре которого мы укажем сколько знаков после запятой следует отобразить. Нас устроит два. Здесь мы поставим скобки, так как нам сперва надо вычислить это выражение, а потом уже применить к результату метод toFixed.
И далее выведем результат. Также обработаем ошибку если что-то пойдет не так. Теперь запустим функцию getExgangeRate когда страница загрузится:
И когда мы нажмем на кнопку.
Проверяем. Все работает. КРоме этой кнопки. А это будет ваша домашняя работа – сделать так чтобы при нажатии на нее значение первого селекта становилось значением второго селекта и наоборот. Также вы должны тоже самое сделать и с флагами, а затем запустить функцию getExhangeRate.
