TODO list

index.js

/* const listItemTemp = ('<li>' +
    '<span class="shopping-item"></span>' +
    '<div class="shopping-item-controls">' +
    '<button class="shopping-item-toggle">' +
    '<span class="button-label">check</span>' +
    '</button>' +
    '<button class="shopping-item-delete">' +
    '<span class="button-label">delete</span>' +
    '</button>' +
    '</div>' +
    '</li>'
); */


//Append to end

$(function () {
    $('button[type="submit"]').click(function () {
        const mylist = $('#shopping-list-entry').val();
        $('.shopping-list').append(`
        <li>
        <span class="shopping-item">${mylist}</span>
        <div class="shopping-item-controls">
          <button class="shopping-item-toggle">
            <span class="button-label">check</span>
          </button>
          <button class="shopping-item-delete">
            <span class="button-label">delete</span>
          </button>
        </div>
      </li>
        `)
        return false;
    })

})
//"Check" button clicked
$(function completed() {

    console.log('Selecting...')
    $(".shopping-list").on("click", ".shopping-item-toggle", function (event) {
        console.log('Event is:', event)
        const $name = $(event.currentTarget).parents('li').find('.shopping-item')
        $name.toggleClass('shopping-item__checked')
    });

})


//"Delete" button removing items

$(function () {
    $(".shopping-list").on("click", ".shopping-item-delete", function (event) {
        event.preventDefault();
        event.stopPropagation();
        const $li = $(event.currentTarget).parents('li')
        $li.remove()
        // $('.shopping-item').remove();
    });

})