SimplySoundAdvice.com: What is your Body Mass Index (BMI)?
About this app
Calculate your Body Mass Index (BMI) with a simple and easy-to-use calculator.
SimplySoundAdvice.com: What is your Body Mass Index (BMI)?
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>SimplySoundAdvice.com: What is your Body Mass Index (BMI)?</title>
<meta name="description" content="Calculate your Body Mass Index (BMI) with a simple and easy-to-use calculator.">
<meta name="keywords" content="BMI calculator, 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">
<script type="text/javascript">
try {
// App Javascript Goes Here. Place your entire script content inside the try block for error handling.
document.addEventListener("DOMContentLoaded", function() {
// Initialize user interface elements
const mainContainer = document.getElementById("main-container");
mainContainer.innerHTML = `
<h1 class="text-center mb-4">Calculate your Body Mass Index (BMI)</h1>
<div class="row justify-content-center">
<div class="col-12 col-md-6">
<div class="mb-3">
<label for="unit-select" class="form-label">Select Unit of Measurement:</label>
<select id="unit-select" class="form-select">
<option value="metric">Metric</option>
<option value="imperial">Imperial</option>
</select>
</div>
<div id="metric-form" class="mb-3">
<label for="height-metric" class="form-label">Height (cm):</label>
<input type="number" id="height-metric" class="form-control" min="140" max="210" required>
</div>
<div id="imperial-form" class="mb-3" style="display: none;">
<div class="row">
<div class="col">
<label for="height-feet" class="form-label">Height (feet):</label>
<input type="number" id="height-feet" class="form-control" min="4" max="6" required>
</div>
<div class="col">
<label for="height-inches" class="form-label">Height (inches):</label>
<input type="number" id="height-inches" class="form-control" min="0" max="11" required>
</div>
</div>
</div>
<div class="mb-3">
<label for="weight" class="form-label">Weight (${getWeightUnit()}):</label>
<input type="number" id="weight" class="form-control" min="${getWeightMin()}" max="${getWeightMax()}" required>
</div>
<button id="calculate-btn" class="btn btn-primary">Calculate</button>
</div>
</div>
<div id="result" class="mt-4" style="display: none;">
<h2 class="text-center mb-4">Your BMI</h2>
<div id="bmi-circle" class="d-flex justify-content-center align-items-center"></div>
<div id="bmi-label" class="text-center"></div>
<div id="legend" class="mt-4">
<h3 class="text-center">Legend</h3>
<div class="d-flex justify-content-center">
<div class="legend-circle" style="background-color: blue;"></div>
<div class="legend-circle" style="background-color: green;"></div>
<div class="legend-circle" style="background-color: orange;"></div>
<div class="legend-circle" style="background-color: red;"></div>
</div>
<div class="d-flex justify-content-center">
<div class="legend-label">Underweight</div>
<div class="legend-label">Normal Weight</div>
<div class="legend-label">Overweight</div>
<div class="legend-label">Obese</div>
</div>
</div>
<p class="text-center mt-4">BMI is a useful measure for adults. It may not be accurate for athletes, elderly, or children.</p>
<div class="d-flex justify-content-center mt-4">
<button id="restart-btn" class="btn btn-primary">Restart</button>
</div>
</div>
`;
// Add event listener to calculate button
const calculateBtn = document.getElementById("calculate-btn");
calculateBtn.addEventListener("click", calculateBMI);
// Add event listener to restart button
const restartBtn = document.getElementById("restart-btn");
restartBtn.addEventListener("click", restartBMI);
// Function to calculate BMI
function calculateBMI() {
const unitSelect = document.getElementById("unit-select");
const selectedUnit = unitSelect.value;
const heightMetric = document.getElementById("height-metric");
const heightFeet = document.getElementById("height-feet");
const heightInches = document.getElementById("height-inches");
const weight = document.getElementById("weight");
let height, weightUnit;
if (selectedUnit === "metric") {
height = heightMetric.value / 100;
weightUnit = "kg";
} else {
const feetToInches = heightFeet.value * 12;
height = (feetToInches + parseInt(heightInches.value)) / 39.37;
weightUnit = "lbs";
}
const bmi = calculateBMIScore(height, weight.value, selectedUnit);
const bmiCircle = document.getElementById("bmi-circle");
const bmiLabel = document.getElementById("bmi-label");
if (bmi < 18.5) {
bmiCircle.style.backgroundColor = "blue";
bmiLabel.textContent = "Underweight";
} else if (bmi >= 18.5 && bmi <= 24.9) {
bmiCircle.style.backgroundColor = "green";
bmiLabel.textContent = "Normal Weight";
} else if (bmi >= 25 && bmi <= 29.9) {
bmiCircle.style.backgroundColor = "orange";
bmiLabel.textContent = "Overweight";
} else {
bmiCircle.style.backgroundColor = "red";
bmiLabel.textContent = "Obese";
}
document.getElementById("result").style.display = "block";
document.getElementById("restart-btn").focus();
// Scroll to results
const resultElement = document.getElementById("result");
resultElement.scrollIntoView({ behavior: 'smooth' });
}
// Function to restart BMI calculation
function restartBMI() {
document.getElementById("result").style.display = "none";
document.getElementById("unit-select").selectedIndex = 0;
document.getElementById("metric-form").style.display = "block";
document.getElementById("imperial-form").style.display = "none";
document.getElementById("height-metric").value = "";
document.getElementById("height-feet").value = "";
document.getElementById("height-inches").value = "";
document.getElementById("weight").value = "";
document.getElementById("unit-select").focus();
}
// Function to calculate BMI score
function calculateBMIScore(height, weight, unit) {
if (unit === "metric") {
return weight / (height * height);
} else {
return (weight / (height * height)) * 703;
}
}
// Function to get weight unit
function getWeightUnit() {
const unitSelect = document.getElementById("unit-select");
const selectedUnit = unitSelect.value;
if (selectedUnit === "metric") {
return "kg";
} else {
return "lbs";
}
}
// Function to get weight minimum value
function getWeightMin() {
const unitSelect = document.getElementById("unit-select");
const selectedUnit = unitSelect.value;
if (selectedUnit === "metric") {
return 40;
} else {
return 88;
}
}
// Function to get weight maximum value
function getWeightMax() {
const unitSelect = document.getElementById("unit-select");
const selectedUnit = unitSelect.value;
if (selectedUnit === "metric") {
return 200;
} else {
return 440;
}
}
});
} catch (error) {
// This will throw the error to the parent window.
throw error;
}
</script>
<style>
body {
background-color: #f5f5f5;
font-family: 'Roboto', sans-serif;
}
#main-container {
max-width: 800px;
margin: 0 auto;
padding: 40px 20px;
}
h1 {
font-size: 32px;
font-weight: bold;
color: #333;
margin-bottom: 20px;
}
input[type="number"] {
width: 100px;
}
.legend-circle {
width: 20px;
height: 20px;
border-radius: 50%;
margin: 10px;
}
.legend-label {
margin: 10px;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<!-- App HTML Goes Here -->
</div>
</body>
</html>
NEW APPS
These are apps made by the community!