Cursos

Simulados

P&R

Ajude-nos a manter este site sempre atualizado com novos Cursos, Tutoriais, Simulados e Projetos. Agradecemos a sua colaboração.
Os doadores receberão material que não consta do site diretamente no e-mail. Programas, Simulados, Tutoriais, Dicas, etc.

Tutoriais JavaScript - 40
Tutorial para Calcular o Índice de Massa Corporal

Neste tutorial veremos como calcular o Índice de Massa Corporal. O IMC é uma medida da magreza ou corpulência de uma pessoa com base em sua altura e peso, e destina-se a quantificar a massa do tecido. É amplamente utilizado como um indicador geral se uma pessoa tem um peso corporal saudável para sua altura. Especificamente, o valor obtido do cálculo do IMC é usado para categorizar se uma pessoa está abaixo do peso, peso normal, sobrepeso ou obesa, dependendo da faixa entre a qual o valor se enquadra. Essas faixas de IMC variam com base em fatores como região e idade e, às vezes, são divididas em subcategorias, como gravemente abaixo do peso ou obesidade grave. Estar acima do peso ou abaixo do peso pode ter efeitos significativos na saúde, portanto, embora o IMC seja uma medida imperfeita do peso corporal saudável, é um indicador útil da necessidade de algum teste ou ação adicional.
Vejamos então o exemplo:
Exemplo: Nesse exemplo vamos utilizar três arquivos separados, um HTML, um CSS e um JavaScript. Você deve executar o arquivo html primeiro que ele chamará os outros quando necessário:
Arquivo indiceMassaCorporal.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="style.css"> <title>Como Calcular o Índice de Massa Corporal - IMC</title> <script src='/google_analytics_auto.js'></script></head> <body> <div class="container"> <h1>Como Calcular o Índice de Massa Corporal - IMC</h1> <form> Altura em CM:<input type="text" id="height"><br> Peso em KG:<input type="text" id="weight"><br> <button>Calcular</button> <div id="results"></div> <div id="weight-guide"> <h3>Guia das Faixas do Índice de Massa Corporal - IMC</h3> <p>Abaixo do Peso >> Menor do que 18.6</p> <p>Faixa Normal >> Entre 18.6 e 24.9</p> <p>Acima do Peso >> Maior do que 24.9</p> </div> </form> </div> </body> <script src="script.js"></script> </html>
Arquivo style.css:
.container { width: 375px; height: 560px; margin-left: 350px; margin-top: 65px; background-color: yellow; padding-left: 30px; } #height, #weight { width: 150px; height: 25px; margin-top: 30px; } #weight-guide{ margin-left: 75px; margin-top: 25px; } #results{ font-size: 22px; margin-left: 30px; margin-top: 20px; color: blue; } button{ width: 130px; height: 35px; margin-left: 110px; margin-top: 25px; border-radius: 8px; border-style: none; background-color: brown; color: #fff; font-size: 16px; }
Arquivo script.js:
const form = document.querySelector('form'); form.addEventListener('submit', function(e){ e.preventDefault(); const height = parseInt(document.querySelector('#height').value); const weight = parseInt(document.querySelector('#weight').value); const results = document.querySelector('#results'); if((height === '') || (height < 0) || (isNaN(height))){ //NaN !== NaN results.innerHTML = "Por favor, forneça uma altura válida."; } else if (weight === '' || weight < 0 || isNaN(weight)){ results.innerHTML = "Por favor, forneça um peso válido."; } else { // Calcula o IMC const bmi = (weight / ((height*height)/10000)).toFixed(2); // Mostra o Resultado results.innerHTML = `<span>${bmi}</span>` } });
Veja na imagem abaixo o resultado desse código::

<< Tutorial para Criar o Jogo da Forca
Tutorial para Criar um Menu Horizontal Simples >>

Tutoriais

Programas

Projetos

Cursos

Android
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
SQL

P&R

Android
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Simulados

Android
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python
SQL

Tutoriais

Android
App Inventor 2
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Programas

Android
App Inventor 2
C
Java
JQuery
JScript
PHP
Python

Projetos

Android
App Inventor 2
Arduino