Skip to content

Instantly share code, notes, and snippets.

@helpercode0

helpercode0/index.html

Created August 12, 2024 17:41
Show Gist options
  • Save helpercode0/7145c0ae43f5ed027801bd47d8cbc5c7 to your computer and use it in GitHub Desktop.
Save helpercode0/7145c0ae43f5ed027801bd47d8cbc5c7 to your computer and use it in GitHub Desktop.
Download ZIP
Adavance BMI calculator javascript, html and css
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BMI Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f4f4f4;
color: #333;
}
#bmiForm {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
fieldset {
border: none;
margin-bottom: 20px;
}
p {
margin: 0 0 10px;
font-weight: bold;
}
.radio-container, .radio-container-weights {
display: flex;
justify-content: space-around;
margin-bottom: 10px;
}
.radio-container input, .radio-container-weights input {
margin-right: 5px;
}
.child-radio-cls {
margin-bottom: 15px;
}
input[type="number"] {
width: calc(100% - 20px);
padding: 10px;
font-size: 16px;
margin: 5px 0;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
.kt_hidden {
display: none;
}
#bmiResult {
text-align: center;
font-size: 1.2em;
margin-top: 20px;
color: #007bff;
}
</style>
</head>
<body>
<div id="bmiForm">
<fieldset>
<div class="parent-radio-cls">
<div class="child-radio-cls">
<p>Enter Your Height:</p>
<div class="radio-container">
<input type="radio" name="heightUnit" value="cm" checked onclick="toggleHeightInput()" id="cm">
<label for="cm">CM</label>
<input type="radio" name="heightUnit" value="ftin" onclick="toggleHeightInput()" id="feet">
<label for="feet">Feet/Inches</label>
</div>
</div>
<div class="child-radio-cls">
<div id="heightCm" class="kt_heightCm">
<input type="number" id="heightInCm" placeholder="Height in cm" name="cm" onkeyup="calculateBMI()">
</div>
<div id="heightFtIn" class="kt_heightFtIn kt_hidden">
<input type="number" id="heightInFt" placeholder="Feet" name="ft" onkeyup="calculateBMI()">
<input type="number" id="heightInIn" placeholder="Inches" name="in" onkeyup="calculateBMI()">
</div>
</div>
</div>
</fieldset>
<fieldset>
<div class="parent-radio-cls">
<div class="child-radio-cls">
<p>Enter Your Weight:</p>
<div class="radio-container-weights">
<input type="radio" name="weightUnit" value="kg" checked onclick="toggleWeightInput()" id="kg">
<label for="kg">KG</label>
<input type="radio" name="weightUnit" value="stone" onclick="toggleWeightInput()" id="stone">
<label for="stone">Stone</label>
<input type="radio" name="weightUnit" value="pounds" onclick="toggleWeightInput()" id="pounds">
<label for="pounds">Pounds</label>
</div>
</div>
<div class="child-radio-cls">
<div id="weightKg" class="kt_weightKg">
<input type="number" id="weightInKg" placeholder="Weight in kg" name="kg" onkeyup="calculateBMI()">
</div>
<div id="weightStone" class="kt_weightStone kt_hidden">
<input type="number" id="weightInStone" placeholder="Weight in stone" name="st" onkeyup="calculateBMI()">
</div>
<div id="weightPounds" class="kt_weightPounds kt_hidden">
<input type="number" id="weightInPounds" placeholder="Weight in pounds" name="lb" onkeyup="calculateBMI()">
</div>
</div>
</div>
</fieldset>
</div>
<div id="bmiResult" class="kt_bmiResult kt_hidden"></div>
<script>
function toggleHeightInput() {
var heightUnit = document.querySelector('input[name="heightUnit"]:checked').value;
document.getElementById('heightCm').classList.toggle('kt_hidden', heightUnit !== 'cm');
document.getElementById('heightFtIn').classList.toggle('kt_hidden', heightUnit !== 'ftin');
calculateBMI();
}
function toggleWeightInput() {
var weightUnit = document.querySelector('input[name="weightUnit"]:checked').value;
document.getElementById('weightKg').classList.toggle('kt_hidden', weightUnit !== 'kg');
document.getElementById('weightStone').classList.toggle('kt_hidden', weightUnit !== 'stone');
document.getElementById('weightPounds').classList.toggle('kt_hidden', weightUnit !== 'pounds');
calculateBMI();
}
function calculateBMI() {
var heightUnit = document.querySelector('input[name="heightUnit"]:checked').value;
var weightUnit = document.querySelector('input[name="weightUnit"]:checked').value;
var heightInCm, weightInKg;
if (heightUnit === 'cm') {
heightInCm = parseFloat(document.getElementById('heightInCm').value);
} else {
var heightInFt = parseFloat(document.getElementById('heightInFt').value);
var heightInIn = parseFloat(document.getElementById('heightInIn').value);
heightInCm = (heightInFt * 30.48) + (heightInIn * 2.54);
}
if (weightUnit === 'kg') {
weightInKg = parseFloat(document.getElementById('weightInKg').value);
} else if (weightUnit === 'stone') {
var weightInStone = parseFloat(document.getElementById('weightInStone').value);
weightInKg = weightInStone * 6.35029;
} else {
var weightInPounds = parseFloat(document.getElementById('weightInPounds').value);
weightInKg = weightInPounds * 0.453592;
}
var bmiResultElement = document.getElementById('bmiResult');
if (!isNaN(heightInCm) && !isNaN(weightInKg) && heightInCm > 0 && weightInKg > 0) {
var heightInMeters = heightInCm / 100;
var bmi = weightInKg / (heightInMeters * heightInMeters);
bmiResultElement.innerText = `Your BMI is ${bmi.toFixed(2)}`;
bmiResultElement.classList.remove('kt_hidden');
} else {
bmiResultElement.innerText = '';
bmiResultElement.classList.add('kt_hidden');
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment