Skip to content

WebSite para consultar o IMC (índice de Massa Corporal) e receber um feedback em tempo real de acordo com a classificação IMC segundo a OMS.

Notifications You must be signed in to change notification settings

gabrieldev071/custom-imc-calculator

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Projeto   |    Tecnologias & Ferramentas   |    Layout   |    Tópicos Abordados

Sobre o projeto:

Uma aplicação web onde é possível que o usuário calcule seu IMC (índice de Massa Corporal) e tenha um feedback em tempo real sobre sua classificação na tabela IMC segundo a OMS (Organização Mundial de Saúde). O objetivo do projeto foi trabalhar e por em prática como funciona a manipualção do DOM (Document Object Model), uso de funções, métodos de funções, objetos, eventos e lógica de validação com JavaScript puro.

Apresentação do projeto:

demo do projeto custom-imc-calculator

- Responsivo para tablet e mobile 🔸

Sobre o desenvolvimento do projeto:

Durante o desenvolvimento pude por em prática e aprimorar minhas habilidades utilizando HTML5 e tags semânticas, CSS3 com sua estilização seguindo um padrão de cores e também pude compreender melhor como a manipulação de DOM, funções e eventos em JavaScriptsão implementados.

💻 Deploy:

🔖 Layout:

Foi utilizado apenas uma paleta de cores para aplicar no porjeto. Você pode visualizar a paletra de cores do projeto através DESSE LINK. A cor que deu origem a paletra de cores é #8514E1.

Elementos principais da página:

[1] Um sessão onde é possível que o usuário preenchar seus dados (nome, altura e peso) e possa clicar em 2 botões (calcular e limpar)
[2] Uma sessão onde é visualizada o resultado e tabela de classificação do IMC e um botão para limpar informações
[3] Uma sessão de contato/direitos autorais (footer)

Tecnologias & Ferramentas:

HTML5 CSS3 JavaScript Visual Studio Code GITHUB

Tópicos abordados durante projeto:

  • JavaScript:

      - Utilização de Arrow function.
      - Captura elementos html da page com querySelector através DOM.
      - Manipulação do CSS através do JS/DOM.
      - Manipulação de classes com JS.
      - Utilização de funções e métodos de funções.
      - Utilização de condicionais if e else.
      - Manipulação strings de acordo com input do usuário.
      - Identificar o alvo de eventos utilizando a propriedade target.
      - Utilizar o atributo parentElement para navegar na estrutura do DOM e acessar elementos pai
    
  • HTML5:

      - Tags como section, div, span, footer, nav, ul button, img, a,  h1, p, input.
      - Adicionar mais de um nome de classe a um elemento html.
      - Adicionar link de fonte padrão a ser utilizada na aplicação na sessão head do index.html.
      - Adicionar link de estilos a ser utilizado na aplicação na sessão head index.html.
    
  • CSS3:

      - Variáveis no CSS.
      - Reaproveitamenteo do código.
      - Responsividade (medidaqs relativas e para telas diferentes)
      - Utilização do flexbox.
      - Uso de paleta de cores.
      - Utilização pseudo-elementos e pseudo-classes.
    

Badge de conclusão do projeto:

Minhas redes e contato:

LinkedIn GMAIL instagram GitHub

About

WebSite para consultar o IMC (índice de Massa Corporal) e receber um feedback em tempo real de acordo com a classificação IMC segundo a OMS.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published