🏆 Calculadora de IMC

✔️ Tecnologias Utilizadas

📎 Sumario

• 📌 Resumo do Projeto
• 🛠️ Como executar o projeto
• ⭐ Desafio do Projeto
• ✔️ Comportamento esperado
• 📂 Temas abordados
• 🙋🏻‍♂️ Autor
• 💻 Licença

📌 Resumo do Projeto

Este projeto é um desafio do frontend mentor, cujo objetivo é reproduzir o layout disponibilizado no figma e todas as funcionalidades e requisitos que o desafio pede. As tecnologias e forma como serão construidas fica a cargo do desenvolvedor. Para este projeto foi utilizado React + TypeScript + Styled-components.

🛠️ Como executar o projeto

Para executar este projeto localmente em sua máquina, siga estas etapas:

• Certifique-se de ter o Node.js instalado em sua máquina.

• Clone este repositório em sua máquina local usando o comando git clone.

• Instale as dependências do projeto executando npm install no diretório do projeto.

• Execute o comando npm start para rodar o projeto.

⭐ Desafio do Projeto

Seu desafio é construir esta página de calculadora de índice de massa corporal e fazer com que pareça o mais próximo possível do design.

Você pode usar qualquer ferramenta que desejar para ajudá-lo a completar o desafio. Então, se você tem algo que gostaria de praticar, sinta-se à vontade para tentar.

Seus usuários devem ser capazes de:

• Selecione se desejam usar unidades métricas ou imperiais
• Insira sua altura e peso
• Veja o resultado do IMC, com classificação de peso e faixa de peso saudável
• Veja o layout ideal para a interface dependendo do tamanho da tela do dispositivo
• Veja os estados de foco e foco de todos os elementos interativos na página

Desafio Frontend Mentor

✔️ Comportamento esperado

Abaixo você encontrará as faixas de IMC e suas classificações de peso. Com base nos resultados do IMC da pessoa, adicione sua classificação de peso à frase “Seu IMC sugere que você está” no componente de resultados.

• Abaixo do peso: IMC inferior a 18,5
• Peso saudável: IMC 18,5 a 24,9
• Excesso de peso: IMC 25 a 29,9
• Obeso: IMC 30 ou superior

Adicione a faixa de peso saudável do indivíduo com base nas categorizações inferior e superior do IMC e na altura da pessoa.

📂 Temas abordados

• TypeScript: Este projeto utiliza TypeScript, uma extensão tipada de JavaScript, para trazer um nível adicional de segurança e previsibilidade ao código. O TypeScript permite a detecção precoce de erros e fornece autocompletar melhorado no editor de código, tornando o desenvolvimento mais eficiente e menos propenso a erros.

• React: O React é usado neste projeto para construir a interface do usuário. O React permite a criação de componentes reutilizáveis, tornando o código mais limpo e fácil de manter. Além disso, o React facilita a criação de interfaces de usuário interativas e dinâmicas.

• Styled Components: Styled Components é uma biblioteca para estilizar componentes React. Neste projeto, Styled Components é usado para escrever CSS em JavaScript, permitindo que os estilos sejam dinâmicos e baseados em props. Isso também ajuda a manter os estilos encapsulados no componente, evitando conflitos de estilo e tornando o código mais limpo.

🙋🏻‍♂️ Autor

Bruno Oliveira