index.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" id="add-food-btn">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 class="hidden-column">ID</th>
                            <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" id="previous-month-btn">‹</button>
                <div class="calendar-title" id="calendarTitle">Month Year</div>
                <button class="calendar-nav" id="next-month-btn">›</button>
            </div>
            <div class="calendar-grid" id="calendarGrid">
                <!-- Calendar will be generated here -->
            </div>
        </div>
    </div>

    <script type="module" src="index.js"></script>
</body>
</html>