What We’re Going to Build
In this article, I am going to describe steps to develop a simple javascript TO-DO list application which allows user to add tasks and delete tasks when they are completed.
These steps aim to cover the entire source code of the application. However, before diving in, I need to clarify a few libraries I have used to develop the application.
jQuery
jQuery is small, cross browser, feature-rich javascript library which easily allows developer to select HTML elements, traversal, AJAX & DOM manipulation. You can learn more about jQuery by following below link:
JQuery - API
Bootstrap
Bootstrap is a free and open-source front-end library for designing responsive websites and web applications.
Step 1. Design
This is a simple TO-DO list application and as you can see the user interface has four functions.
- Add To-Do item
- List To-Do item
- Delete To-Do item
- Validate Task Name Blank
We are storing TO-DO item in memory i.e. in DOM, In real world scenario we will post the items to server and retrieve the list of TO-DO items from server.
<ul id="myUL" class="nav flex-column nav-tabs">
<li class="nav-link">New Task</li>
<li class="nav-link">New Task1</li>
<li class="nav-link">New Task2</li>
<li class="nav-link">New Task3</li>
</ul>
Above HTML declares four TO-DO items
Building UI & attaching events to the DOM elements
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery - TODO List Application</title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/font-awesome.min.css" rel="stylesheet" />
<script src="Scripts/jquery-3.0.0.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/popper.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<div class="card" style="width:400px">
<img class="card-img-top" src="img/Heading.png" alt="jQuery Tutorial">
<div class="card-body">
<h4 class="card-title">jQuery To Do List</h4>
<div class="form-row align-items-center">
<div class="col-auto">
<input type="text" class="form-control mb-2" id="myInput" placeholder="Task Name">
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary mb-2 addBtn">Submit</button>
</div>
</div>
<ul id="myUL" class="nav flex-column nav-tabs">
<li class="nav-link">New Task</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The above HTML adds header image to the page, also declares a bootstrap card.
A bootstrap card is nothing but a container with heading image and text content.
We will add a textbox and button to the page so that it allow us to add TO-DO list items.
<div class="form-row align-items-center">
<div class="col-auto">
<input type="text" class="form-control mb-2" id="myInput" placeholder="Task Name">
</div>
<div class="col-auto">
<button type="submit" onclick="newElement()" class="btn btn-primary mb-2 addBtn">Submit</button>
</div>
</div>
Above HTML produces following output:
Next we declare a HTML ul tag to hold and show our TO-DO list items
<ul id="myUL" class="nav flex-column nav-tabs">
<li class="nav-link">New Task</li>
</ul>
On click of the Submit button, using jQuery DOM manipulation new items will be added to the above list.
In the script first we iterate over the available items in DOM.
To iterate we use the jQuery each function.
var myNodelist = $("li");
myNodelist.each(function (i, elm) {
var span = $("<span></span>");
span.addClass("fa");
span.addClass("fa-times");
span.addClass("pull-right");
span.addClass("close");
span.on("click", function () {
var div = $(this).parents("li");
div.remove();
});
span.appendTo($(elm));
});
The above code adds a SPAN tag inside LI tag, adds right align styling to it, adds DELETE icon to it using font-awesome class “fa-times”
On click of the span, it’s parent LI item will be removed from DOM using the jQuery “remove()” function call.
On click of the submit button “newElement” function will be executed.
function newElement() {
var li = $("<li></li>");
li.addClass("nav-link")
var inputValue = $("#myInput").val();
li.append($("<span>" + inputValue + "</span>"));
if (inputValue === '') {
alert("Please enter task name!");
} else {
li.appendTo($("#myUL"));
}
$("#myInput").val("");
var span = $("<span></span>");
span.addClass("fa");
span.addClass("fa-times");
span.addClass("pull-right");
span.addClass("close");
span.on("click", function () {
var div = $(this).parents("li");
div.remove();
});
span.appendTo(li);
}
Above function adds LI element to the existing TO-DO items list, assigns “nav-link” class to it and then sets its text to value entered by user in the textbox.
This function validates the user input for blank values.
var inputValue = $("#myInput").val();
if (inputValue === '') {
alert("Please enter task name!");
}
Also, this function adds a delete button which allows to dynamically remove the parent LI element.
span.on("click", function () {
var div = $(this).parents("li");
div.remove();
});
Conclusion
By providing these steps I am suggesting that you can learn programming JavaScript by following the steps provided in this article.
If you think I’ve missed anything major (like maybe better javascript function), let me know in the comments.
