How to create To-Do List using jQuery?
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:
<!-- Initialize the layout --><!DOCTYPE html><htmllang="en"><head><metacharset="utf-8"/><!-- Required CDN's --><linkrel="stylesheet"href=<scriptsrc=</script><scriptsrc=</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><divclass="foot"><divclass="row"><divclass="col-sm-1"> </div><divclass="col-sm-10"><!-- Input for tasks --><divclass="input-group"><inputtype="text"class="form-control"placeholder="Add Task"id="text"><divclass="input-group-btn"><buttonclass="btn btn-success"><iclass="glyphicon glyphicon-plus"></i></button></div></div><br><br></div></div></div><!-- Rest of the screen used for Adding Tasks --><br><h2class="text text-success">My Tasks:</h2><br><divclass="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><htmllang="en"><head><metacharset="utf-8"/><linkrel="stylesheet"href=<scriptsrc=</script><scriptsrc=</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><divclass="foot"><divclass="row"><divclass="col-sm-1"> </div><divclass="col-sm-10"><!-- Input for tasks --><divclass="input-group"><inputtype="text"class="form-control"placeholder="Add Task"id="text"><divclass="input-group-btn"><buttonclass="btn btn-success"><iclass="glyphicon glyphicon-plus"></i></button></div></div><br><br></div></div></div><br><h2class="text text-success">My Tasks:</h2><br><divclass="container"></div></center><script>$(document).ready(function() {$('.btn-success').click(function() {// If something is writtenif ($('#text').val().length != 0) {//Store previous datavar x = $('.container').html();// Add typed text in alert containervar y =`<divclass="alert alert-success alert-dismissible fade in"><ahref="#"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.
- 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:
Please Login to comment...