Home
Tanvir Hasan Bappy (Tanvir)
Health Tracker - Diet Calorie Management App

Health Tracker - Diet Calorie Management App

This tailwind example is contributed by Tanvir Hasan Bappy (Tanvir), on 29-Dec-2025. Component is made with Tailwind CSS v3. It is responsive.

Other

Author Tanvir Hasan Bappy (Tanvir)

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Health Tracker - Diet Calorie Management App</title>
  
  <script src="https://cdn.tailwindcss.com"></script>
  
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
  
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#22c55e',
            secondary: '#16a34a',
            tertiary: '#86efac',
            dark: '#1e293b',
            light: '#f8fafc',
            'primary-light': '#dcfce7',
            'primary-dark': '#15803d'
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
          animation: {
            'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
          }
        }
      }
    }
  </script>
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }
      .card-shadow {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
      }
      .progress-ring-circle {
        transition: stroke-dashoffset 0.35s;
        transform: rotate(-90deg);
        transform-origin: 50% 50%;
      }
      .tab-indicator {
        transition: transform 0.3s ease;
      }
      .food-card-hover {
        transition: all 0.3s ease;
      }
      .food-card-hover:hover {
        transform: translateY(-5px);
      }
    }
  </style>
</head>
<body class="bg-gray-50 font-sans text-dark">
  <div class="max-w-md mx-auto min-h-screen bg-white relative">
    
    <div id="app" class="relative">
      
      <div id="dashboard-page" class="page active">
        
        <header class="bg-gradient-to-r from-primary to-secondary text-white p-4">
          <div class="flex justify-between items-center">
            <div>
              <h1 class="text-xl font-bold" id="greeting">Health Tracker</h1>
              <p class="text-sm opacity-90" id="current-date">Monday, July 21, 2025</p>
            </div>
            <div class="w-10 h-10 rounded-full bg-primary-light text-primary flex items-center justify-center text-3xl">🧘‍♀️</div>
          </div>
        </header>

<div class="p-6 flex flex-col items-center">
          <div class="relative w-48 h-48 mb-4">
            <svg class="w-full h-full" viewBox="0 0 100 100">
              
              <circle class="text-gray-200" stroke-width="8" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50"></circle>
              
              <circle id="progress-ring" class="text-primary progress-ring-circle" stroke-width="8" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" stroke-dasharray="251.2" stroke-dashoffset="188.4"></circle>
            </svg>
            <div class="absolute inset-0 flex flex-col items-center justify-center">
              <span id="calorie-progress" class="text-3xl font-bold text-dark">300</span>
              <span class="text-sm text-gray-500">&nbsp;1200 Cals</span>
            </div>
          </div>
          <div class="w-full max-w-xs">
            <div class="flex justify-between text-sm text-gray-500 mb-1">
              <span>Today's Intake</span>
              <span id="calorie-percentage">25%</span>
            </div>
            <div class="w-full bg-gray-200 rounded-full h-2">
              <div id="calorie-bar" class="bg-primary h-2 rounded-full" style="width: 25%"></div>
            </div>
          </div>
        </div>

<div class="px-4 mb-6">
          <h2 class="text-lg font-semibold mb-3">
Macronutrients
</h2>
          <div class="grid grid-cols-3 gap-3">
            
            <div class="bg-blue-50 rounded-xl p-3 flex flex-col items-center">
              <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mb-2 text-2xl">
                🍞
              </div>
              <span class="text-xs text-gray-500">Carbs</span>
              <span id="carbs-value" class="font-semibold">25g</span>
            </div>
            
            <div class="bg-purple-50 rounded-xl p-3 flex flex-col items-center">
              <div class="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mb-2 text-2xl">
                🥩
              </div>
              <span class="text-xs text-gray-500">Protein</span>
              <span id="protein-value" class="font-semibold">18g</span>
            </div>
            
            <div class="bg-yellow-50 rounded-xl p-3 flex flex-col items-center">
              <div class="w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center mb-2 text-2xl" style="color: rgb(123, 145, 181);">🥑</div>
              <span class="text-xs text-gray-500">Fat</span>
              <span id="fat-value" class="font-semibold">12g</span>
            </div>
          </div>
        </div>

