99 lines
3.7 KiB
HTML
99 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Daily Calorie Tracker</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<h1>🍎 Daily Calorie Tracker</h1>
|
||
|
||
<div class="date-display" id="currentDate"></div>
|
||
|
||
<div class="calories-banner">
|
||
<div class="calories-number" id="caloriesCounter">0</div>
|
||
<div class="calories-text">Calories Today</div>
|
||
</div>
|
||
|
||
<div class="nutrition-summary" id="nutritionSummary">
|
||
<div class="nutrition-item">
|
||
<div class="nutrition-value" id="proteinValue">0</div>
|
||
<div class="nutrition-label">Protein (g)</div>
|
||
</div>
|
||
<div class="nutrition-item">
|
||
<div class="nutrition-value" id="fatValue">0</div>
|
||
<div class="nutrition-label">Fat (g)</div>
|
||
</div>
|
||
<div class="nutrition-item">
|
||
<div class="nutrition-value" id="carboValue">0</div>
|
||
<div class="nutrition-label">Carbs (g)</div>
|
||
</div>
|
||
<div class="nutrition-item">
|
||
<div class="nutrition-value" id="fiberValue">0</div>
|
||
<div class="nutrition-label">Fiber (g)</div>
|
||
</div>
|
||
</div>
|
||
|
||
<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>
|
||
<div class="form-group">
|
||
<label for="gramAmount">Amount (grams)</label>
|
||
<input type="number" id="gramAmount" min="1" step="1" value="100">
|
||
</div>
|
||
<button class="add-btn" onclick="addFood()">Add Food</button>
|
||
</div>
|
||
<div id="food-preview" class="add-food-form-item display-none">
|
||
<p>Calories: 0 - Protein: 0 - Fat: 0 - Carbohydrates: 0</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="food-table-section">
|
||
<div class="table-title">Food Log</div>
|
||
<div class="table-wrapper">
|
||
<table class="food-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Time</th>
|
||
<th>Food</th>
|
||
<th>Grams</th>
|
||
<th>Calories</th>
|
||
<th>Protein (g)</th>
|
||
<th>Fat (g)</th>
|
||
<th>Carbs (g)</th>
|
||
<th>Fiber (g)</th>
|
||
<th>Action</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="foodTableBody">
|
||
<!-- Food entries will be added here -->
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="calendar-section">
|
||
<div class="calendar-header">
|
||
<button class="calendar-nav" onclick="previousMonth()">‹</button>
|
||
<div class="calendar-title" id="calendarTitle">Month Year</div>
|
||
<button class="calendar-nav" onclick="nextMonth()">›</button>
|
||
</div>
|
||
<div class="calendar-grid" id="calendarGrid">
|
||
<!-- Calendar will be generated here -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="foodDatabase.js"></script>
|
||
<script src="index.js"></script>
|
||
</body>
|
||
</html>
|