How do I add user input to list, strike through task on mark on complete and localstore the lists?-CodePudding

What I am trying to achieve is the following with my code:

User input is printed on created task? currently, as it stands, the user input is not printed and I am not sure how to achieve that.
How to make it that when the checkbox is ticked the word is strikethrough with a line? I know if I do if(checkbox) {element.style.textDecoration ="line-through" but I am not sure how to call the element
How to make the list local storage? I know the local storage is saves on the browser, but I am not sure where to put the local storage in this code that I wrote.

/************************************
 * creates an object of elements needed *
 ************************************/
 
 const elements = {
    form: document.querySelector("#new-task-form"),
    input: document.querySelector("#new-task-input"),
    list: document.querySelector("#tasks"),
    cal: document.querySelector("#calendar")
}

/****************************
 * Generates an ID for task *
 ****************************/

 const createId = () => `${Math.floor(Math.random() * 10000)}-${new Date().getTime()}`

/**********************************************
 * function that creates the HTML elements    *
 **********************************************/

 const createTask = () => {
    const id = createId()
    const task = elements.input.value;
    const date = elements.cal.value;

    if(!task && !date) return alert("Please fill in task and select date");
    if(!task) return alert("Please fill in task");
    if(!date) return alert("Please select date");

    const tasks = document.createElement("div");

    tasks.innerHTML = `
    <button class = "sort">Sort</button>
    <div  data-id = "${id}">
        <div >
            <input type ="checkbox" >
            <input type ="text" class = "text" id = "text" readonly>${texting}
            <label class = "due-date" for ="text">${date}</label>
            <input type ="date" class = "date" id = "date">
        </div>

        <div class = "actions">
            <button  data-id="${id}">Edit</button>
            <button  data-id="${id}">Delete</button>
        </div>
    </div>
    `
    elements.list.appendChild(tasks)
    return tasks
}


/**************************************************************
 * Event that listens for the edit,save and delete buttons    *
 **************************************************************/
elements.list.addEventListener('click',event => {
    const {target} = event
    const {id} = target.dataset
    const {texting} = target.dataset
    const task = id ? document.querySelector(`[data-id="${id}"]`):null;  
    const taskList = document.querySelector('text')



    const type = {
        edit: event.target.classList.contains('edit'),
        delete: event.target.classList.contains('delete')
    }

    const isFromSaveLabel = target.innerText.toLowerCase() === 'save'

    //Checking to see if buttons are pressed

    if(task && type.edit && isFromSaveLabel){
        const text = task.querySelector('text')
        target.innerText = 'Edit'
        text.setAttribute('readonly','true')
        return
    };

    if(task && type.edit){
        const text = task.querySelector('text')
        target.innerText = 'save'
        text.removeAttribute('readonly')
        text.focus()
        return
    };

    if(task && type.delete){
        
        return
    }
    
});

/*******************************************************************
 * Submits the HTML elements to have the lists submited and created*
 *******************************************************************/

 const submitHandler = (event) =>{
    event.preventDefault();
    createTask();
}


elements.form.addEventListener("submit", submitHandler);

The javascript code above is the action once the task has been created.

You can find the version where it is running here - https://jsfiddle.net/blaze92/seLvzd1h/

CodePudding user response：

TO ANSWER ONE QUESTION AT A TIME

To achieve the strike through

Create a separate function for that and run it every time you add new element as follows

function Listen(){
var allCheckboxes=document.querySelectorAll('.tick')
allCheckboxes.forEach(checkbox=>{
checkbox.addEventListener('change',(e)=>{
var parentElem=e.target.parentElement

if(e.target.checked){
parentElem.style.textDecoration ="line-through"
}else{
parentElem.style.textDecoration ="none"
}


})
})

}

Then you can call the listen() function At the bottom of createTask() after The append statement

Full code


/************************************
 * creates an object of elements needed *
 ************************************/
 
 const elements = {
    form: document.querySelector("#new-task-form"),
    input: document.querySelector("#new-task-input"),
    list: document.querySelector("#tasks"),
    cal: document.querySelector("#calendar")
}

/****************************
 * Generates an ID for task *
 ****************************/

 const createId = () => `${Math.floor(Math.random() * 10000)}-${new Date().getTime()}`

/**********************************************
 * function that creates the HTML elements    *
 **********************************************/
function Listen(){
var allCheckboxes=document.querySelectorAll('.tick')
allCheckboxes.forEach(checkbox=>{
checkbox.addEventListener('change',(e)=>{
var parentElem=e.target.parentElement

if(e.target.checked){
parentElem.style.textDecoration ="line-through"
}else{
parentElem.style.textDecoration ="none"
}


})
})

}

 const createTask = () => {
    const id = createId()
    const task = elements.input.value;
    const date = elements.cal.value;

    if(!task && !date) return alert("Please fill in task and select date");
    if(!task) return alert("Please fill in task");
    if(!date) return alert("Please select date");

    const tasks = document.createElement("div");

    tasks.innerHTML = `
    <button class = "sort">Sort</button>
    <div  data-id = "${id}">
        <div >
            <input type ="checkbox" >
            <input type ="text" class = "text" id = "text" readonly>${texting}
            <label class = "due-date" for ="text">${date}</label>
            <input type ="date" class = "date" id = "date">
        </div>

        <div class = "actions">
            <button  data-id="${id}">Edit</button>
            <button  data-id="${id}">Delete</button>
        </div>
    </div>
    `
    elements.list.append(tasks)
listen()
    return tasks
}


/**************************************************************
 * Event that listens for the edit,save and delete buttons    *
 **************************************************************/
elements.list.addEventListener('click',event => {
    const {target} = event
    const {id} = target.dataset
    const {texting} = target.dataset
    const task = id ? document.querySelector(`[data-id="${id}"]`):null;  
    const taskList = document.querySelector('text')



    const type = {
        edit: event.target.classList.contains('edit'),
        delete: event.target.classList.contains('delete')
    }

    const isFromSaveLabel = target.innerText.toLowerCase() === 'save'

    //Checking to see if buttons are pressed

    if(task && type.edit && isFromSaveLabel){
        const text = task.querySelector('text')
        target.innerText = 'Edit'
        text.setAttribute('readonly','true')
        return
    };

    if(task && type.edit){
        const text = task.querySelector('text')
        target.innerText = 'save'
        text.removeAttribute('readonly')
        text.focus()
        return
    };

    if(task && type.delete){
        
        return
    }
    
});

/*******************************************************************
 * Submits the HTML elements to have the lists submited and created*
 *******************************************************************/

 const submitHandler = (event) =>{
    event.preventDefault();
    createTask();
}


elements.form.addEventListener("submit", submitHandler);