Enhanced BMI Calculator

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Poppins:wght@400;500;600;700&display=swap'); body { font-family: 'Poppins', sans-serif; background-color: #f7fafc; }

/* Custom styling for the visual gauge */ .bmi-gauge { display: flex; height: 12px; border-radius: 9999px; overflow: hidden; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); }

.bmi-gauge-segment { height: 100%; transition: width 0.7s ease-in-out, background-color 0.7s ease-in-out; }

.tooltip-container { position: relative; cursor: pointer; }

BMI Calculator

Stay Healthy, Stay Productive

Weight (kg) *

kg

Height (cm) *

cm

Calculate BMI

Reset

Your BMI is

18.5 25.0 30.0

// Get references to all necessary DOM elements const weightInput = document.getElementById('weight'); const heightInput = document.getElementById('height'); const calculateBtn = document.getElementById('calculateBtn'); const resetBtn = document.getElementById('resetBtn'); const resultCard = document.getElementById('result-card'); const bmiValueElement = document.getElementById('bmi-value'); const bmiCategoryElement = document.getElementById('bmi-category'); const healthyRangeElement = document.getElementById('healthy-range'); const tipBox = document.getElementById('tip-box'); const tipIcon = document.getElementById('tip-icon'); const tipText = document.getElementById('tip-text'); const bmiMarker = document.getElementById('bmi-marker');

// Data for BMI categories, tips, and colors const bmiCategories = [ { min: 0, max: 18.4, label: "Underweight", color: "text-blue-600", tip: "Consider a balanced diet with higher calories and strength training.", icon: }, \{ min: 18.5, max: 24.9, label: "Normal Weight", color: "text-green-600", tip: "Keep up with regular exercise and healthy meals to maintain this.", icon: }, { min: 25.0, max: 29.9, label: "Overweight", color: "text-yellow-600", tip: "Try increasing daily activity and moderating calorie intake.", icon: }, \{ min: 30.0, max: Infinity, label: "Obese", color: "text-red-600", tip: "It is highly recommended to consult a healthcare professional for personalized guidance.", icon: } ];

// Add a click event listener to the calculate button calculateBtn.addEventListener('click', calculateBMI);

// Add a click event listener to the reset button resetBtn.addEventListener('click', resetCalculator);

/**

• Clears the result card and its content. */ function clearResult() { resultCard.classList.add('hidden', 'opacity-0', 'scale-95'); resultCard.classList.remove('opacity-100', 'scale-100'); bmiValueElement.textContent = ''; bmiCategoryElement.textContent = ''; healthyRangeElement.textContent = ''; tipText.textContent = ''; tipIcon.innerHTML = ''; bmiMarker.style.left = '0%'; }

/**

• Resets the entire calculator by clearing inputs and the result card. */ function resetCalculator() { weightInput.value = ''; heightInput.value = ''; clearResult(); }

/**

• Calculates BMI and updates the UI. */ function calculateBMI() { // Get values from the input fields const weight = parseFloat(weightInput.value); const height = parseFloat(heightInput.value);

  // Check if inputs are valid numbers if (isNaN(weight) || isNaN(height) || weight `; tipText.textContent = 'Please enter valid numbers for weight and height.'; return; }

  // Round the BMI value to two decimal places for display const roundedBmi = bmiValue.toFixed(2); bmiValueElement.textContent = roundedBmi;

  // Find the correct BMI category and data const categoryData = bmiCategories.find(cat => bmiValue >= cat.min && bmiValue