Francisco Chaves

Francisco Chaves

Software Developer. Entusiasta Linux.

© 2020

Modo escuro

Calcule IMC com JavaScript

Pessoa correndo

Olá pessoal, sabemos que a saúde do corpo interfere na saúde mental, por isso que hoje deixarei um programa para realizar o cálculo do IMC, que indica o peso considerável saudável.

Visualize o Pen Calcule seu IMC feito por Francisco Chaves (@franciscochaves) em CodePen.

Código HTML:

<!-- HTML -->

<main>
	<section class="calc-imc">
		<h1>Cálculo do IMC</h1>
		<form class="form" id="form">
			<label for="kilos">
				Quilos
				<input name="kilos" id="kilos" placeholder="Peso atual" type="number" />
			</label>
			<label for="altura">
				Altura
				<input name="altura" id="altura" placeholder="Altura em centímetros" type="number" />
			</label>
			<label for="imc">
				IMC
				<input disabled="disabled" name="imc" id="imc"/>
			</label>
			<button>Calcular</button>
		</form>
	</section>
</main>

Código CSS:

/* CSS */

@import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Lato, sans-serif;
  font-size: 20px;
}

.calc-imc {
  min-height: 100vh;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  background-color: #FFCCBC;
  box-shadow: 0px 0px 30px gray;
}

.calc-imc h1 {;
  padding-top: 0.4em;
  text-align: center;
}

.form {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 0.3em;
}

.form label,
.form button {
  margin-top: 1em;
}

.form input,
.form button {
  font-size: inherit;
  font-family: inherit;
  width: 100%;
  padding: 0.5em;
}

.form button {
  background-color: #FBEFFF;
  cursor: pointer;
  border-radius: 0.3em;
  width: 50%;
}

.form button:hover {
  filter: opacity(0.8);
}

.form button:active {
  background-color: #FFEFFF;
  color: #000;
  filter: opacity(0.8);
}

Código JS:

// JS

function validaEntrada(args) {
	for (let i = 0; i < arguments.length; i++) {
		if (!!arguments[i] == false || arguments[i] < 0) {
			return false;
		}
	}
	return true;
}

function calcularIMC(kilos, altura) {
	altura = altura / 100;
	return (kilos / (altura * altura));
}

const formCalcularIMC = document.getElementById('form');

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

	const kilos = parseFloat(document.getElementById('kilos').value);
	const altura = parseFloat(document.getElementById('altura').value);

	if (validaEntrada(kilos, altura)) {
		const imc = calcularIMC(kilos, altura);
		document.getElementById('imc').value = parseInt(imc).toFixed(2);
	} else {
		document.getElementById('imc').value = "## ERRO ##";
	}
});

Para verificar se está com o IMC ideal, visualize o quadro abaixo.

Abaixo de 17        Muito abaixo do peso
Entre 17 e 18,49    Abaixo do peso
Entre 18,5 e 24,99  Peso normal
Entre 25 e 29,99    Acima do peso
Entre 30 e 34,99    Obesidade I
Entre 35 e 39,99    Obesidade II

Se o peso calculado não foi o ideal, não desamine, procure fazer caminhadas ou algum exercício e claro procure um médico para te aconselhar sobre uma melhor forma de obter resultados para retornar ao seu peso ideal.

×

Inscreva-se para novas atualizações