A Simple To-Do List In Javascript

Introduction

 

In this article, we discuss how to create a simple To-Do List in JavaScript like this: 

 

 

Step 1

 

First, we will create a TextBox, Add and Delete Buttons and a table Like this:

<h1>To-Do List</h1>
 <input type="textbox" id="txt1" />
    <input type="button" value="Add List" onclick="addList('ToDoListTable')" />
    <input type="button" value="Delete List" onclick="deleteList('ToDoListTable')" />
     <table id="ToDoListTable" width="350px" border="1">
        </table>
Total Work pending <a id="pTotal"></a>  =

Step 2

 

Now we will write the code, by which we can dynamically add the Rows in our Table. So when we click on the Add List Button, a new row will be dynamically generated with a TextBox and a CheckBox Control. For this we will write the code on the click event of the Add Button Like this:

function addList(myTable) {

            var table = document.getElementById(myTable);
            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);


          var b=document.getElementById('txt1').value;
 var cell1 = row.insertCell(0);
            var element1 = document.createElement("input");
            element1.type = "text";
            element1.style.width="100%";
            element1.name = "txtbox[]";
            element1.value=b;
                   cell1.appendChild(element1);
 var cell2 = row.insertCell(1);
            var element2 = document.createElement("input");
            element2.type = "checkbox";
            element2.name="chkbox[]";
            cell2.appendChild(element2);
document.getElementById('txt1').value=" ";
document.getElementById('pTotal').innerHTML= rowCount + 1;
       }

Here we create two elements, a TextBox and a CheckBox and insert it into the Table cell.

 

Now look at this code:

document.getElementById('pTotal').innerHTML= rowCount + 1;

It will automatically increase the number that shows the number of pending work like this:

 

Step 3

 
Now we will write the code to delete the items in the list, in order to delete the task we will click on the CheckBox, so when we click on the CheckBox and then click on the Delete List Button the task will be deleted. For this, we will write the code in the Delete List Button:

function deleteList(myTable) {
            var table = document.getElementById(myTable);
            var rowCount = table.rows.length;

            for(var i=0; i<rowCount; i++) {
                var row = table.rows[i];
                var chkbox = row.cells[1].childNodes[0];
                if(null != chkbox && true == chkbox.checked) {
                    table.deleteRow(i);
                    rowCount--;
                    i--;
 document.getElementById('pTotal').innerHTML= rowCount;

            }
            }
        }

Output

 

 

When we click on the Delete Button the output will be: