m4-c6-assignment-shopping-list-render-list

m4-c6-assignment-shopping-list-render-list.js

****************************************************************************************************
// Function stub/pseudocode for add items user story
****************************************************************************************************
  
const addItemToShoppingList = function (newItemName) {

  // Create object for new item & push to store database
  // Generate ID with cuid()
  store.items.push({id: cuid(), name: itemName, checked:false})
  
}

const handleNewItemSubmit = function () {
  
  // Using event delagation, listen for 'submit' event on shopping list form
  $('#js-shopping-list-form').submit(function (event) {
  
    // Prevent default behavior (i.e., go to a different page) by using event.preventDefault()
    event.preventDefault();
    
    // Retrieve new item name
    const newItemName = $('.js-shopping-list-entry').val();
    
    // Empty input field after submission
    $('.js-shopping-list-entry').val('');
    
    // Call function to create new item object and add to store database
    addItemToShoppingList(newItemName);
    
    // Render page with modified database
    render();
  });
};

****************************************************************************************************
// Function stub/pseudocode for check/uncheck items user story
****************************************************************************************************
  
const toggleCheckedForListItem = function (id) {
  
  // Find ID in store database and toggle checked property of matched item
  const foundItem = store.items.find(item => item.id === id);
  foundItem.checked = !foundItem.checked;
  
};

const handleItemCheckClicked = function () {
  
  // Using event delagation, listen for 'click' event on target item check button
  $('.js-shopping-list').on('click', '.js-item-toggle', event => {
  
    // Call function to retrieve ID attribute
    const id = getItemIdFromElement(event.currentTarget);
    
    // Call function to toggle checked property
    toggleCheckedForListItem(id);
    
    // Render page with modified database
    render();
  });
};

****************************************************************************************************
// Function stub/pseudocode for delete items user story
****************************************************************************************************

const deleteListItem = function (id) {

  // Retrieve index of item to be deleted
  const index = store.items.findIndex(item => item.id === id);
  
  // Remove item from database
  store.items.splice(index, 1);
};

const handleDeleteItemClicked = function () {
  
  // Using event delagation, listen for 'click' event on target item delete button
  $('.js-shopping-list').on('click', '.js-item-delete', event => {
  
    // Call function to retrieve ID attribute
    const id = getItemIdFromElement(event.currentTarget);
    
    // Call function to delete item
    deleteListItem(id);
    
    // Render page with modified database
    render();
    
  });
};