<div class="px-4 mb-10 py-10">
          <div class="flex justify-between items-center mb-3">
            <h2 class="text-lg font-semibold">Today's Meals</h2>
            <button id="add-meal-btn" class="text-primary text-sm flex items-center">
              <i class="fa fa-plus-circle mr-1"></i> Add Meal
            </button>
          </div>
          
          
          <div class="relative mb-4">
            <div class="flex justify-between">
              <button class="meal-tab flex-1 py-2 text-center text-sm font-medium text-primary border-b-2 border-primary" data-meal="breakfast">Breakfast</button>
              <button class="meal-tab flex-1 py-2 text-center text-sm font-medium text-gray-400 border-b-2 border-transparent" data-meal="lunch">Lunch</button>
              <button class="meal-tab flex-1 py-2 text-center text-sm font-medium text-gray-400 border-b-2 border-transparent" data-meal="dinner">Dinner</button>
              <button class="meal-tab flex-1 py-2 text-center text-sm font-medium text-gray-400 border-b-2 border-transparent" data-meal="snack">Snacks</button>
            </div>
            <div class="tab-indicator absolute bottom-0 left-0 h-0.5 bg-primary w-1/4"></div>
          </div>
          
          
          <div class="meal-content active" id="breakfast-content">
            <div class="space-y-3" id="breakfast-list">
              
              <div class="bg-white rounded-xl p-3 border border-gray-100 card-shadow flex justify-between items-center">
                <div class="flex items-center">
                  <div class="w-10 h-10 rounded-lg overflow-hidden mr-3">
                    <div class="w-full h-full flex items-center justify-center bg-green-100 text-xl">🥝</div>
                  </div>
                  <div>
                    <h3 class="font-medium">Kiwi</h3>
                    <p class="text-xs text-gray-500">1 piece · 61 calories</p>
                  </div>
                </div>
                <button class="text-gray-400 hover:text-red-500">
                  <i class="fa fa-trash"></i>
                </button>
              </div>
              <div class="bg-white rounded-xl p-3 border border-gray-100 card-shadow flex justify-between items-center">
                <div class="flex items-center">
                  <div class="w-10 h-10 rounded-lg overflow-hidden mr-3">
                    <div class="w-full h-full flex items-center justify-center bg-orange-100 text-xl">🥭</div>
                  </div>
                  <div>
                    <h3 class="font-medium">Passion Fruit</h3>
                    <p class="text-xs text-gray-500">1 piece · 97 calories</p>
                  </div>
                </div>
                <button class="text-gray-400 hover:text-red-500">
                  <i class="fa fa-trash"></i>
                </button>
              </div>
            </div>
            
            <div class="hidden flex flex-col items-center justify-center py-8 text-gray-400">
              <i class="fa fa-utensils text-4xl mb-2"></i>
              <p class="text-sm">No breakfast recorded</p>
              <button class="mt-2 text-primary text-sm">Add Food</button>
            </div>
          </div>
          
          <div class="meal-content hidden" id="lunch-content">
            <div class="space-y-3" id="lunch-list">
              
            </div>
            
            <div class="flex flex-col items-center justify-center py-8 text-gray-400">
              <i class="fa fa-utensils text-4xl mb-2"></i>
              <p class="text-sm">No lunch recorded</p>
              <button class="mt-2 text-primary text-sm add-food-btn" data-meal="lunch">Add Food</button>
            </div>
          </div>
          
          <div class="meal-content hidden" id="dinner-content">
            <div class="space-y-3" id="dinner-list">
              
            </div>
            
            <div class="flex flex-col items-center justify-center py-8 text-gray-400">
              <i class="fa fa-utensils text-4xl mb-2"></i>
              <p class="text-sm">No dinner recorded</p>
              <button class="mt-2 text-primary text-sm add-food-btn" data-meal="dinner">Add Food</button>
            </div>
          </div>
          
          <div class="meal-content hidden" id="snack-content">
            <div class="space-y-3" id="snack-list">
              
            </div>
            
            <div class="flex flex-col items-center justify-center py-8 text-gray-400">
              <i class="fa fa-utensils text-4xl mb-2"></i>
              <p class="text-sm">No snacks recorded</p>
              <button class="mt-2 text-primary text-sm add-food-btn" data-meal="snack">Add Food</button>
            </div>
          </div>
        </div>
      </div>

<div id="search-page" class="page hidden">
        <header class="bg-white shadow-sm p-4 sticky top-0 z-10">
          <div class="relative">
            <input type="text" id="food-search-input" placeholder="Search foods..." class="w-full pl-10 pr-4 py-2 rounded-full bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary">
            <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
          </div>
        </header>
        
        
        <div class="px-4 py-3 overflow-x-auto">
          <div class="flex space-x-2 min-w-max">
            <button class="category-btn whitespace-nowrap px-4 py-1 rounded-full bg-primary text-white text-sm">All</button>
            <button class="category-btn whitespace-nowrap px-4 py-1 rounded-full bg-gray-100 text-gray-700 text-sm">Fruits</button>
            <button class="category-btn whitespace-nowrap px-4 py-1 rounded-full bg-gray-100 text-gray-700 text-sm">Vegetables</button>
            <button class="category-btn whitespace-nowrap px-4 py-1 rounded-full bg-gray-100 text-gray-700 text-sm">Grains</button>
            <button class="category-btn whitespace-nowrap px-4 py-1 rounded-full bg-gray-100 text-gray-700 text-sm">Protein</button>
            <button class="category-btn whitespace-nowrap px-4 py-1 rounded-full bg-gray-100 text-gray-700 text-sm">Snacks</button>
          </div>
        </div>
        
        
        <div class="p-4" id="search-results">
          <div class="pb-16 grid grid-cols-2 gap-3">
            
          </div>
          
          
          <div id="search-empty-state" class="hidden flex flex-col items-center justify-center py-12 text-gray-400">
            <i class="fa fa-search text-4xl mb-2"></i>
            <p class="text-sm">No matching foods found</p>
            <p class="text-xs mt-1">Please try other keywords</p>
          </div>
        </div>
      </div>

<div id="food-detail-page" class="page hidden">
        <header class="bg-white shadow-sm p-4 sticky top-0 z-10 flex justify-between items-center">
          <button id="back-to-search" class="text-gray-500">
            <i class="fa fa-arrow-left"></i>
          </button>
          <h2 class="font-medium">Food Details</h2>
          <div class="w-6"></div> 
        </header>
        
        <div class="p-4">
          
          <div class="w-full h-48 rounded-xl overflow-hidden mb-4 flex items-center justify-center bg-gray-100">
            <div id="food-detail-emoji" class="text-8xl">🐟</div>
          </div>
          
          
          <div class="flex justify-between items-center mb-4">
            <h1 id="food-detail-name" class="text-xl font-bold">Kiwi</h1>
            <span id="food-detail-calorie" class="text-primary font-semibold">61 Calories</span>
          </div>
          
          
          <div class="bg-gray-50 rounded-xl p-4 mb-4">
            <h3 class="text-sm font-medium text-gray-500 mb-3">Nutrition Information (per serving)</h3>
            <div class="space-y-2">
              <div class="flex justify-between">
                <span class="text-sm">Carbohydrates</span>
                <span id="food-detail-carbs" class="text-sm font-medium">15g</span>
              </div>
              <div class="flex justify-between">
                <span class="text-sm">Protein</span>
                <span id="food-detail-protein" class="text-sm font-medium">1.1g</span>
              </div>
              <div class="flex justify-between">
                <span class="text-sm">Fat</span>
                <span id="food-detail-fat" class="text-sm font-medium">0.5g</span>
              </div>
              <div class="flex justify-between">
                <span class="text-sm">Fiber</span>
                <span id="food-detail-fiber" class="text-sm font-medium">2.6g</span>
              </div>
            </div>
          </div>
          
          
          <div class="mb-6">
            <h3 class="text-sm font-medium text-gray-500 mb-3">Select Serving Size</h3>
            <div class="grid grid-cols-3 gap-2">
              <button class="portion-btn px-3 py-2 border border-gray-200 rounded-lg text-center">
                <span class="block text-sm">1/2 piece</span>
                <span class="block text-xs text-gray-500">30 calories</span>
              </button>
              <button class="portion-btn px-3 py-2 border border-primary bg-primary-light rounded-lg text-center">
                <span class="block text-sm">1 piece</span>
                <span class="block text-xs text-gray-500">61 calories</span>
              </button>
              <button class="portion-btn px-3 py-2 border border-gray-200 rounded-lg text-center">
                <span class="block text-sm">2 pieces</span>
                <span class="block text-xs text-gray-500">122 calories</span>
              </button>
            </div>
          </div>
          
          
          <button id="add-to-meal-btn" class="w-full py-3 bg-primary text-white rounded-xl font-medium flex items-center justify-center">
            <i class="fa fa-plus-circle mr-2"></i> Add to Breakfast
          </button>
        </div>
      </div>

<div id="progress-page" class="page hidden">
        <header class="bg-gradient-to-r from-primary to-secondary text-white p-4">
          <h1 class="text-xl font-bold">Progress Tracking</h1>
        </header>
        
        
        <div class="p-6 pb-24">
          <div class="bg-white rounded-xl p-4 card-shadow mb-6">
            <div class="flex justify-between items-center mb-4">
              <h2 class="text-lg font-semibold">Overall Progress</h2>
              <span class="text-sm text-gray-500">This Week</span>
            </div>
            <div class="flex items-center justify-center mb-4">
              <div class="relative w-32 h-32">
                <svg class="w-full h-full" viewBox="0 0 100 100">
                  
                  <circle class="text-gray-200" stroke-width="8" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50"></circle>
                  
                  <circle class="text-primary progress-ring-circle" stroke-width="8" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" stroke-dasharray="251.2" stroke-dashoffset="100.5"></circle>
                </svg>
                <div class="absolute inset-0 flex flex-col items-center justify-center">
                  <span class="text-2xl font-bold text-dark">60%</span>
                  <span class="text-xs text-gray-500">Completion Rate</span>
                </div>
              </div>
            </div>
            <div class="flex justify-between text-sm">
              <div class="text-center">
                <p class="text-gray-500">Goal</p>
                <p class="font-medium">1200 calories/day</p>
              </div>
              <div class="text-center">
                <p class="text-gray-500">Avg. Intake</p>
                <p class="font-medium">950 calories/day</p>
              </div>
              <div class="text-center">
                <p class="text-gray-500">Streak</p>
                <p class="font-medium">5 days</p>
              </div>
            </div>
          </div>
          
          
          <div class="bg-white rounded-xl p-4 card-shadow mb-6">
            <div class="flex justify-between items-center mb-4">
              <h2 class="text-lg font-semibold">Daily Intake Trend</h2>
              <div class="flex space-x-1">
                <button class="text-xs px-2 py-1 bg-primary text-white rounded">Week</button>
                <button class="text-xs px-2 py-1 bg-gray-100 text-gray-500 rounded">Month</button>
              </div>
            </div>
            <div class="h-40">
              <canvas id="calorie-chart"></canvas>
            </div>
          </div>
          
          
          <div class="bg-white rounded-xl p-4 card-shadow">
            <div class="flex justify-between items-center mb-4">
              <h2 class="text-lg font-semibold">Nutrition Distribution</h2>
              <span class="text-sm text-gray-500">Weekly Average</span>
            </div>
            <div class="flex justify-center mb-4">
              <div class="w-32 h-32">
                <canvas id="nutrition-chart"></canvas>
              </div>
            </div>
            <div class="grid grid-cols-3 gap-2 text-center">
              <div>
                <div class="w-3 h-3 rounded-full bg-blue-500 mx-auto mb-1"></div>
                <p class="text-xs">Carbohydrates</p>
                <p class="text-sm font-medium">50%</p>
              </div>
              <div>
                <div class="w-3 h-3 rounded-full bg-purple-500 mx-auto mb-1"></div>
                <p class="text-xs">Protein</p>
                <p class="text-sm font-medium">30%</p>
              </div>
              <div>
                <div class="w-3 h-3 rounded-full bg-yellow-500 mx-auto mb-1"></div>
                <p class="text-xs">Fat</p>
                <p class="text-sm font-medium">20%</p>
              </div>
            </div>
          </div>
        </div>
      </div>

<div id="profile-page" class="page hidden">
        <header class="bg-gradient-to-r from-primary to-secondary text-white p-4">
          <h1 class="text-xl font-bold">Profile</h1>
        </header>
        
        <div class="p-6 pb-24">
          
          <div class="flex flex-col items-center mb-6">
            <div class="w-24 h-24 rounded-full bg-primary-light text-primary flex items-center justify-center text-5xl border-4 border-white shadow-md">
              👦
            </div>
            <h2 class="text-xl font-bold">User</h2>
            <p class="text-sm text-gray-500">Used for 14 days</p>
          </div>
          
          
          <div class="bg-white rounded-xl p-4 card-shadow mb-6">
            <h2 class="text-lg font-semibold mb-4">Daily Calorie Goal</h2>
            <div class="flex items-center justify-between mb-2">
              <span class="text-sm">1200 Calories</span>
              <button class="text-primary text-sm">Edit</button>
            </div>
            <input type="range" min="1000" max="3000" step="100" value="1200" class="w-full accent-primary">
            <div class="flex justify-between text-xs text-gray-500 mt-1">
              <span>1000</span>
              <span>2000</span>
              <span>3000</span>
            </div>
          </div>
          
          
          <div class="bg-white rounded-xl p-4 card-shadow mb-6">
            <h2 class="text-lg font-semibold mb-4">My Achievements</h2>
            <div class="grid grid-cols-3 gap-3">
              <div class="flex flex-col items-center">
                <div class="w-16 h-16 rounded-full bg-primary-light flex items-center justify-center mb-2">
                  <i class="fa fa-star text-primary text-xl"></i>
                </div>
                <p class="text-xs text-center">7-Day Streak</p>
              </div>
              <div class="flex flex-col items-center">
                <div class="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center mb-2">
                  <i class="fa fa-trophy text-gray-400 text-xl"></i>
                </div>
                <p class="text-xs text-center text-gray-400">First Goal</p>
              </div>
              <div class="flex flex-col items-center">
                <div class="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center mb-2">
                  <i class="fa fa-leaf text-gray-400 text-xl"></i>
                </div>
                <p class="text-xs text-center text-gray-400">Healthy Diet</p>
              </div>
            </div>
          </div>
          
          
          <div class="bg-white rounded-xl p-4 card-shadow">
            <h2 class="text-lg font-semibold mb-4">Settings</h2>
            <div class="space-y-3">
              <div class="flex justify-between items-center">
                <div class="flex items-center">
                  <i class="fa fa-bell text-gray-500 mr-3"></i>
                  <span>Notifications</span>
                </div>
                <label class="switch">
                  <input type="checkbox" checked>
                  <span class="slider round"></span>
                </label>
              </div>
              <div class="flex justify-between items-center">
                <div class="flex items-center">
                  <i class="fa fa-moon-o text-gray-500 mr-3"></i>
                  <span>Dark Mode</span>
                </div>
                <label class="switch">
                  <input type="checkbox">
                  <span class="slider round"></span>
                </label>
              </div>
              <div class="flex justify-between items-center">
                <div class="flex items-center">
                  <i class="fa fa-history text-gray-500 mr-3"></i>
                  <span>History</span>
                </div>
                <i class="fa fa-chevron-right text-gray-400"></i>
              </div>
              <div class="flex justify-between items-center">
                <div class="flex items-center">
                  <i class="fa fa-question-circle text-gray-500 mr-3"></i>
                  <span>Help & Support</span>
                </div>
                <i class="fa fa-chevron-right text-gray-400"></i>
              </div>
            </div>
          </div>
        </div>
      </div>

<nav class="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-white border-t border-gray-200 flex justify-around items-center py-2 z-20">
        <button class="nav-btn flex flex-col items-center justify-center p-2 w-1/4 active" data-page="dashboard-page">
          <i class="fa fa-home text-lg"></i>
          <span class="text-xs mt-1">Home</span>
        </button>
        <button class="nav-btn flex flex-col items-center justify-center p-2 w-1/4" data-page="search-page">
          <i class="fa fa-search text-lg"></i>
          <span class="text-xs mt-1">Search</span>
        </button>
        <button class="nav-btn flex flex-col items-center justify-center p-2 w-1/4" data-page="progress-page">
          <i class="fa fa-line-chart text-lg"></i>
          <span class="text-xs mt-1">Progress</span>
        </button>
        <button class="nav-btn flex flex-col items-center justify-center p-2 w-1/4" data-page="profile-page">
          <i class="fa fa-user text-lg"></i>
          <span class="text-xs mt-1">Profile</span>
        </button>
      </nav>
    </div>
  </div>

// User Data
    let userData = {
      currentCalories: 300,
      targetCalories: 1200,
      macros: {
        carbs: 25,
        protein: 18,
        fat: 12
      },
      meals: {
        breakfast: [
          {
            id: 1,
            name: 'Kiwi',
            calories: 61,
            quantity: 1,
            image: 'emoji:kiwi'
          },
          {
            id: 2,
            name: 'Passion Fruit',
            calories: 97,
            quantity: 1,
            image: 'emoji:passionfruit'
          }
        ],
        lunch: [],
        dinner: [],
        snack: []
      },
      selectedMealType: 'breakfast',
      selectedFood: null
    };

