Calculadora de IMC com JavaScript

O que vamos aprender?

Neste tutorial, vamos construir uma calculadora de IMC do zero usando HTML, CSS (Bootstrap) e JavaScript.

Ao final, você vai saber como:

Capturar valores digitados pelo usuário em um formulário
Fazer cálculos com JavaScript
Mostrar resultados na tela sem recarregar a página

O que é IMC?

O IMC (Índice de Massa Corporal) é um cálculo simples para avaliar se uma pessoa está dentro do peso considerado saudável.

A fórmula é:

IMC = peso / (altura × altura)

Exemplo prático:

Dado	Valor
Peso	70 kg
Altura	1,75 m
IMC	70 / (1,75 × 1,75) ≈ 22,86

Parte 1 — Criando o HTML

Vamos começar pelo esqueleto da página. Ele vai ter:

Dois campos de texto (peso e altura)
Um botão para calcular
Um espaço vazio onde o resultado vai aparecer

Crie um arquivo chamado index.html e cole o código abaixo:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Calculadora de IMC</title>

  <!-- Bootstrap: biblioteca CSS que facilita o visual da página -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light">

  <div class="container mt-5">
    <div class="card p-4 shadow">
      <h2 class="mb-4 text-center">Calculadora de IMC</h2>

      <form id="form-imc">

        <div class="mb-3">
          <label for="peso" class="form-label">Peso (kg)</label>
          <input type="number" id="peso" class="form-control" required>
        </div>

        <div class="mb-3">
          <label for="altura" class="form-label">Altura (m)</label>
          <input type="number" step="0.01" id="altura" class="form-control" required>
        </div>

        <button type="submit" class="btn btn-primary w-100">Calcular IMC</button>

      </form>

      <!-- É aqui que o resultado vai aparecer -->
      <div id="resultado" class="mt-4"></div>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>

Entendendo cada parte

Elemento	Para que serve
`<form id="form-imc">`	Agrupa os campos do formulário
`<input id="peso">`	Campo onde o usuário digita o peso
`<input id="altura">`	Campo onde o usuário digita a altura
`<button type="submit">`	Envia o formulário ao ser clicado
`<div id="resultado">`	Espaço vazio que vai receber o resultado

Por que usar id?
O id é como um "apelido" único para um elemento. O JavaScript vai usar esse apelido para encontrar e manipular o elemento na página.

Parte 2 — Conectando o JavaScript ao HTML

Crie um arquivo chamado script.js na mesma pasta do index.html.

O primeiro passo no JavaScript é selecionar os elementos do HTML com os quais queremos trabalhar.

// Cada linha abaixo "pega" um elemento do HTML pelo seu id
const form = document.getElementById('form-imc');
const pesoInput = document.getElementById('peso');
const alturaInput = document.getElementById('altura');
const resultado = document.getElementById('resultado');

Pense assim: é como se você dissesse ao JavaScript:

"Ei, preciso que você guarde uma referência para esses elementos — vou precisar deles depois."

document.getElementById('nome-do-id') procura no HTML um elemento com aquele id e retorna ele para você usar.

Parte 3 — Escutando o envio do formulário

Queremos que algo aconteça quando o usuário clicar em "Calcular IMC". Para isso, usamos um evento.

form.addEventListener('submit', function(event) {
  // Isso impede a página de recarregar quando o formulário for enviado
  event.preventDefault();

  // O código aqui dentro roda quando o botão é clicado
  console.log('Formulário enviado!');
});

Por que usar `event.preventDefault()`?

Por padrão, quando um formulário é enviado, o navegador recarrega a página — e isso apagaria tudo que mostramos na tela. O preventDefault() cancela esse comportamento. É essencial para aplicações interativas.

Como funciona o `addEventListener`?

elemento.addEventListener('nome-do-evento', função-a-executar)

'submit' é o evento que acontece quando o formulário é enviado
A function(event) é o código que vai rodar quando isso acontecer

