Mentor Frontend - Calculadora de Índice de Massa Corporal
Bem-vindo! ?
Obrigado por adquirir este desafio de codificação Frontend Mentor premium.
Os desafios do Frontend Mentor ajudam você a melhorar suas habilidades de codificação através da construção de projetos realistas. Esses desafios premium são peças de portfólio perfeitas, então sinta-se à vontade para usar o que você criar em seu portfólio para mostrar a outras pessoas.
Para enfrentar este desafio, você precisa de um forte conhecimento de HTML, CSS e JavaScript.
O desafio
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:
1. Insira sua altura e peso.
2. Calcule o IMC com base nos valores inseridos.
3. Veja o resultado do IMC exibido no componente de resultados.
4. Veja a classificação de peso apresentada na componente de resultados.
5. Veja a faixa de peso saudável exibida no componente de resultados.
Quer algum apoio no desafio? Junte-se à nossa comunidade e tire dúvidas no canal #help.
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.
| Faixa de IMC | Classificação de Peso |
| ------------------ | --------------------- |
| Menos de 18,5 | Abaixo do peso |
| 18,5 a 24,9 | Peso Saudável |
| 25 a 29,9 | Excesso de peso |
| 30 ou mais | Obeso |
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.
Onde encontrar tudo
Sua tarefa é construir o projeto no arquivo de design fornecido. Fornecemos as versões Sketch e Figma do design, para que você possa escolher qual ferramenta prefere usar. Você pode baixar o arquivo do design na plataforma. Certifique-se de não compartilhá-los com mais ninguém. O download do design também vem com um arquivo README.md para ajudá-lo na configuração.
Todos os ativos necessários para este projeto estão na pasta /assets. As imagens já são exportadas para o tamanho de tela correto e otimizadas. Alguns são reutilizáveis em vários tamanhos de tela. Portanto, se você não vir uma imagem em uma pasta específica, normalmente ela estará em outra pasta dessa página.
Também incluímos arquivos de fontes variáveis e estáticas para as fontes necessárias para este projeto. Você pode optar por vincular ao Google Fonts ou usar os arquivos de fontes locais para hospedar as fontes você mesmo. Observe que removemos os arquivos de fontes estáticas para as espessuras de fonte que não são necessárias para este projeto.
O sistema de design no arquivo de design fornecerá mais informações sobre as diversas cores, fontes e estilos usados neste projeto. Nossas fontes sempre vêm do Google Fonts.
Construindo Seu Projeto
Sinta-se à vontade para usar qualquer fluxo de trabalho com o qual se sinta confortável. Abaixo está um processo sugerido, mas não parece necessário seguir estas etapas:
1. Configure seu projeto: Crie uma nova pasta para seu projeto e inicialize-o com Git.
2. Adicione os arquivos HTML, CSS e JavaScript: Crie os arquivos necessários para o seu projeto.
3. Construa a estrutura HTML: Use o arquivo de design como referência para construir a estrutura básica do seu projeto.
4. Estilize o HTML com CSS: Use o arquivo de design para estilizar os elementos do seu projeto.
5. Adicione funcionalidade com JavaScript: Use JavaScript para lidar com entradas e cálculos do usuário.
6. Teste seu projeto: Use as ferramentas de desenvolvedor do seu navegador para testar a funcionalidade do seu projeto.
7. Implante seu projeto: hospede seu projeto em uma plataforma de hospedagem gratuita.
Implantando seu projeto
Conforme mencionado acima, há muitas maneiras de hospedar seu projeto gratuitamente. Nossos anfitriões recomendados são:
Páginas do GitHub
Netlificar
Vercel
Você pode hospedar seu site usando uma dessas soluções ou qualquer um de nossos outros provedores confiáveis. Leia mais sobre nossos hosts recomendados e confiáveis.
Crie um README.md personalizado
Recomendamos fortemente substituir este README.md por um personalizado. Fornecemos um modelo dentro do arquivo README-template.md neste código inicial.
O modelo fornece um guia sobre o que adicionar. Um README personalizado irá ajudá-lo a explicar seu projeto e refletir sobre seus aprendizados. Fique à vontade para editar nosso modelo o quanto quiser.
Depois de adicionar suas informações ao modelo, exclua este arquivo e renomeie o arquivo README-template.md para README.md. Isso fará com que ele apareça como o arquivo README do seu repositório.
Enviando sua solução
Envie sua solução na plataforma para que o resto da comunidade veja. Siga nosso “Guia completo para envio de soluções” para dicas de como fazer isso.
Lembre-se: se você estiver procurando feedback sobre sua solução, faça perguntas ao enviá-la. Quanto mais específico e detalhado você for em suas perguntas, maiores serão as chances de obter feedback valioso da comunidade.
⚠️ IMPORTANTE ⚠️: Com esses desafios premium, certifique-se de não enviar os arquivos de design para o GitHub ao enviá-los para a plataforma e compartilhá-los. Se você criou um projeto totalmente novo, a maneira mais fácil de fazer isso é copiar o .gitignore fornecido neste projeto inicial.
Compartilhando sua solução
Existem vários lugares onde você pode compartilhar sua solução:
Mentor de Frontend: Compartilhe sua solução na plataforma para que o resto da comunidade veja.
GitHub: compartilhe sua solução no GitHub.
Twitter: compartilhe sua solução no Twitter.
Fornecemos modelos para ajudá-lo a compartilhar sua solução depois de enviá-la na plataforma. Edite-os e inclua perguntas específicas quando estiver procurando feedback.
Quanto mais específico você for em suas perguntas, maior será a probabilidade de outro membro da comunidade lhe dar feedback.
Tem feedback para nós?
Adoramos receber feedback! Estamos sempre buscando melhorar nossos desafios e nossa plataforma. Então, se você tiver algo que gostaria de mencionar, envie um e-mail para hi[at]frontendmentor[dot]io.
Divirta-se construindo! ✨