// DOM Elements
    const elements = {
      pages: document.querySelectorAll('.page'),
      navBtns: document.querySelectorAll('.nav-btn'),
      mealTabs: document.querySelectorAll('.meal-tab'),
      mealContents: document.querySelectorAll('.meal-content'),
      tabIndicator: document.querySelector('.tab-indicator'),
      addMealBtn: document.getElementById('add-meal-btn'),
      addFoodBtns: document.querySelectorAll('.add-food-btn'),
      foodSearchInput: document.getElementById('food-search-input'),
      searchResults: document.getElementById('search-results'),
      searchEmptyState: document.getElementById('search-empty-state'),
      backToSearch: document.getElementById('back-to-search'),
      foodDetailPage: document.getElementById('food-detail-page'),
      foodDetailName: document.getElementById('food-detail-name'),
      foodDetailCalorie: document.getElementById('food-detail-calorie'),
      foodDetailCarbs: document.getElementById('food-detail-carbs'),
      foodDetailProtein: document.getElementById('food-detail-protein'),
      foodDetailFat: document.getElementById('food-detail-fat'),
      foodDetailFiber: document.getElementById('food-detail-fiber'),
      portionBtns: document.querySelectorAll('.portion-btn'),
      addToMealBtn: document.getElementById('add-to-meal-btn'),
      calorieProgress: document.getElementById('calorie-progress'),
      caloriePercentage: document.getElementById('calorie-percentage'),
      calorieBar: document.getElementById('calorie-bar'),
      carbsValue: document.getElementById('carbs-value'),
      proteinValue: document.getElementById('protein-value'),
      fatValue: document.getElementById('fat-value'),
      greeting: document.getElementById('greeting'),
      currentDate: document.getElementById('current-date')
    };

// Initialization
    function init() {
      // Set current date and greeting
      setDateAndGreeting();
      
      // Initialize progress ring
      updateProgressRing();
      
      // Initialize bottom navigation
      initNavigation();
      
      // Initialize meal tabs
      initMealTabs();
      
      // Initialize search functionality
      initSearch();
      
      // Initialize food detail page
      initFoodDetail();
      
      // Initialize charts
      initCharts();
      
      // Bind events
      bindEvents();
    }

// Set current date and greeting
    function setDateAndGreeting() {
      const now = new Date();
      const hours = now.getHours();
      const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };
      const dateString = now.toLocaleDateString('en-US', options);
      
      let greeting = '';
      if (hours < 12) {
        greeting = 'Good morning';
      } else if (hours < 18) {
        greeting = 'Good afternoon';
      } else {
        greeting = 'Good evening';
      }
      
      elements.greeting.textContent = `${greeting}, User`;
      elements.currentDate.textContent = dateString;
    }

// Update progress ring
    function updateProgressRing() {
      const percentage = (userData.currentCalories / userData.targetCalories) * 100;
      const clampedPercentage = Math.min(100, percentage);
      
      // Update text
      elements.calorieProgress.textContent = userData.currentCalories;
      elements.caloriePercentage.textContent = `${Math.round(clampedPercentage)}%`;
      
      // Update progress bar
      elements.calorieBar.style.width = `${clampedPercentage}%`;
      
      // Update macronutrients
      elements.carbsValue.textContent = `${userData.macros.carbs}g`;
      elements.proteinValue.textContent = `${userData.macros.protein}g`;
      elements.fatValue.textContent = `${userData.macros.fat}g`;
    }

// Initialize bottom navigation
    function initNavigation() {
      elements.navBtns.forEach(btn => {
        btn.addEventListener('click', () => {
          const targetPage = btn.getAttribute('data-page');
          
          // Update navigation button status
          elements.navBtns.forEach(b => b.classList.remove('active'));
          btn.classList.add('active');
          
          // Switch pages
          elements.pages.forEach(page => {
            if (page.id === targetPage) {
              page.classList.remove('hidden');
              page.classList.add('active');
            } else {
              page.classList.add('hidden');
              page.classList.remove('active');
            }
          });
        });
      });
    }

// Initialize meal tabs
    function initMealTabs() {
      elements.mealTabs.forEach((tab, index) => {
        tab.addEventListener('click', () => {
          const mealType = tab.getAttribute('data-meal');
          
          // Update tab status
          elements.mealTabs.forEach(t => {
            t.classList.remove('active', 'text-primary', 'border-primary');
            t.classList.add('text-gray-400', 'border-transparent');
          });
          tab.classList.add('active', 'text-primary', 'border-primary');
          tab.classList.remove('text-gray-400', 'border-transparent');
          
          // Move indicator
          elements.tabIndicator.style.transform = `translateX(${index * 100}%)`;
          
          // Show corresponding content
          elements.mealContents.forEach(content => {
            content.classList.add('hidden');
          });
          document.getElementById(`${mealType}-content`).classList.remove('hidden');
        });
      });
    }

// Initialize search functionality
    function initSearch() {
      // Display all foods
      renderFoodCards(foodDatabase);
      
      // Search input event
      elements.foodSearchInput.addEventListener('input', () => {
        const searchTerm = elements.foodSearchInput.value.toLowerCase().trim();
        
        if (searchTerm === '') {
          renderFoodCards(foodDatabase);
          return;
        }
        
        // Search matching foods
        const filteredFoods = foodDatabase.filter(food => 
          food.name.toLowerCase().includes(searchTerm) ||
          food.category.toLowerCase().includes(searchTerm)
        );
        
        renderFoodCards(filteredFoods);
      });
    }