Parte 4 — Calculando o IMC

Vamos criar uma função para fazer o cálculo. Funções são blocos de código que realizam uma tarefa específica e podem ser chamados várias vezes.

function calcularIMC(peso, altura) {
  return peso / (altura * altura);
}

Leitura em português: "Crie uma função chamada calcularIMC que recebe peso e altura, e devolve o resultado da fórmula."

Agora vamos usar essa função dentro do evento de submit:

form.addEventListener('submit', function(event) {
  event.preventDefault();

  // .value pega o texto que está dentro do campo
  // parseFloat converte esse texto em número decimal
  const peso = parseFloat(pesoInput.value);
  const altura = parseFloat(alturaInput.value);

  const imc = calcularIMC(peso, altura);

  // toFixed(2) arredonda para 2 casas decimais: ex. 22.857 → "22.86"
  // innerText altera o texto exibido dentro do elemento
  resultado.innerText = `Seu IMC é ${imc.toFixed(2)}`;
});

Resumo das funções usadas

Função / Propriedade	O que faz	Exemplo
`.value`	Lê o texto digitado no campo	`"70"`
`parseFloat()`	Converte texto em número decimal	`"70"` → `70`
`.toFixed(2)`	Formata com 2 casas decimais	`22.857` → `"22.86"`
`.innerText`	Muda o texto de um elemento HTML	—

Atenção: campos de formulário sempre retornam texto (string), mesmo que o usuário tenha digitado um número. Por isso o parseFloat é necessário — sem ele, "70" + "1.75" viraria "701.75" em vez de somar os valores.

Parte 5 — Validação e classificação

O código já funciona, mas ainda tem dois problemas:

Se o usuário não preencher os campos, o cálculo vai dar errado
O resultado não informa se o peso está normal ou não

Vamos resolver os dois.

Classificando o IMC

function classificarIMC(imc) {
  if (imc < 18.5) return "Abaixo do peso";
  if (imc < 25)   return "Peso normal";
  if (imc < 30)   return "Sobrepeso";
  return "Obesidade";
}

Essa função recebe o valor do IMC e retorna uma frase de acordo com a faixa. Os ifs são testados em ordem — o primeiro que for verdadeiro encerra a função com return.

Adicionando validação

form.addEventListener('submit', function(event) {
  event.preventDefault();

  const peso = parseFloat(pesoInput.value);
  const altura = parseFloat(alturaInput.value);

  // Verifica se os valores são válidos antes de calcular
  if (!peso || !altura || peso <= 0 || altura <= 0) {
    resultado.innerHTML = `<div class="alert alert-danger">Valores inválidos! Preencha os campos corretamente.</div>`;
    return; // Para a função aqui se os dados forem inválidos
  }

  const imc = calcularIMC(peso, altura);
  const classificacao = classificarIMC(imc);

  resultado.innerHTML = `
    <div class="alert alert-success">
      Seu IMC é <strong>${imc.toFixed(2)}</strong><br>
      Classificação: <strong>${classificacao}</strong>
    </div>
  `;
});

`innerText` vs `innerHTML`

Propriedade	Quando usar
`innerText`	Quando quiser inserir apenas texto simples
`innerHTML`	Quando quiser inserir HTML (tags `<strong>`, `<div>`, etc.)

Boas práticas aplicadas neste projeto

Ao longo do tutorial, seguimos práticas importantes que você deve levar para todos os seus projetos:

Separar lógica em funções — calcularIMC e classificarIMC fazem apenas uma coisa cada
Validar a entrada do usuário — nunca confie que os campos foram preenchidos corretamente
Usar nomes descritivos — pesoInput é mais claro do que a ou campo1
Não repetir código — se precisar calcular o IMC em outro lugar, basta chamar a função

Código final completo

