JSFiddle - React, Tailwind, and code Playground

by Mahadevan Sivasubramanian

HTML

<h1>Todo list</h1>
<p>
  <input type="text" id="inItemText" />
</p>
<ul id="todoList">
  <p>
    <h1>This is first ul</h1></p>
</ul>

CSS

ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

li {
  border: 1px solid #ccc;
  background: #eee;
  color: black
}

;
.checked {
  color: red;
  text-decoration: line-through;
}

.unChecked {
  color: black;
  text-decoration: none;
}

JavaScript

/*Each item should look like this<li>	<input type="checkbox" />First work on Javascript</li>*/
/*Avoid global variable*/
/*re-usable the function*/

function updateTodo() {
  var chkid = this.id.replace("cb_", " ");
  var itemText = document.getElementById("item_" + chkid);
  /*console.log(this.checked)
  this.nextSibling.style.textDecoration = "line-through";*/
  if (this.checked) {
    this.nextSibling.className = "checked";
  } else {
    this.nextSibling.className = "unchecked";
  }
}

function addNewItem(list, itemTest) {
  totalItems++;

  var listItem = document.createElement("li");

  var checkbox = document.createElement("input");
  checkbox.type = "checkbox";
  checkbox.id = "cb_" + totalItems;
  checkbox.onclick = updateTodo;

  var span = document.createElement("span");
  span.id = "item_" + totalItems;
  span.innerText = itemTest;

  listItem.appendChild(checkbox);
  listItem.appendChild(span);

  list.appendChild(listItem);
}
var totalItems = 0;
var initemTest = document.getElementById("inItemText");
initemTest.focus();
initemTest.onkeyup = function(event) {
  //event.which -> 13 is Enter
  //only proceed if key press is enter key
  if (event.which == 13) {
    var itemTest = initemTest.value;

    if (!itemTest || itemTest == "" || itemTest == " ") {
      return false;
    }
    addNewItem(document.getElementById("todoList"), itemTest);
    initemTest.focus();
    initemTest.select();
  }


};