// Render food cards
    function renderFoodCards(foods) {
      const container = elements.searchResults.querySelector('.grid');
      container.innerHTML = '';
      
      if (foods.length === 0) {
        container.parentElement.classList.add('hidden');
        elements.searchEmptyState.classList.remove('hidden');
        return;
      }
      
      container.parentElement.classList.remove('hidden');
      elements.searchEmptyState.classList.add('hidden');
      
      foods.forEach(food => {
        const card = document.createElement('div');
        card.className = 'food-card bg-white rounded-xl overflow-hidden border border-gray-100 card-shadow food-card-hover';
        
        // Handle image or emoji
        let imageContent = '';
        if (food.image && food.image.startsWith('emoji:')) {
          const emojiType = food.image.split(':')[1];
          let emoji = '';
          let bgColor = 'bg-gray-100';
          
          switch(emojiType) {
            case 'kiwi': emoji = '🥝'; bgColor = 'bg-green-100'; break;
            case 'passionfruit': emoji = '🥭'; bgColor = 'bg-orange-100'; break; // Using mango emoji instead of passion fruit
            case 'watermelon': emoji = '🍉'; bgColor = 'bg-red-100'; break;
            case 'broccoli': emoji = '🥦'; bgColor = 'bg-green-100'; break;
            case 'bokchoy': emoji = '🥬'; bgColor = 'bg-green-100'; break;
            case 'bread': emoji = '🍞'; bgColor = 'bg-yellow-100'; break;
            case 'rice': emoji = '🍚'; bgColor = 'bg-yellow-100'; break;
            case 'chicken': emoji = '🍗'; bgColor = 'bg-yellow-100'; break;
            case 'salmon': emoji = '🐟'; bgColor = 'bg-pink-100'; break;
            case 'egg': emoji = '🥚'; bgColor = 'bg-yellow-100'; break;
            default: emoji = '🍎'; bgColor = 'bg-red-100'; // Default fruit emoji
          }
          
          imageContent = `<div class="h-full ${bgColor} flex items-center justify-center text-4xl">${emoji}</div>`;
        } else {
          imageContent = `<img src="${food.image}" alt="${food.name}" class="w-full h-full object-cover">`;
        }
        
        card.innerHTML = `
          <div class="h-24 overflow-hidden">
            ${imageContent}
          </div>
          <div class="p-3">
            <h3 class="font-medium text-sm">${food.name}</h3>
            <div class="flex justify-between items-center mt-1">
              <span class="text-xs text-gray-500">${food.category}</span>
              <span class="text-xs font-medium">${food.calories} cal</span>
            </div>
          </div>
        `;
        
        card.addEventListener('click', () => showFoodDetail(food));
        container.appendChild(card);
      });
    }

// Initialize food detail page
    function initFoodDetail() {
      // Back button
      elements.backToSearch.addEventListener('click', () => {
        elements.foodDetailPage.classList.add('hidden');
        document.getElementById('search-page').classList.remove('hidden');
      });
      
      // Serving size selection
      elements.portionBtns.forEach(btn => {
        btn.addEventListener('click', () => {
          elements.portionBtns.forEach(b => {
            b.classList.remove('border-primary', 'bg-primary-light');
            b.classList.add('border-gray-200');
          });
          btn.classList.add('border-primary', 'bg-primary-light');
          btn.classList.remove('border-gray-200');
        });
      });
      
      // Add to meal button
      elements.addToMealBtn.addEventListener('click', () => {
        if (!userData.selectedFood) return;
        
        // Get selected portion
        const activePortion = document.querySelector('.portion-btn.border-primary');
        const portionText = activePortion.querySelector('.text-sm').textContent;
        const caloriesText = activePortion.querySelector('.text-xs').textContent;
        const calories = parseInt(caloriesText);
        
        // Calculate portion multiplier
        let multiplier = 1;
        if (portionText.includes('1/2')) multiplier = 0.5;
        else if (portionText.includes('2')) multiplier = 2;
        
        // Create meal item
        const mealItem = {
          id: Date.now(), // Use timestamp as unique ID
          name: userData.selectedFood.name,
          calories: Math.round(userData.selectedFood.calories * multiplier),
          quantity: multiplier,
          image: userData.selectedFood.image,
          macros: {
            carbs: Math.round(userData.selectedFood.carbs * multiplier),
            protein: Math.round(userData.selectedFood.protein * multiplier),
            fat: Math.round(userData.selectedFood.fat * multiplier)
          }
        };
        
        // Add to user data
        userData.meals[userData.selectedMealType].push(mealItem);
        
        // Update total calories and macros
        userData.currentCalories += mealItem.calories;
        userData.macros.carbs += mealItem.macros.carbs;
        userData.macros.protein += mealItem.macros.protein;
        userData.macros.fat += mealItem.macros.fat;
        
        // Update UI
        updateProgressRing();
        renderMealItems();
        
        // Return to dashboard
        navigateToPage('dashboard-page');
      });
    }

