Yes, you heard it, a simple doto list using Jquery. We all know the famous hello world applications when we’re first learning a language. Now, it’s the todo app. In this post I am going to create a simple web todo application using HTML5, CSS3 and Javascript(jQuery).
You can develop this todo application in any text editor and debug in any browser. I’m using Plunker to code this due to its simplicity. You can follow along with using this Plunker demo link
Todo list Using Jquery – Project Setup
First things first, we need to set up our project. Let’s add a new index.html file to our plunker project as shown below.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link data-require="bootstrap@3.3.6" data-semver="4.1.3" rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" /> <script data-require="bootstrap@3.3.6" data-semver="4.1.3" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <link rel="stylesheet" href="style.css" /> <script data-require="jquery" data-semver="3.2.1" src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script> <script src="script.js"></script> </head> <body> <div class="col-md-12"> <h1>Simple Todo Demo!</h1> <p>Click on row to delete newly added entry.</p> <div data-role="content"> <ul class="list-group" id="taskListSection"> <li class="list-group-item active">Todos</li> <li class="list-group-item ">1. Example of Existing task</li> <li class="list-group-item ">2. Example of Existing task</li> </ul> <br /> <fieldset class="ui-grid-a"> <div class="ui-block-a"> <textarea placeholder="Enter task" id="taskInputText" cols="50" maxlength="128"></textarea> </div> <div class="ui-block-b"> <input type="button" class="btn btn-success" value="Submit" id="taskBtn" /> </div> </fieldset> </div> </div> </body> </html>
Nothing too fancy in that html code. We have a heading and paragraph to let user know to click newly created task. Next is an unordered list group from bootstrap 4 showing 2 items to start with. Think of those two items as existing data from a database. Next is a simple textarea to allow user to type new task entry to add to the list. Last, we have a button which will fire the add operation when user click on it.
Add script to handle add and delete tasks
// Add your javascript here $(function(){ $("h1").animate({ "margin-left": "100px" }, "slow"); $('#taskBtn').click(function() { var newTask = $('#taskInputText').val(); if(newTask !== '') { var count = $("#taskListSection").children().length; $('#taskListSection').append('<li class="list-group-item deletetask bg-success">' + count + '. '+ newTask + '</li>'); $('#taskInputText').val(''); deleteTasks(); setTimeout(function(){ $('#taskListSection li.bg-success').removeClass('bg-success'); },1000); } else { alert('Come on, you\'re better than that'); } }); }); function deleteTasks(){ $('.deletetask').click(function(){ $(this).remove(); }); }
Again, a simple javascript file containing animation for the heading of the page upon loading. Then, I have a click event listener for when user wants to add a new task to the list. A one second delay is added after the new entry is added to the list and row is highlighted. Then, it is unhighlited after the one second is expired.
A delete function is in there as well to remove the item from the list. Very basic.