title: How would I use local storage for a to do list?
body: <p>I am being asked to have a to do list and save each task (that the user supplies as well as original) through local storage. My teacher did a very simple demo on something completely different and I spent a few hours trying to figure it out. When I looked at the solution, I honestly cannot figure it out. It looks really complicated, and I don't even know where to start. If anyone can give me any hints, that would be awesome!</p>
  <p>My code:</p>
  <pre><code>let ul = document.querySelector('ul');
  
  let newItem = document.querySelector('input[type=text]');
  let checkbox = document.createElement('input');
  checkbox.setAttribute('type', 'checkbox');
  
  function output() {
      let newTodo = document.createElement('li');
      newTodo.innerText = newItem.value;
      newTodo.classList.add('todo');
      let ulAppend = ul.append(newTodo);
      ul.append(newTodo);
      let checkboxAppend = newTodo.append(checkbox);
      newTodo.append(checkbox);
      newItem.value = '';
  }
  
  let button = document.querySelector('.btn');
  button.addEventListener('click', output);
  
  ul.addEventListener('click', function(e) {
      if (e.target.tagName === 'LI') {
          e.target.remove();
      } else if (e.target.tagName === 'INPUT') {
          e.target.parentElement.classList.toggle('finished');
      }
  });
  </code></pre>
  <p>My teacher's code/local storage solution:</p>
  <pre><code>const todoForm = document.getElementById(&quot;newTodoForm&quot;);
  const todoList = document.getElementById(&quot;todoList&quot;);
  
  // retrieve from localStorage
  const savedTodos = JSON.parse(localStorage.getItem(&quot;todos&quot;)) || [];
  for (let i = 0; i &lt; savedTodos.length; i++) {
    let newTodo = document.createElement(&quot;li&quot;);
    newTodo.innerText = savedTodos[i].task;
    newTodo.isCompleted = savedTodos[i].isCompleted ? true : false;
    if (newTodo.isCompleted) {
      newTodo.style.textDecoration = &quot;line-through&quot;;
    }
    todoList.appendChild(newTodo);
  }
  
  todoForm.addEventListener(&quot;submit&quot;, function(event) {
    event.preventDefault();
    let newTodo = document.createElement(&quot;li&quot;);
    let taskValue = document.getElementById(&quot;task&quot;).value;
    newTodo.innerText = taskValue;
    newTodo.isCompleted = false;
    todoForm.reset();
    todoList.appendChild(newTodo);
  
    // save to localStorage
    savedTodos.push({ task: newTodo.innerText, isCompleted: false });
    localStorage.setItem(&quot;todos&quot;, JSON.stringify(savedTodos));
  });
  
  todoList.addEventListener(&quot;click&quot;, function(event) {
    let clickedListItem = event.target;
  
    if (!clickedListItem.isCompleted) {
      clickedListItem.style.textDecoration = &quot;line-through&quot;;
      clickedListItem.isCompleted = true;
    } else {
      clickedListItem.style.textDecoration = &quot;none&quot;;
      clickedListItem.isCompleted = false;
    }
  
    // breaks for duplicates - another option is to have dynamic IDs
    for (let i = 0; i &lt; savedTodos.length; i++) {
      if (savedTodos[i].task === clickedListItem.innerText) {
        savedTodos[i].isCompleted = clickedListItem.isCompleted;
        localStorage.setItem(&quot;todos&quot;, JSON.stringify(savedTodos));
      }
    }
  });
  </code></pre>
  <p>Even though my code is more simpler (at least from what I can tell), it works exactly as his code does.</p>