I'm struggling to make this calculator function. Please make it function. These are my files: index.html BMI Calculator BMI Calculator Height(cm) Weight(kg) Calculate BMI Findings: 00.00 Comment: you are overweight ____________________________________________________________________________________ style.css @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800;900&display=swap'); /* font-family: 'Nunito'. sans-serif; */ *{ padding: 0; margin: 0; box-sizing: border-box; } body{ min-height:100vh; background: url; background-size: cover; font-family: 'Nunito', sans-serif; } .container{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .box{ min-width: 400px; background: #FAFAFA; border-radius: 38px; text-align: center; position: relative; } .box::before{ content: ''; position: absolute; height: 110%; width: 110%; left: -5%; top: -5%; background-color: rgba(255, 255, 255, 0.3); box-shadow: 0px 0px 166px -31px rgba(0, 0, 0, 0.15); border-radius: 60px; z-index: -1; } h1{ font-weight: bold; font-size: 36px; padding: 30px 0; } .content{ padding: 0 40px; } .input{ background: #FFF; box-shadow: 0px 0px 95px -30px rgba(0, 0, 0, 0.15); border-radius: 28px; padding: 20px 0; margin-bottom: 20px; } .input label{ display: block; font-size: 18px; font-weight: 600; color: #000; margin-bottom: 20px; } .input input{ outline: none; border: none; border-bottom: 1px splid #4F7DF9; width: 60%; text-align: center; font-size: 28px; font-family: 'Nunito, sans-serif'; } button#calculate{ font-family: 'Nunito', sans-serif; color: #FFF; background: #4F7DF9; font-size: 16px; border-radius: 12px; padding: 12px 0; width: 100%; outline: none; border: none; transition: background .2s ease; } button#calculate:hover{ background: #0044FF; } .result{ padding: 30px 20px; } .result p{ font-weight: 600; font-size: 22px; color: #000; margin-bottom: 15px; } .result #result{ font-size: 36px; font-weight: 900px; color: #4F7DF9; background-color: #EAEAEA; display: inline-block; padding: 7px 20px; border-radius: 55px; margin-bottom: 25px; } #comment{ color: #4F7DF9; font-weight: 800; } _______________________________________________________________________________________ script.js const btn = document.getElementById('calculate'); btn.addEventListener('click', function(){ let height = document.querySelector('#height').value; let weight = document.querySelector('#weight').value; if(height == '' || weight == ''){ alert('Please fill out the input fields!'); return; } // BMI = weight in KG / (height in m * height in m) height = height / 100 let BMI = (weight / (height * height)); BMI = BMI.toFixed(2); document.querySelector('#result').innerHTML = BMI; let status = ''; if(BMI < 18.5){ status = "Under Weight"; } if(BMI >= 18.5 && BMI < 25){ status = "Normal Weight"; } if(BMI >= 25 && BMI < 30){ status = "Over Weight"; } if(BMI >= 30){ status = "Clinically Obese" } document.querySelector('.comment').innerHTML = 'Comment: you are <span id="comment">${status}</span>'; });
I'm struggling to make this calculator function. Please make it function. These are my files:
index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width",
initial-scale=1.0">
<title>BMI Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="box">
<h1>BMI Calculator</h1>
<div class="content">
<div class="input">
<label for="height">Height(cm)</label>
<input type="number" id="height">
</div>
<div class="input">
<label for="weight">Weight(kg)</label>
<input type="number" id="weight">
</div>
<button id="calculate">Calculate BMI</button>
</div>
<div class="result">
<p>Findings:</p>
<div id="result">00.00</div>
<p class="comment">Comment: you are <span
id="comment">overweight</span></p>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
____________________________________________________________________________________
style.css
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800;900&display=swap');
/* font-family: 'Nunito'. sans-serif; */
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
min-height:100vh;
background: url;
background-size: cover;
font-family: 'Nunito', sans-serif;
}
.container{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.box{
min-width: 400px;
background: #FAFAFA;
border-radius: 38px;
text-align: center;
position: relative;
}
.box::before{
content: '';
position: absolute;
height: 110%;
width: 110%;
left: -5%;
top: -5%;
background-color: rgba(255, 255, 255, 0.3);
box-shadow: 0px 0px 166px -31px rgba(0, 0, 0, 0.15);
border-radius: 60px;
z-index: -1;
}
h1{
font-weight: bold;
font-size: 36px;
padding: 30px 0;
}
.content{
padding: 0 40px;
}
.input{
background: #FFF;
box-shadow: 0px 0px 95px -30px rgba(0, 0, 0, 0.15);
border-radius: 28px;
padding: 20px 0;
margin-bottom: 20px;
}
.input label{
display: block;
font-size: 18px;
font-weight: 600;
color: #000;
margin-bottom: 20px;
}
.input input{
outline: none;
border: none;
border-bottom: 1px splid #4F7DF9;
width: 60%;
text-align: center;
font-size: 28px;
font-family: 'Nunito, sans-serif';
}
button#calculate{
font-family: 'Nunito', sans-serif;
color: #FFF;
background: #4F7DF9;
font-size: 16px;
border-radius: 12px;
padding: 12px 0;
width: 100%;
outline: none;
border: none;
transition: background .2s ease;
}
button#calculate:hover{
background: #0044FF;
}
.result{
padding: 30px 20px;
}
.result p{
font-weight: 600;
font-size: 22px;
color: #000;
margin-bottom: 15px;
}
.result #result{
font-size: 36px;
font-weight: 900px;
color: #4F7DF9;
background-color: #EAEAEA;
display: inline-block;
padding: 7px 20px;
border-radius: 55px;
margin-bottom: 25px;
}
#comment{
color: #4F7DF9;
font-weight: 800;
}
_______________________________________________________________________________________
script.js
const btn = document.getElementById('calculate');
btn.addEventListener('click', function(){
let height = document.querySelector('#height').value;
let weight = document.querySelector('#weight').value;
if(height == '' || weight == ''){
alert('Please fill out the input fields!');
return;
}
// BMI = weight in KG / (height in m * height in m)
height = height / 100
let BMI = (weight / (height * height));
BMI = BMI.toFixed(2);
document.querySelector('#result').innerHTML = BMI;
let status = '';
if(BMI < 18.5){
status = "Under Weight";
}
if(BMI >= 18.5 && BMI < 25){
status = "Normal Weight";
}
if(BMI >= 25 && BMI < 30){
status = "Over Weight";
}
if(BMI >= 30){
status = "Clinically Obese"
}
document.querySelector('.comment').innerHTML = 'Comment:
you are <span id="comment">${status}</span>';
});
Step by step
Solved in 5 steps with 1 images
