- redesign BMI calculator with modern UI and responsive layout

- add imperial/metric unit toggle functionality
- implement more granular BMI categories (now includes obesity classes I-III)
- add visual BMI scale with marker indicator
- implement form validation with error messages
- add localStorage to persist user data between sessions
- replace bootstrap and jquery dependencies with vanilla JS and CSS
- update favicon from 🔎 to 📊
- switch from `sidebar.js` to `logo.js` script

Author: TobiasMue91

tools/bmi_calculator.html

@@ -4,109 +4,279 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>BMI Calculator</title>
-  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🔎</text></svg>">
-  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" crossorigin="anonymous">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" crossorigin="anonymous" />
+  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📊</text></svg>">
   <style>
-    body {
-      font-family: Arial, sans-serif;
-      background-color: #f8f9fa;
-    }
-    .container {
-      max-width: 500px;
-      margin: 0 auto;
-      padding: 20px;
-      background-color: #fff;
-      border-radius: 5px;
-      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-    }
-    h1 {
-      text-align: center;
-      margin-bottom: 30px;
-    }
-    .form-group {
-      margin-bottom: 20px;
-    }
-    label {
-      font-weight: bold;
-    }
-    input[type="number"] {
-      width: 100%;
-      padding: 10px;
-      border-radius: 5px;
-      border: 1px solid #ccc;
-      box-sizing: border-box;
-    }
-    .btn {
-      width: 100%;
-      padding: 10px;
-      border-radius: 5px;
-      background-color: #007bff;
-      color: #fff;
-      border: none;
-      cursor: pointer;
-    }
-    .btn:hover {
-      background-color: #0069d9;
-    }
-    .result {
-      margin-top: 30px;
-      text-align: center;
-      font-size: 24px;
-      font-weight: bold;
-    }
-    .result i {
-      margin-right: 10px;
-    }
+    :root{--primary:#4285f4;--primary-dark:#2a66c8;--success:#34a853;--warning:#fbbc05;--danger:#ea4335;--light:#f8f9fa;--dark:#212121;--gray:#e0e0e0;--gray-dark:#757575;--radius:8px;--shadow:0 3px 6px rgba(0,0,0,0.1);--transition:all 0.3s ease;}*{margin:0;padding:0;box-sizing:border-box;}body{font-family:'Segoe UI',Roboto,system-ui,sans-serif;background-color:var(--light);color:var(--dark);line-height:1.6;padding:20px;display:flex;flex-direction:column;min-height:100vh;}.container{max-width:550px;margin:0 auto;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;width:100%;}header{background:var(--primary);color:white;padding:20px;text-align:center;}header h1{margin:0;font-size:1.8rem;font-weight:500;}.unit-toggle{display:flex;justify-content:center;margin-top:12px;}.unit-toggle-btn{background:rgba(255,255,255,0.2);border:none;color:white;padding:5px 15px;font-size:0.9rem;cursor:pointer;transition:var(--transition);}.unit-toggle-btn:first-child{border-radius:20px 0 0 20px;}.unit-toggle-btn:last-child{border-radius:0 20px 20px 0;}.unit-toggle-btn.active{background:white;color:var(--primary);}.calculator-form{padding:24px;}.input-group{margin-bottom:20px;}.input-group label{display:block;margin-bottom:8px;font-weight:500;color:var(--gray-dark);font-size:0.9rem;}.input-row{display:flex;gap:10px;}.input-field{position:relative;flex:1;}.input-field input{width:100%;padding:12px 15px;border:1px solid var(--gray);border-radius:var(--radius);font-size:1rem;transition:var(--transition);}.input-field input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px rgba(66,133,244,0.2);}.input-field .unit{position:absolute;right:15px;top:50%;transform:translateY(-50%);color:var(--gray-dark);font-size:0.9rem;pointer-events:none;}.error-message{color:var(--danger);font-size:0.8rem;margin-top:5px;display:none;}.btn-row{display:flex;gap:10px;margin-top:25px;}.btn{flex:1;padding:12px;border:none;border-radius:var(--radius);font-size:1rem;cursor:pointer;transition:var(--transition);font-weight:500;}.btn-primary{background:var(--primary);color:white;}.btn-primary:hover{background:var(--primary-dark);}.btn-secondary{background:var(--gray);color:var(--dark);}.btn-secondary:hover{background:var(--gray-dark);color:white;}.results{background:var(--light);padding:24px;border-top:1px solid var(--gray);display:none;}.result-header{text-align:center;margin-bottom:20px;}.bmi-value{font-size:2.5rem;font-weight:700;color:var(--primary);margin:0;}.bmi-category{font-size:1.2rem;color:var(--gray-dark);}.bmi-scale{height:15px;background:linear-gradient(to right,#3498db 0%,#2ecc71 18.5%,#27ae60 25%,#f1c40f 30%,#e67e22 35%,#e74c3c 100%);border-radius:10px;margin:30px 0 10px;position:relative;}.bmi-marker{width:2px;height:20px;background:var(--dark);position:absolute;top:-10px;transform:translateX(-50%);}.bmi-marker::after{content:'';position:absolute;bottom:-5px;left:-4px;width:10px;height:10px;background:var(--dark);border-radius:50%;}.scale-labels{display:flex;justify-content:space-between;margin-top:5px;color:var(--gray-dark);font-size:0.8rem;}.bmi-description{margin-top:20px;line-height:1.6;}.about-section{padding:24px;border-top:1px solid var(--gray);}.about-section h2{font-size:1.2rem;margin-bottom:10px;}.about-section p{font-size:0.9rem;color:var(--gray-dark);line-height:1.6;}footer{text-align:center;margin-top:20px;font-size:0.8rem;color:var(--gray-dark);}@media (max-width:600px){body{padding:10px;}.calculator-form,.results,.about-section{padding:15px;}.bmi-value{font-size:2rem;}.input-row{flex-direction:column;}}button:focus,input:focus{outline:2px solid var(--primary);outline-offset:2px;}@keyframes fadeIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}.fade-in{animation:fadeIn 0.3s ease-out forwards;}
   </style>
 </head>
 <body>
-  <div class="container">
+<div class="container">
+  <header>
     <h1>BMI Calculator</h1>
-    <form>
-      <div class="form-group">
-        <label for="height">Height (cm)</label>
-        <input type="number" id="height" name="height" placeholder="Enter your height in centimeters">
+    <div class="unit-toggle">
+      <button type="button" class="unit-toggle-btn active" id="metric">Metric</button>
+      <button type="button" class="unit-toggle-btn" id="imperial">Imperial</button>
+    </div>
+  </header>
+  <form class="calculator-form" id="bmiForm">
+    <div class="input-group metric-inputs">
+      <label for="height">Height</label>
+      <div class="input-field">
+        <input type="number" id="height" min="50" max="300" placeholder="Enter your height" aria-describedby="heightError">
+        <span class="unit">cm</span>
+        <div class="error-message" id="heightError">Please enter a valid height (50-300 cm)</div>
+      </div>
+    </div>
+    <div class="input-group imperial-inputs" style="display: none;">
+      <label for="heightFeet">Height</label>
+      <div class="input-row">
+        <div class="input-field">
+          <input type="number" id="heightFeet" min="1" max="8" placeholder="Feet" aria-describedby="heightImperialError">
+          <span class="unit">ft</span>
+        </div>
+        <div class="input-field">
+          <input type="number" id="heightInches" min="0" max="11" placeholder="Inches" aria-describedby="heightImperialError">
+          <span class="unit">in</span>
+          <div class="error-message" id="heightImperialError">Please enter a valid height</div>
+        </div>
       </div>
-      <div class="form-group">
-        <label for="weight">Weight (kg)</label>
-        <input type="number" id="weight" name="weight" placeholder="Enter your weight in kilograms">
+    </div>
+    <div class="input-group metric-inputs">
+      <label for="weight">Weight</label>
+      <div class="input-field">
+        <input type="number" id="weight" min="10" max="500" placeholder="Enter your weight" aria-describedby="weightError">
+        <span class="unit">kg</span>
+        <div class="error-message" id="weightError">Please enter a valid weight (10-500 kg)</div>
       </div>
-      <div class="form-group">
-        <button type="button" class="btn btn-primary" onclick="calculateBMI()">Calculate</button>
-        <button type="button" class="btn btn-secondary mt-2" onclick="clearForm()">Clear</button>
+    </div>
+    <div class="input-group imperial-inputs" style="display: none;">
+      <label for="weightPounds">Weight</label>
+      <div class="input-field">
+        <input type="number" id="weightPounds" min="20" max="1000" placeholder="Enter your weight" aria-describedby="weightImperialError">
+        <span class="unit">lb</span>
+        <div class="error-message" id="weightImperialError">Please enter a valid weight (20-1000 lb)</div>
       </div>
-    </form>
-    <div class="result" id="result"></div>
-    <div class="about mt-4">
-      <h2>About BMI Calculator</h2>
-      <p>Body Mass Index (BMI) is a number calculated from a person's weight and height to determine a person's body fatness or skinniness, and is defined as the individual's body mass divided by the square of their height. The BMI Calculator tool helps you to find out your BMI value and the corresponding weight category.</p>
     </div>
+    <div class="btn-row">
+      <button type="button" class="btn btn-primary" id="calculateBtn">Calculate BMI</button>
+      <button type="button" class="btn btn-secondary" id="clearBtn">Clear</button>
+    </div>
+  </form>
+  <div class="results" id="results">
+    <div class="result-header">
+      <p class="bmi-value" id="bmiValue">25.0</p>
+      <p class="bmi-category" id="bmiCategory">Normal weight</p>
+    </div>
+    <div class="bmi-scale">
+      <div class="bmi-marker" id="bmiMarker"></div>
+    </div>
+    <div class="scale-labels">
+      <span>16</span>
+      <span>18.5</span>
+      <span>25</span>
+      <span>30</span>
+      <span>35</span>
+      <span>40</span>
+    </div>
+    <div class="bmi-description" id="bmiDescription"></div>
+  </div>
+  <div class="about-section">
+    <h2>About BMI Calculator</h2>
+    <p>Body Mass Index (BMI) is a measurement of body fat based on height and weight. While BMI is not perfect, it provides a useful starting point for evaluating health risks. A healthy BMI typically ranges from 18.5 to 24.9.</p>
+    <p style="margin-top: 10px;">This calculator provides an estimate only and is not intended to replace professional medical advice.</p>
   </div>
-  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" crossorigin="anonymous"></script>
-  <script>
-    function calculateBMI() {
-      var height = parseFloat($("#height").val());
-      var weight = parseFloat($("#weight").val());
-      var bmi = weight / Math.pow(height / 100, 2);
-      var category = "";
-      if (bmi < 18.5) {
-        category = "Underweight";
-      } else if (bmi < 25) {
-        category = "Normal weight";
-      } else if (bmi < 30) {
-        category = "Overweight";
+</div>
+<footer>
+  <p>© 2025 BMI Calculator | For informational purposes only</p>
+</footer>
+<script>
+  const metricToggle = document.getElementById('metric');
+  const imperialToggle = document.getElementById('imperial');
+  const metricInputs = document.querySelectorAll('.metric-inputs');
+  const imperialInputs = document.querySelectorAll('.imperial-inputs');
+  const heightInput = document.getElementById('height');
+  const weightInput = document.getElementById('weight');
+  const heightFeetInput = document.getElementById('heightFeet');
+  const heightInchesInput = document.getElementById('heightInches');
+  const weightPoundsInput = document.getElementById('weightPounds');
+  const calculateBtn = document.getElementById('calculateBtn');
+  const clearBtn = document.getElementById('clearBtn');
+  const resultsSection = document.getElementById('results');
+  const bmiValueElement = document.getElementById('bmiValue');
+  const bmiCategoryElement = document.getElementById('bmiCategory');
+  const bmiMarker = document.getElementById('bmiMarker');
+  const bmiDescription = document.getElementById('bmiDescription');
+
+  metricToggle.addEventListener('click', () => {
+    metricToggle.classList.add('active');
+    imperialToggle.classList.remove('active');
+    metricInputs.forEach(el => el.style.display = 'block');
+    imperialInputs.forEach(el => el.style.display = 'none');
+  });
+
+  imperialToggle.addEventListener('click', () => {
+    imperialToggle.classList.add('active');
+    metricToggle.classList.remove('active');
+    imperialInputs.forEach(el => el.style.display = 'block');
+    metricInputs.forEach(el => el.style.display = 'none');
+  });
+
+  function validateMetricInputs() {
+    let isValid = true;
+    if (!heightInput.value || heightInput.value < 50 || heightInput.value > 300) {
+      document.getElementById('heightError').style.display = 'block';
+      isValid = false;
+    } else {
+      document.getElementById('heightError').style.display = 'none';
+    }
+    if (!weightInput.value || weightInput.value < 10 || weightInput.value > 500) {
+      document.getElementById('weightError').style.display = 'block';
+      isValid = false;
+    } else {
+      document.getElementById('weightError').style.display = 'none';
+    }
+    return isValid;
+  }
+
+  function validateImperialInputs() {
+    let isValid = true;
+    if (!heightFeetInput.value || heightFeetInput.value < 1 || heightFeetInput.value > 8 ||
+            !heightInchesInput.value || heightInchesInput.value < 0 || heightInchesInput.value > 11) {
+      document.getElementById('heightImperialError').style.display = 'block';
+      isValid = false;
+    } else {
+      document.getElementById('heightImperialError').style.display = 'none';
+    }
+    if (!weightPoundsInput.value || weightPoundsInput.value < 20 || weightPoundsInput.value > 1000) {
+      document.getElementById('weightImperialError').style.display = 'block';
+      isValid = false;
+    } else {
+      document.getElementById('weightImperialError').style.display = 'none';
+    }
+    return isValid;
+  }
+
+  function calculateBMI() {
+    let bmi;
+    if (metricToggle.classList.contains('active')) {
+      if (!validateMetricInputs()) return;
+      const height = parseFloat(heightInput.value);
+      const weight = parseFloat(weightInput.value);
+      bmi = weight / Math.pow(height / 100, 2);
+    } else {
+      if (!validateImperialInputs()) return;
+      const heightFeet = parseFloat(heightFeetInput.value);
+      const heightInches = parseFloat(heightInchesInput.value);
+      const totalInches = (heightFeet * 12) + heightInches;
+      const weightPounds = parseFloat(weightPoundsInput.value);
+      bmi = (weightPounds / Math.pow(totalInches, 2)) * 703;
+    }
+    displayResults(bmi);
+  }
+
+  function displayResults(bmi) {
+    const roundedBMI = Math.round(bmi * 10) / 10;
+    let category, description, color;
+
+    if (bmi < 16) {
+      category = "Severe Underweight";
+      description = "Your BMI indicates severe underweight, which may lead to health issues including weakened immune system, nutritional deficiencies, and hormonal imbalances. Please consult a healthcare professional for guidance.";
+      color = "#3498db";
+    } else if (bmi < 18.5) {
+      category = "Underweight";
+      description = "Your BMI indicates underweight. This may be normal for some individuals, but could suggest inadequate nutrition. Consider consulting a healthcare professional to ensure your diet meets your needs.";
+      color = "#3498db";
+    } else if (bmi < 25) {
+      category = "Normal Weight";
+      description = "Your BMI falls within the normal weight range associated with healthy outcomes for most adults. Maintain a balanced diet and regular physical activity to preserve your health.";
+      color = "#2ecc71";
+    } else if (bmi < 30) {
+      category = "Overweight";
+      description = "Your BMI indicates overweight. This may increase risk for certain health conditions. Focus on balanced nutrition and regular physical activity, and consider consulting a healthcare professional for personalized advice.";
+      color = "#f1c40f";
+    } else if (bmi < 35) {
+      category = "Obesity Class I";
+      description = "Your BMI indicates Class I obesity, which increases risk for conditions like heart disease, diabetes, and high blood pressure. Consider consulting healthcare professionals about lifestyle changes or weight management strategies.";
+      color = "#e67e22";
+    } else if (bmi < 40) {
+      category = "Obesity Class II";
+      description = "Your BMI indicates Class II obesity, which is associated with higher health risks. It's strongly recommended to seek advice from healthcare professionals about appropriate weight management strategies.";
+      color = "#e74c3c";
+    } else {
+      category = "Obesity Class III";
+      description = "Your BMI indicates Class III obesity, which carries significant health risks. Please consult healthcare professionals promptly for comprehensive assessment and guidance on appropriate interventions.";
+      color = "#c0392b";
+    }
+
+    bmiValueElement.textContent = roundedBMI.toFixed(1);
+    bmiCategoryElement.textContent = category;
+    bmiDescription.innerHTML = description;
+
+    const percentage = Math.min(100, Math.max(0, ((bmi - 16) / (40 - 16)) * 100));
+    bmiMarker.style.left = `${percentage}%`;
+    bmiValueElement.style.color = color;
+
+    resultsSection.style.display = 'block';
+    resultsSection.classList.add('fade-in');
+
+    saveToLocalStorage();
+  }
+
+  function saveToLocalStorage() {
+    const bmiData = {
+      metric: metricToggle.classList.contains('active'),
+      height: heightInput.value,
+      weight: weightInput.value,
+      heightFeet: heightFeetInput.value,
+      heightInches: heightInchesInput.value,
+      weightPounds: weightPoundsInput.value
+    };
+    localStorage.setItem('bmiData', JSON.stringify(bmiData));
+  }
+
+  function loadFromLocalStorage() {
+    const savedData = localStorage.getItem('bmiData');
+    if (savedData) {
+      const bmiData = JSON.parse(savedData);
+      if (bmiData.metric) {
+        metricToggle.click();
+        heightInput.value = bmiData.height;
+        weightInput.value = bmiData.weight;
       } else {
-        category = "Obese";
+        imperialToggle.click();
+        heightFeetInput.value = bmiData.heightFeet;
+        heightInchesInput.value = bmiData.heightInches;
+        weightPoundsInput.value = bmiData.weightPounds;
       }
-      $("#result").html("<i class='fas fa-weight'></i>Your BMI is " + bmi.toFixed(1) + " (" + category + ")");
     }
-    function clearForm() {
-      $("#height").val("");
-      $("#weight").val("");
-      $("#result").html("");
+  }
+
+  function clearForm() {
+    heightInput.value = '';
+    weightInput.value = '';
+    heightFeetInput.value = '';
+    heightInchesInput.value = '';
+    weightPoundsInput.value = '';
+
+    document.getElementById('heightError').style.display = 'none';
+    document.getElementById('weightError').style.display = 'none';
+    document.getElementById('heightImperialError').style.display = 'none';
+    document.getElementById('weightImperialError').style.display = 'none';
+
+    resultsSection.style.display = 'none';
+    localStorage.removeItem('bmiData');
+  }
+
+  calculateBtn.addEventListener('click', calculateBMI);
+  clearBtn.addEventListener('click', clearForm);
+  loadFromLocalStorage();
+
+  document.addEventListener('keydown', function(e) {
+    if (e.key === 'Enter' && document.activeElement !== calculateBtn && document.activeElement !== clearBtn) {
+      calculateBtn.click();
     }
-  </script>
-<script src="../sidebar.js"></script>
+  });
+</script>
+<script src="../logo.js"></script>
 </body>
 </html>