EXERCÍCIO FEITO CRIANDO UMA CALCULADORA DE ÍNDICE DE MASSA CORPORAR COM HTML CSS E JAVASCRIPTCÓDIGO FONTE:
𝐗𝐗: <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Calculadora IMC</title>
<style>
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: sans-serif;
}
.container {
border: 2px solid #908590;
width: 400px;
box-shadow: 0 0 7px rgba(0, 0, 0, 0.3);
border-radius: 5px;
padding: 20px;
}
.buttons {
display: flex;
flex-direction: row;
justify-content: center;
}
input,
select {
display: block;
margin-bottom: 20px;
border: 1px solid #ccc;
padding: 10px;
background-color: whitesmoke;
font-size: 16px;
width: 250px;
}
input[type="submit"] {
padding: 10px 40px;
background: #25aae1;
color: whitesmoke;
text-transform: uppercase;
font-weight: bold;
border: 0;
}
.informations {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.title {
font-size: 30px;
font-weight: bold;
text-transform: uppercase;
margin-bottom: 20px;
font-family: sans-serif;
}
.resultado {
background: #d4002d;
padding: 10px 40px;
color: whitesmoke;
font-size: 16px;
margin: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1 class="title">Calculadora IMC</h1>
<form action="" method="POST" class="form">
<div class="informations">
<label for="altura">Altura (cm): </label>
<input type="number" name="altura" id="altura" />
<label for="peso">Peso (kg): </label>
<input type="number" name="peso" id="peso" />
<label for="Calcular">Calcular: </label>
</div>
<div class="buttons">
<input type="submit" value="Calcular" onclick="" />
</div>
</form>
<div class="resultado" id="resultado"></div>
</div>
<script type="text/javascript">
function calculate() {
const altura = Number(document.querySelector("#altura").value);
const peso = Number(document.querySelector("#peso").value);
const IMC = peso / (altura * altura);
document.querySelector("#resultado").innerHTML = '<p> Seu IMC é de: <strong> '+IMC.toFixed(2)+'</strong><p>';
}
document.querySelector('input[type="submit"]').addEventListener('click', calculate);
</script>
</body>
</html>
0 Comentários