rmcampos/calories-tracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add select item and improve settings

Browse Source
This commit is contained in:
Ricardo Campos
2025-06-16 17:33:52 -03:00
parent c9f5984039
commit 9e66744a5e
7 changed files with 445 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+26 -9
View File
@@ -78,8 +78,6 @@
<!-- Main App Content -->
<main id="app-content" class="hidden">
<div class="container">
<h1>🍎 Daily Calorie Tracker</h1>
<div class="date-display" id="currentDate"></div>
<div class="calories-banner">
@@ -89,35 +87,50 @@
<div class="nutrition-summary" id="nutritionSummary">
<div class="nutrition-item">
<div class="nutrition-label">Protein (g)</div>
<div class="nutrition-value" id="proteinValue">0</div>
<div class="nutrition-label hidden" id="proteinGoalText">of 190</div>
<div class="nutrition-label">Protein (g)</div>
</div>
<div class="nutrition-item">
<div class="nutrition-label">Fat (g)</div>
<div class="nutrition-value" id="fatValue">0</div>
<div class="nutrition-label hidden" id="fatGoalText">of 190</div>
<div class="nutrition-label">Fat (g)</div>
</div>
<div class="nutrition-item">
<div class="nutrition-label">Carbs (g)</div>
<div class="nutrition-value" id="carboValue">0</div>
<div class="nutrition-label hidden" id="carboGoalText">of 190</div>
<div class="nutrition-label">Carbs (g)</div>
</div>
<div class="nutrition-item">
<div class="nutrition-label">Fiber (g)</div>
<div class="nutrition-value" id="fiberValue">0</div>
<div class="nutrition-label hidden" id="fiberGoalText">of 190</div>
<div class="nutrition-label">Fiber (g)</div>
</div>
</div>
<!-- Food Search Input -->
<div class="add-food-section">
<h2 class="add-food-title">Add Food</h2>
<div class="add-food-form">
<div class="form-group">
<label for="foodSelect">Food Item</label>
<select id="foodSelect">
<option value="">Select a food item...</option>
</select>
<div class="food-search-container">
<input
type="text"
class="food-search-input"
id="foodSearchInput"
placeholder="Search food (e.g., apple, chicken breast, rice...)"
autocomplete="off"
>
<div class="search-loading" id="searchLoading"></div>
<!-- Search Results Overlay -->
<div class="search-results" id="searchResults">
<!-- Results will be populated here -->
</div>
</div>
</div>
<div class="form-group">
<label for="gramAmount">Amount (grams)</label>
@@ -198,15 +211,19 @@
<form id="settingsForm" class="settings-form">
<div class="form-group">
<label for="proteinGoal">Protein goal</label>
<input type="number" id="proteinGoal" placeholder="Proteins in grams" required>
</div>
<div class="form-group">
<label for="proteinGoal">Fat goal</label>
<input type="number" id="fatGoal" placeholder="Fat in grams" required>
</div>
<div class="form-group">
<label for="proteinGoal">Carbs goal</label>
<input type="number" id="carboGoal" placeholder="Carbo in grams" required>
</div>
<div class="form-group">
<label for="proteinGoal">Fiber goal</label>
<input type="number" id="fiberGoal" placeholder="Fiber in grams" required>
</div>
<button type="submit" class="settings-btn">Save</button>