JS Bin todo list homework// source https://jsbin.com/zobogoj

jsbin.zobogoj.css

button {
  color: white;
  background: blue;
}

button:hover {
  background: lightblue;
}
html{
  font-family: Helvetica;
  border: solid black;
}
h1{
  text-align:center;
}
div{
  display: flex;
  flex-wrap: wrap;
  
  border: solid black 1px;
  padding: 10px;
  margin: 5px;
}
progress{
  width: 100%;
}
.delete{
  float: right;
}
#Input{
  display: flex;
  justify-content: center;
}
#taskNamer{
  width: 95%;
}

jsbin.zobogoj.js

var toDo = {
  toDoList: [],
  getList: function() {
    if (localStorage.getItem("toDoStorage") === null) {
      return "NULL";
    }
    var locosto = localStorage.getItem('toDoStorage');
    this.toDoList = JSON.parse(locosto);
    this.renderList();
  },
  setList: function() {
    localStorage.setItem('toDoStorage', JSON.stringify(toDo.toDoList));
  },
  clearList: function() {
    localStorage.removeItem('toDoStorage');
    this.toDoList = [];
    this.renderList();
  },
  addItem: function(taskName, status) {
    toDoListItem = function(id, taskName, status) {
      this.id = id;
      this.taskName = taskName;
      this.status = status;
    }
    var id = Date.now();
    var newItem = new toDoListItem(id, taskName, status);
    //console.log(newItem);
    this.toDoList.push(newItem);
    this.setList();
  },
  toggleDone: function(id) {
    if (this.getStatus(id)) {
      this.markItemUnDone(id);
    } else {
      this.markItemDone(id);
    }
    this.calcProgress();
    toDo.setList();
  },
  markItemDone: function(id) {
    this.toDoList[id].status = true;
    //console.log("toggled done");
  },
  markItemUnDone: function(id) {
    this.toDoList[id].status = false;
  },
  calcProgress: function() {
    document.querySelector('#progress').setAttribute('value', (document.querySelectorAll('input[type="checkbox"]:checked').length) / (document.querySelectorAll('input[type="checkbox"]').length));
  },
  editItem: function() {

  },
  getDate: function(date) {
    return this.toDoList.indexOf(this.toDoList.find(x => x.id == date));
  },
  getStatus: function(id) {
    return this.toDoList[id].status;
  },
  getTaskName: function(id) {
    return this.toDoList[id].taskName;
  },
  deleteItem: function(id) {
    this.toDoList.splice(id, 1);
    this.renderList();
    toDo.setList();
  },
  createToDoElem: function(task) {
    var taskName = task.taskName;
    var taskStatus = task.status;
    var taskDate = task.id;
    //console.log(task,taskName,taskStatus);
    
    //create Element
    var newElem = document.createElement('div');
    newElem.setAttribute('id', taskDate);
    
    //create status checkbox
    var newStatus = document.createElement('input');
    newStatus.setAttribute('type', "checkbox");
    if (taskStatus === true) {
      newStatus.setAttribute('checked', "true");
    }
    newStatus.setAttribute('onchange', 'toDo.toggleDone(toDo.getDate(parentNode.id))')
    newElem.appendChild(newStatus);
    
    //create task name text
    var newElemName = document.createElement('span');
    newElemName.innerHTML = taskName;
    newElem.appendChild(newElemName);
    
    //create delete button
    var newDelete = document.createElement('button');
    newDelete.className = 'delete';
    newDelete.innerText = "x";
    newDelete.setAttribute('onclick', 'toDo.deleteItem(toDo.getDate(parentNode.id))');
    newElem.appendChild(newDelete);
    document.querySelector('#ToDoList').appendChild(newElem);
  },
  renderList: function() {
    document.querySelector("#ToDoList").innerHTML = '';
    this.toDoList.map(this.createToDoElem);
    this.calcProgress();
  }
}

function init() {
  toDo.getList();
  toDo.renderList();
  toDo.calcProgress();
};
init();

document.querySelector('#taskNamer').addEventListener("keydown", function(event) {
  //console.log(event);
  if (event.keyCode == 13) {
    var taskNamer = document.querySelector('#taskNamer');
    toDo.addItem(taskNamer.value, false);
    toDo.renderList();
    taskNamer.value = "";
  }
});
function clearInput(){
  document.querySelector('#taskNamer').value = "";
}

toDoList.html

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="todo list homework">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
button {
  color: white;
  background: blue;
}

