JSFiddle - React, Tailwind, and code Playground

by Rassisland

HTML

<title> To Do List</title>

<body>

  <h1> To Do List</h1>

  <p>
    <input type="text" id="inItemText">
    <button id="btnAdd">Add</button>
  </p>


  <ul id="todoList"></ul>

 

</body>

CSS

<style> 
body {
  font: sans-serif;
  color: #00b33c;
  background-color: #ffffff;
}

p {
  font: sans-serif;
  width: auto;
}

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

li {
  border: 2px solid #fff;
  background: #e5ffff;
  padding: 10px 10px;
  color: #000000;
  width: 500px;
}

li span {
  padding-left: 10px;
  padding-right: 200px;
}

.checked {
  text-decoration: line-through;
  font-weight: bold;
  color: #ff0000;
}

li span2 {
  position: relative;
  padding: 0 5px 0 5px;
  margin: 10px;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid #000000;
  background-color: #ffffff;
}

li span3 {
  font-size: 12px;
  padding: 0 5px 0 5px;
  position: relative;
  cursor: pointer;
  border: 1px solid #000000;
  background-color: #ffffff;
}


}
</style>

JavaScript

//CheckBox Feature
function updateStatus() {
  var cbId = this.id.replace("cb_", "");
  var itemText = document.getElementById("item_" + cbId);

  if (this.checked) {
    itemText.className = "checked";
  } else {
    itemText.className = "";
  }
}

//Delete Button
function deleteItem() {
  this.parentNode.parentNode.removeChild(this.parentNode);
  inItemText.focus();
  inItemText.select();
}

//Edit Button
function editItem(e) {
  var newText = prompt("What would you like to change this to?");
  if (newText !== null) {
    this.previousElementSibling.previousElementSibling.innerHTML = newText;
  } else {
    alert("You must add something");
  }


}

//Add new item to To-Do List
function addNewItem(list, itemText) {
  totalItems++;

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

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

  var span = document.createElement("span");
  span.id = "item_" + totalItems;
  span.textContent = itemText;


  var spanDelete = document.createElement("span2");
  spanDelete.setAttribute("id", listItem.id);
  spanDelete.setAttribute("class", "delete");
  spanDelete.textContent = "DELETE";
  spanDelete.onclick = deleteItem;


  var spanEdit = document.createElement("span3")
  spanEdit.id = "editId_" + totalItems;
  spanEdit.textContent = "EDIT";
  spanEdit.onclick = editItem;

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


  list.appendChild(listItem);
}
//Add item to list with ENTER KEY
var totalItems = 0;
var inItemText = document.getElementById("inItemText");
inItemText.focus();
inItemText.onkeyup = function(event) {
  if (event.which === 13) {
    var itemText = inItemText.value;

    if (!itemText || itemText === "" || itemText === " ") {
      return false;
    }

    addNewItem(document.getElementById("todoList"), itemText);

   ...