BMI Calculator
About this app
Calculate your Body Mass Index (BMI) with this interactive BMI calculator.
BMI Calculator BMI Calculator Unit of Measurement: Metric (Height in cm, Weight in kg) Imperial (Height in feet/inches, Weight in lbs) Height (cm): Weight (kg): Height (feet): 4 5 6 Height (inches): 0 1 2 3 4 5 6 7 8 9 10 11 Weight (lbs): BMI: 0 Interpretation:
Related apps
IPTV M3U8 & EPG Generator Studio | Image to M3U Playlist & Guide
Image to IPTV Converter & M3U Playlist Generator
Image to IPTV Converter & M3U Playlist Generator
Image to M3U Playlist Converter | IPTV & Media Stream Generator
Roulette Row Predictor Pro - Live Pattern & Trend Stats Analyzer
Video to Repeated Sequence Generator - Rhythm & Glitch Loop Maker
LoopCraft - Video to Repeated Sequence Converter
LoopMatrix - Video Sequence Repeater & Stutter Maker
MuffleFX - Video & Audio Low-Pass Filter Studio
Seeding Rate Calculator
Irrigation Set Time Calculator
Fertilizer Nutrient Units Calculator
Put this on your site
Source
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>BMI Calculator</title>
<meta name="description" content="Calculate your Body Mass Index (BMI) with this interactive BMI calculator.">
<meta name="keywords" content="BMI, Body Mass Index, health, weight, height, calculator">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<script type="text/javascript">
try {
// App Javascript Goes Here. Place your entire script content inside the try block for error handling.
// This will run when the DOM is ready.
document.addEventListener("DOMContentLoaded", function() {
// Initialize user interface elements
const heightSlider = document.getElementById("height-slider");
const weightSlider = document.getElementById("weight-slider");
const bmiResult = document.getElementById("bmi-result");
const bmiInterpretation = document.getElementById("bmi-interpretation");
const unitSelector = document.getElementById("unit-selector");
const metricContainer = document.getElementById("metric-container");
const imperialContainer = document.getElementById("imperial-container");
// Initialize default values
let heightValue = 175;
let weightValue = 70;
// Function to calculate BMI
function calculateBMI() {
let bmi = 0;
let height = 0;
let weight = 0;
// Check if metric or imperial unit is selected
if (unitSelector.value === "metric") {
height = heightSlider.value;
weight = weightSlider.value;
// Calculate BMI using metric formula
bmi = weight / Math.pow(height / 100, 2);
} else {
// Convert imperial height to inches
const feet = parseInt(document.getElementById("feet-selector").value);
const inches = parseInt(document.getElementById("inches-selector").value);
height = feet * 12 + inches;
weight = weightSlider.value;
// Calculate BMI using imperial formula
bmi = (weight / Math.pow(height, 2)) * 703;
}
// Display BMI result
bmiResult.textContent = bmi.toFixed(2);
// Interpret BMI value
if (bmi < 18.5) {
bmiInterpretation.textContent = "Underweight";
} else if (bmi < 24.9) {
bmiInterpretation.textContent = "Normal weight";
} else if (bmi < 29.9) {
bmiInterpretation.textContent = "Overweight";
} else {
bmiInterpretation.textContent = "Obese";
}
}
// Event listener for unit selector change
unitSelector.addEventListener("change", function() {
if (unitSelector.value === "metric") {
metricContainer.style.display = "block";
imperialContainer.style.display = "none";
} else {
metricContainer.style.display = "none";
imperialContainer.style.display = "block";
}
calculateBMI();
});
// Event listener for height slider change
heightSlider.addEventListener("input", function() {
calculateBMI();
});
// Event listener for weight slider change
weightSlider.addEventListener("input", function() {
calculateBMI();
});
});
} catch (error) {
// This will throw the error to the parent window.
throw error;
}
</script>
<style>
body {
font-family: 'Roboto', sans-serif;
background-color: #f8f8f8;
margin: 0;
padding: 0;
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
h1 {
font-size: 24px;
font-weight: bold;
margin-bottom: 30px;
text-align: center;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
font-weight: bold;
margin-bottom: 10px;
}
.slider {
width: 100%;
}
.result-container {
text-align: center;
margin-top: 30px;
}
.result-container h2 {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
.result-container p {
font-size: 16px;
margin: 0;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1>BMI Calculator</h1>
<div class="form-group">
<label for="unit-selector">Unit of Measurement:</label>
<select id="unit-selector">
<option value="metric">Metric (Height in cm, Weight in kg)</option>
<option value="imperial">Imperial (Height in feet/inches, Weight in lbs)</option>
</select>
</div>
<div id="metric-container">
<div class="form-group">
<label for="height-slider">Height (cm):</label>
<input type="range" id="height-slider" class="slider" min="140" max="210" value="175" step="1">
</div>
<div class="form-group">
<label for="weight-slider">Weight (kg):</label>
<input type="range" id="weight-slider" class="slider" min="40" max="200" value="70" step="1">
</div>
</div>
<div id="imperial-container" style="display: none;">
<div class="form-group">
<label for="feet-selector">Height (feet):</label>
<select id="feet-selector">
<option value="4">4</option>
<option value="5" selected>5</option>
<option value="6">6</option>
</select>
</div>
<div class="form-group">
<label for="inches-selector">Height (inches):</label>
<select id="inches-selector">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6" selected>6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
</select>
</div>
<div class="form-group">
<label for="weight-slider">Weight (lbs):</label>
<input type="range" id="weight-slider" class="slider" min="88" max="440" value="150" step="1">
</div>
</div>
<div class="result-container">
<h2>BMI:</h2>
<p id="bmi-result">0</p>
<h2>Interpretation:</h2>
<p id="bmi-interpretation"></p>
</div>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!