To-Do List in html+css+vanilla js
Requisitos:
-
Todos os elementos dos screenshots devem ser implementados (por exemplo, ícones e caixas de texto), mesmo que não tenham funcionalidades associadas.
-
Ao clicar em um item da lista de tarefas, um menu lateral deve abrir com seu título e descrição (figuras 1 e 2). Os ícones e campo de comentário devem constar na implementação, mas não precisam ter ação associada.
-
Ao clicar no botão "Add Task" no topo da lista, um menu lateral deve abrir (caso ainda não esteja aberto) para que o usuário digite o título e descrição da tarefa. Esses dois campos de texto devem mostrar as respectivas bordas se e somente se o cursor do mouse estiver sobre eles (figuras 3 e 4).
-
Ao clicar no campo de título ou descrição, um cursor de texto é mostrado e o usuário pode inserir a informação correspondente. Quando esses campos forem editados, digitar Enter ou tirar o foco do elemento salvam o texto digitado, e o título da tarefa deve ser atualizado na lista à esquerda.
-
Clicar no X do canto superior direito do painel lateral deve fechar o painel, salvando todo o texto digitado e voltando à visualização da lista centralizada (figura 6).
Não é necessário implementar os pontos a seguir, mas são sugestões de como deixar sua página mais bem elaborada:
-
A página pode manter os dados de uma maneira mais estruturada do que apenas nos elementos HTML (pode delegar a gerência dos dados a um objeto JS em um contexto próprio, por exemplo).
-
A página pode persistir os dados de maneira que, se for fechada e aberta novamente, a lista de tarefas não seja perdida.
-
Clicar e arrastar a tarefa pode servir como maneira de reordenar os elementos da lista.