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

Sobre o projeto:

Uma aplicação web onde é possível que o usuário digite dois números e consiga realizar operações de matemáticas básica (soma, subtração, multiplicação e divisão) com base nos eventos/movimentos do mouse sobre um botão. A lógica funciona da seguinte forma:

onMouseOver -----> Somar

onDbClick -----> Subtrair

onMouseOut-----> Dividir

onClick -----> Multiplicar

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, e principalmente EVENTOS do MOUSE com JavaScript.

Apresentação do projeto:

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 JavaScript.

💻 Deploy:

• Visite o projeto online: events-mouse

🔖 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 é #16CFCF.

Elementos principais da página:

[1] Um sessão onde é possível que o usuário preenchar 2 campos de entrada de dados (primeiro número e segundo número) e possa clicar em um botão (calcular)
[2] Uma sessão de contato/direitos autorais (footer)

Tecnologias & Ferramentas:

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
    - Utilização de condicionais switch.
    - Manipulação strings de acordo com input do usuário.
  

• HTML5:

    - Tags como section, div, span, footer, nav, ul button, img, a,  h1, p, input, label.
    - Uso padrão de nomeclatura de classes no HTML com metodologia (BEM)
    - Adicionar mais de um nome de classe a um elemento html.
    - Adicionar link de fontes 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.
    - Adicionar API de icons (Font Awesome) a ser utilizada na aplicação na sessão head do index.html
  

• CSS3:

    - Variáveis no CSS.
    - Reaproveitamenteo do código.
    - Responsividade (medidas 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: