Creating a Shopping List With jQuery

This shopping list project is an example of creating a basic todo list. I used materialpalette to pick out the color combinations I included and the process involved appending and removing nodes in the app for the list.

I was creating the list items dynamically and I created variables to hold the string for the three types of button; to delete the item, to mark the item as acquired, and to undo that mark.

1
2
3

  var del_btn = "<button class='fa fa-trash-o'></button>";
  var check_btn = "<button class='fa fa-check-circle-o'></button>";
  var times_btn = "<button class='fa fa-times'></button>";

The next part of the script was the submit event handler appends a new item to the list unordered list.

1
2
3
4
5

$( "#item" ).submit(function( event ) {
  var x = $("input").val();
  $('.list').append("<li>"+x+del_btn+check_btn+"</li>");
  event.preventDefault();
});

The next three statements were created using the on event handler and attaching them to the three variable buttons created. I used on instead of click because the latter would only attach the click function if the button exists when the page is first loaded.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

$('.list').on('click', '.fa-trash-o', function(){
  $(this).parent().remove();
});

$('.list').on('click', '.fa-check-circle-o', function(){
  var item = $(this).parent().text();
  $(this).parent().remove();
  $('.complete-list').append("<li class='complete'>"+item+del_btn+times_btn+"</li>");
});

$('.complete-list').on('click', '.fa-times', function(){
  var item = $(this).parent().text();
  $(this).parent().remove();
  $('.list').append("<li>"+item+del_btn+check_btn+"</li>");
});

The last on click handler removes the whole list and basically restarts the whole app.

1
2
3

$('.complete-list').on('click', '.fa-trash-o', function(){
  $(this).parent().remove();
});

Comments