To Do - Code

I thought it would be a good excercise to sketch out an idea of the features of the to-do list:

Bugs + next steps#

Bugs

1. When I click on the second todo, the first todo checkbox is enabled.
2. I'm using let liCounter = document.getElementsByTagName('li').length; to calculate the amount of to-do's but this seems like it won't fit once I introduce my Done list.

Possible features

1. Once a to-do is created, the user can click a checkbox to move the item from To-Do to Done
2. A clear button can appear on the "done items" list
3. I should be able to click on a done item and re-instate it to my to-dos
4. Would be nice to save state when closing and reopening.
5. Would be nice to have the amount of tasks appear in the apps <title> tags, e.g "My Todos (2)"

Javascript#

function addTodo() {
  let li = document.createElement('li');
  li.id = 'to-do';
  let inputValue = document.getElementById('todoInput').value;
  let checkbox = document.createElement('input');
  checkbox.type = 'checkbox';
  checkbox.name = 'to-do';
  checkbox.id = 'listElement';
  li.appendChild(checkbox);
  let label = document.createElement('label');
  label.htmlFor = 'listElement';
  label.appendChild(document.createTextNode(inputValue));
  li.appendChild(label);
  if (inputValue === '') {
    alert("Input field can't be blank");
  } else {
    document.getElementById('to-dos').appendChild(li);
  }
  document.getElementById('todoInput').value = '';
  let liCounter = document.getElementsByTagName('li').length;
  document.getElementById('todoNum').innerHTML = liCounter;
}