A simple task list maker using jQuery

I’m a chronic list maker. What better way to use my jQuery skills than to create a simple to-do list maker using jQuery.

Steps to create a simple tack list maker using jQuery
  • Create an input text field for the user to add the task.
  • Create a “ADD” button.
  • Create an empty unordered list div.
  • On button click event, get the text inside the textfield.
  • Append a new list item to the div.
  • On the click event of the item, remove the list item from the DOM. This will delete the task from the list.
Task list maker
Screenshot of the task list maker

A sampling of the code.

$(document).ready(function(){
$('#button').click(function(){
var toAdd = $('input[name=checkListItem]').val();
$('.list').append("
<div class='item'>" + toAdd + "</div>

");
});
$('.list').click(function(){
});
});
$(document).on('click', '.item', function(){
$(this).remove();
});

I hope you found this article interesting.

Let me know if you have any questions or comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Endorsed by these folks ...

Femy is an extremely efficient developer. She worked on a Site Core demo site for me and not only accomplished what I asked, but more.

Edwin Lee Vice President, Solutionset