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

Attractive Feature Section
With Gradient Color 6 Features

Author:
KULDEEP

7 months ago

830
Skill Cards with Tailwind CSS
A responsive and modern card section designed with Tailwind CSS to showcase professional skills. Each card features a smooth fade-in animation and hover scaling effect for an engaging user experience. Ideal for portfolio websites, developer profiles, and personal branding pages. Fully customizable and mobile-friendly.

Author:
irahoza daniel

8 months ago

761
Hacker terminal #fake
hacker terminal tailwind css

Author:
QQ-VVN

9 months ago

960
Question & Answer
questions and answers

Author:
Anonymous

2 years ago

8.9k
Payment Cards

Author:
Shammi Nethupul

1 year ago

2.5k
Subscription Plans
Subscription Plans

Author:
Tanvir Hasan Bappy (Tanvir)

8 months ago

786
Sign up
sign up page

Author:
gidy

8 months ago

1.3k
Forgot Password Form
1. Color Updates: 1. Changed background to gradient `from-indigo-800 to-blue-900` 2. Updated text colors to match the new theme 3. Changed button colors to `bg-indigo-800` with `hover:bg-blue-900` 4. Updated focus rings to use indigo colors 5. Made footer links white with indigo hover states 2. Enhanced Styling: 1. Added gradient background 2. Improved border radius to `rounded-xl` 3. Enhanced shadow with `shadow-2xl` 4. Added hover scale effects 5. Added fade-in animation 3. Dark Mode Improvements: 1. Enhanced dark mode colors 2. Added system preference detection 3. Improved dark mode contrast 4. Updated dark mode focus rings 4. Added Functionality: 1. Added form validation 2. Added success message 3. Added form reset after submission 4. Added smooth transitions 5. Accessibility Improvements: 1. Maintained ARIA attributes 2. Enhanced focus states 3. Improved color contrast 4. Added transition animations for better UX 6. Added Interactions: 1. Hover effects on all interactive elements 2. Scale animation on card and button hover 3. Smooth color transitions 4. Form validation feedback The form now matches the Indigo-800 and Blue-900 color scheme while maintaining dark mode support and adding enhanced animations and interactions.

Author:
nejaa badr

1 year ago

1.7k
htmlcss0

Author:
Anonymous

7 months ago

623
Chat template
fullscreen chat template suitable for mobile devices

Author:
Manon Daniel

2 years ago

17.7k
Our features
Our features

Author:
Tanvir Hasan Bappy (Tanvir)

1 year ago

1.4k
free tailwind resume template
free tailwind resume template

Author:
Geoffrey Callaghan

2 years ago

3.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components