Crie uma Calculadora de Massa Corporal Moderna com Tailwind CSS - Código documentado para você aprender a programar.

19:05

Crie uma Calculadora de Massa Corporal Moderna com Tailwind CSS - Código documentado para você aprender a programar.



Artigo 1 – IMC Health Analyzer

Calculadora de Massa Corporal Moderna com Tailwind CSS

Este código implementa uma calculadora de IMC limpa e objetiva, utilizando campos para peso (kg) e altura (metros). O design responsivo utiliza Tailwind CSS e fornece classificação detalhada do resultado, seguindo as diretrizes da OMS. A documentação passo a passo está inserida como comentários no próprio código para facilitar o entendimento.

html
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <title>IMC Health Analyzer | Calculadora Profissional</title>
    <!-- Tailwind CSS v3 + CDN oficial -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Configuração extra do Tailwind para melhor aparência -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        'sans': ['Inter', 'system-ui', 'Segoe UI', 'sans-serif']
                    }
                }
            }
        }
    </script>
    <style>
        /* Transição suave para foco nos inputs e hover do botão */
        input, button { transition: all 0.2s ease; }
        .result-card { transition: transform 0.2s; }
        .result-card:hover { transform: scale(1.01); }
    </style>
</head>
<body class="bg-gradient-to-br from-sky-50 to-indigo-100 min-h-screen flex items-center justify-center p-4">

    <!-- 
        ======================================================
        PASSO A PASSO - ESTRUTURA PRINCIPAL
        1. Container principal flexível e centralizado.
        2. Card com sombra e bordas arredondadas para a calculadora.
        3. Título e descrição da ferramenta.
        4. Campos de entrada (peso em kg e altura em metros).
        5. Botão para disparar o cálculo.
        6. Área de exibição do resultado + classificação.
        7. Rodapé informativo.
        ======================================================
    -->
    <div class="max-w-md w-full bg-white/90 backdrop-blur-sm rounded-2xl shadow-2xl p-6 md:p-8 border border-white/30">
        
        <!-- Cabeçalho da calculadora -->
        <div class="text-center mb-6">
            <div class="inline-flex items-center justify-center w-16 h-16 bg-indigo-100 rounded-full mb-3">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
                </svg>
            </div>
            <h1 class="text-2xl md:text-3xl font-bold text-gray-800">IMC Health Analyzer</h1>
            <p class="text-gray-500 text-sm mt-1">Calcule seu Índice de Massa Corporal</p>
        </div>

        <!-- Área de formulário / entrada de dados -->
        <div class="space-y-5">
            <!-- Campo: Peso (kg) -->
            <div>
                <label class="block text-gray-700 font-medium mb-1 flex items-center gap-2">
                    <svg class="w-4 h-4 text-indigo-500" fill="currentColor" viewBox="0 0 20 20"><path d="M4 4a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2H4z"/><path d="M10 10a2 2 0 100-4 2 2 0 000 4z"/></svg>
                    Peso (kg)
                </label>
                <input type="number" id="peso" step="0.1" placeholder="Ex: 70.5" 
                    class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 outline-none text-gray-700">
                <p class="text-xs text-gray-400 mt-1">Use ponto como separador decimal</p>
            </div>

            <!-- Campo: Altura (metros) -->
            <div>
                <label class="block text-gray-700 font-medium mb-1 flex items-center gap-2">
                    <svg class="w-4 h-4 text-indigo-500" fill="currentColor" viewBox="0 0 20 20"><path d="M5 4a1 1 0 00-2 0v12a1 1 0 102 0V4zM15 4a1 1 0 10-2 0v12a1 1 0 102 0V4zM9 4a1 1 0 00-2 0v12a1 1 0 102 0V4z"/></svg>
                    Altura (m)
                </label>
                <input type="number" id="altura" step="0.01" placeholder="Ex: 1.75" 
                    class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 outline-none text-gray-700">
                <p class="text-xs text-gray-400 mt-1">Metros (ex: 1.75 = 1,75m)</p>
            </div>

            <!-- Botão calcular -->
            <button id="calcularBtn" 
                class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-3 rounded-xl shadow-md hover:shadow-lg transition-all flex items-center justify-center gap-2">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" /></svg>
                Calcular IMC
            </button>
        </div>

        <!-- Área de resultados dinâmica -->
        <div id="resultadoArea" class="mt-8 p-4 rounded-xl bg-gray-50 border border-gray-200 result-card">
            <div class="text-center text-gray-500 text-sm">Preencha os dados e clique em calcular</div>
        </div>

        <!-- Rodapé com informação da classificação padrão -->
        <div class="mt-6 text-xs text-center text-gray-400 border-t border-gray-100 pt-4">
            Classificação OMS: Baixo peso (&lt;18,5) | Normal (18,5–24,9) | Sobrepeso (25–29,9) | Obesidade (≥30)
        </div>
    </div>

    <script>
        // ==============================================
        // PASSO A PASSO DA LÓGICA JAVASCRIPT
        // 1. Capturar elementos do DOM (inputs e botão)
        // 2. Adicionar evento de clique no botão e também permitir 'Enter' nos inputs
        // 3. Ler valores, converter para número e validar (positivos, não vazios, não zero)
        // 4. Calcular IMC = peso / (altura * altura)
        // 5. Determinar classificação com base nas faixas estabelecidas
        // 6. Exibir resultado formatado com duas casas decimais e mensagem personalizada + ícone
        // 7. Tratar erros e mostrar feedback visual amigável
        // ==============================================

        // Selecionando elementos
        const pesoInput = document.getElementById('peso');
        const alturaInput = document.getElementById('altura');
        const calcularBtn = document.getElementById('calcularBtn');
        const resultadoArea = document.getElementById('resultadoArea');

        // Função principal de cálculo e exibição
        function calcularIMC() {
            // Obter valores como string e substituir vírgula por ponto (para facilitar)
            let pesoStr = pesoInput.value.trim().replace(',', '.');
            let alturaStr = alturaInput.value.trim().replace(',', '.');

            // Converter para float
            const peso = parseFloat(pesoStr);
            const altura = parseFloat(alturaStr);

            // Validação completa: campos preenchidos, números positivos, altura > 0, peso > 0
            if (isNaN(peso) || isNaN(altura) || peso <= 0 || altura <= 0) {
                resultadoArea.innerHTML = `
                    <div class="flex items-center justify-center gap-3 text-amber-700 bg-amber-50 p-3 rounded-lg">
                        <svg class="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                        <span>Por favor, insira peso (kg) e altura (m) válidos (maiores que zero).</span>
                    </div>
                `;
                return;
            }

            // Cálculo do IMC
            const imc = peso / (altura * altura);
            const imcFormatado = imc.toFixed(2);
            
            // Determinando classificação
            let classificacao = '';
            let corDestaque = '';
            let mensagemSugestao = '';
            
            if (imc < 18.5) {
                classificacao = 'Abaixo do peso';
                corDestaque = 'text-blue-600';
                mensagemSugestao = 'Procure orientação nutricional para ganho de peso saudável.';
            } else if (imc >= 18.5 && imc <= 24.9) {
                classificacao = 'Peso normal (saudável)';
                corDestaque = 'text-green-600';
                mensagemSugestao = 'Parabéns! Mantenha hábitos saudáveis.';
            } else if (imc >= 25 && imc <= 29.9) {
                classificacao = 'Sobrepeso';
                corDestaque = 'text-orange-600';
                mensagemSugestao = 'Atenção: pequenas mudanças na rotina ajudam a alcançar o peso ideal.';
            } else if (imc >= 30 && imc <= 34.9) {
                classificacao = 'Obesidade Grau I';
                corDestaque = 'text-red-600';
                mensagemSugestao = 'Recomenda-se avaliação médica para controle de peso.';
            } else if (imc >= 35 && imc <= 39.9) {
                classificacao = 'Obesidade Grau II';
                corDestaque = 'text-red-700';
                mensagemSugestao = 'Risco elevado. Consulte um profissional de saúde.';
            } else if (imc >= 40) {
                classificacao = 'Obesidade Grau III (mórbida)';
                corDestaque = 'text-red-800';
                mensagemSugestao = 'Acompanhamento médico urgente é fundamental.';
            }

            // Ícone dinâmico baseado na classificação
            let iconeResultado = '';
            if (imc < 18.5) iconeResultado = '⚠️';
            else if (imc <= 24.9) iconeResultado = '✅';
            else if (imc <= 29.9) iconeResultado = '⚖️';
            else iconeResultado = '🔴';

            // Exibir o resultado formatado na área dedicada
            resultadoArea.innerHTML = `
                <div class="text-center space-y-3">
                    <div class="inline-flex items-center justify-center text-4xl">${iconeResultado}</div>
                    <div class="text-3xl font-bold text-gray-800">${imcFormatado}</div>
                    <div class="text-xl font-semibold ${corDestaque}">${classificacao}</div>
                    <div class="text-sm text-gray-600 bg-white rounded-lg p-2 shadow-inner">${mensagemSugestao}</div>
                    <div class="text-xs text-gray-400 mt-2">*Referência: Organização Mundial da Saúde</div>
                </div>
            `;
        }

        // Evento de clique do botão
        calcularBtn.addEventListener('click', calcularIMC);
        
        // Evento de pressionar "Enter" nos campos de input para melhor usabilidade
        const inputs = [pesoInput, alturaInput];
        inputs.forEach(input => {
            input.addEventListener('keypress', (event) => {
                if (event.key === 'Enter') {
                    event.preventDefault();
                    calcularIMC();
                }
            });
        });

        // Bônus: limpeza visual ao focar / já fornecer pequeno exemplo inicial (opcional, sem valores)
        console.log("Calculadora IMC Health Analyzer pronta!");
    </script>
