Create a to-do list with JavaScript

The TODO list is a list that typically used to keep track of all the things we need to do in a given day, with the most crucial chores at the top and the least important items at the bottom.

We can use it to plan our everyday schedules. We have the flexibility to add new assignments to the list, as well as remove those tasks that have been completed. A TODO list can be used to complete the following four main tasks

  • Add new task

  • Delete task

  • Mark task as completed

  • Edit task

Let’s look into the following examples to get a better understanding of creating a to-do list with JavaScript.


<!DOCTYPE html>
<html lang="en">
      <input type="text" placeholder="Please Enter your Task Here.." id="txtData">
      <button onclick="todoList()">AddTaskToDo</button>
      <ul id="to_do_list"></ul>
         function todoList() {
            const myTask = document.getElementById('txtData');
            const addToDoList = document.getElementById('to_do_list');
            let originalValue = `<li> ${myTask.value} </li>`;
            myTask.value = '';
            addToDoList.insertAdjacentHTML('beforeend', originalValue);

On running the above script, the output window will pop up, displaying the input field TODO along with a button on the webpage. When the user enters the task in the field and clicks the button, it will list out all the tasks in an unordered list format.

Using querySelector() in JavaScript

When a selector or set of selectors is provided, the Document method querySelector() returns the first Element in the document that matches them. Null is given back if there are no matches.


Following is the syntax for querySelector()

element = document.querySelector(selectors);


In the following example, we are running the script using querySelector() to make a TODO list and also to remove the task that was entered in TODO.

<!DOCTYPE html>
   <body style="background-color:#EAFAF1">
      <div id="tutorial">
         <input type="text" placeholder="Enter Tasks To Complete">
         <button id="tutorial1">Add</button>
         <div id="tutorial2"></div>
         document.querySelector('#tutorial1').onclick = function(){
            if(document.querySelector('#tutorial input').value.length == 0){
               alert("Please Enter Task TODO")
            } else {
               document.querySelector('#tutorial2').innerHTML += `
               <div class="perform">
               ${document.querySelector('#tutorial input').value}
               <button class="remove">Remove Task
               <i class="far fa-trash-alt"></i>
               var current_tasks = document.querySelectorAll(".remove");
               for(var i=0; i<current_tasks.length; i++){
                  current_tasks[i].onclick = function(){

When the script gets executed, it will generate an output consisting of an input field called TODO along with a button displayed on the webpage. When the user adds the task and clicks the buttons, it displays that task in the TODO list along with a remove button.

Updated on: 21-Apr-2023

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started