Open In App

How to create To-Do List using jQuery?

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:



Last Updated : 23 Jan, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads