Концепт: калькулятор стоимости ремонта на JavaScript для сайта «Квадрат»

Используемые навыки JavaScript Веб-программирование Верстка Мобильные сайты Скрипты / Web-приложения

Описание

Разработать концепт страницы вымышленной компании по ремонту квартир «Квадрат» (без заказчика): дизайн, вёрстку и логику калькулятора стоимости ремонта на чистом JavaScript без библиотек. Калькулятор должен был включать выбор типа ремонта, ползунок площади, счётчики комнат и санузлов, дополнительные опции и мгновенный пересчёт стоимости.

Решение

— Разработала дизайн страницы и сверстала её с адаптивом: на телефоне варианты и опции в одну колонку, блок результата под калькулятором.
— Реализовала логику калькулятора на чистом JavaScript без библиотек.
— Настроила выбор типа ремонта: косметический, капитальный, дизайнерский.
— Добавила ползунок площади от 20 до 200 м² и счётчики комнат и санузлов.
— Включила дополнительные опции: демонтаж, тёплый пол, натяжные потолки, закупка материалов.
— Организовала мгновенный пересчёт результатов при любом изменении: итоговая цена, цена за м², разбивка по четырём статьям с полосами, срок работ в неделях с правильным склонением слова «неделя».
— Закрепила блок результата при прокрутке и пометила его aria-live для экранных дикторов.

Результат

Получила полноценный концепт страницы с рабочим калькулятором: все параметры пересчитываются мгновенно, раскладка по статьям и срок отображаются корректно, на мобильных интерфейс адаптирован, блок результата доступен для скринридеров. Реальных данных по конверсии нет, так как проект концептуальный.