Я просто добавлю сюда свой код, хотя я знаю, что ты не должен. Мой список задач работает довольно хорошо, единственное, что не работает, это то, что когда я нажимаю кнопку удаления, он удаляет задачу из пользовательского интерфейса, но не удаляет ее из локального хранилища. Когда я нажимаю refre sh, удаленный элемент возвращается.
//Select Elements
const clear = document.querySelector(".clear");
const dateElement = document.getElementById("date");
const list = document.getElementById("list");
const input = document.getElementById("input");
//Class names for to-do items
const CHECK = "fa-check-circle";
const UNCHECK = "fa-circle-thin";
const LINE_THROUGH = "lineThrough";
//Variables
let LIST;
let id;
//get item from local strorage
let data = localStorage.getItem("Todo");
//check if data is not emplty
if(data){
LIST = JSON.parse(data);
id = LIST.length;// set the id to the last item in the list
loadList(LIST); //load the list to the user interface
} else{
LIST = [];
id = 0;
};
// load items to user interface
function loadList(array){
array.forEach(function(item){
addToDo(item.name, item.id, item.false, item.delete);
});
};
//clear the local storage
clear.addEventListener("click", function(){
localStorage.clear();
location.reload();
});
//add item to local strorage
//let variable = localStorage.setItem('key');
//localStorage.setItem("Todo", JSON.stringify(LIST));
//show todays date
let options = {weekday : 'long', month:'short', day:'numeric'};
let today = new Date();
dateElement.innerHTML = today.toLocaleDateString("en-US", options);
// create a function that will add the to-do to the list when entered
function addToDo(todo, id, done, trash){
if(trash){return;};
const DONE = done ? CHECK : UNCHECK;
const LINE = done ? LINE_THROUGH : "";
const item = `
<li class="item">
<i class="fa ${DONE} co" job="complete" id="${id}"></i>
<p class="text ${LINE}">${todo}</p>
<i class="fa fa-trash-o de" job="delete" id="${id}"></i>
</li>
`;
const position = "beforeend";
list.insertAdjacentHTML(position, item);
};
//make the input become a todo item when the enter key is pressed
document.addEventListener("keyup", function(event){
if(event.keyCode == 13){
const todo = input.value;
if(todo){
addToDo(todo, id, false, false);
LIST.push({
name : todo,
id : id,
done : false,
trash : false,
});
localStorage.setItem("Todo", JSON.stringify(LIST));
id++;
}
input.value = "";
}
});
//make the todo item change to completed when the user clicks on it
function completeToDo(element){
element.classList.toggle(CHECK);
element.classList.toggle(UNCHECK);
element.parentNode.querySelector(".text").classList.toggle(LINE_THROUGH);
LIST[element.id].done = LIST[element.id].done ? false : true;
};
//remove a todo from the LIST
function removeToDo(element){
element.parentNode.parentNode.removeChild(element.parentNode);
LIST[element.id].trash = true;
};
//target the created items
list.addEventListener("click", function(event){
let element = event.target;// return clicked element inside the list
const elementJOB = element.attributes.job.value;// complete or delete
if(elementJOB == "complete"){
completeToDo(element);
} else if (elementJOB == "delete"){
removeToDo(element);
}
localStorage.setItem("Todo", JSON.stringify(LIST));
});