Tutorial

Calculadora de IMC com React

Nível
16 aulas
1h23

Assistir agora

1. Introdução e Apresentação do Projeto

Sobre o Tutorial

Esse tutorial mostra o passo-a-passo para resolver o Mini Projeto Calculadora de IMC com React.

Descrição do projeto

Nada melhor do que manter a saúde em dia, não é? Sendo o IMC uma medida internacional usada para calcular se uma pessoa está no peso ideal, a nossa calculadora de Índice de Massa Corporal (IMC) é perfeita para isso.

🔨 Requisitos

  • Desenvolva a aplicação utilizando Vite + React;
  • Sua calculadora deve possuir:
    • Input para informar o peso em kg;
    • Input para informar a altura em cm;
    • Botão para realizar o cálculo;
  • Como resultado, mostre uma tabela com as principais informações: peso, altura, IMC e resultado (como exemplo, para o IMC de 22.04, o resultado é Peso Normal);
  • Os campos devem ser resetados e desabilitados após o cálculo, e o botão deve mudar de "Calcular" para "Refazer";
  • Ao clicar em "Refazer", a tabela deve desaparecer e os campos devem ser novamente habilitados.

🔍 Dicas

  • Procure entender como lidar com números flutuantes;
  • É muito importante saber a convenção para separação de números decimais em JavaScript;
  • Dê uma olhada na API Intl do JavaScript, ela poderá te ajudar;
  • Utilize condicionais para os resultados caso julgue necessário!

🎨 Design Sugerido

Temos uma sugestão de design no Figma. Entretanto, fique à vontade para montar a aplicação conforme a sua criatividade.

Figma

🔗 Link do design

👉🏽 Sobre esse mini-projeto

O que você irá praticar:

Vite

  • Setup de um projeto React com Vite
  • Estrutura básica de um projeto React

React e JS

  • Estado e Eventos com React
  • Formulários controlados com React
  • Números flutuantes com JavaScript

TailwindCSS

  • Prática com o Framework