BMI Calculator
About this app
Calculate your BMI (Body Mass Index) with this simple and easy-to-use BMI Calculator.
BMI Calculator BMI Calculator METRIC (Height in cm & Weight in kg) IMPERIAL (Height in feet/inches & Weight in lbs) Height: cm Weight: kg Calculate Note: BMI is a simple measure and might not reflect the health status of certain individuals like athletes or elderly. Warning: This calculator is designed for adults. It may not be accurate for children and teens without specific age and gender data. Calculate Again
Put this on your site
Related apps
VoiceSong Studio - Créez votre propre hit !
Baccara Suite Master - Prédiction 1xBet & Casino
Elite Baccarat - Professional Casino Experience
YTPMV Scan - Ultimate Meme Sequencer
YTPMV Scan - Ultimate Audio Visual Sequencer
Pro-Roulette 0-14 Predictor | Advanced Strategic Analytics
Twelve - The Ultimate 12-Step Daily Harmony Planner
Otter Python - Calc Runner Game
Harmony - Гид по здоровым отношениям и романтике
LoopTube 2016 - Infinite Video Looper & Repeater
VoxTransform - 50+ Pro Video Voice Effects
TinyTip | Simple Tip Calculator & Bill Splitter
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 BMI (Body Mass Index) with this simple and easy-to-use BMI Calculator.">
<meta name="keywords" content="BMI, Body Mass Index, Calculator, Health, Fitness">
<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">
<style>
body {
font-family: 'Roboto', sans-serif;
background-color: #f4f4f4;
padding: 20px;
}
.container {
max-width: 400px;
margin: auto;
background-color: #fff;
padding: 20px;
border-radius: 8px;
}
h1 {
text-align: center;
color: #333;
}
.unit-selection, .input {
margin-bottom: 15px;
}
button {
width: 100%;
padding: 10px;
background-color: #64B5F6;
border: none;
color: white;
cursor: pointer;
border-radius: 4px;
font-weight: 700;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #42A5F5;
}
.result {
margin-top: 20px;
}
.category {
color: #333;
font-weight: 700;
margin-top: 10px;
}
.notes {
margin-top: 20px;
color: #666;
font-size: 14px;
}
.notes p {
margin-bottom: 10px;
}
.restart {
margin-top: 20px;
text-align: center;
}
.restart button {
background-color: #888;
transition: background-color 0.3s ease;
}
.restart button:hover {
background-color: #666;
}
</style>
<script type="text/javascript">
try {
// App Javascript Goes Here. Place your entire script content inside the try block for error handling.
function calculateBMI() {
const unit = document.querySelector('input[name="unit"]:checked').value;
const height = parseFloat(document.getElementById('height').value);
const weight = parseFloat(document.getElementById('weight').value);
let bmi;
if (unit === "metric") {
bmi = weight / ((height / 100) ** 2);
} else {
bmi = (weight / (height ** 2)) * 703;
}
const result = document.getElementById('bmi-result');
const category = document.getElementById('bmi-category');
result.textContent = `Your BMI: ${bmi.toFixed(2)}`;
if (bmi < 18.5) {
category.textContent = "Category: Underweight";
} else if (bmi < 24.9) {
category.textContent = "Category: Normal weight";
} else if (bmi < 29.9) {
category.textContent = "Category: Overweight";
} else {
category.textContent = "Category: Obese";
}
}
function restart() {
document.getElementById('height').value = "";
document.getElementById('weight').value = "";
document.getElementById('bmi-result').textContent = "";
document.getElementById('bmi-category').textContent = "";
}
// This will run when the DOM is ready.
document.addEventListener("DOMContentLoaded", function() {
const calculateButton = document.getElementById('calculate-button');
calculateButton.addEventListener('click', calculateBMI);
const restartButton = document.getElementById('restart-button');
restartButton.addEventListener('click', restart);
});
} catch (error) {
// This will throw the error to the parent window.
throw error;
}
</script>
</head>
<body>
<div id="main-container" class="container">
<h1>BMI Calculator</h1>
<!-- Unit Selection -->
<div class="unit-selection">
<label>
<input type="radio" name="unit" value="metric" checked> METRIC (Height in cm & Weight in kg)
</label>
<label>
<input type="radio" name="unit" value="imperial"> IMPERIAL (Height in feet/inches & Weight in lbs)
</label>
</div>
<!-- Height and Weight Input -->
<div class="input">
<div class="height-input">
<label for="height">Height:</label>
<input type="number" id="height" min="140" max="210" step="1"> cm
</div>
<div class="weight-input">
<label for="weight">Weight:</label>
<input type="number" id="weight" min="40" max="200" step="0.1"> kg
</div>
</div>
<!-- Calculate Button -->
<button id="calculate-button">Calculate</button>
<!-- Display Results -->
<div class="result">
<p id="bmi-result"></p>
<p id="bmi-category" class="category"></p>
</div>
<!-- Notes & Warnings -->
<div class="notes">
<p>Note: BMI is a simple measure and might not reflect the health status of certain individuals like athletes or elderly.</p>
<p>Warning: This calculator is designed for adults. It may not be accurate for children and teens without specific age and gender data.</p>
</div>
<!-- Restart Option -->
<div class="restart">
<button id="restart-button">Calculate Again</button>
</div>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!