Um projeto To Do List desenvolvido em HTML, CSS e JS! 👩🏻💻
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).
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.
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
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.
-
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.