button:hover {
  background: lightblue;
}
html{
  font-family: Helvetica;
  border: solid black;
}
h1{
  text-align:center;
}
div{
  display: flex;
  flex-wrap: wrap;
  
  border: solid black 1px;
  padding: 10px;
  margin: 5px;
}
progress{
  width: 100%;
}
.delete{
  float: right;
}
#Input{
  display: flex;
  justify-content: center;
}
#taskNamer{
  width: 95%;
}
</style>
</head>
<body>
  <h1>Michael's ToDo List</h1>
  <em>for Shelly</em>
  <progress id="progress" value="0" max="1"></progress><br>
<button onclick="toDo.clearList()">Clear ALL</button>
<div id="Input">
  <input id="taskNamer" type="text" value="Press Enter to add toDo Item" onfocus="clearInput()"></input>
</div>
  <div id="ToDoList">
    
</div>
<script id="jsbin-javascript">
var toDo = {
  toDoList: [],
  getList: function() {
    if (localStorage.getItem("toDoStorage") === null) {
      return "NULL";
    }
    var locosto = localStorage.getItem('toDoStorage');
    this.toDoList = JSON.parse(locosto);
    this.renderList();
  },
  setList: function() {
    localStorage.setItem('toDoStorage', JSON.stringify(toDo.toDoList));
  },
  clearList: function() {
    localStorage.removeItem('toDoStorage');
    this.toDoList = [];
    this.renderList();
  },
  addItem: function(taskName, status) {
    toDoListItem = function(id, taskName, status) {
      this.id = id;
      this.taskName = taskName;
      this.status = status;
    }
    var id = Date.now();
    var newItem = new toDoListItem(id, taskName, status);
    //console.log(newItem);
    this.toDoList.push(newItem);
    this.setList();
  },
  toggleDone: function(id) {
    if (this.getStatus(id)) {
      this.markItemUnDone(id);
    } else {
      this.markItemDone(id);
    }
    this.calcProgress();
    toDo.setList();
  },
  markItemDone: function(id) {
    this.toDoList[id].status = true;
    //console.log("toggled done");
  },
  markItemUnDone: function(id) {
    this.toDoList[id].status = false;
  },
  calcProgress: function() {
    document.querySelector('#progress').setAttribute('value', (document.querySelectorAll('input[type="checkbox"]:checked').length) / (document.querySelectorAll('input[type="checkbox"]').length));
  },
  editItem: function() {

  },
  getDate: function(date) {
    return this.toDoList.indexOf(this.toDoList.find(x => x.id == date));
  },
  getStatus: function(id) {
    return this.toDoList[id].status;
  },
  getTaskName: function(id) {
    return this.toDoList[id].taskName;
  },
  deleteItem: function(id) {
    this.toDoList.splice(id, 1);
    this.renderList();
    toDo.setList();
  },
  createToDoElem: function(task) {
    var taskName = task.taskName;
    var taskStatus = task.status;
    var taskDate = task.id;
    //console.log(task,taskName,taskStatus);
    
    //create Element
    var newElem = document.createElement('div');
    newElem.setAttribute('id', taskDate);
    
    //create status checkbox
    var newStatus = document.createElement('input');
    newStatus.setAttribute('type', "checkbox");
    if (taskStatus === true) {
      newStatus.setAttribute('checked', "true");
    }
    newStatus.setAttribute('onchange', 'toDo.toggleDone(toDo.getDate(parentNode.id))')
    newElem.appendChild(newStatus);
    
    //create task name text
    var newElemName = document.createElement('span');
    newElemName.innerHTML = taskName;
    newElem.appendChild(newElemName);
    
    //create delete button
    var newDelete = document.createElement('button');
    newDelete.className = 'delete';
    newDelete.innerText = "x";
    newDelete.setAttribute('onclick', 'toDo.deleteItem(toDo.getDate(parentNode.id))');
    newElem.appendChild(newDelete);
    document.querySelector('#ToDoList').appendChild(newElem);
  },
  renderList: function() {
    document.querySelector("#ToDoList").innerHTML = '';
    this.toDoList.map(this.createToDoElem);
    this.calcProgress();
  }
}

function init() {
  toDo.getList();
  toDo.renderList();
  toDo.calcProgress();
};
init();

document.querySelector('#taskNamer').addEventListener("keydown", function(event) {
  //console.log(event);
  if (event.keyCode == 13) {
    var taskNamer = document.querySelector('#taskNamer');
    toDo.addItem(taskNamer.value, false);
    toDo.renderList();
    taskNamer.value = "";
  }
});
function clearInput(){
  document.querySelector('#taskNamer').value = "";
}
</script>