// Show food detail
    function showFoodDetail(food) {
      userData.selectedFood = food;
      
      // Update detail page content
      elements.foodDetailName.textContent = food.name;
      elements.foodDetailCalorie.textContent = `${food.calories} Calories`;
      elements.foodDetailCarbs.textContent = `${food.carbs}g`;
      elements.foodDetailProtein.textContent = `${food.protein}g`;
      elements.foodDetailFat.textContent = `${food.fat}g`;
      elements.foodDetailFiber.textContent = `${food.fiber}g`;
      
      // Display corresponding emoji based on food type
      const emojiElement = document.getElementById('food-detail-emoji');
      if (food.image && food.image.startsWith('emoji:')) {
        const emojiType = food.image.split(':')[1];
        switch(emojiType) {
          case 'kiwi': emojiElement.textContent = '🥝'; break;
          case 'passionfruit': emojiElement.textContent = '🥭'; break; // Using mango emoji instead of passion fruit
          case 'watermelon': emojiElement.textContent = '🍉'; break;
          case 'broccoli': emojiElement.textContent = '🥦'; break;
          case 'bokchoy': emojiElement.textContent = '🥬'; break;
          case 'bread': emojiElement.textContent = '🍞'; break;
          case 'rice': emojiElement.textContent = '🍚'; break;
          case 'chicken': emojiElement.textContent = '🍗'; break;
          case 'salmon': emojiElement.textContent = '🐟'; break;
          case 'egg': emojiElement.textContent = '🥚'; break;
          default: emojiElement.textContent = '🍎'; // Default fruit emoji
        }
      } else {
        emojiElement.textContent = '🍎'; // Default fruit emoji
      }
      
      // Update portion buttons
      elements.portionBtns[0].querySelector('.text-xs').textContent = `${Math.round(food.calories * 0.5)} calories`;
      elements.portionBtns[1].querySelector('.text-xs').textContent = `${food.calories} calories`;
      elements.portionBtns[2].querySelector('.text-xs').textContent = `${food.calories * 2} calories`;
      
      // Reset portion selection
      elements.portionBtns.forEach(btn => {
        btn.classList.remove('border-primary', 'bg-primary-light');
        btn.classList.add('border-gray-200');
      });
      elements.portionBtns[1].classList.add('border-primary', 'bg-primary-light');
      elements.portionBtns[1].classList.remove('border-gray-200');
      
      // Update add button text
      const mealTypeText = {
        'breakfast': 'Breakfast',
        'lunch': 'Lunch',
        'dinner': 'Dinner',
        'snack': 'Snacks'
      };
      elements.addToMealBtn.innerHTML = `<i class="fa fa-plus-circle mr-2"></i> Add to ${mealTypeText[userData.selectedMealType]}`;
      
      // Switch to detail page
      document.getElementById('search-page').classList.add('hidden');
      elements.foodDetailPage.classList.remove('hidden');
    }

// Render meal items
    function renderMealItems() {
      for (const mealType in userData.meals) {
        const container = document.getElementById(`${mealType}-list`);
        const emptyState = container.nextElementSibling;
        
        if (userData.meals[mealType].length === 0) {
          container.classList.add('hidden');
          emptyState.classList.remove('hidden');
          continue;
        }
        
        container.classList.remove('hidden');
        emptyState.classList.add('hidden');
        container.innerHTML = '';
        
        userData.meals[mealType].forEach(item => {
          const mealItem = document.createElement('div');
          mealItem.className = 'bg-white rounded-xl p-3 border border-gray-100 card-shadow flex justify-between items-center';
          
          // Handle image or emoji
          let imageContent = '';
          if (item.image && item.image.startsWith('emoji:')) {
            const emojiType = item.image.split(':')[1];
            let emoji = '';
            let bgColor = 'bg-gray-100';
            
            switch(emojiType) {
              case 'kiwi': emoji = '🥝'; bgColor = 'bg-green-100'; break;
              case 'passionfruit': emoji = '🥭'; bgColor = 'bg-orange-100'; break; // Using mango emoji instead of passion fruit
              case 'watermelon': emoji = '🍉'; bgColor = 'bg-red-100'; break;
              case 'broccoli': emoji = '🥦'; bgColor = 'bg-green-100'; break;
              case 'bokchoy': emoji = '🥬'; bgColor = 'bg-green-100'; break;
              case 'bread': emoji = '🍞'; bgColor = 'bg-yellow-100'; break;
              case 'rice': emoji = '🍚'; bgColor = 'bg-yellow-100'; break;
              case 'chicken': emoji = '🍗'; bgColor = 'bg-yellow-100'; break;
              case 'salmon': emoji = '🐟'; bgColor = 'bg-pink-100'; break;
              case 'egg': emoji = '🥚'; bgColor = 'bg-yellow-100'; break;
              default: emoji = '🍎'; bgColor = 'bg-red-100'; // Default fruit emoji
            }
            
            imageContent = `<div class="w-full h-full flex items-center justify-center ${bgColor} text-xl">${emoji}</div>`;
          } else {
            imageContent = `<img src="${item.image}" alt="${item.name}" class="w-full h-full object-cover">`;
          }
          
          mealItem.innerHTML = `
            <div class="flex items-center">
              <div class="w-10 h-10 rounded-lg overflow-hidden mr-3">
                ${imageContent}
              </div>
              <div>
                <h3 class="font-medium">${item.name}</h3>
                <p class="text-xs text-gray-500">${item.quantity} serving · ${item.calories} calories</p>
              </div>
            </div>
            <button class="text-gray-400 hover:text-red-500 delete-meal-item" data-id="${item.id}">
              <i class="fa fa-trash"></i>
            </button>
          `;
          
          container.appendChild(mealItem);
        });
        
        // Add delete events
        document.querySelectorAll('.delete-meal-item').forEach(btn => {
          btn.addEventListener('click', (e) => {
            const itemId = parseInt(e.currentTarget.getAttribute('data-id'));
            deleteMealItem(mealType, itemId);
          });
        });
      }
    }

