Criar um formulário responsivo, para calculo de IMC

Oi Leonardo, tudo bem?

Você poderia enviar o seu código completo para eu conseguir te ajudar melhor?

Fico no aguardo! =)

Perdão pela demora :( Mas agora tenho outro erro de processamento, queria deixalo funcionando para começar a estilizar :)

Oi Leonardo, tudo bem, não tem problemas!

Fique a vontade para compartilhar o novo erro e o seu código também.

Bom dia, consegui realizar minha ideia de calculadora de IMC.

Precisei criar três arquivos: HTML, JAVAScript e CSS

Sobre o arquivo de Java gostaria de diminuir o nivel de elses mas não consegui, o formulario roda sem erro!

<main>

    <div class="container">
        <div class="title">Calculadora - IMC

        </div>

        <div class="input">
            <label>Nome:</label>
            <input type="text" id="nome" placeholder="Digite seu nome">
        </div>



        <div class="altura">
            <label for="altura">Altura:</label>
            <input type="number" id="altura" placeholder="Digite sua altura">

        </div>

        <div class="peso">
            <label>Peso:</label>
            <input type="number" id="peso" placeholder="Digite seu peso">

        </div>

        <div class="button">
            <button class="one-click" id="calcular">Calcular Imc</button>
        </div>

        <div class="resultado" id="resultado"></div>



</main>
<script src="./imc.js"></script>

Codígo 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);

styles CSS

@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');

• { margin: 0; border: 0; padding: 0; box-sizing: border-box; font-family: "Anton" , sans-serif; }

body{ background:grey; background-repeat: no-repeat; min-height: 100vh; min-width: 100vh; display: flex; align-items: center; justify-content: center; }

main{ display: flex; width: 100vw; height: 100vh; justify-content: center; align-items: center; }

.container{ display: flex; flex-direction: column; background:linear-gradient(45deg, #292031, #9b89be); width: 400px; height: 600px; 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: "Anton" , sans-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: "Anton" , sans-serif; text-align: center; }

.input label{ font: "Anton" , sans-serif; }

button{ width: 300px; height: 40px; font: "Anton" , sans-serif; background:#000; 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: "Anton" , sans-serif ; box-shadow: 0px 0px 10px black; color: white ; padding: 20px; box-sizing: border-box; user-select: none; }