script.js

let form = document.querySelector("form")
let input = document.querySelector("input")
let ul = document.querySelector("ul")
loadTodo()
form.addEventListener("submit", function(event){
	event.preventDefault();
	let newButton = document.createElement("button")
	let newLi = document.createElement("li")
	newButton.innerText = "remove"
	newButton.className = "remove"
	newButton.addEventListener("click", function(event){
		newLi.remove()
		saveTodo()
	})
	newLi.innerText = input.value
	newLi.appendChild(newButton)
	ul.appendChild(newLi)
	newLi.addEventListener("click", function(event){
		event.target.classList.toggle("crossed")
		saveTodo()
	})
	saveTodo()
})




function saveTodo(){
	let todosArray = []
	let lis = document.querySelectorAll("li")
	for (let li of lis){
		let text = ""
		let completed = li.classList.contains("crossed")
		for (child of li.childNodes){
			if (child.nodeType === Node.TEXT_NODE){
				let content = child.textContent.trim()
				if (content.length > 0){
					text += content
				}
			}
		}
		todosArray.push({text, completed})
	}
	localStorage.setItem("todos", JSON.stringify(todosArray))
}

function loadTodo(){
	let todosArray = JSON.parse(localStorage.getItem("todos"))|| []
	for (let i = 0; i < todosArray.length; i++){
		let li = document.createElement("li")
		let {text, completed} = todosArray[i]
		li.innerText = text
		if (completed){
			li.classList.add("crossed")
		}
		let button = document.createElement("button")
		button.innerText = "remove"
		button.className = "remove"
		li.appendChild(button)
		li.addEventListener("click", function(event){
			if (event.target !== button){
				li.classList.toggle("crossed")
				saveTodo()
			}
		})
		button.addEventListener("click", function(event){
			li.remove()
			saveTodo()
		})
		ul.append(li)
	}

}