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

Ипотечный калькулятор
https://github.com/yuriyvyatkin/mortgage-calc

business-logic react-custom-hooks react-portal useeffect useref

Last synced: about 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/yuriyvyatkin/mortgage-calc
• Owner: yuriyvyatkin
• License: mpl-2.0
• Created: 2023-08-22T17:31:25.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2023-12-29T07:47:38.000Z (about 1 year ago)
• Last Synced: 2024-11-09T10:19:03.603Z (3 months ago)
• Topics: business-logic, react-custom-hooks, react-portal, useeffect, useref
• Language: TypeScript
• Homepage: https://yuriyvyatkin.github.io/mortgage-calc/
• Size: 336 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

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

**🛠️ Стек**

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

```