const input = document.querySelector("input");
const btn = document.querySelector(".delete-btn");
const blockList = document.querySelector(".block__list");
//здесь создал по примеру из интернета localstorage и вписал эту функцию во всех функциях и обработчиках, все сохраняется, но после перезагрузки если нажать на кнопку delete то задача не удаляется
let todo;
function todoLocal(){
todo = blockList.innerHTML;
localStorage.setItem('todos', todo);
}
//эта функция которая создает внутри block__list лишки с задачами и кнопкой delete
function createElenet(e) {
e.preventDefault();
const li = document.createElement("li");
const deleteBtn = document.createElement("button");
deleteBtn.className = "block__button-delete";
deleteBtn.textContent = "delete";
li.classList.add("block__li");
li.textContent = input.value;
li.appendChild(deleteBtn);
blockList.appendChild(li);
//здесь я сразу же добавил кнопке возможность удалять задачу при клике
deleteBtn.addEventListener("click", (e) => {
blockList.removeChild(li);
todoLocal()
});
// при клике на Ли менять бэкгрануд на красный
li.addEventListener('click', () => {
li.classList.toggle('task_done')
todoLocal()
});
}
//эта функция для добавления элементов на странице при клике на кнопку ADD
function addTask(e) {
if (input.value === "") {
return alert("введите сообщение");
} else {
createElenet(e);
input.value = "";
todoLocal()
}
}
if(localStorage.getItem('todos')){
newArr = localStorage.getItem('todos')
}
btn.addEventListener("click", addTask);
<div class="info__buy">Чего сидишь? Порадуй котэ,
<a href="#" class="info__buy-link">купи.</a>
</div><div class="info__descr">Печень утки разварная с артишоками.</div>