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

Twitter Post (Tweet) UI Mockup
A detailed static HTML and Tailwind CSS component replicating the user interface of a single Twitter post (Tweet). This mockup includes the user avatar, tweet header (name, handle, timestamp), tweet text with styled hashtags/mentions, optional media display, and the action bar with icons and counts (Reply, Retweet, Like, Views, Share). It is responsive, supports light and dark modes, and uses accurate iconography and hover states to closely resemble the real Twitter UI.

Author:
Hamza Atig

9 months ago

741
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

1 month ago

335
My Coding Journey
To transform a standard timeline into an engaging, scroll-driven narrative experience.

Author:
Code Master(Mfuranziza Dusabe Hamza)

4 months ago

579
admindashboard
creates a responsive, interactive admin dashboard using Tailwind CSS, Font Awesome, Chart.js, and custom JavaScript animations. It's called "Materially Dashboard" and is designed for presenting key statistics and analytics data in a visually appealing manner.

Author:
ishimwe shadad

8 months ago

792
Acode Master!
Acode Master is a skilled and passionate software developer known for mastering coding and creating innovative tech solutions. Specializing in modern web technologies like React.js, Node.js, PHP, and databases such as MySQL and PostgreSQL, Acode Master builds practical, efficient, and scalable applications. Beyond coding, Acode Master is dedicated to continuous learning, sharing knowledge, and empowering others through technology-driven projects and education.

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

762
Checkbox
Checkbox

Author:
Aman kumar

1 year ago

2.2k
google meet clone
Meeting application with fully responsive connect my web for jsx https://abhirajk.vercel.app/

Author:
Abhiraj

1 year ago

1.4k
Custom Audio Player
🎧 Custom Audio Player (HTML, Tailwind CSS & Alpine.js) A modern, responsive custom audio player built with Tailwind CSS and Alpine.js, designed for a smooth user experience and elegant visuals in both light and dark mode. ✨ Features: 🎵 Play, pause, and mute/unmute controls 📈 Interactive progress bar with seek functionality 🔊 Dynamic volume slider with live preview 🖼️ Album art and track details display ⌨️ Keyboard support — toggle play/pause with the spacebar 🌓 Fully responsive and dark-mode compatible This player uses minimal JavaScript, relying on Alpine.js for reactivity, and can be easily customized or integrated into any web project. Perfect for portfolios, podcasts, or music web apps.

Author:
wavy kits

4 months ago

589
Free SEO Audit & Analysis Tool
Instant SEO analysis of your website. Check 50+ ranking factors including on-page SEO, technical issues, and mobile performance.

Author:
MD Mostafa Niloy

2 months ago

195
Payment success page example

Author:
Anonymous

8 months ago

1.4k
Profile Card with Transparent
Dynamic Background: Darker gradient background for better contrast Floating colored blobs for visual interest Profile Image Glow: Added a gradient glow effect behind the profile picture Smoother hover transition Typography Improvements: Larger, bolder name text Subtle hover underline animation for the name Better spacing and hierarchy

Author:
KULDEEP

7 months ago

827
Resizable container
Resizable container

Author:
Ganesh Salunke

1 month ago

78

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components