Projeto | Tecnologias & Ferramentas | Layout | Tópicos Abordados
Um projeto web básico onde é possível que o usuário digite em dois campos/inputs e ao digitar no teclado, os valores do inputs aparecem em um novo campo no forms. 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 TECLADO com JavaScript.
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 eventos, a manipulação de DOM e funções em JavaScript
- Visite o projeto online: events-keyboard
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 é #E8F532.
[1] Um sessão onde é possível que o usuário preenchar dois campos/inputs e posteriormente, o conteúdo digitado nos inputs aparecem em um novo campo no forms.
[2] Uma sessão de contato/direitos autorais (footer)
-
JavaScript:
- 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. - Manipulação conteúdo(InnerHTML) de acordo com input do usuário. - Utilizar o atributo parentElement para navegar na estrutura do DOM e acessar elementos pai
-
HTML5:
- Tags como section, div, forms, span, footer, label, nav, ul button, img, a, h1, p, input. - 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 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 @media queries (medidas relativas e para telas diferentes) - Utilização do flexbox. - Uso de paleta de cores. - Utilização pseudo-elementos e pseudo-classes.