Skip to content

Added a Food Journal – Browser-Based Meal Tracking Application #1784

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Added a Food Journal – Browser-Based Meal Tracking Application #1784

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e662bb1
Add files via upload
Praneesha-2006 Sep 2, 2025
5b83a0b
Merge branch 'main' into main
Praneesha-2006 Oct 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 34 additions & 0 deletions Beginner_Projects/food_journal/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
# food-journal
A browser-based meal tracking app built with HTML, CSS, and JavaScript. Lets users log meals by type (breakfast, lunch, dinner), view ingredient-level nutrition breakdowns, calculate daily totals, and visualize macronutrients with interactive charts using Chart.js. Data is stored locally for persistent tracking without a backend.
🍽 Meal Logger

A browser-based meal tracking app built with HTML, CSS, and JavaScript. Easily log your daily meals, view ingredient-level nutrition breakdowns, and track your calorie and macronutrient intake — all without a backend server.
# ✨ Features

Log meals by type: Breakfast, Lunch, Dinner, and Snacks
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

README claims “Snacks” support, but UI lacks a Snacks option.

Index UI only offers Breakfast/Lunch/Dinner. Add Snacks to the app or adjust docs.

🤖 Prompt for AI Agents 
In Beginner_Projects/food_journal/README.md around line 8, the README states
that meals can be logged as "Snacks" but the app's index UI only offers
Breakfast/Lunch/Dinner; update either the UI to match the docs or the docs to
match the UI. To fix: either add a "Snacks" option to the meal-type control in
the index UI and ensure the form handler, validation, model/storage, and any
tests accept and persist "Snacks", or remove "Snacks" from the README (and any
examples) so documentation matches the current UI.


See nutrition breakdowns for each meal

View total daily calories and macronutrients

Persistent data storage using localStorage

Responsive, mobile-friendly design

# 🛠 Tech Stack

HTML5

CSS3

JavaScript (Vanilla)

Chart.js for visualizing nutrition data


<img width="1659" height="732" alt="{49188AAD-C52E-4AE5-9909-4CBADDD1AF88}" src="https://github.com/user-attachments/assets/24b83ccd-de4e-4489-988d-34a07c55c3e0" />

<img width="1143" height="599" alt="{A8E05A1E-4DCA-4BAB-A074-A666F3BD79C6}" src="https://github.com/user-attachments/assets/477aa4dc-4a62-4e1e-8c40-1d76a8bab885" />

<img width="1207" height="414" alt="{E0E465F2-C021-4B5F-9BDA-A466F7235234}" src="https://github.com/user-attachments/assets/b4b88474-c2a3-4373-856e-4afe137af513" />

Loading