Ипотечный калькулятор

🛠️ Стек

ReactJS + TypeScript + CSS

💬 Основная информация о проекте

SPA-приложение, позволяющее клиенту банка, быстро и просто рассчитать срок и ежемесячную стоимость ипотеки.

Особенности:

1. Кастомные хуки и утилита, для разбивки контента на строки по заданному разделителю.
2. Кастомный ползунок для изменения значений в полях ввода на чистом HTML, CSS.
3. "Быстрый поиск" по словам внутри выпадающего списка с названием "Город покупки недвижимости".
4. Подсказки при наведении на значок с восклицательным знаком.
5. Вывод ошибок для каждого поля и валидация. Смена активного/не активного состояния кнопки "Продолжить".
6. Связи полей "Стоимость недвижимости", "Первоначальный взнос", "Срок" и "Ежемесячный платёж", значения в каждом из которых может влиять на другие поля ввода.
7. Возможность навигации по всем элементам при помощи клавиш Tab и Enter.
8. Применение createPortal для перемещения кнопки "Продолжить" из основного блока в подвал приложения, что позволило сохранить основную логику в компоненте Main.
9. Кросс-браузерная и адаптивная вёрстка.
10. Чистый, оформленный код и подробные комментарии.

📚 Инструкция по запуску

1. Клонирование

git clone https://github.com/yuriyvyatkin/mortgage-calc.git

cd mortgage-calc

2. Запуск

npm i && npm run start

или

npm install

npm run start