CalorieCalculatorJS
readme.md
CalorieCalculatorJS
Описание:
Это простое интерактивное приложение, для отслеживания потребления калорий.
Как использовать
- Добавление продуктов в общий список:
- Добавьте продукты, указав название, калорийность и описание.
- Продукты будут сохранены в localStorage и подгружены при следующем открытии страницы.
- Вы можете удалять продукты из списка.
- Продукты можно сортировать и фильтровать.
- Установка целевых калорий на текущий день:
- Введите желаемую целевую калорийность на текущий день и сохраните.
- Отслеживание съеденных продуктов за текущий день:
- Съеденные продукты отображаются только за сегодня.
- Выберите карточку продукта и перетащите ее в область съеденных продуктов.
- Управляйте списком съеденных продуктов, например, удаляйте отдельные позиции.
- При превышении установленной нормы калорий вызывается уведомление.
- Отображение графика:
- На диаграмме показываются соотношения целевых и съеденных калорий по каждой дате.
- Красным цветом обозначены целевые калории за текущую дату.
- Синим цветом обозначено общее количество съеденных калорий за текущий день.
- Сброс данных:
- Вы можете сбросить все данные, используя кнопку "Очистить все данные".
Реализация:
1. Добавление продуктов:
вsaveProduct(product)
:./src/scripts/function/ProductManager.js- Получает данные продукта и сохраняет его в localStorage.
2. Удаление продукта:
вdeleteProduct(productId)
:./src/scripts/function/ProductManager.js- Удаляет продукт из localStorage по его ID.
3. Добавление калорийных целей:
вsaveGoals(caloriesGoal)
:./src/scripts/function/ProductManager.js- Сохраняет установленные целевые калории на текущий день в localStorage.
4. Добавление съеденных продуктов:
вaddToSelectedProducts(product)
:./src/scripts/function/ProductManager.js- Добавляет продукт к списку съеденных продуктов за текущий день в localStorage.
5. Удаление съеденного продукта:
вremoveSelectedProduct(productId)
:./src/scripts/function/removeSelectedProduct.js- Удаляет конкретный продукт из списка съеденных продуктов за текущий день в localStorage.
6. Сброс всех данных:
вclearAllData()
:./src/scripts/function/clearAllData.js- Удаляет все данные из localStorage и перезагружает страницу.
7. Отображение продуктов:
вdisplayProducts()
:./src/scripts/function/displayFunctions.js- Отображает отфильтрованные и отсортированные продукты.
8. Отображение целевых калорий:
вdisplayGoals()
:./src/scripts/function/displayFunctions.js- Отображает установленные целевые калории на текущий день.
9. Отображение съеденных продуктов:
вdisplaySelectedProducts()
:./src/scripts/function/displayFunctions.js- Отображает съеденные продукты за текущий день.
10. Отображение графика:
вdisplayChart()
:./src/scripts/function/cart.js- Отображает график с соотношением целевых и съеденных калорий по датам.
11. Открытие и закрытие модальных окон:
,openModal()
,closeModal()
,openGoalsModal()
вcloseGoalsModal()
:./src/scripts/function/modal.js- Отвечают за открытие и закрытие модальных окон.
12. Отображение предупреждающего модального окна:
вshowWarningModal()
:./src/scripts/function/modal.js- Показывает предупреждающее модальное окно при превышении дневного лимита калорий.
13. Различные обработчики событий формы продукта:
,handleProductFormSubmit(e)
вhandleProductListClick(e)
:./src/scripts/function/handleProduct.js- Обрабатывают отправку формы продукта и удаление продукта из списка.
14. Обработка событий перетаскивания продукта:
,allowDrop(e)
,handleDrop(e)
вhandleDragStart(e, productId)
:./src/scripts/function/dragAndDropFunctions.js- Позволяют браузеру обрабатывать событие перетаскивания и обрабатывают события начала и завершения перетаскивания продукта.
15. uuid.js
: Генерация 'уникальных' идентификаторов для продуктов.
uuid.js
Языки
JavaScript
- HTML
- CSS