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 an “ADD” button.
  • Create an empty unordered list div.
  • On button click event, get the text inside the text field.
  • 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.

var toAdd = $('input[name=checkListItem]').val();
<div class='item'>" + toAdd + "</div>

$(document).on('click', '.item', function(){

I hope you found this article interesting.

Share it with a friend: