Hugging Face's logo

Spaces:
Arvindreddy
/
deepsite-project
Running

App Files Community
Arvindreddy commited on
Commit
e2b11cb
·
verified ·
1 Parent(s): 2ef54b7

Create a calorie tracking app wher in i can put meals

Browse files
Files changed (2) hide show
  1. index.html +7 -6
  2. tracker.html +114 -0
index.html CHANGED
@@ -8,12 +8,13 @@
8
  </head>
9
  <body>
10
  <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
  </p>
17
  </div>
18
- </body>
 
19
  </html>
 
8
  </head>
9
  <body>
10
  <div class="card">
11
+ <h1>Welcome to Calorie Tracker!</h1>
12
+ <p>Track your daily calorie intake and maintain a healthy diet.</p>
13
+ <a href="tracker.html" class="btn btn-primary">Go to Calorie Tracker</a>
14
+ <p class="mt-3">
15
+ Start by adding your meals and tracking your daily calorie consumption.
16
  </p>
17
  </div>
18
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
19
+ </body>
20
  </html>
tracker.html ADDED
@@ -0,0 +1,114 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Calorie Tracker</title>
7
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
8
+ <style>
9
+ body {
10
+ padding: 20px;
11
+ background-color: #f8f9fa;
12
+ }
13
+ .calorie-card {
14
+ background: white;
15
+ border-radius: 10px;
16
+ padding: 20px;
17
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
18
+ margin-bottom: 20px;
19
+ }
20
+ .meal-entry {
21
+ margin-bottom: 15px;
22
+ padding: 10px;
23
+ border: 1px solid #dee2e6;
24
+ border-radius: 5px;
25
+ background: #f8f9fa;
26
+ }
27
+ </style>
28
+ </head>
29
+ <body>
30
+ <div class="container">
31
+ <div class="calorie-card">
32
+ <h1 class="text-center mb-4">Calorie Tracker</h1>
33
+
34
+ <div class="row mb-4">
35
+ <div class="col-md-6">
36
+ <h3>Add New Meal</h3>
37
+ <form id="mealForm">
38
+ <div class="mb-3">
39
+ <label for="mealName" class="form-label">Meal Name</label>
40
+ <input type="text" class="form-control" id="mealName" required>
41
+ </div>
42
+ <div class="mb-3">
43
+ <label for="calories" class="form-label">Calories</label>
44
+ <input type="number" class="form-control" id="calories" required>
45
+ </div>
46
+ <button type="submit" class="btn btn-primary">Add Meal</button>
47
+ </form>
48
+ </div>
49
+ <div class="col-md-6">
50
+ <h3>Daily Summary</h3>
51
+ <div class="card">
52
+ <div class="card-body">
53
+ <h5 class="card-title">Total Calories</h5>
54
+ <h2 id="totalCalories">0</h2>
55
+ </div>
56
+ </div>
57
+ </div>
58
+ </div>
59
+
60
+ <div id="mealList">
61
+ <h3>Today's Meals</h3>
62
+ <div id="mealsContainer">
63
+ <!-- Meal entries will appear here -->
64
+ </div>
65
+ </div>
66
+ </div>
67
+ </div>
68
+
69
+ <script>
70
+ document.getElementById('mealForm').addEventListener('submit', function(e) {
71
+ e.preventDefault();
72
+
73
+ const mealName = document.getElementById('mealName').value;
74
+ const calories = parseInt(document.getElementById('calories').value);
75
+
76
+ if (!mealName || isNaN(calories)) return;
77
+
78
+ addMeal(mealName, calories);
79
+ updateTotal();
80
+
81
+ // Reset form
82
+ document.getElementById('mealName').value = '';
83
+ document.getElementById('calories').value = '';
84
+ });
85
+
86
+ function addMeal(name, calories) {
87
+ const mealsContainer = document.getElementById('mealsContainer');
88
+
89
+ const mealDiv = document.createElement('div');
90
+ mealDiv.className = 'meal-entry';
91
+ mealDiv.innerHTML = `
92
+ <div class="d-flex justify-content-between">
93
+ <strong>${name}</strong>
94
+ <span>${calories} cal</span>
95
+ </div>
96
+ `;
97
+
98
+ mealsContainer.appendChild(mealDiv);
99
+ }
100
+
101
+ function updateTotal() {
102
+ const entries = document.querySelectorAll('.meal-entry span');
103
+ let total = 0;
104
+
105
+ entries.forEach(entry => {
106
+ const calories = parseInt(entry.textContent);
107
+ total += calories;
108
+ });
109
+
110
+ document.getElementById('totalCalories').textContent = total;
111
+ }
112
+ </script>
113
+ </body>
114
+ </html>