JSFiddle - React, Tailwind, and code Playground

by bornasepic

HTML

<div class="todolist">
      <div class="input">
        <h2 class="heading">My to do list</h2>
        <input class="inputfield" type="text" placeholder="Task to be done">
        <div class="addtolist">
          <p>Add</p>
        </div>
      </div>
      <div class="display">
        <div class="listofthingstodo">
          <ul class="list"></ul>
        </div>
      </div>
    </div>

CSS

body{
  font-family: sans-serif;
  width: 40%;
  margin: auto;
      font-size: 16px;
}
.heading{
  margin: 0 0 25px 0 ;
}


.input{
  width: 100%;
  background-color: #333;
  padding: 40px 30px 60px 30px ;
  color: white;
}
.inputfield{
  padding-left: 10px;
  box-sizing: border-box;
  float: left;
  width: 80%;
  min-height: 33px;
  font-weight: bold;
  background-color: #bbb;
  border: 0;
  border-right: 1px solid black;
}
.inputfield:hover{
  background-color: white;
}
.inputfield:focus{
  background-color: white;
  outline: none;
}
.addtolist{
  float: left;
  min-height: 33px;
  width: 20%;
  text-align: center;
  background-color: #155;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: 0.3s;
}
.addtolist p{
  margin: 0;
  padding: 7px;
}
.addtolist:hover{
  background-color: #bbb;
}
.list{
  width: 100%;
  background-color: #333;
  padding-left: 30px;
  padding-right: 30px;
  margin: 0;
}
.list:last-child{
  padding-bottom: 20px;
}
ul li{
  padding: 10px 0 10px 0;
  text-align: center;
  border-bottom: 5px solid #333;
  width: 100%;
  background-color: white;
  text-decoration: none;
  list-style: none;
  position: relative;
  cursor: pointer;
  transition: 0.3s;
}
ul li:checked{
  text-decoration: line-through;
  background-color: #bbb ;
}
.close {
    position: absolute;
    right: 0;
    top: 0;
    padding: 12px 16px 9px 16px;
    border-left: 1px solid #333; 
}

.close:hover {
    background-color: #155;
    color: white;
}

JavaScript

function ready(fn) {
  if (document.attachEvent ? document.readyState === 'complete' : document.readyState !== 'loading'){
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}
//CREATE CLOSE BUTTON
var myNodelist = document.getElementsByTagName("LI");
var i;
for (i = 0; i < myNodelist.length; i++) {
  var span = document.createElement("SPAN");
  var txt = document.createTextNode("\u00D7");
  span.className = "close";
  span.appendChild(txt);
  myNodelist[i].appendChild(span);
}

//HIDE LIST ITEM
var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i++) {
  close[i].onclick = function() {
    var div = this.parentElement;
    div.style.display = "none";
  }
}
//CREATE NEW LIST ITEM
function newElement() {
  var li = document.createElement('li');
  var inputValue = document.querySelector('.inputfield').value;
  var text = document.createTextNode(inputValue);
  var list = document.querySelector('.list');
  li.appendChild(text);
  if (inputValue === '') {
    return;
  } else {
    list.appendChild(li);
  }
  clearinput();


    var span = document.createElement("SPAN");
    var txt = document.createTextNode("\u00D7");
    span.className = "close";
    span.appendChild(txt);
    li.appendChild(span);
    for (i = 0; i < close.length; i++) {
      close[i].onclick = function() {
        this.parentElement.style.display = "none";
      }
    }
  }

function clearinput() {
  document.querySelector('.inputfield').value = "";
}

ready(function() {
 var addlistitem = document.querySelector('.addtolist');
 addlistitem.addEventListener('click', newElement);
});