Added a Food Journal – Browser-Based Meal Tracking Application #1784
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Added food_journal project
WalkthroughAdds a new beginner project “Food Journal” with a README and a self-contained HTML app. The app logs meals by type, computes ingredient-level totals, visualizes macros via Chart.js, persists logs in localStorage, and provides day-based viewing and deletion. Includes a username setup, responsive UI elements, and sample recipes. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant UI as Browser UI
participant LS as localStorage
participant Chart as Chart.js
User->>UI: Load app
UI->>LS: Get username
alt No username
UI->>User: Show welcome input
User->>UI: Submit name
UI->>LS: Save username
else Existing username
UI->>UI: Render main UI
end
User->>UI: Select date / meal type
UI->>UI: Populate food options
User->>UI: Choose food
UI->>UI: Lookup DISH_RECIPES
UI->>UI: computeTotals(ingredients)
UI->>UI: Render ingredients table
UI->>Chart: Render/Update pie (macros)
User->>UI: Add to Day Log
UI->>LS: Read meal_logs_v2
UI->>LS: Append entry and persist
UI->>UI: Render Day Log list
User->>UI: Delete entry
UI->>LS: Update persisted logs
UI->>UI: Re-render Day Log
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Assessment against linked issues
Poem
Warning Review ran into problems🔥 ProblemsGit: Failed to clone repository. Please run the ✨ Finishing Touches🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
|
👋 Thank you for opening this pull request! We're excited to review your contribution. Please give us a moment, and we'll get back to you shortly! Feel free to join our community on Discord to discuss more! |
|
✅ PR validation passed! Syncing labels and assignees from the linked issue... |
github-actions
bot
added
Contributor
Praneesha-2006
changed the title
|
✅ PR validation passed! Syncing labels and assignees from the linked issue... |
1 similar comment
|
✅ PR validation passed! Syncing labels and assignees from the linked issue... |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
🧹 Nitpick comments (6)
Beginner_Projects/food_journal/README.md (3)
2-6: Remove duplicated intro and tighten header hierarchy.Lines 2 and 5 repeat the same description; collapse into a single concise intro, and use a single H1.
- 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. +🍽 Meal Logger +Browser-based meal tracking with ingredient-level nutrition, daily totals, and Chart.js visualizations. Data persists locally—no backend.
18-27: Add “Getting Started”, privacy note, and onboarding link.Include quick run instructions (open index.html), a note that data stays in localStorage only, and link to the contributor’s earlier merged PR (#1662) per issue #1782.
29-33: Improve image alt text for accessibility.Replace UUID-like alts with descriptive alts (e.g., “Meal logger—ingredients table”, “Daily totals pie chart”).
Beginner_Projects/food_journal/index.html (3)
166-174: Add accessible labels for selects.Improves screen-reader usability without visual changes.
- <select id="mealType"> + <select id="mealType" aria-label="Meal type"> <option value="Breakfast">Breakfast</option> <option value="Lunch">Lunch</option> <option value="Dinner">Dinner</option> + <option value="Snacks">Snacks</option> </select> - <select id="foodItem"></select> + <select id="foodItem" aria-label="Food item"></select>
6-6: Title polish.Consider a simpler title for a beginner project.
- <title>Meal Logger & Nutrition Chart – Advanced</title> + <title>Food Journal – Meal Logger</title>
112-120: Check and improve color contrast for table header/body.The pastel header/background may not meet WCAG AA. Consider darker header bg with white text, and white body cells.
#!/bin/bash python - <<'PY' def hex_to_rgb(h): h=h.lstrip('#') return tuple(int(h[i:i+2],16)/255 for i in (0,2,4)) def rel_lum(c): def f(u): return u/12.92 if u<=0.04045 else ((u+0.055)/1.055)**2.4 r,g,b = (f(x) for x in c) return 0.2126*r + 0.7152*g + 0.0722*b def contrast(fg,bg): L1=rel_lum(fg); L2=rel_lum(bg) l1,l2 = max(L1,L2), min(L1,L2) return (l1+0.05)/(l2+0.05) pairs = [ ('#064e3b','#a7d7c5'), # th text on th bg ('#111827','#f0fdf4'), # td text on td bg ] for fg,bg in pairs: print(f'FG {fg} on BG {bg}: ratio={contrast(hex_to_rgb(fg), hex_to_rgb(bg)):.2f}') PYOptional CSS tweak:
-th { - background: #a7d7c5; - color: #064e3b; +th { + background: #0e7490; /* teal-600 */ + color: #ffffff; } -td { background: #f0fdf4; } +td { background: #ffffff; }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (2)
Beginner_Projects/food_journal/README.md(1 hunks)Beginner_Projects/food_journal/index.html(1 hunks)
🔇 Additional comments (1)
Beginner_Projects/food_journal/index.html (1)
549-603: Session/bootstrap flow looks solid.Good defaults, idempotent init, and log rendering after user detection.
Comment on lines
+6
to
+7
| <title>Meal Logger & Nutrition Chart – Advanced</title> | ||
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script> |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Verify Chart.js version pin.
Confirm 4.4.1 is the latest secure release; bump if newer.
🌐 Web query:
What is the latest stable version of Chart.js as of September 2, 2025?
💡 Result:
The latest stable Chart.js release is v4.5.0 (released June 14, 2025). [1]
Note: the npm package currently shows v4.4.9. [2]
Sources: [1] GitHub releases — chartjs/Chart.js v4.5.0; [2] npm — chart.js package.
Bump Chart.js to v4.5.0
Latest stable release is v4.5.0 (June 14, 2025); update script tag accordingly.
- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <title>Meal Logger & Nutrition Chart – Advanced</title> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script> | |
| <title>Meal Logger & Nutrition Chart – Advanced</title> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.0/dist/chart.umd.min.js"></script> |
🤖 Prompt for AI Agents
In Beginner_Projects/food_journal/index.html around lines 6 to 7 the Chart.js
script tag references version 4.4.1; update the src URL to use v4.5.0
(https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js) so the page
loads the latest stable release, then test the charts in the app to ensure no
breaking changes and adjust any Chart.js usage if needed.
Comment on lines
+167
to
+173
| <select id="mealType"> | ||
| <option value="Breakfast">Breakfast</option> | ||
| <option value="Lunch">Lunch</option> | ||
| <option value="Dinner">Dinner</option> | ||
| </select> | ||
| <select id="foodItem"></select> | ||
| <button id="addToLogBtn">Add to Day Log</button> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add “Snacks” to meal type selector to meet requirements.
<select id="mealType">
<option value="Breakfast">Breakfast</option>
<option value="Lunch">Lunch</option>
<option value="Dinner">Dinner</option>
+ <option value="Snacks">Snacks</option>
</select>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <select id="mealType"> | |
| <option value="Breakfast">Breakfast</option> | |
| <option value="Lunch">Lunch</option> | |
| <option value="Dinner">Dinner</option> | |
| </select> | |
| <select id="foodItem"></select> | |
| <button id="addToLogBtn">Add to Day Log</button> | |
| <select id="mealType"> | |
| <option value="Breakfast">Breakfast</option> | |
| <option value="Lunch">Lunch</option> | |
| <option value="Dinner">Dinner</option> | |
| <option value="Snacks">Snacks</option> | |
| </select> | |
| <select id="foodItem"></select> | |
| <button id="addToLogBtn">Add to Day Log</button> |
🤖 Prompt for AI Agents
In Beginner_Projects/food_journal/index.html around lines 167 to 173 the meal
type <select id="mealType"> is missing the "Snacks" option required by the spec;
add an <option value="Snacks">Snacks</option> into that select (e.g., after
Dinner or wherever appropriate) so the selector includes Breakfast, Lunch,
Dinner and Snacks.
Comment on lines
+245
to
+257
| Breakfast: [ | ||
| "Masala Dosa", "Idli Sambar", "Omelette", "Poha", "Upma", | ||
| "Rava Upma", "Aloo Paratha", "Pesarattu", "Lemon Rice", "Kheer" | ||
| ], | ||
| Lunch: [ | ||
| "Veg Fried Rice", "Vegetable Biryani", "Rajma Chawal", "Palak Paneer", "Paneer Butter Masala", | ||
| "Dal Tadka", "Chole Bhature", "Gobi Manchurian", "Pasta Alfredo", "Chicken Biryani" | ||
| ], | ||
| Dinner: [ | ||
| "Grilled Chicken", "Chicken Tikka", "Fish Fry", "Vada Pav", | ||
| "Momos", "Samosa", "Pav Bhaji", "Lemon Rice" | ||
| ] | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Provide MEAL_OPTIONS.Snacks and expose existing “Mutton Curry” in Dinner.
const MEAL_OPTIONS = {
Breakfast: [
"Masala Dosa", "Idli Sambar", "Omelette", "Poha", "Upma",
"Rava Upma", "Aloo Paratha", "Pesarattu", "Lemon Rice", "Kheer"
],
Lunch: [
"Veg Fried Rice", "Vegetable Biryani", "Rajma Chawal", "Palak Paneer", "Paneer Butter Masala",
"Dal Tadka", "Chole Bhature", "Gobi Manchurian", "Pasta Alfredo", "Chicken Biryani"
],
Dinner: [
- "Grilled Chicken", "Chicken Tikka", "Fish Fry", "Vada Pav",
- "Momos", "Samosa", "Pav Bhaji", "Lemon Rice"
+ "Grilled Chicken", "Chicken Tikka", "Fish Fry", "Vada Pav",
+ "Momos", "Samosa", "Pav Bhaji", "Lemon Rice", "Mutton Curry"
- ]
+ ],
+ Snacks: [
+ "Fruit Bowl", "Greek Yogurt", "Nuts Mix", "Protein Bar"
+ ]
};📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| Breakfast: [ | |
| "Masala Dosa", "Idli Sambar", "Omelette", "Poha", "Upma", | |
| "Rava Upma", "Aloo Paratha", "Pesarattu", "Lemon Rice", "Kheer" | |
| ], | |
| Lunch: [ | |
| "Veg Fried Rice", "Vegetable Biryani", "Rajma Chawal", "Palak Paneer", "Paneer Butter Masala", | |
| "Dal Tadka", "Chole Bhature", "Gobi Manchurian", "Pasta Alfredo", "Chicken Biryani" | |
| ], | |
| Dinner: [ | |
| "Grilled Chicken", "Chicken Tikka", "Fish Fry", "Vada Pav", | |
| "Momos", "Samosa", "Pav Bhaji", "Lemon Rice" | |
| ] | |
| }; | |
| const MEAL_OPTIONS = { | |
| Breakfast: [ | |
| "Masala Dosa", "Idli Sambar", "Omelette", "Poha", "Upma", | |
| "Rava Upma", "Aloo Paratha", "Pesarattu", "Lemon Rice", "Kheer" | |
| ], | |
| Lunch: [ | |
| "Veg Fried Rice", "Vegetable Biryani", "Rajma Chawal", "Palak Paneer", "Paneer Butter Masala", | |
| "Dal Tadka", "Chole Bhature", "Gobi Manchurian", "Pasta Alfredo", "Chicken Biryani" | |
| ], | |
| Dinner: [ | |
| "Grilled Chicken", "Chicken Tikka", "Fish Fry", "Vada Pav", | |
| "Momos", "Samosa", "Pav Bhaji", "Lemon Rice", "Mutton Curry" | |
| ], | |
| Snacks: [ | |
| "Fruit Bowl", "Greek Yogurt", "Nuts Mix", "Protein Bar" | |
| ] | |
| }; |
🤖 Prompt for AI Agents
In Beginner_Projects/food_journal/index.html around lines 245 to 257, the
MEAL_OPTIONS object is missing a Snacks entry and the Dinner array does not
expose the existing "Mutton Curry"; add a new Snacks property (array) with
several snack strings (e.g., two to ten items) and update the Dinner array to
include "Mutton Curry" (either by adding it if absent or ensuring it remains
listed), keeping the same object formatting and trailing commas consistent with
surrounding code.
Comment on lines
+261
to
+383
| const DISH_RECIPES = | ||
| { | ||
| // Breakfast (10) | ||
| "Masala Dosa": [ | ||
| {ingredient: "Dosa Batter(150g)",carbs: 38 , protein : 6,fat: 2,calories :210}, | ||
| {ingredient: "Potato Masala(100g)",carbs : 18 ,protein :2,fat:4,calories:120}, | ||
| {ingredient: "Oil/ghee (1 tsp)", carbs: 0, protein: 0, fat: 5, calories: 45} | ||
| ], | ||
| "Idli Sambar": [ | ||
| {ingredient: "Idli Batter(120g)",carbs : 28 ,protein:5,fat: 1,calories: 145}, | ||
| {ingredient: "toor dal+tamarind+veggies+spices", carbs : 12 , protein :4,fat: 3,calories : 95} | ||
| ], | ||
| "Omelette": [ | ||
| {ingredient: "Eggs (2)", carbs: 1, protein: 12, fat: 10, calories: 140}, | ||
| {ingredient: "Onion+chilli", carbs: 2, protein: 0, fat: 0, calories: 10} | ||
| ], | ||
| "Poha": [ | ||
| {ingredient: "Flattened rice (60g)", carbs: 46, protein: 4, fat: 1, calories: 210}, | ||
| {ingredient: "Peanuts (10g)", carbs: 2, protein: 3, fat: 5, calories: 57} | ||
| ], | ||
| "Upma": [ | ||
| {ingredient: "Rava (60g)", carbs: 44, protein: 7,fat: 1, calories: 220}, | ||
| {ingredient: "Oil/ghee (1 tsp)", carbs: 0, protein: 0, fat: 5, calories: 45} | ||
| ], | ||
| "Rava Upma": [ | ||
| {ingredient: "Rava (60g)", carbs: 44, protein: 7, fat: 1, calories: 220}, | ||
| {ingredient: "Veg mix", carbs: 5, protein: 1, fat: 0, calories: 25}, | ||
| {ingredient: "Oil (1 tsp)", carbs: 0, protein: 0, fat: 5, calories: 45} | ||
| ], | ||
| "Aloo Paratha": [ | ||
| {ingredient: "Wheat dough (80g)", carbs: 45,protein: 8, fat: 2, calories: 250}, | ||
| {ingredient: "Potato filling", carbs: 20, protein: 3, fat: 4, calories: 130}, | ||
| {ingredient: "Ghee (1 tsp)", carbs: 0, protein: 0, fat: 5, calories: 45} | ||
| ], | ||
| "Pesarattu": [ | ||
| {ingredient: "Moong batter (120g)", carbs: 30, protein: 12, fat: 2, calories: 210}, | ||
| {ingredient: "Oil (1 tsp)", carbs: 0, protein: 0, fat: 5, calories: 45} | ||
| ], | ||
| "Lemon Rice": [ | ||
| {ingredient: "Cooked rice (180g)", carbs: 50, protein: 4, fat: 1, calories: 230}, | ||
| {ingredient: "Lemon+peanuts", carbs: 2, protein: 3, fat: 10, calories: 100} | ||
| ], | ||
| "Kheer": [ | ||
| {ingredient: "Milk (200ml)", carbs: 10, protein: 6, fat: 6, calories: 120}, | ||
| {ingredient: "Rice+sugar", carbs: 45, protein: 2, fat: 2, calories: 220} | ||
| ], | ||
| // Lunch (10) | ||
| "Veg Fried Rice": [ | ||
| {ingredient:"Cooked rice (200g)", carbs:58, protein:5, fat:1, calories:260}, | ||
| {ingredient:"Vegies+soy sauce", carbs:7, protein:2, fat:2, calories:50}, | ||
| {ingredient:"Oil (2 tsp)", carbs:0, protein:0, fat:10, calories:90} | ||
| ], | ||
| "Vegetable Biryani": [ | ||
| {ingredient:"Basmati (200g)", carbs:60, protein:6, fat:1, calories:280}, | ||
| {ingredient:"Veg+spices", carbs:6, protein:2, fat:2, calories:60}, | ||
| {ingredient:"Oil/ghee (1 tbsp)", carbs:0, protein:0, fat:14, calories:125} | ||
| ], | ||
| "Rajma Chawal": [ | ||
| {ingredient:"Cooked rice (180g)", carbs:50, protein:4, fat:1, calories:230}, | ||
| {ingredient:"Rajma curry (150g)", carbs:30, protein:10, fat:5, calories:170} | ||
| ], | ||
| "Palak Paneer": [ | ||
| {ingredient:"Spinach gravy", carbs:8, protein:4, fat:4, calories:90}, | ||
| {ingredient:"Paneer (120g)", carbs:10, protein:21, fat:24, calories:318} | ||
| ], | ||
| "Paneer Butter Masala": [ | ||
| {ingredient:"Paneer (120g)", carbs:10, protein:16, fat:12, calories:200}, | ||
| {ingredient:"Tomato gravy+butter", carbs:10, protein:2, fat:12, calories:180} | ||
| ], | ||
| "Dal Tadka": [ | ||
| {ingredient:"Cooked dal (200g)", carbs:35, protein:14, fat:6, calories:260}, | ||
| {ingredient:"Tadka (1 tsp ghee)", carbs:0, protein:0, fat:5, calories:45} | ||
| ], | ||
| "Chole Bhature": [ | ||
| {ingredient:"Chole (200g)", carbs:40, protein:12, fat:6, calories:260}, | ||
| {ingredient:"Bhature (1 pc)", carbs:35, protein:6, fat:12, calories:240} | ||
| ], | ||
| "Mutton Curry": [ | ||
| {ingredient:"Mutton (150g)", carbs:0, protein:28, fat:18, calories:300}, | ||
| {ingredient:"Gravy", carbs:4, protein:2, fat:4, calories:60} | ||
| ], | ||
| "Pasta Alfredo": [ | ||
| {ingredient:"Pasta (180g)", carbs:50, protein:9, fat:3, calories:260}, | ||
| {ingredient:"Alfredo sauce", carbs:1, protein:1, fat:15, calories:150} | ||
| ], | ||
| "Chicken Biryani": [ | ||
| {ingredient:"Basmati (200g)", carbs:58, protein:6, fat:1, calories:270}, | ||
| {ingredient:"Chicken (120g)", carbs:0, protein:27, fat:8, calories:200}, | ||
| {ingredient:"Ghee/oil (1 tbsp)", carbs:0, protein:0, fat:14, calories:125} | ||
| ], | ||
|
|
||
| // Dinner (10) | ||
| "Grilled Chicken": [ | ||
| {ingredient:"Chicken (180g)", carbs:0, protein:33, fat:6, calories:240}, | ||
| {ingredient:"Marinade", carbs:0, protein:0, fat:2, calories:20} | ||
| ], | ||
| "Chicken Tikka": [ | ||
| {ingredient:"Chicken (150g)", carbs:2, protein:27, fat:8, calories:230}, | ||
| {ingredient:"Yogurt+spices", carbs:2, protein:2, fat:2, calories:30} | ||
| ], | ||
| "Fish Fry": [ | ||
| {ingredient:"Fish (150g)", carbs:0, protein:25, fat:8, calories:200}, | ||
| {ingredient:"Coating+oil", carbs:0, protein:0, fat:7, calories:70} | ||
| ], | ||
| "Gobi Manchurian": [ | ||
| {ingredient:"Cauliflower", carbs:10, protein:3, fat:3, calories:90}, | ||
| {ingredient:"Sauce+fry", carbs:8, protein:2, fat:14, calories:150} | ||
| ], | ||
| "Vada Pav": [ | ||
| {ingredient:"Pav (1)", carbs:25, protein:5, fat:3, calories:150}, | ||
| {ingredient:"Batata vada", carbs:20, protein:3, fat:10, calories:180} | ||
| ], | ||
| "Momos": [ | ||
| {ingredient:"Dumplings (6)", carbs:35, protein:8, fat:6, calories:220} | ||
| ], | ||
| "Samosa": [ | ||
| {ingredient:"Samosa(1)", carbs:25, protein:4, fat:15, calories:250} | ||
| ], | ||
| "Pav Bhaji": [ | ||
| {ingredient:"Bhaji", carbs:28, protein:6, fat:10, calories:220}, | ||
| {ingredient:"Pav (1)", carbs:25, protein:5, fat:3, calories:150} | ||
| ], | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add DISH_RECIPES for Snacks to avoid empty totals and enable logging.
"Pav Bhaji": [
{ingredient:"Bhaji", carbs:28, protein:6, fat:10, calories:220},
{ingredient:"Pav (1)", carbs:25, protein:5, fat:3, calories:150}
],
+ // Snacks
+ "Fruit Bowl": [
+ {ingredient:"Mixed fruits (200g)", carbs:30, protein:2, fat:1, calories:140}
+ ],
+ "Greek Yogurt": [
+ {ingredient:"Yogurt (150g)", carbs:6, protein:15, fat:4, calories:130}
+ ],
+ "Nuts Mix": [
+ {ingredient:"Mixed nuts (30g)", carbs:6, protein:6, fat:14, calories:170}
+ ],
+ "Protein Bar": [
+ {ingredient:"Bar (1)", carbs:22, protein:20, fat:7, calories:250}
+ ],
};📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| const DISH_RECIPES = | |
| { | |
| // Breakfast (10) | |
| "Masala Dosa": [ | |
| {ingredient: "Dosa Batter(150g)",carbs: 38 , protein : 6,fat: 2,calories :210}, | |
| {ingredient: "Potato Masala(100g)",carbs : 18 ,protein :2,fat:4,calories:120}, | |
| {ingredient: "Oil/ghee (1 tsp)", carbs: 0, protein: 0, fat: 5, calories: 45} | |
| ], | |
| "Idli Sambar": [ | |
| {ingredient: "Idli Batter(120g)",carbs : 28 ,protein:5,fat: 1,calories: 145}, | |
| {ingredient: "toor dal+tamarind+veggies+spices", carbs : 12 , protein :4,fat: 3,calories : 95} | |
| ], | |
| "Omelette": [ | |
| {ingredient: "Eggs (2)", carbs: 1, protein: 12, fat: 10, calories: 140}, | |
| {ingredient: "Onion+chilli", carbs: 2, protein: 0, fat: 0, calories: 10} | |
| ], | |
| "Poha": [ | |
| {ingredient: "Flattened rice (60g)", carbs: 46, protein: 4, fat: 1, calories: 210}, | |
| {ingredient: "Peanuts (10g)", carbs: 2, protein: 3, fat: 5, calories: 57} | |
| ], | |
| "Upma": [ | |
| {ingredient: "Rava (60g)", carbs: 44, protein: 7,fat: 1, calories: 220}, | |
| {ingredient: "Oil/ghee (1 tsp)", carbs: 0, protein: 0, fat: 5, calories: 45} | |
| ], | |
| "Rava Upma": [ | |
| {ingredient: "Rava (60g)", carbs: 44, protein: 7, fat: 1, calories: 220}, | |
| {ingredient: "Veg mix", carbs: 5, protein: 1, fat: 0, calories: 25}, | |
| {ingredient: "Oil (1 tsp)", carbs: 0, protein: 0, fat: 5, calories: 45} | |
| ], | |
| "Aloo Paratha": [ | |
| {ingredient: "Wheat dough (80g)", carbs: 45,protein: 8, fat: 2, calories: 250}, | |
| {ingredient: "Potato filling", carbs: 20, protein: 3, fat: 4, calories: 130}, | |
| {ingredient: "Ghee (1 tsp)", carbs: 0, protein: 0, fat: 5, calories: 45} | |
| ], | |
| "Pesarattu": [ | |
| {ingredient: "Moong batter (120g)", carbs: 30, protein: 12, fat: 2, calories: 210}, | |
| {ingredient: "Oil (1 tsp)", carbs: 0, protein: 0, fat: 5, calories: 45} | |
| ], | |
| "Lemon Rice": [ | |
| {ingredient: "Cooked rice (180g)", carbs: 50, protein: 4, fat: 1, calories: 230}, | |
| {ingredient: "Lemon+peanuts", carbs: 2, protein: 3, fat: 10, calories: 100} | |
| ], | |
| "Kheer": [ | |
| {ingredient: "Milk (200ml)", carbs: 10, protein: 6, fat: 6, calories: 120}, | |
| {ingredient: "Rice+sugar", carbs: 45, protein: 2, fat: 2, calories: 220} | |
| ], | |
| // Lunch (10) | |
| "Veg Fried Rice": [ | |
| {ingredient:"Cooked rice (200g)", carbs:58, protein:5, fat:1, calories:260}, | |
| {ingredient:"Vegies+soy sauce", carbs:7, protein:2, fat:2, calories:50}, | |
| {ingredient:"Oil (2 tsp)", carbs:0, protein:0, fat:10, calories:90} | |
| ], | |
| "Vegetable Biryani": [ | |
| {ingredient:"Basmati (200g)", carbs:60, protein:6, fat:1, calories:280}, | |
| {ingredient:"Veg+spices", carbs:6, protein:2, fat:2, calories:60}, | |
| {ingredient:"Oil/ghee (1 tbsp)", carbs:0, protein:0, fat:14, calories:125} | |
| ], | |
| "Rajma Chawal": [ | |
| {ingredient:"Cooked rice (180g)", carbs:50, protein:4, fat:1, calories:230}, | |
| {ingredient:"Rajma curry (150g)", carbs:30, protein:10, fat:5, calories:170} | |
| ], | |
| "Palak Paneer": [ | |
| {ingredient:"Spinach gravy", carbs:8, protein:4, fat:4, calories:90}, | |
| {ingredient:"Paneer (120g)", carbs:10, protein:21, fat:24, calories:318} | |
| ], | |
| "Paneer Butter Masala": [ | |
| {ingredient:"Paneer (120g)", carbs:10, protein:16, fat:12, calories:200}, | |
| {ingredient:"Tomato gravy+butter", carbs:10, protein:2, fat:12, calories:180} | |
| ], | |
| "Dal Tadka": [ | |
| {ingredient:"Cooked dal (200g)", carbs:35, protein:14, fat:6, calories:260}, | |
| {ingredient:"Tadka (1 tsp ghee)", carbs:0, protein:0, fat:5, calories:45} | |
| ], | |
| "Chole Bhature": [ | |
| {ingredient:"Chole (200g)", carbs:40, protein:12, fat:6, calories:260}, | |
| {ingredient:"Bhature (1 pc)", carbs:35, protein:6, fat:12, calories:240} | |
| ], | |
| "Mutton Curry": [ | |
| {ingredient:"Mutton (150g)", carbs:0, protein:28, fat:18, calories:300}, | |
| {ingredient:"Gravy", carbs:4, protein:2, fat:4, calories:60} | |
| ], | |
| "Pasta Alfredo": [ | |
| {ingredient:"Pasta (180g)", carbs:50, protein:9, fat:3, calories:260}, | |
| {ingredient:"Alfredo sauce", carbs:1, protein:1, fat:15, calories:150} | |
| ], | |
| "Chicken Biryani": [ | |
| {ingredient:"Basmati (200g)", carbs:58, protein:6, fat:1, calories:270}, | |
| {ingredient:"Chicken (120g)", carbs:0, protein:27, fat:8, calories:200}, | |
| {ingredient:"Ghee/oil (1 tbsp)", carbs:0, protein:0, fat:14, calories:125} | |
| ], | |
| // Dinner (10) | |
| "Grilled Chicken": [ | |
| {ingredient:"Chicken (180g)", carbs:0, protein:33, fat:6, calories:240}, | |
| {ingredient:"Marinade", carbs:0, protein:0, fat:2, calories:20} | |
| ], | |
| "Chicken Tikka": [ | |
| {ingredient:"Chicken (150g)", carbs:2, protein:27, fat:8, calories:230}, | |
| {ingredient:"Yogurt+spices", carbs:2, protein:2, fat:2, calories:30} | |
| ], | |
| "Fish Fry": [ | |
| {ingredient:"Fish (150g)", carbs:0, protein:25, fat:8, calories:200}, | |
| {ingredient:"Coating+oil", carbs:0, protein:0, fat:7, calories:70} | |
| ], | |
| "Gobi Manchurian": [ | |
| {ingredient:"Cauliflower", carbs:10, protein:3, fat:3, calories:90}, | |
| {ingredient:"Sauce+fry", carbs:8, protein:2, fat:14, calories:150} | |
| ], | |
| "Vada Pav": [ | |
| {ingredient:"Pav (1)", carbs:25, protein:5, fat:3, calories:150}, | |
| {ingredient:"Batata vada", carbs:20, protein:3, fat:10, calories:180} | |
| ], | |
| "Momos": [ | |
| {ingredient:"Dumplings (6)", carbs:35, protein:8, fat:6, calories:220} | |
| ], | |
| "Samosa": [ | |
| {ingredient:"Samosa(1)", carbs:25, protein:4, fat:15, calories:250} | |
| ], | |
| "Pav Bhaji": [ | |
| {ingredient:"Bhaji", carbs:28, protein:6, fat:10, calories:220}, | |
| {ingredient:"Pav (1)", carbs:25, protein:5, fat:3, calories:150} | |
| ], | |
| }; | |
| "Pav Bhaji": [ | |
| {ingredient:"Bhaji", carbs:28, protein:6, fat:10, calories:220}, | |
| {ingredient:"Pav (1)", carbs:25, protein:5, fat:3, calories:150} | |
| ], | |
| // Snacks | |
| "Fruit Bowl": [ | |
| {ingredient:"Mixed fruits (200g)", carbs:30, protein:2, fat:1, calories:140} | |
| ], | |
| "Greek Yogurt": [ | |
| {ingredient:"Yogurt (150g)", carbs:6, protein:15, fat:4, calories:130} | |
| ], | |
| "Nuts Mix": [ | |
| {ingredient:"Mixed nuts (30g)", carbs:6, protein:6, fat:14, calories:170} | |
| ], | |
| "Protein Bar": [ | |
| {ingredient:"Bar (1)", carbs:22, protein:20, fat:7, calories:250} | |
| ], | |
| }; |
Comment on lines
+432
to
+448
| function renderPie(totals) { | ||
| const data = [totals.carbs, totals.protein, totals.fat, totals.calories]; | ||
| const labels = ['Carbs (g)', 'Protein (g)', 'Fat (g)', 'Calories']; | ||
| const ctx = document.getElementById('pieChart'); | ||
| if (pieChartInstance) pieChartInstance.destroy(); | ||
| pieChartInstance = new Chart(ctx, { | ||
| type: 'pie', | ||
| data: { | ||
| labels, | ||
| datasets: [{ data }] | ||
| }, | ||
| options: { | ||
| responsive: true, | ||
| plugins: { legend: { position: 'bottom' } } | ||
| } | ||
| }); | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Don’t mix calories with grams in the pie chart.
Combining kcal with g misleads users. Show macros only; keep calories as a separate note (already present).
- const data = [totals.carbs, totals.protein, totals.fat, totals.calories];
- const labels = ['Carbs (g)', 'Protein (g)', 'Fat (g)', 'Calories'];
+ const data = [totals.carbs, totals.protein, totals.fat];
+ const labels = ['Carbs (g)', 'Protein (g)', 'Fat (g)'];📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| function renderPie(totals) { | |
| const data = [totals.carbs, totals.protein, totals.fat, totals.calories]; | |
| const labels = ['Carbs (g)', 'Protein (g)', 'Fat (g)', 'Calories']; | |
| const ctx = document.getElementById('pieChart'); | |
| if (pieChartInstance) pieChartInstance.destroy(); | |
| pieChartInstance = new Chart(ctx, { | |
| type: 'pie', | |
| data: { | |
| labels, | |
| datasets: [{ data }] | |
| }, | |
| options: { | |
| responsive: true, | |
| plugins: { legend: { position: 'bottom' } } | |
| } | |
| }); | |
| } | |
| function renderPie(totals) { | |
| const data = [totals.carbs, totals.protein, totals.fat]; | |
| const labels = ['Carbs (g)', 'Protein (g)', 'Fat (g)']; | |
| const ctx = document.getElementById('pieChart'); | |
| if (pieChartInstance) pieChartInstance.destroy(); | |
| pieChartInstance = new Chart(ctx, { | |
| type: 'pie', | |
| data: { | |
| labels, | |
| datasets: [{ data }] | |
| }, | |
| options: { | |
| responsive: true, | |
| plugins: { legend: { position: 'bottom' } } | |
| } | |
| }); | |
| } |
🤖 Prompt for AI Agents
In Beginner_Projects/food_journal/index.html around lines 432 to 448, the pie
chart currently mixes calories with gram-based macros; remove totals.calories
from the pie data and drop the 'Calories' label so the pie shows only Carbs,
Protein and Fat in grams. Update the data array to [totals.carbs,
totals.protein, totals.fat] and labels to ['Carbs (g)', 'Protein (g)', 'Fat
(g)']; keep calories displayed separately (no chart change needed for that).
Ensure the chart destruction/creation logic stays the same and only the
data/labels are adjusted.
Comment on lines
+471
to
+488
| function addToDayLog() { | ||
| const date = $('#logDate').value || todayStr(); | ||
| const mealType = $('#mealType').value; | ||
| const foodName = $('#foodItem').value; | ||
| const ingredients = DISH_RECIPES[foodName] || []; | ||
| const totals = computeTotals(ingredients); | ||
|
|
||
| const logs = JSON.parse(localStorage.getItem(STORAGE_KEYS.LOGS) || '[]'); | ||
| logs.push({ | ||
| date, | ||
| timeISO: new Date().toISOString(), | ||
| mealType, | ||
| foodName, | ||
| totals | ||
| }); | ||
| localStorage.setItem(STORAGE_KEYS.LOGS, JSON.stringify(logs)); | ||
| renderDayLog(); | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Block logging when no food is selected.
Currently pushes empty entries with 0 totals.
function addToDayLog() {
const date = $('#logDate').value || todayStr();
const mealType = $('#mealType').value;
const foodName = $('#foodItem').value;
+ if (!mealType) { alert('Please select a meal type'); return; }
+ if (!foodName) { alert('Please select a food item'); return; }
const ingredients = DISH_RECIPES[foodName] || [];
const totals = computeTotals(ingredients);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| function addToDayLog() { | |
| const date = $('#logDate').value || todayStr(); | |
| const mealType = $('#mealType').value; | |
| const foodName = $('#foodItem').value; | |
| const ingredients = DISH_RECIPES[foodName] || []; | |
| const totals = computeTotals(ingredients); | |
| const logs = JSON.parse(localStorage.getItem(STORAGE_KEYS.LOGS) || '[]'); | |
| logs.push({ | |
| date, | |
| timeISO: new Date().toISOString(), | |
| mealType, | |
| foodName, | |
| totals | |
| }); | |
| localStorage.setItem(STORAGE_KEYS.LOGS, JSON.stringify(logs)); | |
| renderDayLog(); | |
| } | |
| function addToDayLog() { | |
| const date = $('#logDate').value || todayStr(); | |
| const mealType = $('#mealType').value; | |
| const foodName = $('#foodItem').value; | |
| if (!mealType) { alert('Please select a meal type'); return; } | |
| if (!foodName) { alert('Please select a food item'); return; } | |
| const ingredients = DISH_RECIPES[foodName] || []; | |
| const totals = computeTotals(ingredients); | |
| const logs = JSON.parse(localStorage.getItem(STORAGE_KEYS.LOGS) || '[]'); | |
| logs.push({ | |
| date, | |
| timeISO: new Date().toISOString(), | |
| mealType, | |
| foodName, | |
| totals | |
| }); | |
| localStorage.setItem(STORAGE_KEYS.LOGS, JSON.stringify(logs)); | |
| renderDayLog(); | |
| } |
🤖 Prompt for AI Agents
In Beginner_Projects/food_journal/index.html around lines 471-488, the
addToDayLog function currently records empty entries when no food is selected;
update it to validate the selected food before pushing: trim and check that
foodName is non-empty and that DISH_RECIPES[foodName] exists (or
ingredients.length > 0), and if the validation fails simply return early (or
show a user-facing message/notification) instead of pushing an entry to
localStorage; keep the rest of the logic unchanged so only valid selections get
logged.
| 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 |
There was a problem hiding this comment.
🛠️ 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.
|
This PR is stale because it has been open for 30 days with no activity. Remove the stale label or comment, or this will be closed in 5 days. |
|
✅ PR validation passed! Syncing labels and assignees from the linked issue... |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Pull Request for PyVerse 💡
Requesting to submit a pull request to the PyVerse repository.
Issue Title
Please enter the title of the issue related to your pull request.
Add a Food Journal – Browser-Based Meal Tracking App .
☑️ I have provided the issue title.
Info about the Related Issue
What's the goal of the project?
The project aims to allows users to log meals by type (breakfast, lunch, dinner), view ingredient-level nutrition breakdowns, calculate daily totals, and visualize macronutrients using Chart.js
☑️ I have described the aim of the project.
Name
Please mention your name.
Praneesha Arvapalli
☑️ I have provided my name.
GitHub ID
Please mention your GitHub ID.
Praneesha-2006
☑️I have provided my GitHub ID.
Email ID
Please mention your email ID for further communication.
[email protected]
☑️I have provided my email ID.
Identify Yourself
Mention in which program you are contributing (e.g., WoB, GSSOC, SSOC, SWOC).
GSSOC
☑️ I have mentioned my participant role.
Closes
Enter the issue number that will be closed through this PR.
Closes: #1782
☑️ I have provided the issue number.
Describe the Add-ons or Changes You've Made
Give a clear description of what you have added or modified.
Listed key features:
Specified the tech stack used:
☑️ I have described my changes.
Type of Change
Select the type of change:
☐ Bug fix (non-breaking change which fixes an issue)
☑️New feature (non-breaking change which adds functionality)
☐ Code style update (formatting, local variables)
☐ Breaking change (fix or feature that would cause existing functionality to not work as expected)
☐ This change requires a documentation update
How Has This Been Tested?
Describe how your changes have been tested.
I have tested by verifying UI interactions, nutrition calculations, error handling, and chart responsiveness across browsers.
☑️ I have described my testing process.
Checklist
Please confirm the following:
☑️ My code follows the guidelines of this project.
☑️ I have performed a self-review of my own code.
☑️I have commented my code, particularly wherever it was hard to understand.
☑️ I have made corresponding changes to the documentation.
☑️ My changes generate no new warnings.
☑️ I have added things that prove my fix is effective or that my feature works.
☑️Any dependent changes have been merged and published in downstream modules.
Summary by CodeRabbit
New Features
Added support for dynamic ingredient entry with real-time nutrition calculation.
Integrated Chart.js to visualize daily calorie intake and macronutrient distribution.
Documentation
Added a project description ,tech stacks and feature list
Upgraded Chart.js and added lightweight utility for input validation.
Summary by CodeRabbit
New Features
Documentation