</body>
</html>

Palavras-chave (15)

IMC, calculadora de massa corporal, índice de massa corporal, saúde, nutrição, peso ideal, avaliação física, classificação OMS, emagrecimento, obesidade, sobrepeso, ferramenta web, HTML5, Tailwind CSS, JavaScript

Hashtags (15)

#IMC #CalculadoraIMC #SaúdeEBemEstar #Nutrição #PesoIdeal #ÍndiceDeMassaCorporal #FitnessTech #WebApp #TailwindCSS #JavaScript #HTML5 #Obesidade #Sobrepeso #VidaSaudável #TecnologiaNaSaúde

Artigo 2 – BMI Track Pro

Ferramenta Inteligente de Índice de Massa Corporal com Feedback Visual e Peso Ideal

A segunda versão é uma calculadora mais interativa que aceita altura em centímetros (conversão automática) e exibe uma sugestão de "peso ideal" baseada no IMC ideal (22). Inclui um medidor visual de cores e tabela de referência dinâmica, tudo documentado em etapas.

html
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BMI Track Pro | Calculadora IMC Inteligente</title>
    <!-- Tailwind CSS CDN v3 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Customização para sombras e gradientes -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    animation: {
                        'fade-in': 'fadeIn 0.5s ease-out',
                    },
                    keyframes: {
                        fadeIn: {
                            '0%': { opacity: '0', transform: 'translateY(8px)' },
                            '100%': { opacity: '1', transform: 'translateY(0)' },
                        }
                    }
                }
            }
        }
    </script>
    <style>
        .range-slider { accent-color: #4f46e5; }
        .hover-scale:hover { transform: scale(1.02); transition: all 0.2s; }
    </style>
</head>
<body class="bg-gradient-to-br from-gray-900 via-purple-800 to-indigo-900 flex items-center justify-center min-h-screen p-4 font-sans">

    <!-- 
        ======================================================
        PASSO A PASSO (BMI TRACK PRO)
        1. Container principal com gradiente noturno/profissional.
        2. Card com efeito glassmorphism.
        3. Entrada de peso e altura com suporte a centímetros (diferencial).
        4. Slider opcional para peso (sem obrigatoriedade) – mas mantemos campos numéricos.
        5. Botão calcular e tecla Enter.
        6. Exibição de IMC + classificação + um indicador de "peso ideal para sua altura".
        7. Tabela de referência rápida com cores.
        8. Área de dicas baseada no resultado.
        ======================================================
    -->

    <div class="max-w-lg w-full bg-white/10 backdrop-blur-lg rounded-2xl shadow-2xl border border-white/20 p-6 md:p-8 transition-all duration-300">
        <!-- Cabeçalho profissional -->
        <div class="text-center mb-6">
            <span class="inline-block px-3 py-1 rounded-full bg-indigo-500/30 text-indigo-200 text-xs font-semibold tracking-wide">BMI Track Pro</span>
            <h1 class="text-3xl font-bold text-white mt-2">Calculadora de IMC</h1>
            <p class="text-indigo-200 text-sm">Avalie sua composição corporal com precisão</p>
        </div>

        <!-- Campos do formulário -->
        <div class="space-y-5">
            <!-- Peso (kg) com slider opcional + input -->
            <div>
                <label class="flex items-center justify-between text-white font-medium mb-1">
                    <span>⚖️ Peso (kg)</span>
                    <span id="pesoValor" class="text-indigo-200 text-sm bg-white/20 px-2 py-0.5 rounded-full">0 kg</span>
                </label>
                <input type="number" id="peso" step="0.1" placeholder="Ex: 68.5" 
                    class="w-full px-4 py-3 rounded-xl bg-white/20 border border-white/30 text-white placeholder:text-indigo-200/60 outline-none focus:ring-2 focus:ring-indigo-400 focus:border-transparent">
            </div>

            <!-- Altura: suporte a CENTÍMETROS (diferencial) -->
            <div>
                <label class="flex items-center justify-between text-white font-medium mb-1">
                    <span>📏 Altura</span>
                    <span class="text-indigo-200 text-sm bg-white/20 px-2 py-0.5 rounded-full">cm ou metros</span>
                </label>
                <div class="flex gap-2">
                    <input type="number" id="alturaValor" step="any" placeholder="170" 
                        class="w-full px-4 py-3 rounded-xl bg-white/20 border border-white/30 text-white placeholder:text-indigo-200/60 outline-none focus:ring-2 focus:ring-indigo-400">
                    <select id="unidadeAltura" class="bg-white/20 border border-white/30 text-white rounded-xl px-3 outline-none focus:ring-2 focus:ring-indigo-400">
                        <option value="cm" class="bg-gray-800">cm</option>
                        <option value="m" class="bg-gray-800">m</option>
                    </select>
                </div>
                <p class="text-xs text-indigo-200/70 mt-1">Digite altura em centímetros (ex: 170) ou metros (ex: 1.70)</p>
            </div>

            <!-- Botão calcular -->
            <button id="calcularBtnPro" 
                class="w-full bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 text-white font-bold py-3 rounded-xl shadow-lg transition-all flex items-center justify-center gap-2 hover-scale">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z" /></svg>
                Analisar IMC
            </button>
        </div>

        <!-- Área de resultado principal -->
        <div id="resultadoPro" class="mt-6 p-4 bg-black/20 rounded-xl border border-white/10 text-white animate-fade-in">
            <div class="text-center text-indigo-200 text-sm">Aguardando dados para análise</div>
        </div>

        <!-- Sugestão de peso ideal (extra) -->
        <div id="pesoIdealArea" class="mt-3 text-center text-xs text-indigo-200/80 bg-white/5 rounded-lg p-2">
            💡 Preencha sua altura e descubra seu peso saudável de referência
        </div>

        <!-- Tabela de referência compacta -->
        <div class="mt-5 grid grid-cols-2 gap-1 text-[11px] text-white/70 bg-white/5 rounded-xl p-2">
            <div class="text-center"><span class="text-blue-300">Baixo peso</span> &lt;18,5</div>
            <div class="text-center"><span class="text-green-300">Normal</span> 18,5–24,9</div>
            <div class="text-center"><span class="text-yellow-300">Sobrepeso</span> 25–29,9</div>
            <div class="text-center"><span class="text-red-300">Obesidade</span> ≥30</div>
        </div>
    </div>

    <script>
        // ----------------------------------------------------
        // PASSO A PASSO: LÓGICA COMPLETA
        // 1. Obter elementos (peso, altura, unidade, botão)
        // 2. Função para converter altura para METROS conforme unidade selecionada (cm ou m)
        // 3. Validar entradas: peso positivo, altura positiva
        // 4. Calcular IMC = peso / (altura_em_metros)²
        // 5. Apresentar classicação, cor de fundo/separação e mensagem
        // 6. Calcular peso ideal (intervalo saudável 18.5 a 24.9) e sugerir faixa
        // 7. Exibir tudo dinamicamente com animação
        // ----------------------------------------------------
        
        const pesoInput = document.getElementById('peso');
        const alturaValorInput = document.getElementById('alturaValor');
        const unidadeSelect = document.getElementById('unidadeAltura');
        const calcularBtn = document.getElementById('calcularBtnPro');
        const resultadoDiv = document.getElementById('resultadoPro');
        const pesoIdealDiv = document.getElementById('pesoIdealArea');
        const pesoValorSpan = document.getElementById('pesoValor');

        // Atualizar exibição do peso no label enquanto digita
        pesoInput.addEventListener('input', () => {
            let val = pesoInput.value.trim();
            if (val === '') pesoValorSpan.innerText = '0 kg';
            else pesoValorSpan.innerText = `${parseFloat(val) || 0} kg`;
        });

        function obterAlturaEmMetros() {
            let valorAltura = parseFloat(alturaValorInput.value.trim().replace(',', '.'));
            if (isNaN(valorAltura) || valorAltura <= 0) return null;
            const unidade = unidadeSelect.value;
            if (unidade === 'cm') {
                return valorAltura / 100;
            } else { // metros
                return valorAltura;
            }
        }

        function calcularPesoIdeal(alturaMetros) {
            if (!alturaMetros || alturaMetros <= 0) return null;
            const pesoMin = (18.5 * alturaMetros * alturaMetros).toFixed(1);
            const pesoMax = (24.9 * alturaMetros * alturaMetros).toFixed(1);
            return { min: pesoMin, max: pesoMax };
        }

        function obterClassificacao(imc) {
            if (imc < 18.5) return { nome: 'Abaixo do peso', cor: '#60a5fa', emoji: '⚠️', recomendacao: 'Busque orientação para ganho de peso.' };
            if (imc <= 24.9) return { nome: 'Peso normal', cor: '#4ade80', emoji: '✅', recomendacao: 'Excelente! Mantenha hábitos saudáveis.' };
            if (imc <= 29.9) return { nome: 'Sobrepeso', cor: '#fbbf24', emoji: '⚖️', recomendacao: 'Alimentação equilibrada e exercícios ajudam.' };
            if (imc <= 34.9) return { nome: 'Obesidade Grau I', cor: '#f87171', emoji: '🔴', recomendacao: 'Avalie mudanças no estilo de vida.' };
            if (imc <= 39.9) return { nome: 'Obesidade Grau II', cor: '#ef4444', emoji: '🔥', recomendacao: 'Acompanhamento médico recomendado.' };
            return { nome: 'Obesidade Grau III (mórbida)', cor: '#b91c1c', emoji: '⛔', recomendacao: 'Busque assistência médica prioritariamente.' };
        }

        function atualizarResultado() {
            // Validação peso
            let peso = parseFloat(pesoInput.value.trim().replace(',', '.'));
            if (isNaN(peso) || peso <= 0) {
                resultadoDiv.innerHTML = `<div class="text-center text-red-300 bg-red-900/30 p-3 rounded-lg">❌ Peso inválido. Digite um número maior que zero.</div>`;
                pesoIdealDiv.innerHTML = `💡 Informe altura válida para calcular peso ideal.`;
                return;
            }
            const alturaMetros = obterAlturaEmMetros();
            if (!alturaMetros) {
                resultadoDiv.innerHTML = `<div class="text-center text-red-300 bg-red-900/30 p-3 rounded-lg">📏 Altura inválida. Verifique o valor e unidade (cm ou m).</div>`;
                pesoIdealDiv.innerHTML = `💡 Utilize números positivos para altura.`;
                return;
            }
            
            // Cálculo IMC
            const imc = peso / (alturaMetros * alturaMetros);
            const imcFormatado = imc.toFixed(2);
            const classificacaoObj = obterClassificacao(imc);
            
            // Calcular peso ideal para exibição adicional
            const faixaIdeal = calcularPesoIdeal(alturaMetros);
            let pesoHtml = '';
            if (faixaIdeal) {
                pesoHtml = `<div class="mt-2 text-xs text-indigo-200">🎯 Peso saudável para sua altura: ${faixaIdeal.min} kg – ${faixaIdeal.max} kg</div>`;
            } else {
                pesoHtml = `<div class="mt-2 text-xs text-indigo-200">📊 Não foi possível calcular faixa ideal</div>`;
            }
            
            // Criar conteúdo de resultado com design rico
            resultadoDiv.innerHTML = `
                <div class="text-center space-y-2">
                    <div class="text-3xl font-bold">${classificacaoObj.emoji} ${imcFormatado}</div>
                    <div class="text-xl font-semibold" style="color: ${classificacaoObj.cor}">${classificacaoObj.nome}</div>
                    <div class="text-sm bg-white/10 p-2 rounded-lg">📌 ${classificacaoObj.recomendacao}</div>
                    <div class="w-full bg-gray-700/50 rounded-full h-2 overflow-hidden mt-2">
                        <div class="h-full rounded-full" style="width: ${Math.min(imc / 50 * 100, 100)}%; background: ${classificacaoObj.cor};"></div>
                    </div>
                </div>
            `;
            pesoIdealDiv.innerHTML = `💡 ${pesoHtml}`;
        }

        // Eventos
        calcularBtn.addEventListener('click', atualizarResultado);
        // Permitir Enter nos campos principais
        const campos = [pesoInput, alturaValorInput, unidadeSelect];
        campos.forEach(campo => {
            campo.addEventListener('keypress', (e) => {
                if (e.key === 'Enter') atualizarResultado();
            });
        });
        
        // Inicializar atualização de peso label
        pesoInput.dispatchEvent(new Event('input'));
    </script>
</body>
</html>

Palavras-chave (15)

BMI, calculadora IMC profissional, índice de massa corporal, saúde digital, peso ideal, faixa saudável, classificação IMC, ferramenta médica, HTML5 app, Tailwind components, JavaScript validação, UI responsiva, controle de peso, nutrição clínica, bem-estar

Hashtags (15)

#BMITrackPro #CalculadoraDeIMC #SaúdeDigital #PesoIdeal #IMC #NutriçãoInteligente #WebDev #TailwindCSS #JavaScript #ObesidadeZero #VidaAtiva #HTML5 #FitnessApp #MonitoramentoDeSaúde #TecnologiaEsportiva

Reactions
j

Postado por j

Postar um comentário

0 Comentários

Deixe seu comentário e sua sugestão de conteúdo.