gabrieldev071 / app-tasklist Goto Github PK

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

Uma aplicação web de lista de tarefas/anotações onde é possível criar, finalizar ou excluir tarefas. O projeto foi desenvolvido durante a formação Front-end do Programa One - Oracle Next Education T4. O objetivo do projeto foi trabalhar e entender como funciona a manipulação do DOM (Document Object Model) com JavaScript puro.

- Responsivo para tablet e mobile 🔸

Durante o desenvolvimento pude por em prática e aprimorar minhas habilidades utilizando HTML5 e algumas tags semânticas, CSS3 e uso de suas variáveis e também pude entender melhor como funciona a manipulação do DOM e aplicar a utilização de módulos e componentização em JavaScript .

• Visite o projeto online: app-takslist

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 é #11565f.

[1] Um título sobre o que seria o proejeto
[2] Um forms onde é possível adicionar tarefas/anotações
[3] Após adicionar tarefas, é possível concluir ou finalizar a tarefa.
[4] Uma sessão de contato/direitos autorais (footer)

Além disso, foi proposto um desafio nesse projeto onde precisávamos validar os campos do formulário de contato, validando se há espaços vazios ou se estavam no limite de caracteres definidos, e toda lógica foi implementada com JavaScript. Ademais, também foi feita validações pelo HTML utilizando algumas propriedades do próprio HTML como "required" e o uso do "pattern" para criar uma RegEx.

• JavaScript:

    - Capturar o target do elemento html que está sendo clicado.
    - Utilização de arrow function.
    - Captura elementos html da page com querySelector através DOM.
    - Manipulação do CSS através do JS/DOM
    - Utilização de funções.
    - Utilização de condicionais if e else.
    - Manipulação string de acordo com input do usuário.
    - Explorar o uso de data-attributes para armazenar informações adicionais em elementos.
    - Utilizar import/export para importar e exportar módulos JavaScript.
    - 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, form, span, footer, nav, ul button, img, a,  h1, p, footer.
    - Uso padrão de nomeclatura de classes no HTML com metodologia (BEM)
    - Utilização de Custom Data Attributes para manipualção em JS. 
    - 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
    - Utilização do flexbox.
    - Utilização do @import para utilizar estilos de fontes no css.
    - Utilização de pastas de midias e fotos (assets).
    - Uso de paleta de cores.
    - Utilização pseudo-elementos e pseudo-classes.