In this tutorial, we will learn how to create a CRUD (Create, Read, Update, and Delete) project with plain JavaScript. We will not use any JavaScript frameworks instead we will use plain JavaScript, CSS, and HTML to build the My Todo List CRUD project.
Let's develop the CRUD project step-by-step (My Todo List App) using HTML, CSS, and JavaScript.
This is the live demo of what we will be building.
1.Create a HTML Page
Lets create a HTML page index.html and create a structure of the web page by taking the reference of the above gif picture.
<!DOCTYPE html>
<html>
<head>
<title>My Todo List</title>
</head>
<body>
<section class="mytodo-container">
<!-- Create Form -->
<div class="mytodo-list">
<form action="javascript:void(0);" id="CreateForm"><input type="text" id="add-task" placeholder="New Task"> <input type="submit" onclick="CreateTask()" value="Create"></form>
<!-- Update Form -->
<form action="javascript:void(0);" id="UpdateForm">
<input type="text" id="update-task"> <input type="submit" value="Update"> <a onclick="CloseInput()" id="close">✖</a></form>
<!-- Counter -->
<p id="counter"></p>
<!-- MyTodo List Table -->
<table>
<tr><th>My Todo List</th></tr>
<tbody id="mytodo-tasks"></tbody>
</table>
</div>
</section>
</body>
</html>
Note:
We have created a form with id="CreateForm" to add new task to the MyTodo list. We also created another form with id="UpdateForm" to edit task of the MyTodo list.
We have a paragraph tag with id="counter" to display the total number of tasks in the list. We will display the total count with the help of javascript.
Again we have a table with heading My Todo List. Later we will insert the rows inside the tbody html tag with the help of javascript.
2.Add CSS to the HTML Page using HTML style tag.
<style>
input[type='submit'],button,#close
{
cursor: pointer;
}
.mytodo-list
{
width:320px;
margin:100px auto;
}
.counter
{
margin: 10px 0;
}
#UpdateForm
{
display:none;
}
</style>
Note:
With CSS I have aligned the div element to the center. I also made the form (id="UpdateForm") display:none. So, that I can add a feature in such a way that when we click on the Update Button on the MyToDo list then the form(id="UpdateForm") is visible. This feature will be added with the help of javascript.
3.Add JavaScipt to the HTML Page using HTML script tag.
<script>
var mytodo_list=["Do Exercise","Take Bath","Have Breakfast"];
/*CREATE*/
function CreateTask()
{
var task=document.getElementById("add-task").value;
mytodo_list.push(task);
ReadAllTask();
}
/*READ*/
function ReadAllTask()
{
var data='';
for(var i=0;i<mytodo_list.length;i++)
{
data+='<tr>';
data+='<td>' + mytodo_list[i] + '</td>';
data+='<td><button onclick=UpdateTask(' +i+ ')>Update</button></td>';
data+='<td><button onclick=DeleteTask('+i+')>Delete</button></td>';
data+='</tr>';
}
/*counter*/
document.getElementById("counter").innerHTML=mytodo_list.length +" Task";
document.getElementById("mytodo-tasks").innerHTML=data;
}
ReadAllTask();
/*UPDATE*/
function UpdateTask(item)
{
document.getElementById("UpdateForm").style.display='block';
document.getElementById("update-task").value=mytodo_list[item];
document.getElementById("UpdateForm").onsubmit=function()
{
var task=document.getElementById("update-task").value;
mytodo_list.splice(item,1,task.trim());
ReadAllTask();
CloseInput();
}
}
/*DELETE*/
function DeleteTask(item)
{
mytodo_list.splice(item,1);
ReadAllTask();
}
function CloseInput()
{
document.getElementById("UpdateForm").style.display='none';
}
</script>
Note:
Here I define mytodo_list as global variable with an array which consist of tasks.
Now let us discuss the CRUD(CREATE READ UPDATE DELETE) operations used in this application.
CREATE
Create is something like adding a new entry to our array.
CreateTask function adds new task to the array mytodo_list
READ
Read is like reading the entire content of the array.
ReadAllTask function will read all the task of array with the help of for loop and display it in html table by populating the table with rows. This function also helps to display the counter by calculating the length of the array.
UPDATE
Update is like updating the existing content of the array with new value.
UpdateTask function is used to update the existing tasks of the array with the splice method. We can update the task by clicking on the update button which display the form(id="UpdateForm") and editing the content. The form(id="UpdateForm") is displayed by changing the style property of the form(id="UpdateForm") to "block" using javascript.
DELETE
Delete is like deleting the existing content of the array.
DeleteTask function is used to delete the existing task from the array with the help of splice method.
In the addition to all the CRUD operation there is another function added that is CloseInput function which helps to hide the form (id="UpdateForm") after updating or when the close button is clicked.
Wrap Up !!
I hope you enjoyed this article. Thank you for reading. Please share it with your network. Don’t forget to leave your comments below.
Top comments (0)