CODEWITHSUNDEEP
javascriptlocal-storage
Jonas Chan
Jonas Chan

Reputation: 67

Currently working on a todo app excerise but STUCKK in saving and pulling localStorage logic

I don't have coding experience, am in the process of learning. I'm very very confuse as to what/how I should proceed setItem to localStorage and getItem from localStorage . So when webpage refresh, saved todo items would still be there. I seen quite a few youtube videos and blog posts, but cant quite seem to understand . I know I need to

-push input value into an array -save that to localStorage with JSON.stringify -when page refresh, check if there's data in localStorage -if true, getItem from localStorage with JSON.parse -if false, do nothing.

Can someone please explain like I'm five.

const toDoForm = document.querySelector('#todo-form');
const toDoInput = document.querySelector('#todo');
const ulList = document.querySelector('#ulList');
let dataArray = [];

toDoForm.addEventListener('submit', function (e) {
    //stop submit event from refreshing
    e.preventDefault();

    //when submit -> create a element <li> link it with variable newLi
    //Fill  new <li>innerText</li>  with toDoInput's value
    const newLi = document.createElement('li');
    newLi.innerText = toDoInput.value;

    //when submit -> create a element <button></button> link it with variable btn
    //<button>x</button>
    //append <button>x</button> to newLi <li><button>x</button></li>
    const btn = document.createElement('button');
    btn.innerText = 'x';
    newLi.appendChild(btn);

    //add newLi  <li><button>x</button></li>  to  ulList<ul></ul>
    ulList.appendChild(newLi);

    //push input into an empty array called dataArray
    dataArray.push(toDoInput.value);
    localStorage.setItem('localData', JSON.stringify(dataArray));

    //when submit -> after all the above is done, we will set the input field to empty string
    toDoInput.value = '';

});


ulList.addEventListener('click', function (e) {

    if (e.target.tagName === 'BUTTON') {
        e.target.parentElement.remove();
    } else if (e.target.tagName === 'LI') {
        e.target.classList.toggle('line');
    }
});
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h1>TO DO LIST</h1>
    <ul id="ulList">

    </ul>
    <form action="" id="todo-form">
        <label for="todo">Write down things to do</label>
        <input type="text" id="todo" name="todo">
        <input type="submit">
    </form>
    <script src="app.js"></script>
</body>

</html>

Upvotes: 0

Views: 77

Answers (1)

Unmitigated
Unmitigated

Reputation: 89264

You can extract the code to add a TODO item to a function and then call that function for each element in the array stored in localStorage if it is found.

let dataArray = localStorage.getItem('localData') ? JSON.parse(localStorage.getItem('localData')): [];
dataArray.forEach(addTodo);

function addTodo(todo){
        const newLi = document.createElement('li');
    newLi.innerText = todo;

    //when submit -> create a element <button></button> link it with variable btn
    //<button>x</button>
    //append <button>x</button> to newLi <li><button>x</button></li>
    const btn = document.createElement('button');
    btn.innerText = 'x';
    newLi.appendChild(btn);

    //add newLi  <li><button>x</button></li>  to  ulList<ul></ul>
    ulList.appendChild(newLi);
}

toDoForm.addEventListener('submit', function (e) {
    //stop submit event from refreshing
    e.preventDefault();
        addTodo(toDoInput.value);
    dataArray.push(toDoInput.value);
    localStorage.setItem('localData', JSON.stringify(dataArray));

    //when submit -> after all the above is done, we will set the input field to empty string
    toDoInput.value = '';

});

Demo

Upvotes: 1

Related Questions