<script id="jsbin-source-css" type="text/css">button {
  color: white;
  background: blue;
}

button:hover {
  background: lightblue;
}
html{
  font-family: Helvetica;
  border: solid black;
}
h1{
  text-align:center;
}
div{
  display: flex;
  flex-wrap: wrap;
  
  border: solid black 1px;
  padding: 10px;
  margin: 5px;
}
progress{
  width: 100%;
}
.delete{
  float: right;
}
#Input{
  display: flex;
  justify-content: center;
}
#taskNamer{
  width: 95%;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">var toDo = {
  toDoList: [],
  getList: function() {
    if (localStorage.getItem("toDoStorage") === null) {
      return "NULL";
    }
    var locosto = localStorage.getItem('toDoStorage');
    this.toDoList = JSON.parse(locosto);
    this.renderList();
  },
  setList: function() {
    localStorage.setItem('toDoStorage', JSON.stringify(toDo.toDoList));
  },
  clearList: function() {
    localStorage.removeItem('toDoStorage');
    this.toDoList = [];
    this.renderList();
  },
  addItem: function(taskName, status) {
    toDoListItem = function(id, taskName, status) {
      this.id = id;
      this.taskName = taskName;
      this.status = status;
    }
    var id = Date.now();
    var newItem = new toDoListItem(id, taskName, status);
    //console.log(newItem);
    this.toDoList.push(newItem);
    this.setList();
  },
  toggleDone: function(id) {
    if (this.getStatus(id)) {
      this.markItemUnDone(id);
    } else {
      this.markItemDone(id);
    }
    this.calcProgress();
    toDo.setList();
  },
  markItemDone: function(id) {
    this.toDoList[id].status = true;
    //console.log("toggled done");
  },
  markItemUnDone: function(id) {
    this.toDoList[id].status = false;
  },
  calcProgress: function() {
    document.querySelector('#progress').setAttribute('value', (document.querySelectorAll('input[type="checkbox"]:checked').length) / (document.querySelectorAll('input[type="checkbox"]').length));
  },
  editItem: function() {

  },
  getDate: function(date) {
    return this.toDoList.indexOf(this.toDoList.find(x => x.id == date));
  },
  getStatus: function(id) {
    return this.toDoList[id].status;
  },
  getTaskName: function(id) {
    return this.toDoList[id].taskName;
  },
  deleteItem: function(id) {
    this.toDoList.splice(id, 1);
    this.renderList();
    toDo.setList();
  },
  createToDoElem: function(task) {
    var taskName = task.taskName;
    var taskStatus = task.status;
    var taskDate = task.id;
    //console.log(task,taskName,taskStatus);
    
    //create Element
    var newElem = document.createElement('div');
    newElem.setAttribute('id', taskDate);
    
    //create status checkbox
    var newStatus = document.createElement('input');
    newStatus.setAttribute('type', "checkbox");
    if (taskStatus === true) {
      newStatus.setAttribute('checked', "true");
    }
    newStatus.setAttribute('onchange', 'toDo.toggleDone(toDo.getDate(parentNode.id))')
    newElem.appendChild(newStatus);
    
    //create task name text
    var newElemName = document.createElement('span');
    newElemName.innerHTML = taskName;
    newElem.appendChild(newElemName);
    
    //create delete button
    var newDelete = document.createElement('button');
    newDelete.className = 'delete';
    newDelete.innerText = "x";
    newDelete.setAttribute('onclick', 'toDo.deleteItem(toDo.getDate(parentNode.id))');
    newElem.appendChild(newDelete);
    document.querySelector('#ToDoList').appendChild(newElem);
  },
  renderList: function() {
    document.querySelector("#ToDoList").innerHTML = '';
    this.toDoList.map(this.createToDoElem);
    this.calcProgress();
  }
}

function init() {
  toDo.getList();
  toDo.renderList();
  toDo.calcProgress();
};
init();

document.querySelector('#taskNamer').addEventListener("keydown", function(event) {
  //console.log(event);
  if (event.keyCode == 13) {
    var taskNamer = document.querySelector('#taskNamer');
    toDo.addItem(taskNamer.value, false);
    toDo.renderList();
    taskNamer.value = "";
  }
});
function clearInput(){
  document.querySelector('#taskNamer').value = "";
}</script></body>
</html>