From b3baaec974ba5ba7ba99b0df87165c7a4d3c0f83 Mon Sep 17 00:00:00 2001
From: Ricardo Campos <ricardompcampos@gmail.com>
Date: Wed, 11 Jun 2025 21:49:26 -0300
Subject: [PATCH] fix: add missing JS files and logic

---
 foodDatabase.js |  2 +-
 index.html      | 10 +++++-----
 index.js        | 33 ++++++++++++++++++++++++++++++---
 style.css       |  4 ++++
 4 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/foodDatabase.js b/foodDatabase.js
index 31f20f9..6cb58a1 100644
--- a/foodDatabase.js
+++ b/foodDatabase.js
@@ -1,4 +1,4 @@
-const foodDatabase = {
+export const foodDatabase = {
   // Fruits
   'Frutas - Abacate': { calories: 96, protein: 1.2, fat: 8.4, carbs: 6, fiber: 6.3 },
   'Frutas - Abacaxi': { calories: 48, protein: 0.9, fat: 0.1, carbs: 12.3, fiber: 1 },
diff --git a/index.html b/index.html
index 1ed2616..2c19241 100644
--- a/index.html
+++ b/index.html
@@ -49,7 +49,7 @@
                     <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>
+                <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>
@@ -62,6 +62,7 @@
                 <table class="food-table">
                     <thead>
                         <tr>
+                            <th class="hidden-column">ID</th>
                             <th>Time</th>
                             <th>Food</th>
                             <th>Grams</th>
@@ -82,9 +83,9 @@
 
         <div class="calendar-section">
             <div class="calendar-header">
-                <button class="calendar-nav" onclick="previousMonth()">‹</button>
+                <button class="calendar-nav" id="previous-month-btn">‹</button>
                 <div class="calendar-title" id="calendarTitle">Month Year</div>
-                <button class="calendar-nav" onclick="nextMonth()">›</button>
+                <button class="calendar-nav" id="next-month-btn">›</button>
             </div>
             <div class="calendar-grid" id="calendarGrid">
                 <!-- Calendar will be generated here -->
@@ -92,7 +93,6 @@
         </div>
     </div>
 
-    <script src="foodDatabase.js"></script>
-    <script src="index.js"></script>
+    <script type="module" src="index.js"></script>
 </body>
 </html>
diff --git a/index.js b/index.js
index f857d70..addd93c 100644
--- a/index.js
+++ b/index.js
@@ -1,3 +1,5 @@
+import { foodDatabase } from './foodDatabase.js';
+
 // App state
 let selectedDate = new Date().toISOString().split('T')[0];
 let currentViewDate = new Date();
@@ -60,6 +62,29 @@ function addEvents() {
   document.getElementById('gramAmount').addEventListener('change', () => {
     previewCalories();
   });
+
+  document.getElementById('add-food-btn').addEventListener('click', () => {
+    addFood();
+  });
+  
+  document.getElementById('next-month-btn').addEventListener('click', () => {
+    nextMonth();
+  });
+  
+  document.getElementById('previous-month-btn').addEventListener('click', () => {
+    previousMonth();
+  });
+}
+
+function addDeleteEvents() {
+  const elements = document.getElementsByClassName('delete-food-entry');
+  Array.from(elements).forEach(el => {
+    el.addEventListener('click', (e) => {
+      const row = e.target.closest('tr');
+      const entryId = row.querySelector('.hidden-column').textContent;
+      deleteEntry(selectedDate, entryId);
+    });
+  });
 }
 
 // Populate food select dropdown
@@ -180,25 +205,27 @@ function loadDayData(date) {
     dayData.forEach(entry => {
         const row = document.createElement('tr');
         row.innerHTML = `
+            <td class="hidden-column">${entry.id}</td>
             <td>${entry.time}</td>
-            <td>${entry.name.charAt(0).toUpperCase() + entry.name.slice(1)}</td>
+            <td>${entry.name}</td>
             <td>${entry.grams}</td>
             <td>${entry.calories}</td>
             <td>${entry.protein}</td>
             <td>${entry.fat}</td>
             <td>${entry.carbs}</td>
             <td>${entry.fiber}</td>
-            <td><button class="delete-btn" onclick="deleteEntry('${date}', ${entry.id})">Delete</button></td>
+            <td><button class="delete-btn delete-food-entry">Delete</button></td>
         `;
         tbody.appendChild(row);
     });
+    addDeleteEvents();
 }
 
 // Delete an entry
 function deleteEntry(date, entryId) {
     if (confirm('Are you sure you want to delete this entry?')) {
         let dayData = getDayData(date);
-        dayData = dayData.filter(entry => entry.id !== entryId);
+        dayData = dayData.filter(entry => entry.id !== parseInt(entryId));
         saveDayData(date, dayData);
         loadDayData(selectedDate);
         renderCalendar();
diff --git a/style.css b/style.css
index 4cc9aef..f10af86 100644
--- a/style.css
+++ b/style.css
@@ -342,6 +342,10 @@ select:focus, input:focus {
     margin-top: 2px;
 }
 
+.hidden-column {
+    display: none;
+}
+
 @media (max-width: 768px) {
     .container {
         margin: 0px;