klausmorotti / react-calc-imc

Home Page:react-calc-imc-livid.vercel.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

CALCULADORA DE IMC

Video Projeto

🔎 Calcule o seu IMC e veja se pode dar uma abusada no final de semana 😆.
🗔 Confira a aplicação: https://react-calc-imc-livid.vercel.app/

Explicação

Quem aí não gosta de dar uma ultrapassada dos limites no final de semana com amigos ou família haha? A calculadora de IMC permite ver seu indíce de massa corporal e analisar se pode dar uma abusada na alimentação.

O projeto foi desenvolvido com a biblioteca ReactJS utilizando o método CSS Modules para estilização. Uma página dinâmica com interface interativa e 100% responsiva para poder consultar em qualquer dispositivo.

Neste projeto apliquei meus conhecimentos adquiridos sobre estilização com ReactJS, de diversos métodos aprendidos optei por aplicar o CSS Modules. Nele também pude na prática aplicar a lógica por meio de um projeto React e isso me desafiou em relação a estruturas de componentes de forma mais efetiva, exibições condicionais, uso de States e organização de pastas.

📁 Páginas

O site tem no total 1 página, sendo ela

  • Página principal: A interface principal do cálculo do IMC.

🎯 Etapas

✔️ Criando o projeto com CRA.
✔️ Buscando recursos necessários como imagens e cores.
✔️ Desenvolvendo o lado esquerdo onde contém os campos para adicionar os valores.
✔️ Adicionando verificação de campo preenchido e relacionando a value do campo à uma State.
✔️ Criando o arquivo TS onde contém o array com as categorias e calcula o IMC.
✔️ Criando o Lado direito onde contém as categorias baseado no array criado na etapa anterior.
✔️ Fazendo o sistema funcionar (Retornando o IMC referente aos dados do usuário).
✔️ Habilitando Disabled nos campos quando é retornado um resultado.
✔️ Tornando o projeto responsivo.
✔️ Projeto finalizado.

🚀 Tecnologias

🤝 Colaboradores

Agradecemos às seguintes pessoas que contribuíram para este projeto:

Foto do Klaus Morotti no GitHub
Klaus Morotti

📝 Licença

Este projeto está sob licença. Consulte o arquivo LICENSE para obter mais detalhes.

Volte para o topo

About

react-calc-imc-livid.vercel.app

License:MIT License


Languages

Language:TypeScript 52.6%Language:CSS 31.5%Language:HTML 15.9%