Ипотечный калькулятор
🛠️ Стек
ReactJS + TypeScript + CSS
💬 Основная информация о проекте
SPA-приложение, позволяющее клиенту банка, быстро и просто рассчитать срок и ежемесячную стоимость ипотеки.
Особенности:
- Кастомные хуки и утилита, для разбивки контента на строки по заданному разделителю.
- Кастомный ползунок для изменения значений в полях ввода на чистом HTML, CSS.
- "Горячий" поиск по словам внутри выпадающего списка с названием "Город покупки недвижимости".
- Подсказки при наведении на значок с восклицательным знаком.
- Вывод ошибок для каждого поля и валидация. Смена активного/не активного состояния кнопки "Продолжить".
- Связи полей "Стоимость недвижимости", "Первоначальный взнос", "Срок" и "Ежемесячный платёж", значения в каждом из которых может влиять на другие поля ввода.
- Возможность навигации по всем элементам при помощи клавиш Tab и Enter.
- Применение createPortal для перемещения кнопки "Продолжить" из основного блока в подвал приложения, что позволило сохранить основную логику в компоненте Main.
- Кросс-браузерная и адаптивная вёрстка.
- Чистый, оформленный код и подробные комментарии.
📚 Инструкция по запуску
1. Клонирование
git clone https://github.com/yuriyvyatkin/mortgage-calc.git
cd mortgage-calc
2. Запуск
npm i && npm run start
или
npm install
npm run start