CaloTrack — это веб-приложение, созданное для людей, которые хотят лучше понимать своё питание, отслеживать баланс БЖУ (белки, жиры, углеводы) и контролировать свой вес без сложных таблиц и приложений.
Проект разрабатывался как учебный и практический, но при этом обладает реальной пользой и может использоваться в повседневной жизни.
- Предоставить простой и понятный инструмент для расчёта суточной нормы калорий
- Помочь пользователям отслеживать состав рациона: белки, жиры, углеводы
- Рассчитывать ИМТ и визуализировать изменение веса на протяжении 12 месяцев
- Предоставить справочную информацию о продуктах
- Реализовать полностью клиентскую архитектуру без серверов
- Расчёт калорий с учётом пола, возраста, роста, веса и уровня активности
- Выбор цели: набор массы, поддержание или похудение
- Подсчёт суточной нормы:
- Калорий
- Белков
- Жиров
- Углеводов
- Круговая диаграмма с соотношением БЖУ
- Столбчатая диаграмма изменения веса на протяжении 12 месяцев
- Визуальный прогноз того, как изменится вес при текущем калораже
- Автоматический расчёт ИМТ на основе введённых данных
- Комментарий к результату:
- Недостаток массы
- Норма
- Избыточный вес
- Ожирение и его степени
- Сохраняет последние 20 расчётов в
localStorage - Позволяет просматривать свои предыдущие данные
- Возможность очистки истории
Информационные страницы о продуктах:
- Белки: курица, яйца, рыба и другие источники
- Углеводы: рис, макароны, картофель, фрукты
- Жиры: масло, орехи, авокадо и др.
Каждая категория представлена карточками с иконками и подписями — минималистично и удобно.
- HTML5 — структура сайта
- CSS3 — современная стилизация, тени, градиенты, адаптивность
- JavaScript (Vanilla) — вся логика работает без фреймворков
- Chart.js — красивые и простые в использовании графики
- LocalStorage API — хранение истории без бэкенда
calotrack/
├── index.html # Главная страница с описанием
├── calculator.html # Основной калькулятор
├── history.html # История расчётов
├── proteins.html # Информация о белках
├── fats.html # Информация о жирах
├── carbs.html # Информация об углеводах
├── style.css # Единый стиль интерфейса
├── script.js # Главная логика приложения
├── history.js # Обработка истории расчётов
├── img/ # Иконки и изображения продуктов
└── README.md # Документация проекта
- Работа без интернета после первого открытия (всё локально)
- Удобный интерфейс, оптимизированный под десктопы
- Использование современных веб-стандартов
- Плавные анимации и переходы
- Минимальный порог входа: всё работает в браузере
Если хочешь предложить идею, сообщить об ошибке или просто поболтать — пиши:
- 📧 Email: Disketion-partner@yandex.ru
- 💬 Telegram: Reshapiz
- 🖥️ GitHub: Disketion
Проект распространяется по лицензии MIT.
Свободно используй, изменяй и распространяй с указанием автора.
CaloTrack — контроль питания может быть простым.