Neste exemplo, o HTML fornecerá a estrutura para os campos de entrada de peso e altura, e um botão para iniciar o cálculo. O JavaScript será responsável por pegar esses valores, calcular o IMC e exibir o resultado na página.
Este arquivo conterá a estrutura da página com os campos de entrada e a área para exibir o resultado.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculadora de IMC</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background-color: #f4f4f4;
}
.container {
background-color: #fff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
}
input {
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
#resultado {
margin-top: 20px;
font-weight: bold;
font-size: 18px;
}
</style>
</head>
<body>
<div class="container">
<h1>Calculadora de IMC</h1>
<div>
<label for="peso">Peso (kg):</label>
<input type="number" id="peso" placeholder="Ex: 70.5">
</div>
<div>
<label for="altura">Altura (m):</label>
<input type="number" id="altura" placeholder="Ex: 1.75">
</div>
<button onclick="calcularIMC()">Calcular IMC</button>
<div id="resultado"></div>
</div>
<script>
function calcularIMC() {
const peso = parseFloat(document.getElementById('peso').value);
const altura = parseFloat(document.getElementById('altura').value);
const resultadoDiv = document.getElementById('resultado');
if (isNaN(peso) || isNaN(altura) || peso <= 0 || altura <= 0) {
resultadoDiv.textContent = "Por favor, insira peso e altura válidos.";
return;
}
const imc = peso / (altura * altura);
resultadoDiv.textContent = `Seu IMC é: ${imc.toFixed(2)}`;
}
</script>
</body>
</html>
A estrutura básica da página é definida com <!DOCTYPE html>, <html>, <head> e <body>.
Dentro do <head>, definimos o título da página e alguns estilos CSS básicos para melhorar a aparência.
Dentro do <body>, criamos um div com a classe container para agrupar os elementos.
Temos dois divs contendo rótulos (<label>) e campos de entrada (<input type="number">) para o peso e a altura. Os atributos id (peso e altura) são importantes para que o JavaScript possa acessar esses elementos.
Um botão (<button>) com o texto "Calcular IMC" e um atributo onclick que chama a função JavaScript calcularIMC() quando o botão é clicado.
Um div com o id="resultado" que será usado para exibir o valor do IMC calculado.
A tag <script> no final do <body> contém o código JavaScript. Colocar o script no final garante que todos os elementos HTML já tenham sido carregados antes que o script tente interagir com eles.
A função calcularIMC() é definida. Esta função será executada quando o botão for clicado.
Dentro da função:
document.getElementById('peso').value obtém o valor digitado no campo de peso. parseFloat() converte essa string para um número decimal.
document.getElementById('altura').value faz o mesmo para o campo de altura.
document.getElementById('resultado') obtém a referência ao div onde o resultado será exibido.
Uma verificação (isNaN e as condições de peso e altura positivos) é feita para garantir que os valores inseridos são números válidos. Se não forem, uma mensagem de erro é exibida.
Se os valores forem válidos, o cálculo do IMC é feito (peso / (altura * altura)).
imc.toFixed(2) formata o resultado do IMC para exibir apenas duas casas decimais.
Finalmente, resultadoDiv.textContent = \Seu IMC é: ${imc.toFixed(2)}`atualiza o conteúdo dodiv` de resultado com o valor calculado do IMC.
Salve o código HTML acima em um arquivo chamado imc.html.Abra este arquivo (imc.html) diretamente no seu navegador web (Chrome, Firefox, Safari, etc.).Você verá a interface da calculadora de IMC.Digite o seu peso (em quilogramas) no primeiro campo.Digite a sua altura (em metros) no segundo campo.Clique no botão "Calcular IMC".O resultado do seu IMC será exibido abaixo do botão.
Este programa demonstra como o HTML cria a interface do usuário (os campos de entrada e o botão), e o JavaScript adiciona a interatividade e a lógica (pegar os valores, calcular o IMC e atualizar a página com o resultado) sem a necessidade de enviar informações para um servidor (backend) neste caso. Tudo acontece no navegador do usuário (frontend).
A diferença entre as duas aplicações é que o javascript nao precisa de outro componente para rodar junto ao html, tornando a programação mais “fácil” devido nao precisar de outra ferramenta.