-1
Good afternoon. I’m learning Javascript and started a project to calculate a person’s BMI. I researched how to sum two numbers using inputs in HTML and based on the code used for the sum, converted it to make the equation that calculates a person’s BMI.
The result came out this one => https://danisanttos.github.io/exercicio-IMC/ (Works well only on desktop, I haven’t learned much about responsiveness in CSS yet).
However, I wanted to give an increment, for example, if the result is a BMI below or above the average, display after clicking on the "Result" the result of the calculation and a warning saying that BMI is above or below. It would also be nice to display "your BMI is:" after clicking on the result. But I have no idea how to do it and I tried to research but I don’t know the right terms for it.
If you can give me a hand but without crucifying me I’ll thank you very much <3 This is the html:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Calculador de IMC</title>
<meta charset="utf-8">
<script src="js/javascript.js"></script>
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div class="content">
<h1>CALCULADOR DE IMC</h1>
<p></p><label>Digite o seu peso:</label>
<input class="peso" type="number" min="1" max="999"><br>
<p>Agora sua altura:</p>
<label>M:</label>
<input class="m" type="number" min="0" max="2">
<label>CM:</label>
<input class="cm" type="number" min="0" max="99">
<button onclick="clicar()">RESULTADO</button>
<p>Seu IMC é:</p>
<p class="resultado"></p>
</div>
</body>
</html>
Esse o Javascript:
function clicar() {
var peso = document.querySelector(".peso").value;
var m = document.querySelector(".m").value;
var cm = document.querySelector(".cm").value;
var alt = m + "." + cm;
var res = parseFloat(peso) / (parseFloat(alt) * parseFloat(alt));
var imc = parseFloat(res.toFixed(2))
document.querySelector(".resultado").innerHTML = imc;
}
That’s the CSS (I don’t know if it’s necessary):
body {
background-color: #8470FF;
width: 100%;
line-height: 1;
position: relative;
font-family: 'Ubuntu', sans-serif;
}
.content {
background-color: #aeb79b;
position: absolute;
border-radius: 15px;
padding-left: 5%;
padding-right:5%;
padding-bottom: 1%;
text-align: center;
margin: auto;
left: 50%;
transform: translatex(-50%);
}
Remembering people, I’m learning so the code is not 100%. I use this page to give a trained.
valeeeeeeu :D