Overview
This app allow user to calculate BMI and also provide the result with the description based on the standard value.
HTML File
<!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>
<link rel="stylesheet" href="./style.css">
</head>
<body class="grid">
<div class="container">
<h1>BMI Calculator</h1>
<div class="input-group">
<div class="input-wrapper">
<input type="text" class="input" id="weight" placeholder="e.g., 70.5">
<div class="tooltip">Please provide the weight in kg</div>
</div>
<div class="input-wrapper">
<input type="text" class="input" id="height" placeholder="e.g., 5.9">
<div class="tooltip">Please provide the height in ft</div>
</div>
</div>
<button id="calculate-btn"><span>Calculate</span></button>
<div class="result-container">
<div id="bmi-result" class="bmi-result"></div>
<div id="bmi-description"></div>
</div>
</div>
<script src="./script.js"></script>
</body>
</html>
CSS File
body {
background-color: #000000;
color: #f9f9f9;
font-family: "Calibri", sans-serif;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
overflow: hidden;
}
.grid {
background-image: linear-gradient(to right, #0f0f10 1px, transparent 1px),
linear-gradient(to bottom, #0f0f10 1px, transparent 1px);
background-size: 2rem 2rem;
background-position: center center;
animation: bgMove 10s linear infinite;
}
@keyframes bgMove {
0% { background-position: center center; }
100% { background-position: right bottom; }
}
.container {
text-align: center;
max-width: 400px;
width: 90%;
padding: 20px;
background-color: #151515;
border-radius: 12px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
z-index: 1;
position: relative;
}
h1 {
margin-bottom: 20px;
font-size: 28px;
background-image: linear-gradient(to right, #541bbe, #0b9d74);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-weight: bold;
}
.input-group {
margin-bottom: 20px;
}
.input-wrapper {
position: relative;
margin-bottom: 15px;
}
.input {
background-color: #010201;
border: 2px solid #343434;
width: 100%;
height: 50px;
border-radius: 10px;
color: white;
padding: 0 20px;
font-size: 18px;
box-sizing: border-box;
transition: border-color 0.3s ease;
}
.input:focus {
border-color: #d55e08;
outline: none;
}
.input::placeholder {
color: #c0b0c0;
}
.tooltip {
position: absolute;
top: -150%;
left: 50%;
transform: translateX(-50%);
opacity: 0;
padding: 0.3rem 0.6rem;
pointer-events: none;
transition: all 0.3s ease;
background: #333333;
z-index: 1;
border-radius: 6px;
font-size: 0.8rem;
color: #e8e8e8;
white-space: nowrap;
transform-origin: top center;
}
.tooltip::before {
position: absolute;
content: "";
height: 0.6rem;
width: 0.6rem;
bottom: -0.3rem;
left: 50%;
transform: translateX(-50%) rotate(45deg);
background: #333333;
}
.input-wrapper:hover .tooltip {
opacity: 1;
pointer-events: auto;
transform: translateX(-50%) translateY(-10px);
}
button {
background-color: #212121;
border: none;
width: 100%;
height: 50px;
border-radius: 10px;
font-size: 20px;
color: #f9f9f9;
position: relative;
cursor: pointer;
overflow: hidden;
z-index: 0;
}
button span {
position: relative;
z-index: 1;
}
button:before, button:after {
content: "";
position: absolute;
background-color: #212121;
transition: transform 0.4s ease;
z-index: 0;
}
button:before {
height: 4px;
width: 100%;
top: 0;
left: 0;
transform: scaleX(0);
}
button:after {
height: 4px;
width: 100%;
bottom: 0;
right: 0;
transform: scaleX(0);
}
button:hover:before {
transform: scaleX(1);
}
button:hover:after {
transform: scaleX(1);
}
.result-container {
margin-top: 20px;
}
.bmi-result{
margin-bottom: 10px;
font-size: 24px;
cursor: pointer;
position: relative;
display: inline-block;
}
.bmi-result:hover .tooltip {
opacity: 1;
pointer-events: auto;
transform: translateX(-50%) translateY(-10px);
}
JavaScript File
document.getElementById('calculate-btn').addEventListener('click', function() {
const weight = parseFloat(document.getElementById('weight').value);
const height = parseFloat(document.getElementById('height').value);
console.log(weight);
console.log(height);
if (isNaN(weight) || isNaN(height) || height < 0 || weight < 0 || height === " " || weight === " ") {
alert('Please provide valid numbers for weight and height.');
return;
}
const heightInMeters = height * 0.3048;
const bmi = (weight / (heightInMeters ** 2)).toFixed(2);
const resultElement = document.getElementById('bmi-result');
const descriptionElement = document.getElementById('bmi-description');
console.log(heightInMeters);
console.log(bmi);
console.log(resultElement);
console.log(descriptionElement);
resultElement.textContent = `Your BMI: ${bmi}`;
descriptionElement.textContent = getBMIDescription(bmi);
});
document.querySelectorAll('.color-info').forEach(info => {
info.addEventListener('mouseover', function () {
const tooltip = document.createElement('span');
tooltip.className = 'tooltip';
tooltip.innerText = 'Copy';
info.appendChild(tooltip);
console.log(tooltip);
});
info.addEventListener('mouseout', function () {
const tooltip = info.querySelector('.tooltip');
if (tooltip) {
tooltip.remove();
}
});
info.addEventListener('click', function () {
const tooltip = info.querySelector('.tooltip');
navigator.clipboard.writeText(info.innerText).then(() => {
tooltip.innerText = 'Copied!';
setTimeout(() => {
tooltip.innerText = 'Copy';
}, 1000);
});
});
});
function getBMIDescription(bmi) {
if (bmi < 16) {
return 'Severe Thinness';
} else if (bmi < 17) {
return 'Moderate Thinness';
} else if (bmi < 18.5) {
return 'Mild Thinness';
} else if (bmi < 25) {
return 'Normal';
} else if (bmi < 30) {
return 'Overweight';
} else if (bmi < 35) {
return 'Obese Class I';
} else if (bmi < 40) {
return 'Obese Class II';
} else {
return 'Obese Class III';
}
}
Top comments (0)