HealthGrid - Calorie & Nutrition Tracker

A professional-grade health tracking web application built with pure vanilla JavaScript, HTML5, and CSS3. Track calories, monitor nutrition, and visualize your health data with beautiful charts.

---

🎯 Problem Statement

Maintaining a healthy diet requires consistent tracking of food intake and nutrition. Most calorie tracking apps are either:

• Too complex with unnecessary features
• Require account creation and share your data
• Need expensive subscriptions

HealthGrid solves this by providing a beautiful, privacy-first calorie tracker that:

• Works entirely in your browser (no backend needed)
• Stores all data locally using LocalStorage
• Supports thousands of foods via the Nutrition API
• Provides clear visualizations of your eating patterns

---

✨ Features Implemented

1. Dashboard

• Real-time Statistics - Total calories, meals logged, protein/carbs breakdown
• Canvas-based Chart - Currency-style area chart showing calorie trends
• Time Period Selector - View data for 7 days, 2 weeks, 1 month, 3 months, or 6 months
• Recent Meals List - Quick view of latest logged foods
• Nutrition Breakdown - Visual bars for protein, carbs, and fat

2. Calorie Tracker

• API-Powered Search - Search any food using the API Ninjas Nutrition API
• Local Food Database - 25+ common foods (Indian & global) as fallback
• Manual Entry - Add custom foods with full nutrition data
• Real-time Totals - Animated calorie counter with macro summary
• History Modal - View all past tracking data

3. Homepage

• Animated Particle Background - Canvas-based interactive particles
• Hero Section - With floating cards and counter animations
• Features Showcase - Highlighting all app capabilities
• Testimonials - Social proof section
• Responsive Design - Works on all screen sizes

4. Cross-Cutting Features

• Dark/Light Theme - Toggle with persistence
• Responsive Navigation - Desktop and mobile menu
• Toast Notifications - Visual feedback for actions
• Data Sync - All pages share the same localStorage data

---

🔧 DOM Concepts Used

Concept	Implementation
Creating Elements Dynamically	Search results, food list items, history entries, chart data points
Updating DOM Based on Interaction	Real-time calorie totals, chart time period changes, theme toggle
Removing/Toggling Elements	Remove food items, toggle manual entry section, show/hide modals
Changing Styles via JavaScript	Theme switching, progress bar widths, chart rendering
Event Handling (Click)	Add food buttons, navigation, theme toggle, remove items
Event Handling (Form)	Search input, manual entry form, quantity inputs
Event Handling (Keyboard)	Enter to search, Escape to close modals
Event Delegation	Food list remove buttons, search results add buttons
Fetch API	Nutrition data from API Ninjas
LocalStorage	Calorie data persistence, theme persistence, API key storage
Canvas API	Area chart rendering, particle animation background
Intersection Observer	Scroll-triggered animations on homepage
requestAnimationFrame	Smooth animations for numbers, chart rendering

---

📁 Project Structure

WedDev_EndTerm_project/
├── Dashboard/
│   ├── Dashboard.html      # Main dashboard page
│   ├── Dashboard.css       # Dashboard styles
│   └── Dashboard.js        # Chart & data logic
├── HomePage/
│   ├── index.html          # Landing page
│   ├── style.css           # Homepage styles
│   └── script.js           # Particles & animations
├── calorie_Tracker/
│   ├── calorie_Tracker.html  # Food tracking page
│   ├── calorie_Tracker.css   # Tracker styles
│   └── calorie_Tracker.js    # API integration & logging
├── favicon.png             # App favicon/icon
├── dashboard-screenshot.png # Dashboard preview image
└── README.md               # This file

---

🚀 Steps to Run the Project

1. Clone or download this repository
2. Open HomePage/index.html in any modern web browser
3. Navigate using the navbar to access different sections
4. Optional: Add API Key for unlimited food search
   • Visit api-ninjas.com
   • Create a free account
   • Copy your API key
   • Paste it when prompted in the Calorie Tracker

Note: The app works without an API key using the built-in local food database.

---

🌐 API Integration

API Ninjas Nutrition API

• Endpoint: https://api.api-ninjas.com/v1/nutrition
• Method: GET with query parameter
• Authentication: API key in X-Api-Key header
• Features: Natural language query (e.g., "2 eggs and toast")

// Example API call
fetch('https://api.api-ninjas.com/v1/nutrition?query=apple', {
    headers: { 'X-Api-Key': 'YOUR_API_KEY' }
})
.then(response => response.json())
.then(data => console.log(data));

---

💾 Data Storage (LocalStorage)

Calorie Data (calorieData)

{
  "2026-01-20": {
    "foods": [
      {
        "name": "chicken breast",
        "kcal": 165,
        "protein": 31,
        "carbs": 0,
        "fat": 3.6,
        "time": "20 Jan 2026, 10:30 AM"
      }
    ],
    "total": 165
  }
}

Theme Preference (healthgrid-theme)

"dark" | "light"

API Key (nutritionApiKey)

"your-api-key-here"

---

⚠️ Known Limitations

1. API Rate Limits - Free tier has daily request limits
2. Offline Mode - API search requires internet (local DB works offline)
3. Browser Support - Requires modern browser with ES6+ support
4. Data Backup - LocalStorage can be cleared by browser; no export feature yet

---

🛠️ Technologies Used

• HTML5 - Semantic markup, Canvas elements
• CSS3 - Flexbox, Grid, Custom Properties, Animations, Glassmorphism
• Vanilla JavaScript (ES6+) - Classes, Arrow functions, Template literals, Async/await, Fetch API
• Browser APIs - LocalStorage, Canvas, Intersection Observer, Fetch

---

👨‍💻 Developer

Amartya Majumder

Built with 💚 using pure vanilla technologies for WebDev EndTerm Project