JSFiddle - React, Tailwind, and code Playground

by Chintan Soni

HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">

</head>

<h1 align="center"> To-Do List </h1>

<body>
  <div id="outerDiv">
    <form onsubmit="return addItem('list', this.inputItem)">
      <input type="text" id="inputItem" onfocus="this.value=''" onselect="this.value=''" placeholder="Enter a Task">
      <input id="submit" type="submit">
    </form>
  </div>

  <div id="innerDiv">
    <ul id="list"></ul>
  </div>

</body>

</html>

JavaScript

var inputItem = document.getElementById("inputItem");
inputItem.focus();

function addItem(list, input) {
  var inputItem = this.inputItem;
  var list = document.getElementById(list);
  var listItem = document.createElement("li");

  var deleteButton = document.createElement("button");
  deleteButton.innerText = "X";
  deleteButton.addEventListener("click", function() {
    this.parentElement.style.display = 'none';
  });

  var checkBox = document.createElement("input");
  checkBox.id = "check";
  checkBox.type = 'checkbox';
  checkBox.addEventListener('change', function() {
    labelText.style.textDecoration = checkBox.checked ? 'line-through' : 'none';
  });

  var label = document.createElement("label");
  var labelText = document.createElement("span");
  labelText.innerText = input.value;

  label.appendChild(checkBox);
  label.appendChild(labelText);

  listItem.appendChild(label);
  listItem.appendChild(deleteButton);

  list.appendChild(listItem);
  inputItem.focus();
  inputItem.select();
	var html = list.innerHTML;
  localStorage.setItem("page", html);
  return false;

}