JSFiddle - React, Tailwind, and code Playground

by bornasepic

HTML

<h2 class="heading">My to do list</h2>
    <input type="text" id="thingstodo" name="thingtodo" placeholder="A thing to be done">
    <input type="submit" id="submit" name="submittext" value="Submit">
    <h4>Things to do:</h4>
    <ul class="listofttd"></ul>

CSS

body{
  width: 40%;
  margin: auto;
  font-family: sans-serif;
}
.heading{
  margin: 30px 0 20px 0;
}
.todolist{
  margin-top: 20px;
}
#thingstodo{
  width: 80%;
  padding: 1% 1%;
}
#submit{
  width: 15%;
  margin-left: 2%;
  float: right;
  padding: 1% 0 1% 0;
}
.listofttd{
  list-style: none;
  text-decoration: none;
}
.doneinput{
  margin-right: 20px;
}
.listofttd li{
  margin-bottom: 10px;
}
h4{
  margin-bottom: 15px;
}

JavaScript

function ready(fn) {
  if (document.attachEvent ? document.readyState === 'complete' : document.readyState !== 'loading'){
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}
ready(function() {
  var submit = document.querySelector('#submit')
  submit.addEventListener('click', addThingToDo);
  var result = document.querySelector('.listofttd');
  var listitem = [];
function addThingToDo() {
  var thingtodo = document.querySelector('#thingstodo').value;
  listitem.push(thingtodo);
  clearinput ();
  displaylist();
}
function clearinput() {
  document.querySelector('#thingstodo').value = "";
}
function displaylist() {
  var text = "";
  var i;
  for (var i = 0; i < listitem.length; i++) {
    text += "<li>" + listitem[i] + "</li>";
  }
  result.innerHTML = text;
}



});