https://github.com/wsawebmaster/reac-imc

Calculadora IMC em React - Typescript e Tailwind
https://github.com/wsawebmaster/reac-imc

Last synced: 14 days ago
JSON representation

Calculadora IMC em React - Typescript e Tailwind

• Host: GitHub
• URL: https://github.com/wsawebmaster/reac-imc
• Owner: wsawebmaster
• License: gpl-3.0
• Created: 2024-11-05T23:57:31.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2024-11-06T00:05:14.000Z (3 months ago)
• Last Synced: 2024-11-06T01:18:19.139Z (3 months ago)
• Language: TypeScript
• Homepage: https://reac-imc.vercel.app
• Size: 56.6 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
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](https://www.figma.com/community/file/1314580663583006642/mini-projeto-calculadora-de-imc)

## 👉🏽 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