JSFiddle - React, Tailwind, and code Playground

by khushboo097

HTML

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
 </head>
 <body>
     <h1>To Do List:</h1>
     <ul id="todolist">
        </ul>
     <form action="" id="addToDo" name="addToDo">
        <input type="text" id="theToDo" 
        name="addToDo" 
        placeholder="Add to the list here">
        <button type="submit">Submit</button>
      </form>
 </body>
</html>

JavaScript

const form = document.querySelector('#addToDo');
const input = document.querySelector('#theToDo');
const todolist = document.querySelector('#todolist');

form.addEventListener('submit', function(e) {
  e.preventDefault();
  const newToDo = document.createElement('li');
  const removeBtn = document.createElement('button');
  const completeBtn = document.createElement('button');
  newToDo.id = 'new_todo';
  newToDo.innerText = input.value;
  removeBtn.innerText = 'Click to Remove';
  completeBtn.innerText = 'Click if Completed';
  todolist.append(newToDo);
  todolist.appendChild(completeBtn);
  todolist.appendChild(removeBtn);
  input.value = '';

  completeBtn.addEventListener("click", function(e) {
    var todo = document.querySelector('#new_todo');
    var todoText = '<del>' + todo.innerText + '</del>';
    todo.innerHTML = todoText;
  })

  removeBtn.addEventListener("click", function(e) {
    
  })
})