Para referência, aqui está o projeto inteiro em um único arquivo index.html:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Calculadora de IMC</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light">

  <div class="container mt-5">
    <div class="card p-4 shadow">
      <h2 class="text-center mb-4">Calculadora de IMC</h2>

      <form id="form-imc">
        <div class="mb-3">
          <label for="peso" class="form-label">Peso (kg)</label>
          <input type="number" id="peso" class="form-control" placeholder="Ex: 70" required>
        </div>
        <div class="mb-3">
          <label for="altura" class="form-label">Altura (m)</label>
          <input type="number" id="altura" step="0.01" class="form-control" placeholder="Ex: 1.75" required>
        </div>
        <button type="submit" class="btn btn-primary w-100">Calcular IMC</button>
      </form>

      <div id="resultado" class="mt-4"></div>
    </div>
  </div>

  <script>
    const form = document.getElementById('form-imc');
    const pesoInput = document.getElementById('peso');
    const alturaInput = document.getElementById('altura');
    const resultado = document.getElementById('resultado');

    function calcularIMC(peso, altura) {
      return peso / (altura * altura);
    }

    function classificarIMC(imc) {
      if (imc < 18.5) return "Abaixo do peso";
      if (imc < 25)   return "Peso normal";
      if (imc < 30)   return "Sobrepeso";
      return "Obesidade";
    }

    form.addEventListener('submit', function(event) {
      event.preventDefault();

      const peso = parseFloat(pesoInput.value);
      const altura = parseFloat(alturaInput.value);

      if (!peso || !altura || peso <= 0 || altura <= 0) {
        resultado.innerHTML = `<div class="alert alert-danger">Valores inválidos! Preencha os campos corretamente.</div>`;
        return;
      }

      const imc = calcularIMC(peso, altura);

      resultado.innerHTML = `
        <div class="alert alert-success">
          IMC: <strong>${imc.toFixed(2)}</strong><br>
          Classificação: <strong>${classificarIMC(imc)}</strong>
        </div>
      `;
    });
  </script>

</body>
</html>

Desafio — Pratique o que aprendeu

Agora é a sua vez. Tente adicionar as seguintes melhorias:

Cores dinâmicas — mude a cor do alerta de acordo com a classificação (vermelho para obesidade, verde para normal, etc.)
Tabela de referência — mostre uma tabela com todas as faixas de IMC abaixo do resultado
Limpar campos — após calcular, limpe os campos automaticamente para o usuário digitar novos valores
Mensagem personalizada — em vez de só mostrar a classificação, escreva uma mensagem de encorajamento para cada faixa

marcellobenigno/tutorial_javascript.md

Select an option

No results found

Select an option

No results found

Calculadora de IMC com JavaScript

O que vamos aprender?

O que é IMC?

Parte 1 — Criando o HTML

Entendendo cada parte

Parte 2 — Conectando o JavaScript ao HTML

Parte 3 — Escutando o envio do formulário

Por que usar `event.preventDefault()`?

Como funciona o `addEventListener`?

Parte 4 — Calculando o IMC

Resumo das funções usadas

Parte 5 — Validação e classificação

Classificando o IMC

Adicionando validação

`innerText` vs `innerHTML`

Boas práticas aplicadas neste projeto

Código final completo

Desafio — Pratique o que aprendeu

marcellobenigno/tutorial_javascript.md

Calculadora de IMC com JavaScript

O que vamos aprender?

O que é IMC?

Parte 1 — Criando o HTML

Entendendo cada parte

Parte 2 — Conectando o JavaScript ao HTML

Parte 3 — Escutando o envio do formulário

Por que usar event.preventDefault()?

Como funciona o addEventListener?

Parte 4 — Calculando o IMC

Resumo das funções usadas

Parte 5 — Validação e classificação

Classificando o IMC

Adicionando validação

innerText vs innerHTML

Boas práticas aplicadas neste projeto

Código final completo

Desafio — Pratique o que aprendeu

Por que usar `event.preventDefault()`?

Como funciona o `addEventListener`?

`innerText` vs `innerHTML`