My-Tasks 📖

Um projeto To Do List desenvolvido em HTML, CSS e JS! 👩🏻‍💻

Introdução: CARROSSEL 🎠

Começamos com uma apresentação breve ao usuário, exposta por meio de um carrossel. A navegação pode ser realizada através dos botões laterais (setas), inferiores (bolinhas), via dragstart (arrastar do mouse/cursor) ou automação, isto é, se o usuário não estiver com seu cursor posicionado sobre um slide, o carrossel rotacionará de forma automática! Acompanhe:

No último slide, podemos observar um botão roxo com o texto "Prossiga". Ele direciona o usuário a tela que contém as funcionalidades "To Do List" (abordadas nos tópicos a seguir).

TO DO LIST 📖

O que é?

De acordo com o google, TO DO LIST "consiste em uma folha de controle, que contém vários comportamentos ou traços, e que tem como objetivo conduzir a uma observação sistemática". Desta forma, este projeto seguiu a risca esta definição.

O Projeto

Distribuída em inputs e botões, a organização de lista do MyTasks foi construída de forma simples e objetiva, a fim do usuário conseguir localizar-se rapidamente. Além disso, mesmo ao sair da página, o usuário não perderá suas informações ( a menos que as exclua ¯_(ツ)_/¯ ).

Acompanhe abaixo a demonstração de suas funcionalidades e responsividade:

My.Tasks.-.parte.1.mp4

My.Tasks.-.parte.2.mp4

Veja você mesmo!

Fique a vontade! Clique no link ao lado para você mesmo testar o MyTasks! 👉🏻💜 https://viihneris.github.io/My-Tasks/welcome.html

ATENÇÃO: Para melhor experiência, recomendo que utilize o navegador Chrome.

Conhecimentos aplicados:

• HTML Semântico:

  • Sections;
  • Divs;
  • Buttons;
  • Listas (ul/li);
  • Links externos (bibliotecas).

• CSS:

  • Flex-box;
  • Displays;
  • Root;
  • Overflow-x/y;
  • Marker:: ;
  • Responsividade (@media screen).

• JavaScript:

  • Functions;
  • Variáveis
    • Let;
    • CONST.
  • AddEventListener
    • click;
    • dragstart;
    • mouseup;
    • mousedown;
    • mouseenter;
    • mouseleave;
    • touchstart;
    • touchend;
    • touchmove;
    • resize.
  • Métodos element
    • clientX;
    • clientY;
    • Propriedades window;
    • preventDefault;
    • currentTarget;
    • touches.
  • clearTimeout;
  • clearInterval;
  • setInterval;
  • Ternary Operator;
  • Objetos/modelo chave x valor;
  • Método append/appendChild;
  • createElement;
  • ForEach;
  • querySelector;
  • Manipulação de DOM.