From 75970cc5bfd5d0a34514c3365f182efd89dfccaa Mon Sep 17 00:00:00 2001 From: "Derek \"8-Bit\" Nellis" Date: Mon, 10 Aug 2020 11:56:49 -0700 Subject: [PATCH 1/3] setup --- index.html | 2 ++ index.js | 0 2 files changed, 2 insertions(+) create mode 100644 index.js diff --git a/index.html b/index.html index fa08eb38..82ab7be5 100644 --- a/index.html +++ b/index.html @@ -67,5 +67,7 @@

Shopping List

+ + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 00000000..e69de29b From b140eb76a8085100ccecf666beee1bf8f1fb047d Mon Sep 17 00:00:00 2001 From: "Derek \"8-Bit\" Nellis" Date: Mon, 10 Aug 2020 15:23:31 -0700 Subject: [PATCH 2/3] completed drill --- index.js | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/index.js b/index.js index e69de29b..f852430e 100644 --- a/index.js +++ b/index.js @@ -0,0 +1,21 @@ +$('#js-shopping-list-form').submit(e => { + e.preventDefault(); + let item = $('#shopping-list-entry').val(); + $('.shopping-list').append(`
  • + ${item}
    • `); +}) + +// ENTER invokes, but does not toggle +// is $(document) necessary? +$(document).on('click keydown', '.shopping-item-toggle', e => { + if (e.which == 13 || e.which == 1) { + $(e.target).closest('div').siblings('.shopping-item').toggleClass('shopping-item__checked'); + } +}) + +$(document).on('click keydown', '.shopping-item-delete', e => { + if (e.which == 13 || e.which == 1) { + $(e.target).closest('li').remove(); + } +}) + From e5a3d02a9c70af8f5e765b60a505895b72b7fca2 Mon Sep 17 00:00:00 2001 From: "Derek \"8-Bit\" Nellis" Date: Mon, 10 Aug 2020 19:18:39 -0700 Subject: [PATCH 3/3] Update index.js --- index.js | 119 +++++++++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 99 insertions(+), 20 deletions(-) diff --git a/index.js b/index.js index f852430e..41339934 100644 --- a/index.js +++ b/index.js @@ -1,21 +1,100 @@ -$('#js-shopping-list-form').submit(e => { - e.preventDefault(); - let item = $('#shopping-list-entry').val(); - $('.shopping-list').append(`
  • - ${item}
    • `); -}) - -// ENTER invokes, but does not toggle -// is $(document) necessary? -$(document).on('click keydown', '.shopping-item-toggle', e => { - if (e.which == 13 || e.which == 1) { - $(e.target).closest('div').siblings('.shopping-item').toggleClass('shopping-item__checked'); - } -}) - -$(document).on('click keydown', '.shopping-item-delete', e => { - if (e.which == 13 || e.which == 1) { - $(e.target).closest('li').remove(); - } -}) +'use strict'; +// $('#js-shopping-list-form').submit(e => { +// e.preventDefault(); +// let item = $('#shopping-list-entry').val(); +// $('.shopping-list').append(`
  • +// ${item}
    • `); +// }) + +// // ENTER invokes, but does not toggle --> removed 'keydown'? +// // is $(document) necessary? --> because not method within above function? +// // "e => {}" vs "function(e) {}" preference? latter enables $(this) vs $(e.target) +// $(document).on('click', '.shopping-item-toggle', e => { +// if (e.which == 13 || e.which == 1) { +// $(e.target).closest('div').siblings('.shopping-item').toggleClass('shopping-item__checked'); +// } +// }) + +// $(document).on('click', '.shopping-item-delete', e => { +// if (e.which == 13 || e.which == 1) { +// $(e.target).closest('li').remove(); +// } +// }) + +// ------------------------------------------------------------------------ // + + +// `STORE` is responsible for storing the underlying data +// that our app needs to keep track of in order to work. +// +// for a shopping list, our data model is pretty simple. +// we just have an array of shopping list items. each one +// is an object with a `name` and a `checked` property that +// indicates if it's checked off or not. +// we're pre-adding items to the shopping list so there's +// something to see when the page first loads. +const STORE = [ + {name: "apples", checked: false}, + {name: "oranges", checked: false}, + {name: "milk", checked: true}, + {name: "bread", checked: false} +]; + +function generateItemElement(item, itemIndex, template) { + return `
  • ${item.name}
    • `; +} + + +function generateShoppingItemsString(shoppingList) { + console.log("Generating shopping list element"); + + const items = shoppingList.map((item, index) => generateItemElement(item, index)); + + return items.join(""); +} + + +function renderShoppingList() { + // render the shopping list in the DOM + console.log('`renderShoppingList` ran'); + const shoppingListItemsString = generateShoppingItemsString(STORE); + + // insert that HTML into the DOM + $('.js-shopping-list').html(shoppingListItemsString); +} + + +function handleNewItemSubmit() { + // this function will be responsible for when users add a new shopping list item + console.log('`handleNewItemSubmit` ran'); +} + + +function handleItemCheckClicked() { + // this function will be responsible for when users click the "check" button on + // a shopping list item. + console.log('`handleItemCheckClicked` ran'); +} + + +function handleDeleteItemClicked() { + // this function will be responsible for when users want to delete a shopping list + // item + console.log('`handleDeleteItemClicked` ran') +} + +// this function will be our callback when the page loads. it's responsible for +// initially rendering the shopping list, and activating our individual functions +// that handle new item submission and user clicks on the "check" and "delete" buttons +// for individual shopping list items. +function handleShoppingList() { + renderShoppingList(); + handleNewItemSubmit(); + handleItemCheckClicked(); + handleDeleteItemClicked(); + +} + +// when the page loads, call `handleShoppingList` +$(handleShoppingList); \ No newline at end of file