How to create To-Do List using jQuery?

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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!-- 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>

    chevron_right

    
    

  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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!-- 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>

    chevron_right

    
    

  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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!-- 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>

chevron_right


Output:
Before adding the tasks:

After adding the tasks:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.