How to create To-Do List using jQuery? Last Updated : 23 Jan, 2020 Summarize Comments Improve Suggest changes Share Like Article Like Report This article focuses on developing a To-do List with some basic features like: Add Task Delete Task Cross the completed tasks Prerequisites: Basic knowledge of Front-end development using HTML, CSS, JS, jQuery & Bootstrap-3. Steps: Initialize the layout: - Add a input text-box with a button to add the tasks to the main list. - We will set the container containing the above as fixed at the button using some CSS position fixed property. - Now we will add the container where the tasks will be added. Below is the code along-with explanation for the above: html <!-- Initialize the layout --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <!-- Required CDN's --> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"> </script> <script src="https://code.jquery.com/jquery-3.4.1.js" integrity= "sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"> </script> <style> .container { width: 90%; height: auto; } .foot { position: fixed; left: 10%; bottom: 0; width: 80%; text-align: center; } </style> </head> <body> <center> <div class="foot"> <div class="row"> <div class="col-sm-1"> </div> <div class="col-sm-10"> <!-- Input for tasks --> <div class="input-group"> <input type="text" class="form-control" placeholder="Add Task" id="text"> <div class="input-group-btn"> <button class="btn btn-success"> <i class="glyphicon glyphicon-plus"> </i></button> </div> </div> <br> <br> </div> </div> </div> <!-- Rest of the screen used for Adding Tasks --> <br> <h2 class="text text-success">My Tasks:</h2> <br> <div class="container"> <!-- For adding tasks to the list --> </div> </center> </body> </html> jQuery script to add tasks: Now we will add the jQuery code so that we can add tasks in our to-do list. Here we have used Bootstrap alert class to add task containers. Clicking on the cross-button on the right of the task will remove the task permanently. ( alert has attribute for that otherwise we would have to implement script for delete as well ). Below is the code along-with explanation for the above: html <!-- Adding tasks in the list --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"> </script> <script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script> <style> .container { width: 80%; height: auto; } .foot { position: fixed; left: 10%; bottom: 0; width: 80%; text-align: center; } </style> </head> <body> <center> <div class="foot"> <div class="row"> <div class="col-sm-1"> </div> <div class="col-sm-10"> <!-- Input for tasks --> <div class="input-group"> <input type="text" class="form-control" placeholder="Add Task" id="text"> <div class="input-group-btn"> <button class="btn btn-success"> <i class="glyphicon glyphicon-plus"> </i></button> </div> </div> <br> <br> </div> </div> </div> <br> <h2 class="text text-success">My Tasks:</h2> <br> <div class="container"> </div> </center> <script> $(document).ready(function() { $('.btn-success').click(function() { // If something is written if ($('#text').val().length != 0) { //Store previous data var x = $('.container').html(); // Add typed text in alert container var y = `<div class="alert alert-success alert-dismissible fade in"> <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a> ` + $('#text').val() + `</div>`; //Update $('.container').html(y + x); //Clear after addition $('#text').val(""); } else alert("Enter some Text!"); }); }); </script> </body> </html> Script to indicate completed Tasks: Finally, we will be adding the script to implement the feature that whenever we will click on the task, it will be crossed and if done already, will be restored back. For crossing the task, we will use text-decoration-line : line-through property in CSS. Final Solution: html <!-- To-Do List implemented using jQuery --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"> </script> <script src="https://code.jquery.com/jquery-3.4.1.js" integrity= "sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script> <style> .container { width: 80%; height: auto; } .foot { position: fixed; left: 10%; bottom: 0; width: 80%; text-align: center; } </style> </head> <body> <center> <div class="foot"> <div class="row"> <div class="col-sm-1"> </div> <div class="col-sm-10"> <!-- Input for tasks --> <div class="input-group"> <input type="text" class="form-control" placeholder="Add Task" id="text"> <div class="input-group-btn"> <button class="btn btn-success"> <i class="glyphicon glyphicon-plus"> </i></button> </div> </div> <br> <br> </div> </div> </div> <br> <h2 class="text text-success">My Tasks:</h2> <br> <div class="container"> </div> </center> <script> $(document).ready(function() { $('.btn-success').click(function() { if ($('#text').val().length != 0) { var x = $('.container').html(); var y = `<div class="alert alert-success alert-dismissible fade in"> <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a> ` + $('#text').val() + `</div>`; $('.container').html(y + x); $('#text').val(""); } else alert("Enter some Text!"); }); // When Task is clicked $(document).on('click', '.alert', function() { if ($(this).css('text-decoration-line') == "none") $(this).css('text-decoration-line', 'line-through'); else $(this).css('text-decoration-line', 'none'); }); }); </script> </body> </html> Output: Before adding the tasks: After adding the tasks: Comment More infoAdvertise with us D devproductify Follow Improve Article Tags : JQuery jQuery-Misc Similar Reads jQuery Tutorial jQuery is a lightweight JavaScript library that simplifies the HTML DOM manipulating, event handling, and creating dynamic web experiences. The main purpose of jQuery is to simplify the usage of JavaScript on websites. jQuery achieves this by providing concise, single-line methods for complex JavaSc 8 min read What is Ajax ? Imagine browsing a website and being able to submit a form, load new content, or update information without having to refresh the entire page. That's the magic of AJAX. Asynchronous JavaScript and XML (AJAX) is a web development technique that allows web pages to communicate with a web server asynch 5 min read JQuery Set the Value of an Input Text Field Set the value of an input text field in jQuery is useful while working with forms. It is used to add new value to the input text field. In jQuery, there are various methods to set the value of input text fields, these are - val(), prop(), and attr(). These method offers unique capabilities for setti 3 min read How to change Selected Value of a Drop-Down List using jQuery? We will change the default selected value of the dropdown using jQuery. In an HTML select tag, the default selected value is the value given to the first option tag. With jQuery, it is easy to change the selected value from a drop-down list. Below are the methods to change the selected value of a dr 3 min read Form Validation using jQuery Form validation is a process of confirming the relevant information entered by the user in the input field. In this article, we will be validating a simple form that consists of a username, password, and a confirmed password using jQuery.Below are the approaches for validation of form using jQuery:T 5 min read jQuery Introduction jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM). jQuery simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax interactions, and cross-browser Java 7 min read jQuery UI Date Picker A date-picker of jQuery UI is used to provide a calendar to the user to select the date from a Calendar. This date picker is usually connected to a text box so user selection of date from the calendar can be transferred to the textbox. You need to add the below CDN to your HTML document to use it. C 3 min read jQuery ajax() Method The jQuery ajax() method is used to perform asynchronous HTTP requests, allowing you to load data from a server without reloading the webpage. It provides a flexible way to interact with remote servers using GET, POST, or other HTTP methods, supporting various data formats.Syntax:$.ajax({name:value, 4 min read jQuery Cheat Sheet – A Basic Guide to jQuery What is jQuery?jQuery is an open-source, feature-rich JavaScript library, designed to simplify the HTML document traversal and manipulation, event handling, animation, and Ajax with an easy-to-use API that supports the multiple browsers. It makes the easy interaction between the HTML & CSS docum 15+ min read How to Reset an <input type="file"> in JavaScript or jQuery Sometimes, you may want to clear a file that has been selected by the user in an <input type="file"> field, without having to reload the entire page. This can be useful if the user wants to reselect a file or if you need to reset a form.There are two main ways to reset a file input in JavaScri 2 min read Like