To do - javascript

Just a small javascript to do list.

by Vanessa RC

HTML

<h2>Wish List 2016</h2>
     
    
    <form class="checkListForm" method='POST' onsubmit="initToDoList(); return false;">
      <input type="text" class="enterText" name="checkListItem" placeholder="Add your wish" id="textBox">  
        <input class="button" type="button" id="btnAdd" value='Add'>
    </form>
    <ul id="todoList" class='list'>
    </ul>

CSS

.button {
  background: #36BBca;
  padding: 5px 20px;
  color: #fff;
  font-size: 15px;
  border-radius: 4px;
  border: none;
  
}

.list {
  font-family:'garamond';
	color:#cc0000;
}

ul li {
  font-family: 'garamond';
  font-size: 12px;
  line-height: 1.7;
  color: #444;
}
.enterText {
  padding: 5px 20px;
  border-radius: 4px;
  border: none;
  background: #ddd;
  font-size:15px;
}

input:focus {
  outline: none;
  color: #444;
}

JavaScript

function initToDoList() {

            var textBox = document.getElementById('textBox');
            var list = document.getElementById('todoList');
            var addButton = document.getElementById('btnAdd');

            addButton.addEventListener("click", addItem);

            function createDeleteLink() {

                var deleteLink = document.createElement('a');
                deleteLink.setAttribute("href", "#");
                deleteLink.setAttribute("class", "delete-link");
                deleteLink.innerHTML = "x";
                deleteLink.addEventListener("click", removeItem);
                return deleteLink;

            }

            function addItem() {

                var listElement = document.createElement('li');
                listElement.innerText = textBox.value;
                listElement.appendChild(createDeleteLink());

                list.appendChild(listElement);

                textBox.value = "";
            }

            function removeItem() {

                var parent = this.parentNode.parentNode;
                var child = this.parentNode

                parent.removeChild(child);

            }
        }

        initToDoList();