JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<!-- Whenever the page is loaded, call the `setup` function from the JavaScript. -->
 <body onload="setup()">
      <title>To Do List</title>
      <h1>To Do List</h1>
          <form id="todoForm">
            <input type="text" placeholder="Add a task here" id="todoInput">
    <button type="button"onclick="todoList()">Add</button>
          </form>
          <hr>
          <ol id="todoList">
               <li>Register to Full Stack Web Course</li>
               <li class="checked">Attend Selection Day</li>
              <li>Go see X-Men apocalypse movie</li>
          </ol>
       <script src="js/main.js"></script>   
       </body>

CSS

ol {

}
ol li {
  cursor: pointer;
  position: relative;

}
ol li:hover {
  background: #ddd;
  color: black;
}
ol li.checked {
  background: #888;
  color: #fff;
  text-decoration: line-through;
}
.checked {
  background: #888;
  color: #fff;
  text-decoration: line-through;
}
ol li.checked::before {
  position: absolute;
  border-color: #fff;
  border-style: solid;

}

JavaScript

// Now that this is inside of the function, it can be called when the page loads.
function setup() {
  var task = document.querySelectorAll('ol');
  var i;
	/* go loop all the way- on tasks */
	for (i = 0; i < task.length; i++) {
		task[i].addEventListener('click', function(event) { 
			if (event.target.tagName === 'LI') {
    			event.target.classList.toggle("checked");
 			}
		}, false);
	}
}

function todoList(){
document.getElementById("todoInput").value
var item    = document.getElementById('todoInput').value
if(item.length >= 6 && item.length <= 42)
{
var text    = document.createTextNode(item)
var newItem = document.createElement('li')
	newItem.appendChild(text)
	document.getElementById('todoList').appendChild(newItem)
 var list = document.getElementById("todoList");
list.insertBefore(newItem, list.childNodes[0]);
}
else
{
alert("The text is in the worng length")
}
}