bulakhovalexey/leasing-calculator

Верстка калькулятора лизинга

Калькулятор расчета лизинга, выполненный по макету из Figma.

Результат верстки загружен на github-pages

Проект собирается с помощью Gulp + webpack.

• файлы проекта, созданные в режиме разработки, находятся в ветке main проекта
• файлы собранного проекта в векте gh-pages (оставил в сборке не минифицированные версии CSS и JS файлов)

Для запуска проекта локально необходимо:

• скачать файлы репозитория (ветка main)
• инициализировать проект командой "npm i"
• режим разработки запустить командой "npm run dev"
• режим продакшена -"npm run build"

Верстка

Особенности верстки:

• реализована с использованием препроцессора SASS в синтаксисе SCSS и методологии БЭМ
• все величины указаны в относительных единицах (rem,em,%) и адаптируются к разному размеру шрифта по умолчанию(если вдруг пользователь захочет его изменить в настройках браузера - верстка не сломается)
• реализовано плавное изменение размера шрифтов и отступов (размеры шрифтов и отступов будут отзывчиво меняться при ресайзе окна и достугнут минимального значение(по макету) при разрешении 320px), данный миксин реализован на базе calc() и clamp()
• основные цвета макета вынесены в переменные
• функционал слайдеров реализован с использованием библиотеки noUiSlider и кастомизирован под текущую задачу

Функционал калькулятора:

• функционал калькулятора реализован согласно ТЗ
• код состоит из вспомогательных функций, функций инициализации слайдеров с данными из макета, обработчиков событий на изменение полей ввода с клавиатуры и изменение ползункаками, функция отправки формы
• при отправке формы симитирована задержка в 5 сек, чтобы увидеть анимацию спинера у кнопки, далее алерт и блокировка формы