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.
Clique para visualizar o código HTML
<!-- HTML -->

<main class="main">
	<section class="calc-imc">
		<h1>Calculadora 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>
Clique para visualizar o código CSS
/* CSS */

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

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

body {
	font-family: 'Acme', sans-serif;
	font-size: 20px;
	color: #2c3e50;
	background-color: #DFDBE5;
}

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

.calc-imc {
	padding: 1em;
	box-shadow: 6px 6px 20px gray, -6px -6px 20px white;
	background-color: #DFDBE5;
}

@media (min-width: 500px) {
	.calc-imc {
		display: flex;
		align-items: center;
		justify-content: center;
		max-width: 500px;
		width: 100%;
		padding: 1em;
	}
}

.calc-imc h1 {
	text-align: center;
	font-size: 2em;
	text-decoration: underline;
}

.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);
}
Clique para visualizar o 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