How to create To-Do List using jQuery? - GeeksforGeeks

23 Jan, 2020
This article focuses on developing a To-do List with some basic features like:
Add TaskDelete TaskCross the completed tasks
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:<!-- 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:<!-- 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.
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="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>
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="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:<!-- 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>
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="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:
<!-- 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:
jQuery-Misc
JQuery
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Form validation using jQuery
How to Dynamically Add/Remove Table Rows using jQuery ?
Scroll to the top of the page using JavaScript/jQuery
jQuery | children() with Examples
How to Show and Hide div elements using radio buttons?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?