ToDo List by me :)

With Pure JavaScript

by Megi93

HTML

<div id="wrapper">

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

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

  <div id="myModal" class="modal js-hide">
    <div class="modal-content">
      <span class="close">&times;</span>
      <p>No empty values are allowed!</p>
    </div>
  </div>

  <div id="modalDuplicate" class="modal js-hide">
    <div class="modal-content">
      <span class="close">&times;</span>
      <p>No duplicate values are allowed!</p>
    </div>
  </div>

</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

// Variables
var ul = document.getElementById("taskList");
var task = document.getElementById("task");
var btn = document.querySelector('button');
var listItem = document.getElementsByTagName("LI");
task.focus();

// Append close btn to each list item
for (var i = 0; i < listItem.length; i++) {
  // Create a <span> node
  var span = document.createElement("SPAN");
  // Create a text node
  var txt = document.createTextNode("\u00D7");
  span.className = "js-close";
  // Append the text to <span>
  span.appendChild(txt);
  // Append <span> to <li>
  listItem[i].appendChild(span);
}

// Click on a close button to hide the current list item
var close = document.getElementsByClassName("js-close");
for (var i = 0; i < close.length; i++) {
  close[i].onclick = function() {
    this.parentNode.parentNode.removeChild(this.parentNode);
  }
}

// check if ul list exist, if we don't check that it's possible that all JS stop working
if (ul) {
  ul.onmouseover = function(event) {
    var target = event.target;
    target.className = 'js-background';
  };

  ul.onmouseout = function(event) {
    var target = event.target;
    target.className = '';
  };
}

// Add item to list on btn
btn.addEventListener('click', addItem);

// Add item to list on enter
task.onkeyup = function(e) {
  if (e.keyCode == 13) {
    addItem();
    this.blur();
  }
};

// Add item to list
function addItem() {
  // remove extra space
  var inputValue = task.value.trim();
  task.value = "";
  task.blur();

  // Empty values don't allow in list
  if (!inputValue) {
    var modal = document.getElementById('myModal');
    var spanClose = document.getElementsByClassName("close")[0];

    modal.classList.remove('js-hide');

    spanClose.onclick = function() {
      modal.classList.add('js-hide');
    };

    window.onclick = function(event) {
      if (event.target == modal) {
        modal.classList.add('js-hide');
      }
    };
    return
  }
  // Duplicate values don't allow in list
  var listItem =...