site: https://thiagodomingoss.github.io/MyTask/
Para começar, armazenamos as requisições ao Localstorage em consts para usa-las em funções e interagir com o Localstorage.
Em seguida, adicionamos um evento de click no botão "add", que chama uma função "inserirItem"
A função INSERIRITEM faz uma checagem se há algum valor no input, no caso de não haver a função ativa um ALERT que diz 'write something!'(escreva algo!) para que não seja adicionada tasks sem conteúdo.
Havendo conteúdo, a função faz uma requizição GET ao localstorage, que da 1 vez retornará um array vazio, e faz um push(adiciona) nesse array um objetoCom duas chaves, uma tarefa que recebe o valor atual do input e a segunda 'status' que vai receber vazio de inicio, mas que servirá para receber um valor de checked da task.
Então faz um requisição SET, enviando o objeto para o localstorage e logo em seguida chama a função ATUALIZARTELA.
Essa função é chamada sempre que occorre alteração nos componentes e no localstorage(onde estão armazenados os componentes em forma de objeto).
Sua primeira tarefa e limpar a tela
Onde basicamente, pega a taskList(lista de tarefas) e atribui um valor de string vazia, que vai por consequência limpar a tela.
Feito isso, a função faz um GET no locastorage e tendo um ou mais objetos fará uma iteração por esse array de objetos por meio de um forEach que receberá como parâmetro o item(objeto contendo chaves e valores) e seu indice(posição) nesse array e enviará para uma função chamada CRIARITEM.
Essa função receberá como parâmetro os valores contidos no objeto (tarefa e status) e seu indice(posição). Armazenará numa const 'item' a criação de uma 'div', atribuirá classes a essa div por meio do classlist.add e adicionará ao conteúdo dessa div:
Um input CHECKBOX que receberá os parâmetros indice e o status
Uma div com o parâmetro tarefa
Um buttom que receberá o parâmetro indice
Então atribuirá esse item à lista de tarefas por meio do metodo appendChild, para que seja exibido na tela.
Ao final, atribui uma string vazia ao input de tarefas, para que não seja necessário apagar manualmente sempre que adicionar uma nova tarefa.
Então, o atualizartela fará uma filtragem no localstorage por meio do filter, armazenando os obetos checados e não checados em variáveis separadas e em seguida pegam a quantidade de objetos de cada uma das variáveis por meio do length e atribui esses valores aos badges que são mostrados na tela e estão contidos nos botões de filtragem.
Por fim, chamará a função filterItems
A função filterItems fará uma checagem, onde os botões ALL, UNDONE E DONE formam um array e recebem os indices respectivamente 0(all), 1(undone) e 2(done).
Se o o botão (1)UNDONE contém a classe 'active' então é chamada a função FILTEREDEUNDONE
Se o o botão (2)DONE contém a classe 'active' então é chamada a função FILTEREDEDONE
Essa funções acessam os elementos filhos da lista de tarefas por meio do tasklist.children e filtram as tarefas que contém, ou não no caso da undone, checked por meio do task.childNodes que é um array onde o item (1) é o input checkbox que contém o status onde é armazenado o valor checked
Na filteredUndone, os valores que contém o checked, ou seja, task já checada, são enviadas para a função hidetask. Já na filteredDone são as não chegadas que são enviadas.
A função hidetask faz uma iteração nesse array de tasks e remove a classe d-flex do boostrap e aplica a classe hide que aplica um display: none e assim não será exibida na tela, porém sem alterar o array principal com todas as tasks.
Agora, partindo para as interações de deletar e checar a tarefa, pegamos a lista de tarefas e adicionamos um evento de click que cha a função clickItem.
Essa função recebe um evento(click) como parâmetro e o alvo desse evento é armazenado em uma const element que passará por uma checagem.
Se esse elemento capturado pelo evento de click tem em seu type o valor button, então ele é o botão de delete.
Logo, captura-se o seu indice por meio de data attribute e invoca-se a função removeItem.
Essa função recebe o indice do item como parâmetro, faz uma requisição GET no localstorage e aplica o metodo splice, que recebe dois parâmetros, primeiro, a posição do item no arraye segundo a quntidadde de items que devem ser deletados desse array, partindo da posição recebida no primeiro parâmetro a diante. No fim atualiza a tela para que o item apagado do localstoragem não seja mais exibido na tela.
A função atualizar item funciona de forma semelhante, recebendo indice e requisitando localstorage, porém faz uma checagem por meio de um ternário na chave status do objeto, onde se o status do objeto estiver vazio retornará true e então o status receberá o valor 'checked' e se retornar false o status receberá uma string vazia.
Por fim, pegamos o botão CLEAR e adicionamos um evento de click que invoca a função clearAll
Essa função faz uma checagem por meio do CONFIRM que da duas opções de confirm(true) e cancel(false), após retornados os valores eles são armazenados na variável ANSWER e no if é feita a checagem e se a resposta for true e feita uma requisição no localstorage para remover o item que foi clicado, por fim, é chamado o atualizartela para que ele faça uma nova leitura do localstorage e apresente apenas os items presentes lá e os apresente na tela.