📌 Кейс: Калькулятор рациона за вечер

Запрос клиента:
«Добрый день! У нас сервис доставки готовых рационов на неделю. Клиенты путаются, сколько порций им нужно на семью. Хочу простой калькулятор: вводишь количество человек и дней — получаешь сумму и состав рациона. Не нужен сложный сайт, просто рабочий инструмент, который можно открыть по ссылке.

🟩 Этап 1. Переработка запроса и план действий Я переформулировал задачу так:
Разработка MVP-инструмента автоматизации первичного расчета заказа. Цель — снизить нагрузку на отдел продаж на 40% и предоставить клиенту готовый расчет за 30 секунд.

План был такой:

✅ Собрать тарифы и формулы расчётов (Classic = 790 ₽/день, Balance = 950 ₽/день, Vegan = 1100 ₽/день; дети считаются как $0{,}65$ взрослого);
✅ Сформировать детальный промпт для GigaChat;
✅ Проверить безопасность (XSS) и адаптивность под смартфон..

🟦 Этап 2. Генерация кода через ИИ Промт для GigaChat выглядел так:

Роль: Ты Senior Frontend-разработчик с уклоном в UX/UI и безопасность веб-приложений.

Задача: Напиши полный, самодостаточный HTML/CSS/JS код для одностраничного калькулятора готовых рационов питания.

Контекст (Бизнес-логика):

Тарифы: Classic — 790 ₽/день, Balance — 950 ₽/день, Vegan — 1100 ₽/день.
Дети до 12 лет считаются как 0.65 взрослого.
Минимальный заказ — от 3 дней.
В день всегда 4 контейнера (прием пищи).
Формула итоговой суммы: (Взрослые + Дети * 0.65) * Дни * Цена_Тарифа.

Требования к интерфейсу (UI/UX):

Два поля ввода type="number" с шагом 1: "Количество взрослых" (по умолчанию 1), "Количество детей" (по умолчанию 0).
Ползунок input type="range": "На сколько дней" (min=3, max=28, шаг 1, значение по умолчанию 7).
Выпадающий список select: "Выберите тариф".
Чекбокс: "Добавить запас еды (+10%)". По умолчанию выключен.
Мгновенный пересчет без кнопки «Рассчитать» (используй события oninput или change).
Вывод результатов тремя крупными строками:
Итого порций-суток: [Число]
Сумма к оплате: [Форматированная сумма ₽] (пробел как разделитель тысяч)
Пищевых контейнеров: [Число]

Требования к качеству кода (Production Level):

Оберни весь скрипт в IIFE (function() { ... })();, чтобы не мусорить в глобальную область видимости.
Все значения из полей ввода принудительно приводи к числу через parseInt(value) или унарный плюс +value. Если пользователь вводит буквы или отрицательные числа — сбрасывай поле на 0.
Добавь визуальный индикатор загрузки результата (например, легкое затенение блока на 100мс при расчете), чтобы показать реактивность.
Стили CSS пиши внутри тега <style>. Используй системные шрифты (-apple-system, BlinkMacSystemFont...). Сделай Air-дизайн: много воздуха, мягкие тени, скругления углов 12px.
Палитра: Фон формы светлый (#F9FAFB), границы полей тонкие (#E5E7EB), текст темно-серый (#37474F), акцентная кнопка/ссылка темно-синяя (#0D47A1), выделение активного ползунка теплое (#FFCC80).
Адаптивность: Блок должен занимать 100% ширины родителя, иметь внутренние отступы (padding) 16px, на мобильных устройствах размер шрифта кнопок и полей должен быть комфортным для нажатия пальцем (не менее 16px base font-size).
Доступность (Accessibility): Каждому полю добавь тег <label> с атрибутом for, связанным с id инпута.

Результат: чистый Vanilla JS с мгновенным пересчётом суммы без кнопки «Рассчитать». Код обернут в IIFE, все данные приводятся к числу (parseInt). Это гарантирует защиту от букв и отрицательных значений.

🟪 Этап 3. Сборка интерфейса и QA-тестирование.

Проведено тестирование:

Отрицательные числа → сбрасываются на 0.
Буквы в поле ввода → игнорируются.
Попытка XSS-внедрения <img src=x onerror=alert(1)> → не возможно.

🟧 Этап 4. Результат и упаковка услуги Получился рабочий инструмент по ссылке (https://disk.yandex.ru/d/9BAhsozpmE1xjg). Пользователь двигает ползунок — сумма меняется мгновенно.

Упаковка услуги:

Автоматизация первичного расчета заказа: интерактивный конфигуратор рациона на no-code стеке.
#портфолио #вайбкодинг #nocode #js #автоматизация #foodtech #нейрокузница