// Delete meal item
    function deleteMealItem(mealType, itemId) {
      const mealItems = userData.meals[mealType];
      const index = mealItems.findIndex(item => item.id === itemId);
      
      if (index !== -1) {
        const deletedItem = mealItems.splice(index, 1)[0];
        
        // Update total calories and macros
        userData.currentCalories -= deletedItem.calories;
        userData.macros.carbs -= deletedItem.macros?.carbs || 0;
        userData.macros.protein -= deletedItem.macros?.protein || 0;
        userData.macros.fat -= deletedItem.macros?.fat || 0;
        
        // Update UI
        updateProgressRing();
        renderMealItems();
      }
    }

// Initialize charts
    function initCharts() {
      // Daily intake trend chart
      const calorieCtx = document.getElementById('calorie-chart').getContext('2d');
      new Chart(calorieCtx, {
        type: 'bar',
        data: {
          labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          datasets: [{
            label: 'Calories Consumed',
            data: [950, 1050, 850, 1100, 950, 1200, 950],
            backgroundColor: '#22c55e',
            borderRadius: 6
          }, {
            label: 'Calorie Goal',
            data: [1200, 1200, 1200, 1200, 1200, 1200, 1200],
            type: 'line',
            borderColor: '#16a34a',
            borderWidth: 2,
            borderDash: [5, 5],
            pointRadius: 0,
            fill: false
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              display: false
            }
          },
          scales: {
            y: {
              beginAtZero: true,
              grid: {
                display: true,
                color: 'rgba(0, 0, 0, 0.05)'
              }
            },
            x: {
              grid: {
                display: false
              }
            }
          }
        }
      });
      
      // Nutrition distribution chart
      const nutritionCtx = document.getElementById('nutrition-chart').getContext('2d');
      new Chart(nutritionCtx, {
        type: 'doughnut',
        data: {
          labels: ['Carbohydrates', 'Protein', 'Fat'],
          datasets: [{
            data: [50, 30, 20],
            backgroundColor: ['#3b82f6', '#a855f7', '#eab308'],
            borderWidth: 0
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              display: false
            }
          },
          cutout: '70%'
        }
      });
    }

// Navigate to specified page
    function navigateToPage(pageId) {
      elements.navBtns.forEach(btn => {
        if (btn.getAttribute('data-page') === pageId) {
          btn.click();
        }
      });
    }

// Bind events
    function bindEvents() {
      // Add meal button
      elements.addMealBtn.addEventListener('click', () => {
        userData.selectedMealType = 'breakfast';
        navigateToPage('search-page');
      });
      
      // Add food buttons (meal empty state)
      elements.addFoodBtns.forEach(btn => {
        btn.addEventListener('click', () => {
          const mealType = btn.getAttribute('data-meal');
          userData.selectedMealType = mealType;
          navigateToPage('search-page');
        });
      });
      
      // Category filter buttons
      document.querySelectorAll('.category-btn').forEach(btn => {
        btn.addEventListener('click', () => {
          // Update button status
          document.querySelectorAll('.category-btn').forEach(b => {
            b.classList.remove('bg-primary', 'text-white');
            b.classList.add('bg-gray-100', 'text-gray-700');
          });
          btn.classList.add('bg-primary', 'text-white');
          btn.classList.remove('bg-gray-100', 'text-gray-700');
          
          // Filter foods
          const category = btn.textContent.trim();
          if (category === 'All') {
            renderFoodCards(foodDatabase);
          } else {
            const filteredFoods = foodDatabase.filter(food => food.category === category);
            renderFoodCards(filteredFoods);
          }
        });
      });
    }

// Initialize after page load
    document.addEventListener('DOMContentLoaded', init);
  </script>

</body>
</html>

Related Examples

Forgot Password
Forgot Password

Author:
Tanvir Hasan Bappy (Tanvir)

3 weeks ago

103
Ethical Fashion

Author:
Tanvir Hasan Bappy (Tanvir)

10 months ago

1.1k
Terms of Service Page Template

Author:
Anonymous

1 year ago

2.2k
Background image section

Author:
Marc

2 years ago

6.5k
Responsive Sign-Up Form with TailwindCSS
Create a visually appealing and fully responsive sign-up form using TailwindCSS. This form includes input fields for full name, mobile number, email, password, and confirm password, along with a gradient sign-up button. Designed with simplicity and flexibility, it is perfect for modern web applications and easy to integrate into any project.

Author:
SHARIFUL ISLAM

11 months ago

1.5k
Hacker terminal #fake
hacker terminal tailwind css

Author:
QQ-VVN

8 months ago

947
Forgot password form

Author:
ariaw

2 months ago

201
Order History
Order History

Author:
Tanvir Hasan Bappy (Tanvir)

9 months ago

1.1k
Boarding Pass Design
Testing out a layout and design for a digital boarding pass

Author:
Kirsten F

7 months ago

590
Responsive navbar with alpinejs
A mix of Penguin navbar with PineUI Slide-Over

Author:
Muhammad Rizqi Juniyanto

1 year ago

3.2k
Hero Section
Responsive Hero Section for you Project Background Image: A stunning, high-quality Unsplash photo that creates a unique visual impact. Overlay: Semi-transparent black overlay with blur effect for readability and a modern aesthetic. Content Area: Centered with a gradient background overlay for contrast, bold headline, engaging subtext. Buttons: Vibrant gradient and clean border with smooth hover animations to draw attention. Responsive Design: Looks great on all screen sizes with adaptable padding and font sizes.

Author:
KULDEEP

7 months ago

1.3k
Ripple Animation
Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are loading, loader,Author box, User information,Transitions

Author:
Tofayel Islam

4 weeks ago

323

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components