Calculadora IMC:
Neste tutorial, você aprenderá a criar uma calculadora de Índice de Massa Corporal (IMC) usando HTML, CSS e JavaScript.
Projeto indispensável para iniciantes em programação:
Antes de começar nosso tutorial, precisamos entender o que é (IMC).
A Calculadora do Índice de Massa Corporal (IMC) pode ser usada para calcular
os valores de IMC com base em sua altura e peso.O IMC é um indicador bastante confiável de gordura corporal para a maioria das pessoas.
Veja a Calculadora IMC em funcionamento neste link. Calculadora IMC.
Veja o vídeo no YouTube:
Começando o Tutorial:
1° Passo: Abra seu VS Code, ou qualquer IDE da sua preferência e crie três pastas com os nomes... index.html, style.css e script.js.
Logo em seguida copie o código html abaixo e cole na pasta "index.html".
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Índice de Massa Corporal</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<div class="container">
<div class="title">Calculator - IMC</div>
<div class="input">
<label>Nome:</label>
<input type="text" id='nome'>
</div>
<div class="input">
<label>Altura:</label>
<input type="number" id='altura'>
</div>
<div class="input">
<label>Peso:</label>
<input type="number" id='peso'>
</div>
<button id='calcular'>Calcular</button>
<div class="result" id='resultado'></div>
</div>
</main>
<script src="script.js"></script>
</body>
</html>
2° Passo: Copie o código abaixo e cole na pasta "style.css".
body, html {
display: flex;
width: 100vw;
height: 100vh;
justify-content: center;
align-items: center;
}
.container{
display: flex;
flex-direction: column;
background: green;
width: 360px;
height: 550px;
align-items: center;
justify-content: space-evenly;
border-radius: 20px;
box-shadow: 0 0 10px black;
}
.title{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 50px;
font: bold 2.5rem serif;
border-bottom: solid 5px black;
margin-bottom: 20px;
}
.input {
display: flex;
width: 300px;
height: 50px;
justify-content: space-between;
align-items: center;
}
.input input {
width: 200px;
height: 50px;
border-radius: 5px;
border:none;
outline: 0;
font: bold 1.5rem serif;
text-align: center;
}
.input label {
font: bold 1.5rem serif;
}
button{
width: 300px;
height: 40px;
font: bold 1.2rem serif;
background: blue;
color: white;
outline: none;
border-radius: 5px;
cursor: pointer;
}
.result{
display: flex;
margin-top: 20px;
align-items: center;
width: 300px;
height: 150px;
border-radius: 5px;
font: italic 1.5rem serif;
box-shadow: 0px 0px 10px black;
background: yellow;
color: black;
padding: 20px;
box-sizing: border-box;
user-select: none;
}
3° Passo: Copie o código abaixo e cole na pasta "script.js".
const calcular = document.getElementById('calcular');
function imc () {
const nome = document.getElementById('nome').value;
const altura = +document.getElementById('altura').value;
const peso = +document.getElementById('peso').value;
const resultado = document.getElementById('resultado');
if (nome !== '' && altura !== '' && peso !== '') {
const valorIMC = (peso / (altura * altura)).toFixed(1);
let classificacao = '';
if (valorIMC < 18.5){
classificacao = 'abaixo do peso.';
}else if (valorIMC < 25) {
classificacao = 'com peso ideal. Parabéns!!!';
}else if (valorIMC < 30){
classificacao = 'levemente acima do peso.';
}else if (valorIMC < 35){
classificacao = 'com obesidade grau I.';
}else if (valorIMC < 40){
classificacao = 'com obesidade grau II';
}else {
classificacao = 'com obesidade grau III. Cuidado!!';
}
resultado.textContent = `${nome} seu IMC é ${valorIMC} e você está ${classificacao}`;
}else {
resultado.textContent = 'Preencha todos os campos!!!';
}
}
calcular.addEventListener('click', imc);
Top demais!
ResponderExcluir