JSFiddle - React, Tailwind, and code Playground

by ttquang1063750

HTML

<input type="text" id="new-task">
<button>Add</button>
<ul id="to-do"></ul>
<ul id="finished"></ul>

JavaScript

var taskInput = document.getElementById("new-task");

var addBtn = document.getElementsByTagName("button")[0];

var toDo = document.getElementById("to-do");

var done = document.getElementById("finished");




var newElement = function(taskString) {

  var label = document.createElement("label");
  var editInput = document.createElement("input");
  var editBtn = document.createElement("button");
  var finishBtn = document.createElement("button");
  var deleteBtn = document.createElement("button");
  
 
    var listItem = document.createElement("li");
  

  editInput.type = "text";
  
  editBtn.innerText = "Edit";
  editBtn.className = "edit";

  finishBtn.innerText = "Done";
  finishBtn.className = "finish";
 
  deleteBtn.innerText = "Delete";
  deleteBtn.className = "delete";
  
  label.innerText = taskString;

  listItem.appendChild(label);
  listItem.appendChild(editInput);
  listItem.appendChild(editBtn);
  listItem.appendChild(finishBtn);
  listItem.appendChild(deleteBtn);

  return listItem;
}


var editTask = function() {
 
  var listItem = this.parentNode;
  var editInput = listItem.querySelector("input[type=text]")
  var label = listItem.querySelector("label");
  
 
  var containsClass = listItem.classList.contains("editMode");
  if(containsClass) {

    label.innerText = editInput.value;
  } else {

    editInput.value = label.innerText;
  }

  listItem.classList.toggle("editMode");
 
}


var newTask = function() {
  var listItem = newElement(taskInput.value);
  toDo.appendChild(listItem);
  bindTaskEvents(listItem, finishedTask);  
  taskInput.value = "";   
}




var finishTask = function() {
  var listItem = this.parentNode;
  var ul = listItem.parentNode;
}


var deleteTask = function() {
  var listItem = this.parentNode;
  var ul = listItem.parentNode;
  

  ul.removeChild(listItem);
}

var finishedTask = function() {
  var listItem = this.parentNode;
  done.appendChild(listItem);
  bindTaskEvents(listItem, notDone);
}


var notDone = function() {
...