Uncaught SyntaxError: Unexpected token u in JSON at position 0 at JSON.parse 
Published: 2020-06-10 07:29:21

// CODE EXPLAINED channel

// select the element  
const clear= document.querySelector(".clear");
const dateElement = document.getElementById("date");
const list = document.getElementById("list");
const input = document.getElementById("input");

// class name 
const CHECK = "fa-check-circle";
const UNCHECK = "fa-circle-thin";
const LINE_THROUGH ='lineThrough';
  // variable 
  let LIST, id;
//   get item from localstroage 
let data = localStorage.getItem("TODO");

// check if data is not empty 
if(data){
    LIST = JSON.parse(data);
    id = LIST.length; //set the id to the last one in the list
    loadList(LIST) ;// load the list to the user interface

} else{
    // if data isn't  empty 
    LIST = [];
    id = 0;
}

// load items to the user's interface 
function loadList(array){
    array.forEach(function(item) {
        addToDo(item.name, item.id, item.done, item.trash);
        
    });
}



// show todays date 
const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
const today = new Date();
dateElement.innerHTML = today.toLocaleDateString(undefined, options);

// add  to do function 

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);
}

// add in item to the list user the enter key

document.addEventListener("keyup", function(even){
    if(event.keyCode==13){
        const toDo = input.value;

        // if the input isn't empty 
        if(toDo){
            addToDo(toDo, id, false, false);
            LIST.push({
                name:toDo, 
                id:id,
                done:false,
                trash: false
            });
            // add item to localstorage (this code must be added where the  LIST  arry is upload)

localStorage.setItem("TODO", JSON.stringify(LIST));
            id++;
        }
        input.value =""; 

    }
});

// complete to do 
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 to do 
function removeToDo(element){
    element.parentNode.parentNode.removeChild(element.parentNode);
    LIST[emelment.id].trash = true;
};
// target the items create ddynamiclly
list.addEventListener("click", function(event){
    const element = event.target; // return the emement inside
    const elementJob = element.attributes.job.value //complite or delete
    if(elementJob== "complete"){
        completeToDo(element);
    }else if(elementJob == "delete"){
        removeToDo(element);
    };
    // add item to localstorage (this code must be added where the  LIST  arry is upload)

localStorage.setItem("TODO", JSON.stringify(LIST)); 
});