Calculadora de IMC
Uma ferramenta front-end simples para cálculo do Índice de Massa Corporal (IMC) com estilização condicional baseada nas faixas da OMS.
Sobre o Projeto
A Calculadora de IMC é um utilitário front-end básico desenvolvido para exercitar a captura de dados de formulários, validação condicional de entradas numéricas e alteração dinâmica de elementos de estilo baseando-se no comportamento do usuário.
Arquitetura e Decisões Técnicas
O projeto segue uma estrutura puramente estática e client-side, dividida para facilitar pequenas manutenções na interface:
src/js/main.js: Centraliza as funções puras de cálculo matemático (calculoImc), as estruturas condicionais de mapeamento (getClassificacao) e o escopo do ouvinte de evento.src/css/telasmenores.css: Isola regras de mídia (max-width: 540px) removendo o gradiente radial e as sombras do container principal para simplificar a renderização em dispositivos móveis.
Utilizado para interceptar o envio do formulário, normalizar a entrada de caracteres (vírgula para ponto) e processar o cálculo aritmético.
Desafios e Soluções de Engenharia
Durante o desenvolvimento do script, os ajustes principais focaram em consistência de dados e controle de estados da interface:
Desafios Resolvidos
Tratamento de vírgulas em inputs numéricos
Evitar que a inserção de alturas ou pesos usando o padrão de pontuação brasileiro (ex: 1,75) gerasse valores do tipo NaN no método parseFloat.
Foi aplicado o método '.replace(',', '.')' nas strings capturadas dos elementos antes de realizar a conversão para ponto flutuante.
Alternância dinâmica de cores do estado de resultado
Garantir que as classes de estilização anteriores fossem limpas a cada novo cálculo para evitar a sobreposição visual de cores de faixas diferentes.
A propriedade 'resultadoImc.className' foi reiniciada no escopo das funções de renderização antes da inserção da nova classe de classificação.
Impacto e Resultados
- Interface Limpa e Sem Recarregamento: O uso do método
evento.preventDefault()garante que o resultado seja calculado e injetado na tela instantaneamente, melhorando o fluxo de uso da aplicação. - Validação de Borda: Entradas negativas, nulas ou strings de texto não numéricas são retidas na validação primária do script, disparando um estado visual de erro padronizado para o usuário.