ToDo List

ToDo List with pure JavaScript -v2 by M.

by Megi93

HTML

<div id="wrapper">

  <input type="text" id="task" />
  <button>Add</button>

  <ul id="taskList"></ul>

</div>

CSS

#wrapper {
  width: 500px;
  margin: 0 auto;
  background: #00bcd4;
  border: 1px solid #f1f0f0;
  padding-left: 10px;
  font-size: 1.2em;
}

#wrapper #task {
  background: transparent;
  color: #ffffff;
  font-size: 1.2em;
  width: 80%;
  height: 35px;
  border: none;
  border-bottom: 2px solid #ffffff;
  outline: none;
  margin: 15px 0 5px 0;
}

#wrapper #task ::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #ffffff;
}

#wrapper #task ::-moz-placeholder {
  /* Firefox 19+ */
  color: #ffffff;
}

#wrapper #task :-ms-input-placeholder {
  /* IE 10+ */
  color: #ffffff;
}

#wrapper #task :-moz-placeholder {
  /* Firefox 18- */
  color: #ffffff;
}

#wrapper button {
  font-size: 1.2em;
  border: 2px solid #ffffff;
  background: transparent;
  color: #ffffff;
  padding: 5px 10px;
  outline: none;
  cursor: pointer;
}

#wrapper ul#taskList {
  padding: 0;
  background: #ffffff;
  list-style-type: none;
  text-align: left;
  margin-bottom: 0;
  margin-left: -10px;
}

#wrapper ul#taskList li {
  padding: 10px;
  position: relative;
  cursor: pointer;
}

#wrapper ul#taskList li span {
  position: absolute;
  right: 0;
  top: 0;
  padding: 10px;
}

.modal {
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  /* Enable scroll if needed */
  background-color: black;
  background-color: rgba(0, 0, 0, 0.4);
  text-align: center;
}

.modal .modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 50%;
}

.modal .modal-content .close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.modal .modal-content .close:hover,
.modal .modal-content .close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.js-close {
  position: absolute;
  right: 0;
  top: 0;
  padding: 10px;
}

.js-close:hover {
  color: #ffffff;
}

.js-hide {
  display: none;
}

.js-background {
  background: #efebeb;
}

/*#...

JavaScript

var taskArray = [];
var task = document.getElementById("task");
var btn = document.querySelector('button');
var ul = document.getElementById("taskList");

btn.addEventListener("click", function(event) {

  if (task.value != '' && task.value != null) {
    if (taskArray.length == 0) {
      taskArray.push(task.value);
    } else {

      if (taskArray.indexOf(task.value) == -1)
        taskArray.push(task.value);
    }
    while (ul.firstChild) {
      ul.removeChild(ul.firstChild);
    }
    for (var j = 0; j < taskArray.length; j++) {
      let li = document.createElement('LI');
      let currTask = document.createTextNode(taskArray[j]);
      li.appendChild(currTask);
      let span = document.createElement("SPAN");
      let closeX = document.createTextNode("\u00D7");
      span.appendChild(closeX);
      li.appendChild(span);
      ul.appendChild(li);
      span.addEventListener('click', (function(i) {
        return function() {
          this.parentNode.parentNode.removeChild(this.parentNode);
          taskArray.splice(i, 1);
        }
      })(j));
    }
  }
});