Open In App

How to create To-Do List using jQuery?

Last Updated : 23 Jan, 2020
Improve
Improve
Like Article
Like
Save
Share
Report

This article focuses on developing a To-do List with some basic features like:

  1. Add Task
  2. Delete Task
  3. Cross the completed tasks

Prerequisites:
Basic knowledge of Front-end development using HTML, CSS, JS, jQuery & Bootstrap-3.

Steps:

  1. 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:




    <!-- Initialize the layout -->
    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <meta charset="utf-8" />
        <!-- Required CDN's -->
        <link rel="stylesheet"
              href=
        <script src=
      </script>
        <script src=
      </script>
                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>

    
    

  2. 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:




    <!-- Adding tasks in the list  -->
    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet"
              href=
        <script src=
      </script>
        <script src=
      </script>
                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>

    
    

  3. 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:




<!-- To-Do List implemented using jQuery -->
<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet"
          href=
    <script src=
  </script>
    <script src=
  </script>
            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:



Similar Reads

How to add a list elements within an unordered list element using jQuery ?
Here in this article, we will see that how we can add a list to the Unordered List using jQuery. So the function which we had used to append the items in the list are - &lt;script&gt; $(document).ready(function() { $('.btn').click(function(){ var content = $('#addList').val(); var fixingContent='&lt;li&gt;'+content+'&lt;/li&gt;'; $('.List').append(
1 min read
How to append a jQuery object to all paragraphs using jQuery ?
In this article, we will see how to append a jQuery object to all paragraphs using jQuery. Append means we add something to an existing element. The object is used to define a container for an external resource like a page, a picture, a media player, or a plug-in application. Used Methods: ready() Method: This method is used to specify a function t
2 min read
How to insert a jQuery object after all paragraphs using jQuery ?
The task is to insert a jQuery object after all the paragraphs using jQuery. Approach: Create DOM element or jQuery object using &lt;span&gt; tag.Create a paragraph using &lt;p&gt; tag.Create a button using button tag after clicking on which the object will be inserted after paragraph.Write a script that will call a function jQuery.after() which is
1 min read
How to remove close button from jQuery UI dialog using jQuery ?
In this article, we will learn how to remove the close button on the jQuery UI dialog using JavaScript, This can be achieved using the hide() method. jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. A dialog box is a temporary window. An application creates a dial
2 min read
How to create a Fieldcontain mini sized using jQuery Mobile ?
jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be creating a Fieldcontain mini sized using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. &lt;link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.4.5/jq
1 min read
How to Create a Flashing Text Effect using jQuery ?
In this article, we are going to create a flashing text using jQuery. It is basically, a text which is visible then it goes invisible, and again it comes back to its original visibility and this process is continued repeatedly, then it is called flashing text. With jQuery, it is very simple to create blinking or flashing text. There are some built-
2 min read
How to create slide left and right toggle effect using jQuery?
The task here is to create a slide left and right toggle effect in the JQuery, you can use the jQuery animate() method. .animate() method: It is used to change the CSS property to create the animated effect for the selected element. Syntax: (selector).animate({styles}, para1, para2, para3); Approach: Actual Box width is stored in the variable whose
3 min read
How to create Disable flip toggle switch using jQuery Mobile ?
jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be making Disable flip toggle switch using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.
1 min read
How to create hidden form element on the fly using jQuery ?
JQuery is the library that makes the use of JavaScript easy. Inserting the &lt;input type='hidden'&gt; can also be done using jQuery. The append() and appendTo() inbuilt function can be used to add the hidden form element but they are not only limited to the &lt;input type='hidden'&gt; but we can also add other html elements. Note: They both perfor
2 min read
How to create a CSS rule or class at runtime using jQuery ?
It's a common practice to write a CSS file for our HTML. Those are called static CSS. When we want to create our Cascading Style Sheet rule at runtime, we need jQuery. The jQuery enables us to apply styles to our HTML dynamically. The CSS rules once written can be stored in a variable and used multiple times wherever needed. We use jQuery's css("ar
2 min read