Skip to content

Latest commit

 

History

History

currency-converter

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
css
css
 
 
res
res
 
 
README.md
README.md
 
 
index.html
index.html
 
 

README.md

Задача 2. Конвертер валют

В рамках домашнего задания к лекции «Работа с HTML-формами»

Описание

Реализовать функционал конвертера валют:

  1. Получить данные GET-запросом по адресу https://neto-api.herokuapp.com/currency.
  2. Поместить список полученных валют в теги select с идентификаторами from и to в виде пунктов выпадающего списка (тег option).
  3. Написать скрипт, который будет конвертировать введенное в поле число из исходной валюты, заданной в поле #from, в конечную валюту, выбранную в выпадающем списке #to.
  4. Вывод результата конвертации должен происходить немедленно при изменении любого из параметров.
  5. Результат конвертации должен округляться до двух чисел после запятой.
  6. Результат следует выводить в тег <output id="result">.

Пример конвертера

Данные

API по адресу https://neto-api.herokuapp.com/currency вы получите закодированный в JSON массив валют, где каждая валюта является объектом и имеет свойства:

  • code — трехбуквенный код валюты;
  • title — наименование валюты в родительном падеже;
  • value — курс валюты в условных единицах.

Интерфейс

  • <input type="number" id="source"> — числовое поле для ввода суммы, которую нужно конвертировать.
  • <output id="result"> — поле для вывода результата конвертации.
  • <select id="from"> — поле выбора исходной валюты.
  • <select id="to"> — поле выбора валюты, в которую необходимо конвертировать.

Меткой каждого тега option должен быть трехбуквенный код валюты, а значением — курс валюты. Списки значений для обоих полей выбора валюты должны получиться одинаковыми.

До момента, когда данные будут загружены, пользователь видит прелоадер — <div id="loader">. Чтобы его показать, удалите у него класс hidden. Когда данные загружены, нужно опять спрятать прелоадер и показать форму конвертера (<main id="content">), убрав у контейнера класс hidden.

Реализация

В песочнице CODEPEN

В онлайн-песочнице на CODEPEN.

Локально с использованием git

В репозитории на GitHub.

Инструкция по выполнению домашнего задания

В онлайн-песочнице

Потребуется только ваш браузер.

  1. Открыть код в песочнице.
  2. Нажать кнопку «Fork».
  3. Выполнить задание.
  4. Нажать кнопку «Save».
  5. Скопировать адрес страницы, открытой в браузере.
  6. Прислать скопированную ссылку через личный кабинет на сайте netology.ru.

Локально

Потребуются: браузер, редактор кода, система контроля версий git, установленная локально, и аккаунт на GitHub или BitBucket.

  1. Клонировать репозиторий с домашними заданиями git clone https://github.com/netology-code/hj-homeworks.git.
  2. Перейти в папку задания cd hj-homeworks/html-forms/currency-converter.
  3. Выполнить задание.
  4. Создать репозиторий на GitHub или BitBucket.
  5. Добавить репозиторий в проект git remote add homeworks %repo-url%, где %repo-url% — адрес созданного репозитория.
  6. Опубликовать код в репозиторий homeworks с помощью команды git push -u homeworks master.
  7. Прислать ссылку на репозиторий через личный кабинет на сайте netology.ru.