Моя одна из первых работ в веб-разработке 🎓 🎓
Данная страница разделена на 2 части по функционалу и контенту:
- Первая: информативная часть о блоках с текущей информацией о валютах
- Вторая: калькулятор расчета валют
- Для написания структуры стилей использовалась БЭМ методология
- Использовалась стилевая библиотека HTML Bootstrap 5
В качестве основы реализации виджета об информации о каждой валюте, использовался комбинированный бейдж Bootstrap 5 с миниатюрой страны отображаемой валюты и динамического шаблона с текстом. Информация в бейдже включает в себя:
- USD - обозначение текущей валюты
- Наименование валюты
- Комбинированная строка состоящая из:
- Если курс к рублю поднялся отображается красный треугольник, опустился - зеленый
- Текущий курс с пояснительным выделением, согласно отображению цвета треугольника
- Предыдущий курс
- Разница между текущим курсом и курсом на вчера
- Изменение курса в процентном соотношении
- Дата на которую курс актуален
Всего отображено 9 блоков для: Доллара, Евро, Австралийского доллара, Британского фунта, Белорусского рубля, Гонконгского доллара, Китайского юаня, Индийских рупий, Канадского доллара
Вторая часть - блок с конвертером валют. При выборе исходной валюты и конвертируемой с указанием количества происходит мнгновенный пересчет с отображением результатов в соответствующих тематических блоках Отдаю, Получаю
В качестве запроса к бэкенду использовался нативный API JS fetch. Данные с бэкенда приходят в виде json строки с ресурса: Курсы валют ЦБ РФ в XML
Проект, развернутый на Github: GitHub Pages
