- React, Webpack
- по макету Figma
- module CSS для стилей
- кроссбраузерность: Google Chrome, Android, Mobile Safari, Яндекс.Браузер, Firefox, Opera
- валидация на validator.w3.org
- По умолчанию минимальное разрешение макетов — 320px (в таком размере будут все дизайн-макеты), т.к. в среднем 25% всех посещений с мобильных устройств происходят именно с устройств с таким логическим разрешением по горизонтали.
- Если устройство уже, чем 320px, то пропорционально уменьшаем сайт с разрешения 320px до разрешения экрана пользователя (чтобы не появлялся горизонтальный скролл). Максимальное разрешение по умолчанию — 1440px.
- Если ширина экрана пользователя больше, чем 1440px, то пропорционально масштабируем макет 1440px до разрешения экрана пользователя с пропорциональным расширением отступов слева и справа (для каждого проекта процент отступов индивидуальный).
- Калькулятор должен инициализироваться с указанными значениями по умолчанию;
- В каждое поле можно ввести значение как с клавиатуры, так и с помощью ползунка;
- При выборе значения с помощью ползунка, все числа должны пересчитываться динамически в процессе движения ползунка, а не только после его остановки;
- У каждого поля есть максимальное и минимальное значение — ползунок должен ограничивать пользователя в выборе данных, а при вводе некорректного значения с клавиатуры, оно должно сбрасываться к ближайшему корректному числу (максимуму или минимуму).
- Для поля “Стоимость автомобиля” границы: 1 млн.руб. — 6 млн.руб.;
- Для поля “Первоначальный взнос” границы: 10% - 60% (здесь ввод происходит именно в процентах от стоимости, а не рублях; рубли - результат расчета от введенной стоимости автомобиля);
- Для поля “Срок лизинга” границы: 1 - 60 месяцев;
- Формулы расчета для полей:
- Процентная ставка = 3.5%
- Для поля “Первоначальный взнос”: Первоначальный взнос (в процентах) * Стоимость автомобиля
- Для поля “Сумма договора лизинга”: Первоначальный взнос + Срок кредита в месяцах * Ежемесячный платеж
- Для поля “Ежемесячный платеж от”: (Стоимость автомобиля - Первоначальный взнос) * ((Процентная ставка * (1 + Процентная ставка)^Срок кредита в месяцах) / ((1 + Процентная ставка)^Срок кредита в месяцах - 1))
const monthPay = (price - initial) * ((0.035 * Math.pow((1 + 0.035), months)) / (Math.pow((1 + 0.035), months) - 1));
- По кнопке “Оформить заявку” должен формироваться запрос, который отправляет все данные калькулятора на бэкенд, например, чтобы потом backend мог использовать эти данные для передачи в CRM-систему.
- URL для запроса: https://hookb.in/eK160jgYJ6UlaRPldJ1P
- Метод запроса: POST
- Заголовок Content-Type: application/json
- Все данные с формы передавать в JSON-формате в теле запроса.
- Пример тела запроса:
{
"car_coast": 4000000,
"initail_payment": 400000,
"initail_payment_percent": 10,
"lease_term": 24,
"total_sum": 5000000,
"monthly_payment_from": 30000
}
- API всегда возвращает:
{
"success": true
}
- В момент клика по кнопке кнопка должна блокироваться от возможности повторной отправки данных на время выполнения запроса к бэкенду, а внутри кнопки отображаться прелоадер. Инпуты и слайдеры на время отправки должны блокироваться.