script.js

const inputBox = document.getElementById('input-box');
const listContainer = document.getElementById('list-container');

function addTask() {
    if (inputBox.value == '') {
        alert('please write something');
    } else {
        let li = document.createElement('li');
        li.innerHTML = inputBox.value;
        listContainer.appendChild(li);

        let span = document.createElement('span');
        span.innerHTML = '\u00d7';
        li.appendChild(span);
    }
    inputBox.value = '';
    saveData();
}

listContainer.addEventListener('click', function (e) {
    if (e.target.tagName == 'LI') {
        e.target.classList.toggle('checked');
    } else if (e.target.tagName == 'SPAN') {
        e.target.parentElement.remove();
    }
    saveData();
}, false);

// save data to localStorage
function saveData() {
    localStorage.setItem("data", listContainer.innerHTML);
}

// show data when we open the website 
function showData() {
    listContainer.innerHTML = localStorage.getItem('data');
}
showData();