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)

157

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

Premium Gaming UI Card, Form & Animated Button (Tailwind CSS)
A modern, senior-level gaming UI built with Tailwind CSS focusing on spacing, typography, and calm visual hierarchy rather than noisy effects. This component set includes: A premium gaming card with clear content structure and outcome-focused copy A clean player signup form with accessible focus states and minimal visual noise A custom animated button using a restrained light-sweep effect for premium interaction feedback Designed to resemble real production gaming platforms rather than demo or template UI. Fully responsive, copy-paste ready, and easy to extend for real-world projects.

Author:
Ayyamperumal S

2 months ago

231
OTP Verification Page
A responsive and interactive OTP verification page built with Tailwind CSS. The page features a gradient background, hover effects, and animations to enhance user experience. It includes input fields for the OTP, a resend OTP link, and a verify button. The design is optimized for both light and dark modes.

Author:
Abhiraj

1 year ago

2.7k
Lots of button examples
tailwind button examples

Author:
QQ-VVN

10 months ago

605
AutoTrade
Browse thousands of quality used cars from trusted sellers. Great prices and easy financing options available

Author:
INGRIDE MUZIRANENGE

9 months ago

920
Card blog
Targeta para blog

Author:
Raul antonio de la cruz hernandez

4 months ago

237
Todo List with Dark theme
Todo List with Dark theme

Author:
Muzammil Riaz

9 months ago

1.3k
Card KPI
Targetas ahora con un grafico

Author:
Raul antonio de la cruz hernandez

4 months ago

693
Instagram Post UI Mockup
A static HTML and Tailwind CSS component that visually replicates the user interface of an Instagram post. This mockup includes the post header (avatar, username, options), image area, action buttons (like, comment, share, save), like count, caption, and comment section. It features responsive constraints and supports both light and dark mode, closely mimicking the look and feel of the actual Instagram app. Ideal for UI prototyping, style guides, or frontend development practice.

Author:
Hamza Atig

11 months ago

1.5k
Google map iframe with tailwind

Author:
Kofi Osei

3 years ago

21.8k
Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Author:
Hamza Atig

11 months ago

1.6k
Certificate of Completion
A clean and modern certificate template built with Tailwind CSS. Ideal for courses, training programs, and professional achievements.

Author:
Ramkesh Gupta

5 months ago

266
Clean & Responsive Footer Design with Tailwind CSS With CTA Button
modern and responsive footer built with Tailwind CSS to enhance website navigation, accessibility, and user experience. Featuring quick links, social media icons, copyright info, and a sleek layout, this SEO-friendly footer improves engagement and usability across all devices. Perfect for portfolios, business websites, and eCommerce stores!

Author:
Abdul Baset Bappy

11 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components