BMI Calculator
About this app
Calculate your Body Mass Index (BMI) based on your height and weight.
BMI Calculator What is Your Body Mass Index? Metric (cm & kg) Imperial (ft & in, lbs) Enter your height: Enter your weight: Calculate BMI Your BMI Result: Note: This BMI calculator is intended for use by adults (18 years and older). It may not be accurate for athletes, pregnant women, and individuals with a high muscle mass. Warning: This BMI calculator is not suitable for children and teens. Please consult a healthcare professional for accurate assessment.
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
<!DOCTYPE html>
<html lang="en">
<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) based on your height and weight.">
<meta name="keywords" content="BMI, Body Mass Index, health, weight, height">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.2/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">
<style>
body {
font-family: 'Roboto', sans-serif;
}
.container {
max-width: 400px;
margin-top: 50px;
}
h1 {
text-align: center;
font-weight: 700;
margin-bottom: 30px;
}
.radio-group {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.input-group {
margin-bottom: 20px;
}
.input-group label {
display: block;
margin-bottom: 5px;
font-weight: 700;
}
.input-group input {
width: 100%;
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
.button {
display: block;
width: 100%;
padding: 10px;
border-radius: 5px;
border: none;
background-color: #007bff;
color: #fff;
font-weight: 700;
cursor: pointer;
}
.result-container {
margin-top: 30px;
}
.result-container h2 {
text-align: center;
font-weight: 700;
margin-bottom: 20px;
}
.result-container p {
text-align: center;
}
.note-container {
margin-top: 20px;
}
.note-container p {
font-size: 14px;
text-align: center;
}
.warning-container {
margin-top: 20px;
}
.warning-container p {
color: red;
font-size: 14px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h1>What is Your Body Mass Index?</h1>
<div class="radio-group">
<label>
<input type="radio" name="system" value="metric" checked>
Metric (cm & kg)
</label>
<label>
<input type="radio" name="system" value="imperial">
Imperial (ft & in, lbs)
</label>
</div>
<div class="height-container input-group">
<label for="height">Enter your height:</label>
<input type="number" id="height" placeholder="Height cm or in">
<input type="number" id="height-feet" placeholder="ft">
<input type="number" id="height-inches" placeholder="in">
</div>
<div class="input-group">
<label for="weight">Enter your weight:</label>
<input type="number" id="weight" placeholder="Weight kg or lbs">
</div>
<button class="button" onclick="calculateBMI()">Calculate BMI</button>
<div id="result-container" class="result-container" style="display: none;">
<h2>Your BMI Result:</h2>
<p id="bmi-result"></p>
</div>
<div class="note-container">
<p>Note: This BMI calculator is intended for use by adults (18 years and older). It may not be accurate for
athletes, pregnant women, and individuals with a high muscle mass.</p>
</div>
<div class="warning-container">
<p>Warning: This BMI calculator is not suitable for children and teens. Please consult a healthcare
professional for accurate assessment.</p>
</div>
</div>
<script type="text/javascript">
const heightFeetEl = document.getElementById('height-feet');
const heightInchesEl = document.getElementById('height-inches');
const heightEl = document.getElementById('height');
const resultContainer = document.getElementById('result-container');
const bmiResultEl = document.getElementById('bmi-result');
document.querySelector('input[name="system"]').addEventListener('change', (event) => {
if (event.target.value === 'imperial') {
heightFeetEl.style.display = 'block';
heightInchesEl.style.display = 'block';
heightEl.style.display = 'none';
} else {
heightFeetEl.style.display = 'none';
heightInchesEl.style.display = 'none';
heightEl.style.display = 'block';
}
});
function calculateBMI() {
const system = document.querySelector('input[name="system"]:checked').value;
let height;
if (system === "imperial") {
const feetToInches = parseFloat(heightFeetEl.value) * 12;
const inches = parseFloat(heightInchesEl.value);
height = feetToInches + inches;
} else {
height = parseFloat(heightEl.value);
}
const weight = parseFloat(document.getElementById('weight').value);
let bmi;
if (system === "metric") {
bmi = weight / ((height / 100) * (height / 100));
} else {
bmi = (weight / (height * height)) * 703;
}
resultContainer.style.display = 'block';
bmiResultEl.innerHTML = `Your BMI is: ${bmi.toFixed(2)}`;
}
</script>
</body>
</html>
NEW APPS
These are apps made by the community!