/*
$(document).ready(function(){
  $("button").click(function(){
    $("shopping-list").toggleClass("li");
  });
});

$(document).ready(function(){
  $("shopping-item-toggle").click(function(){
    $(this).li("span").css("text-decoration", "line-through");
  });
});

$(document).ready(function(){
  $("shopping-item-delete").click(function(){
    $(this).removeClass("span").css("shopping-item");
  });
});
*/

// target the submit button and
// capture the value then call addItem()

  $( "#js-shopping-list-form" ).submit(( e ) => {
    e.preventDefault();
    let val = $('.js-shopping-list-entry').val();
    console.log(val);
    addItem(val);
  });


// render the new item
function addItem(newItem) {
  console.log('success');
  $('.shopping-list').append(`
    <li>
      <span class="shopping-item">${newItem}</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>
  `);
}

$('.shopping-list').on('click', '.shopping-item-toggle', function(e) {
  $(this).closest('li').find('.shopping-item').toggleClass('shopping-item__checked');
})

  $('.shopping-list').on('click', '.shopping-item-delete', function (e) {
    $(this).closest('li').remove();
  })