From 5d97d44eabed409affdafdaca161754c6a918da7 Mon Sep 17 00:00:00 2001 From: Collin Betori Date: Thu, 11 Apr 2019 18:49:40 -0500 Subject: [PATCH 01/10] initial commit --- public/index.html | 17 ++++++++++++--- public/index.js | 55 ++++++++++++++++++++++++++++++++++++++++++++++- public/styles.css | 39 +++++++++++++++++++++++++++++++++ 3 files changed, 107 insertions(+), 4 deletions(-) create mode 100644 public/styles.css diff --git a/public/index.html b/public/index.html index 138da963..72cab10b 100644 --- a/public/index.html +++ b/public/index.html @@ -5,10 +5,21 @@ My Store - + + + - - +
+ + + +
+ +
+ \ No newline at end of file diff --git a/public/index.js b/public/index.js index 034dbd5e..482dad47 100644 --- a/public/index.js +++ b/public/index.js @@ -1 +1,54 @@ -//stuff \ No newline at end of file +//Creates list on load +function productList(){ + let containerNames = document.getElementById('names') + let containerButtons = document.getElementById('buttons') + + for(let i = 0; i Date: Sun, 14 Apr 2019 17:55:30 -0500 Subject: [PATCH 02/10] functions cleaned up --- public/index.html | 9 ++++++--- public/index.js | 46 ++++++++++++++++++++-------------------------- 2 files changed, 26 insertions(+), 29 deletions(-) diff --git a/public/index.html b/public/index.html index 72cab10b..07091ec6 100644 --- a/public/index.html +++ b/public/index.html @@ -15,11 +15,14 @@ - +
    +
    +
    +
    -
    -
    +
    +
\ No newline at end of file diff --git a/public/index.js b/public/index.js index 482dad47..abc2631a 100644 --- a/public/index.js +++ b/public/index.js @@ -1,30 +1,25 @@ //Creates list on load -function productList(){ +function productList(products){ + let containerNames = document.getElementById('names') let containerButtons = document.getElementById('buttons') - for(let i = 0; i{ + let li = document.createElement('li') - let text = document.createTextNode(products[i].name) - li.appendChild(text) - li.setAttribute('id', 'name_'+products[i].id) + li.setAttribute('value', element._id) li.setAttribute('class', 'nameList') + containerNames.appendChild(li) + li.innerHTML = element.name let button = document.createElement('button') - let buttonText = document.createTextNode('Add to Cart') - button.appendChild(buttonText) - button.setAttribute('id', 'button_'+products[i]._id) - button.setAttribute('class','buttonList') - - containerNames.appendChild(li) + button.setAttribute('value', element._id) + button.setAttribute('class', 'buttonList') containerButtons.appendChild(button) + button.innerHTML = 'Add to Cart' + }) - list.appendChild(containerNames) - list.appendChild(containerButtons) - } - - document.getElementById('handleSearch').onclick = function searchBox(){ + document.getElementById('handleSearch').onclick = searchBox=>{ let searchValue = document.getElementById('searchBox').value searchProducts(searchValue) } @@ -32,20 +27,19 @@ function productList(){ let buttonClass = document.getElementsByClassName('buttonList') for(let i = 0;i productList(products) + //Search -function searchProducts(searchValue){ - for(let i = 0; i{ + let filterredProducts = products.filter((p)=>{ + return p.name === searchValue + }) + productList(filterredProducts) } //Shopping Cart From 0944bc4b1a56a14b2929065b710c4948085489de Mon Sep 17 00:00:00 2001 From: Collin Betori Date: Mon, 15 Apr 2019 07:53:01 -0500 Subject: [PATCH 03/10] minor update --- public/index.html | 19 +++++--- public/index.js | 107 +++++++++++++++++++++++++++++++--------------- public/styles.css | 23 +++++----- 3 files changed, 98 insertions(+), 51 deletions(-) diff --git a/public/index.html b/public/index.html index 07091ec6..d04584b7 100644 --- a/public/index.html +++ b/public/index.html @@ -13,16 +13,21 @@
- +
-
    -
    -
    + +
    + +
      +
      +
    +
    -
      -
      -
      + +
        +
        +
      \ No newline at end of file diff --git a/public/index.js b/public/index.js index abc2631a..91b6219a 100644 --- a/public/index.js +++ b/public/index.js @@ -1,48 +1,87 @@ //Creates list on load -function productList(products){ +let list = "List"; - let containerNames = document.getElementById('names') - let containerButtons = document.getElementById('buttons') +function productList(products, list) { + let containerNames = document.getElementById("names" + list); + let containerButtons = document.getElementById("buttons" + list); - products.map((element, index)=>{ + products.map((element, index) => { + let li = document.createElement("li"); + li.setAttribute("id", list + element._id); + li.setAttribute("class", "nameList"); + containerNames.appendChild(li); + li.innerHTML = element.name; - let li = document.createElement('li') - li.setAttribute('value', element._id) - li.setAttribute('class', 'nameList') - containerNames.appendChild(li) - li.innerHTML = element.name + let button = document.createElement("button"); + button.setAttribute("value", element._id); + containerButtons.appendChild(button); + button.setAttribute("class", "buttonList"); + if (list === "List") { + button.innerHTML = "Add to Cart"; + } else { + button.innerHTML = "Remove"; + } + }); - let button = document.createElement('button') - button.setAttribute('value', element._id) - button.setAttribute('class', 'buttonList') - containerButtons.appendChild(button) - button.innerHTML = 'Add to Cart' - }) + document.getElementById("handleSearch").onclick = searchBox => { + let searchValue = document.getElementById("searchBox").value; + searchProducts(searchValue); + }; - document.getElementById('handleSearch').onclick = searchBox=>{ - let searchValue = document.getElementById('searchBox').value - searchProducts(searchValue) - } - - let buttonClass = document.getElementsByClassName('buttonList') - for(let i = 0;i { + toggleCartView(cartView); + }; } -window.onload = ()=> productList(products) +window.onload = () => productList(products, list); //Search -const searchProducts = (searchValue) =>{ - let filterredProducts = products.filter((p)=>{ - return p.name === searchValue - }) - productList(filterredProducts) -} +const searchProducts = searchValue => { + let filteredProducts = products.filter(p => { + return p.name === searchValue; + }); + productList(filteredProducts, list); +}; //Shopping Cart +const toggleCartView = cartView => { + if (cartView.className === "list hide") { + cartView.className = "list show"; + } else { + cartView.className = "list hide"; + } +}; +let cartArray = []; +const addToCart = value => { + products.map((element, index) => { + if (value === element._id) { + cartArray.push(element); + } + }); + removeProducts("Cart"); + productList(cartArray, "Cart"); +}; -//r2pz +//remove products +const removeProducts = list => { + let containerNames = document.getElementById("names" + list); + let containerButtons = document.getElementById("buttons" + list); + containerNames.innerHTML = ""; + containerButtons.innerHTML = ""; +}; diff --git a/public/styles.css b/public/styles.css index 22a46133..12235dd0 100644 --- a/public/styles.css +++ b/public/styles.css @@ -1,39 +1,42 @@ -header{ +header { display: inline-flex; margin: 5px; } -button{ + +button { border-radius: 5; font-size: 14pt; margin-left: 5px; - } -#searchBox{ +#searchBox { font-size: 14pt; } -#list{ +.list { display: flex; } -#buttons{ +.buttons { display: flex; flex-direction: column; + max-width: 150px; } -#names{ +.names { margin: 5px; } -.nameList{ +.nameList { margin: 9px; height: 30px; } -.buttonList{ +.buttonList { height: 30px; margin: 5px; } - +.hide { + display: none; +} \ No newline at end of file From 80cca44bea2e6bb827eab90ed2ab1e8171b15268 Mon Sep 17 00:00:00 2001 From: Collin Betori Date: Mon, 15 Apr 2019 18:59:43 -0500 Subject: [PATCH 04/10] new method --- public/index.1.html | 33 ++++++++ public/index.html | 14 +--- public/index.js | 189 +++++++++++++++++++++++++++----------------- public/indexOLD.js | 87 ++++++++++++++++++++ public/styles.1.css | 47 +++++++++++ public/styles.css | 16 ++-- 6 files changed, 299 insertions(+), 87 deletions(-) create mode 100644 public/index.1.html create mode 100644 public/indexOLD.js create mode 100644 public/styles.1.css diff --git a/public/index.1.html b/public/index.1.html new file mode 100644 index 00000000..e6edf8d2 --- /dev/null +++ b/public/index.1.html @@ -0,0 +1,33 @@ + + + + + + My Store + + + + +
      + + + +
      + +
      + +
        +
        +
        +
      + +
      + +
        +
        +
        +
      + + + + \ No newline at end of file diff --git a/public/index.html b/public/index.html index d04584b7..a82cb0e5 100644 --- a/public/index.html +++ b/public/index.html @@ -6,8 +6,6 @@ My Store - -
      @@ -18,16 +16,12 @@
      -
        -
        -
        -
      +
        -
          -
          -
          -
        +
          + + \ No newline at end of file diff --git a/public/index.js b/public/index.js index 91b6219a..a636f8fd 100644 --- a/public/index.js +++ b/public/index.js @@ -1,64 +1,109 @@ //Creates list on load -let list = "List"; - -function productList(products, list) { - let containerNames = document.getElementById("names" + list); - let containerButtons = document.getElementById("buttons" + list); - - products.map((element, index) => { - let li = document.createElement("li"); - li.setAttribute("id", list + element._id); - li.setAttribute("class", "nameList"); - containerNames.appendChild(li); - li.innerHTML = element.name; - - let button = document.createElement("button"); - button.setAttribute("value", element._id); - containerButtons.appendChild(button); - button.setAttribute("class", "buttonList"); - if (list === "List") { - button.innerHTML = "Add to Cart"; - } else { - button.innerHTML = "Remove"; - } - }); - - document.getElementById("handleSearch").onclick = searchBox => { - let searchValue = document.getElementById("searchBox").value; - searchProducts(searchValue); - }; - - let buttonClass = document.getElementsByClassName("buttonList"); - for (let i = 0; i < buttonClass.length; i++) { - buttonClass[i].onclick = function handleCart() { - if (buttonClass[i].innerHTML === "Add to Cart") { - addToCart(parseInt(buttonClass[i].value)); - } else { - console.log(document.getElementById("shoppingCart")); - buttonClass[i].innerHTML = ""; - document.getElementById("Cart" + (i + 1)).innerHTML = ""; - } - }; - } +let cartArray = [] +let listArray = [] +let buttonText = "Add to Cart" - let shoppingCartBtn = document.getElementById("shoppingCartBtn"); - let cartView = document.getElementById("shoppingCart"); - shoppingCartBtn.onclick = () => { - toggleCartView(cartView); - }; +let divCreator =(element)=>{ + let li = `
          +
        • + ${element.name} +
          • `+ + ` +
          ` + listArray.push(li) + console.log("test") } -window.onload = () => productList(products, list); +let listArrayGenerator =((location, elementID)=>{ + location = document.getElementById(location); + products.map((element)=>{ + console.log(elementID) + if(elementID === element._id || elementID === undefined) + divCreator(element) + }) + listArray = listArray.join('') + location.innerHTML = listArray +}) -//Search -const searchProducts = searchValue => { - let filteredProducts = products.filter(p => { - return p.name === searchValue; - }); - productList(filteredProducts, list); -}; +let handleAddToCart =((id)=>{ + let elementID = document.getElementById(id) + listArrayGenerator('shoppingCart', elementID) +}) + +window.onload = listArrayGenerator('listAll') +//console.log("list- "+listArray,'\n' ,"cart- "+cartArray) + + + + + + +// function productList(products, list) { +// let containerNames = document.getElementById("names" + list); +// let containerButtons = document.getElementById("buttons" + list); -//Shopping Cart +// products.map((element, index) => { +// let li = document.createElement("li"); +// li.setAttribute("id", list + element._id); +// li.setAttribute("class", "nameList"); +// containerNames.appendChild(li); +// li.innerHTML = element.name; + +// let button = document.createElement("button"); +// button.setAttribute("value", element._id); +// containerButtons.appendChild(button); +// button.setAttribute("class", "buttonList"); +// if (list === "List") { +// button.innerHTML = "Add to Cart"; +// } else { +// button.innerHTML = "Remove"; +// } +// }); + +// document.getElementById("handleSearch").onclick = searchBox => { +// let searchValue = document.getElementById("searchBox").value; +// searchProducts(searchValue); +// }; + +// let buttonClass = document.getElementsByClassName("buttonList"); +// for (let i = 0; i < buttonClass.length; i++) { +// buttonClass[i].onclick = function handleCart() { +// if (buttonClass[i].innerHTML === "Add to Cart") { +// addToCart(parseInt(buttonClass[i].value)); +// } else { +// console.log(document.getElementById("shoppingCart")); +// buttonClass[i].innerHTML = ""; +// document.getElementById("Cart" + (i + 1)).innerHTML = ""; +// } +// }; +// } + +// let shoppingCartBtn = document.getElementById("shoppingCartBtn"); +// let cartView = document.getElementById("shoppingCart"); +// shoppingCartBtn.onclick = () => { +// toggleCartView(cartView); +// }; +// } + +// window.onload = () => productList(products, list); + +// //Search +// const searchProducts = searchValue => { +// let filteredProducts = products.filter(p => { +// return p.name === searchValue; +// }); +// productList(filteredProducts, list); +// }; + +// //Shopping Cart const toggleCartView = cartView => { if (cartView.className === "list hide") { cartView.className = "list show"; @@ -67,21 +112,21 @@ const toggleCartView = cartView => { } }; -let cartArray = []; -const addToCart = value => { - products.map((element, index) => { - if (value === element._id) { - cartArray.push(element); - } - }); - removeProducts("Cart"); - productList(cartArray, "Cart"); -}; +// let cartArray = []; +// const addToCart = value => { +// products.map((element, index) => { +// if (value === element._id) { +// cartArray.push(element); +// } +// }); +// removeProducts("Cart"); +// productList(cartArray, "Cart"); +// }; -//remove products -const removeProducts = list => { - let containerNames = document.getElementById("names" + list); - let containerButtons = document.getElementById("buttons" + list); - containerNames.innerHTML = ""; - containerButtons.innerHTML = ""; -}; +// //remove products +// const removeProducts = list => { +// let containerNames = document.getElementById("names" + list); +// let containerButtons = document.getElementById("buttons" + list); +// containerNames.innerHTML = ""; +// containerButtons.innerHTML = ""; +// }; diff --git a/public/indexOLD.js b/public/indexOLD.js new file mode 100644 index 00000000..91b6219a --- /dev/null +++ b/public/indexOLD.js @@ -0,0 +1,87 @@ +//Creates list on load +let list = "List"; + +function productList(products, list) { + let containerNames = document.getElementById("names" + list); + let containerButtons = document.getElementById("buttons" + list); + + products.map((element, index) => { + let li = document.createElement("li"); + li.setAttribute("id", list + element._id); + li.setAttribute("class", "nameList"); + containerNames.appendChild(li); + li.innerHTML = element.name; + + let button = document.createElement("button"); + button.setAttribute("value", element._id); + containerButtons.appendChild(button); + button.setAttribute("class", "buttonList"); + if (list === "List") { + button.innerHTML = "Add to Cart"; + } else { + button.innerHTML = "Remove"; + } + }); + + document.getElementById("handleSearch").onclick = searchBox => { + let searchValue = document.getElementById("searchBox").value; + searchProducts(searchValue); + }; + + let buttonClass = document.getElementsByClassName("buttonList"); + for (let i = 0; i < buttonClass.length; i++) { + buttonClass[i].onclick = function handleCart() { + if (buttonClass[i].innerHTML === "Add to Cart") { + addToCart(parseInt(buttonClass[i].value)); + } else { + console.log(document.getElementById("shoppingCart")); + buttonClass[i].innerHTML = ""; + document.getElementById("Cart" + (i + 1)).innerHTML = ""; + } + }; + } + + let shoppingCartBtn = document.getElementById("shoppingCartBtn"); + let cartView = document.getElementById("shoppingCart"); + shoppingCartBtn.onclick = () => { + toggleCartView(cartView); + }; +} + +window.onload = () => productList(products, list); + +//Search +const searchProducts = searchValue => { + let filteredProducts = products.filter(p => { + return p.name === searchValue; + }); + productList(filteredProducts, list); +}; + +//Shopping Cart +const toggleCartView = cartView => { + if (cartView.className === "list hide") { + cartView.className = "list show"; + } else { + cartView.className = "list hide"; + } +}; + +let cartArray = []; +const addToCart = value => { + products.map((element, index) => { + if (value === element._id) { + cartArray.push(element); + } + }); + removeProducts("Cart"); + productList(cartArray, "Cart"); +}; + +//remove products +const removeProducts = list => { + let containerNames = document.getElementById("names" + list); + let containerButtons = document.getElementById("buttons" + list); + containerNames.innerHTML = ""; + containerButtons.innerHTML = ""; +}; diff --git a/public/styles.1.css b/public/styles.1.css new file mode 100644 index 00000000..b08bee87 --- /dev/null +++ b/public/styles.1.css @@ -0,0 +1,47 @@ +header { + display: inline-flex; + margin: 5px; +} + +button { + border-radius: 5; + font-size: 14pt; + margin-left: 5px; +} + +#searchBox { + font-size: 14pt; +} + +#listAll{ + display: inline; +} + +.list { + display: flex; + +} + +.buttons { + display: flex; + flex-direction: column; + max-width: 150px; +} + +.names { + margin: 5px; +} + +.nameList { + margin: 9px; + height: 30px; +} + +.buttonList { + height: 30px; + margin: 5px; +} + +.hide { + display: none; +} \ No newline at end of file diff --git a/public/styles.css b/public/styles.css index 12235dd0..fbb63020 100644 --- a/public/styles.css +++ b/public/styles.css @@ -9,18 +9,24 @@ button { margin-left: 5px; } -#searchBox { - font-size: 14pt; + +#listAll{ + display: inline; + } .list { display: flex; + margin: 10px; + } .buttons { - display: flex; - flex-direction: column; - max-width: 150px; + +} +.listItems{ + margin-left: 20px; + min-width: 500px; } .names { From e05a313da9c40dcab0e7279d535c818bb93ba13f Mon Sep 17 00:00:00 2001 From: Collin Betori Date: Mon, 15 Apr 2019 21:38:38 -0500 Subject: [PATCH 05/10] minor updates --- public/index.html | 13 +- public/index.js | 80 ++++++----- public/styles.css | 12 +- {public => version1}/index.1.html | 4 +- {public => version1}/indexOLD.js | 0 version1/products.js | 221 ++++++++++++++++++++++++++++++ {public => version1}/styles.1.css | 0 7 files changed, 276 insertions(+), 54 deletions(-) rename {public => version1}/index.1.html (91%) rename {public => version1}/indexOLD.js (100%) create mode 100644 version1/products.js rename {public => version1}/styles.1.css (100%) diff --git a/public/index.html b/public/index.html index a82cb0e5..be65d738 100644 --- a/public/index.html +++ b/public/index.html @@ -1,5 +1,6 @@ + @@ -7,21 +8,23 @@ +
          - +
          -
          +
          -
            - -
            +
              +
              Cart
              +
              + \ No newline at end of file diff --git a/public/index.js b/public/index.js index a636f8fd..ca628856 100644 --- a/public/index.js +++ b/public/index.js @@ -1,51 +1,49 @@ //Creates list on load -let cartArray = [] -let listArray = [] -let buttonText = "Add to Cart" - -let divCreator =(element)=>{ - let li = `
              -
            • - ${element.name} -
              • `+ - ` -
              ` - listArray.push(li) - console.log("test") -} +let cartArray = []; +let listArray = []; +let buttonText = "Add to Cart"; + +let divCreator = (element) => { + let li = + `
              +
            • + ${element.name} +
              • ` + + ` +
              `; + listArray.push(li); +}; -let listArrayGenerator =((location, elementID)=>{ +let listArrayGenerator = (location, elementID) => { location = document.getElementById(location); - products.map((element)=>{ - console.log(elementID) - if(elementID === element._id || elementID === undefined) - divCreator(element) - }) - listArray = listArray.join('') - location.innerHTML = listArray -}) + products.map(element => { + if (elementID === element._id || elementID === undefined) + divCreator(element); + }); + listArray = listArray.join(""); + location.innerHTML = listArray; +}; -let handleAddToCart =((id)=>{ - let elementID = document.getElementById(id) - listArrayGenerator('shoppingCart', elementID) -}) +//This returns product id +let handleAddToCart = id => { + console.log(id) + let elementID = document.getElementById("shoppingCart").appendChild(document.getElementById("list" + id)); + console.log(id) + // cartArray.push(elementID); + // listArrayGenerator("shoppingCart", elementID, array); +}; -window.onload = listArrayGenerator('listAll') +window.onload = listArrayGenerator("listAll"); //console.log("list- "+listArray,'\n' ,"cart- "+cartArray) - - - - - // function productList(products, list) { // let containerNames = document.getElementById("names" + list); // let containerButtons = document.getElementById("buttons" + list); diff --git a/public/styles.css b/public/styles.css index fbb63020..90414df7 100644 --- a/public/styles.css +++ b/public/styles.css @@ -9,22 +9,22 @@ button { margin-left: 5px; } +#listAll { + display: inline; +} -#listAll{ +#shoppingCart { display: inline; - } .list { display: flex; margin: 10px; - } -.buttons { +.buttons {} -} -.listItems{ +.listItems { margin-left: 20px; min-width: 500px; } diff --git a/public/index.1.html b/version1/index.1.html similarity index 91% rename from public/index.1.html rename to version1/index.1.html index e6edf8d2..47b6c01f 100644 --- a/public/index.1.html +++ b/version1/index.1.html @@ -5,7 +5,7 @@ My Store - +
              @@ -29,5 +29,5 @@
            - + \ No newline at end of file diff --git a/public/indexOLD.js b/version1/indexOLD.js similarity index 100% rename from public/indexOLD.js rename to version1/indexOLD.js diff --git a/version1/products.js b/version1/products.js new file mode 100644 index 00000000..4f07bb51 --- /dev/null +++ b/version1/products.js @@ -0,0 +1,221 @@ +const products = [{ + "_id": 1, + "name": "Body Luxuries Sweet Lavender Hand Sanitizer", + "description": "Makes your hands clean", + "reviews": 46, + "rating": 2, + "imgUrl": "http://dummyimage.com/136x167.bmp/cc0000/ffffff", + "price": "$95.11", + "category": "food", + "reviews": [{ + "description": "architect revolutionary deliverables", + "rating": 2 + }, { + "description": "orchestrate dynamic schemas", + "rating": 2 + }, { + "description": "aggregate integrated convergence", + "rating": 4 + }, { + "description": "incubate strategic e-tailers", + "rating": 5 + }, { + "description": "transition synergistic partnerships", + "rating": 1 + }, { + "description": "matrix dynamic web-readiness", + "rating": 1 + }, { + "description": "exploit impactful platforms", + "rating": 4 + }, { + "description": "repurpose mission-critical schemas", + "rating": 1 + }, { + "description": "iterate open-source interfaces", + "rating": 3 + }, { + "description": "repurpose impactful interfaces", + "rating": 1 + }] + }, { + "_id": 2, + "name": "Topiramate", + "description": "A wonderful medicine that makes everything all better", + "reviews": 2, + "rating": 2, + "imgUrl": "http://dummyimage.com/125x134.jpg/cc0000/ffffff", + "price": "$37.09", + "category": "food", + "reviews": [{ + "description": "architect revolutionary deliverables", + "rating": 2 + }, { + "description": "orchestrate dynamic schemas", + "rating": 2 + }, { + "description": "aggregate integrated convergence", + "rating": 4 + }, { + "description": "incubate strategic e-tailers", + "rating": 5 + }, { + "description": "transition synergistic partnerships", + "rating": 1 + } + ] + }, { + "_id": 3, + "name": "Almond", + "description": "A great treat that tastes great", + "reviews": 27, + "rating": 5, + "imgUrl": "http://dummyimage.com/149x190.jpg/dddddd/000000", + "price": "$51.83", + "category": "food", + "reviews": [{ + "description": "architect revolutionary deliverables", + "rating": 2 + }, { + "description": "orchestrate dynamic schemas", + "rating": 2 + }, { + "description": "aggregate integrated convergence", + "rating": 4 + } + ] + }, { + "_id": 4, + "name": "VYTORIN", + "description": "Orchard as the place of occurrence of the external cause", + "reviews": 60, + "rating": 3, + "imgUrl": "http://dummyimage.com/162x153.jpg/cc0000/ffffff", + "price": "$86.93", + "category": "electronics", + "reviews": [{ + "description": "architect revolutionary deliverables", + "rating": 2 + }, { + "description": "orchestrate dynamic schemas", + "rating": 2 + }, { + "description": "aggregate integrated convergence", + "rating": 4 + } + ] + }, { + "_id": 5, + "name": "Decolorized Iodine", + "description": "Kills germs on contact", + "reviews": 20, + "rating": 1, + "imgUrl": "http://dummyimage.com/120x245.jpg/cc0000/ffffff", + "price": "$70.10", + "category": "electronics", + "reviews": [{ + "description": "architect revolutionary deliverables", + "rating": 2 + }, { + "description": "orchestrate dynamic schemas", + "rating": 2 + }, { + "description": "aggregate integrated convergence", + "rating": 4 + } + ] + }, { + "_id": 6, + "name": "Fresh Sugar Honey Tinted Lip Treatment SPF15", + "description": "Fix those chapped lips. ", + "reviews": 79, + "rating": 3, + "imgUrl": "http://dummyimage.com/211x227.bmp/5fa2dd/ffffff", + "price": "$39.25", + "category": "electronics", + "reviews": [{ + "description": "architect revolutionary deliverables", + "rating": 2 + }, { + "description": "orchestrate dynamic schemas", + "rating": 2 + }, { + "description": "aggregate integrated convergence", + "rating": 4 + } + ] + }, { + "_id": 7, + "name": "LBel", + "description": "2-Propanol", + "reviews": 76, + "rating": 3, + "imgUrl": "http://dummyimage.com/212x144.jpg/ff4444/ffffff", + "price": "$99.91", + "category": "sporting", + "reviews": [{ + "description": "architect revolutionary deliverables", + "rating": 2 + }, { + "description": "orchestrate dynamic schemas", + "rating": 2 + }, { + "description": "aggregate integrated convergence", + "rating": 4 + } + ] + }, { + "_id": 8, + "name": "Cholestyramine", + "description": "Help reduce cholesteral in the system", + "reviews": 74, + "rating": 3, + "imgUrl": "http://dummyimage.com/204x175.jpg/5fa2dd/ffffff", + "price": "$67.17", + "category": "sporting", + "reviews": [{ + "description": "architect revolutionary deliverables", + "rating": 2 + }, { + "description": "orchestrate dynamic schemas", + "rating": 2 + }, { + "description": "aggregate integrated convergence", + "rating": 4 + } + ] + }, { + "_id": 9, + "name": "Risperidone", + "description": "cephalospor/oth beta-lactm antibiot, undet, sequela", + "reviews": 9, + "rating": 1, + "imgUrl": "http://dummyimage.com/212x108.bmp/cc0000/ffffff", + "price": "$96.84", + "category": "sporting", + "reviews": [{ + "description": "architect revolutionary deliverables", + "rating": 2 + }, { + "description": "orchestrate dynamic schemas", + "rating": 2 + }, { + "description": "aggregate integrated convergence", + "rating": 4 + } + ] + }, { + "_id": 10, + "name": "MAC", + "description": "Other Gram-negative sepsis", + "reviews": 45, + "rating": 2, + "imgUrl": "http://dummyimage.com/189x109.png/cc0000/ffffff", + "price": "$74.37", + "category": "sporting", + "reviews": [{ + "description": "architect revolutionary deliverables", + "rating": 2 + } + ] + }]; diff --git a/public/styles.1.css b/version1/styles.1.css similarity index 100% rename from public/styles.1.css rename to version1/styles.1.css From 2a65f0bcc2ac752b326edad86b6763c20baa239f Mon Sep 17 00:00:00 2001 From: Collin Betori Date: Tue, 16 Apr 2019 15:54:51 -0500 Subject: [PATCH 06/10] cart working --- public/index.html | 8 ++-- public/index.js | 104 +++++++++++++++++++++++++++++++--------------- public/styles.css | 14 ++++++- 3 files changed, 87 insertions(+), 39 deletions(-) diff --git a/public/index.html b/public/index.html index be65d738..2458e436 100644 --- a/public/index.html +++ b/public/index.html @@ -18,9 +18,11 @@
            -
              -
              Cart
              -
            +
            +
              +
              Cart
              +
            +
              diff --git a/public/index.js b/public/index.js index ca628856..2e8dec39 100644 --- a/public/index.js +++ b/public/index.js @@ -6,19 +6,26 @@ let buttonText = "Add to Cart"; let divCreator = (element) => { let li = `
              +
            • ${element.name} -
              • ` + - ` -
              `; +
              + ` listArray.push(li); }; @@ -30,18 +37,68 @@ let listArrayGenerator = (location, elementID) => { }); listArray = listArray.join(""); location.innerHTML = listArray; -}; +}; //This returns product id let handleAddToCart = id => { - console.log(id) - let elementID = document.getElementById("shoppingCart").appendChild(document.getElementById("list" + id)); - console.log(id) - // cartArray.push(elementID); - // listArrayGenerator("shoppingCart", elementID, array); + document.getElementById("button_"+id).innerHTML = 'Remove' + document.getElementById("shoppingCart").appendChild(document.getElementById("list" + id)); + document.getElementById("shoppingCart").appendChild(document.getElementById("dropdownClick_" + id)); +}; + +//Search +const searchProducts = searchValue => { + let filteredProducts = products.filter(p => { + return p.name === searchValue; + }); + productList(filteredProducts, list); +}; + +const setSearch=()=>{ + document.getElementById("handleSearch").onclick = searchBox => { + let searchValue = document.getElementById("searchBox").value; + searchProducts(searchValue); + }; +} + +//Shopping Cart +const toggleCartView = cartView => { + if (cartView.className === "hide") { + cartView.className = "show"; + } else { + cartView.className = "hide"; + } + console.log(cartView.className) }; +const setCart=()=>{ + let shoppingCartBtn = document.getElementById("shoppingCartBtn"); + let cartView = document.getElementById("cart"); + shoppingCartBtn.onclick = () => { + toggleCartView(cartView); + }; +} + +const handleDropDown= elementID =>{ + let dropdown = document.getElementById('dropdownClick_'+elementID) + console.log(dropdown) + if (dropdown.className === "description hide") { + dropdown.className = "description show"; + } else { + dropdown.className = "description hide"; + } + +} + +// const fillDrowpDown=()=>{ +// console.log(elementID) +// } + window.onload = listArrayGenerator("listAll"); +window.onload = setSearch(); +window.onload = setCart(); + + //console.log("list- "+listArray,'\n' ,"cart- "+cartArray) // function productList(products, list) { @@ -66,10 +123,7 @@ window.onload = listArrayGenerator("listAll"); // } // }); -// document.getElementById("handleSearch").onclick = searchBox => { -// let searchValue = document.getElementById("searchBox").value; -// searchProducts(searchValue); -// }; + // let buttonClass = document.getElementsByClassName("buttonList"); // for (let i = 0; i < buttonClass.length; i++) { @@ -84,31 +138,13 @@ window.onload = listArrayGenerator("listAll"); // }; // } -// let shoppingCartBtn = document.getElementById("shoppingCartBtn"); -// let cartView = document.getElementById("shoppingCart"); -// shoppingCartBtn.onclick = () => { -// toggleCartView(cartView); -// }; -// } + // window.onload = () => productList(products, list); -// //Search -// const searchProducts = searchValue => { -// let filteredProducts = products.filter(p => { -// return p.name === searchValue; -// }); -// productList(filteredProducts, list); -// }; -// //Shopping Cart -const toggleCartView = cartView => { - if (cartView.className === "list hide") { - cartView.className = "list show"; - } else { - cartView.className = "list hide"; - } -}; + + // let cartArray = []; // const addToCart = value => { diff --git a/public/styles.css b/public/styles.css index 90414df7..b1f5c5e2 100644 --- a/public/styles.css +++ b/public/styles.css @@ -9,6 +9,10 @@ button { margin-left: 5px; } +li{ + list-style-type: none; +} + #listAll { display: inline; } @@ -22,7 +26,9 @@ button { margin: 10px; } -.buttons {} +.dropdowns{ + font-size: 2pt; +} .listItems { margin-left: 20px; @@ -43,6 +49,10 @@ button { margin: 5px; } +.description{ + display: inline-flex; +} + .hide { display: none; -} \ No newline at end of file +} From ed81cbd863980c7dabe331cd3fb2af0fefc7e78a Mon Sep 17 00:00:00 2001 From: Collin Betori Date: Tue, 16 Apr 2019 17:41:46 -0500 Subject: [PATCH 07/10] working search --- public/index.html | 4 +++- public/index.js | 25 +++++++++++++++---------- public/styles.css | 1 + 3 files changed, 19 insertions(+), 11 deletions(-) diff --git a/public/index.html b/public/index.html index 2458e436..cfa43971 100644 --- a/public/index.html +++ b/public/index.html @@ -16,7 +16,9 @@ -
              +
                diff --git a/public/index.js b/public/index.js index 2e8dec39..8921143f 100644 --- a/public/index.js +++ b/public/index.js @@ -21,10 +21,10 @@ let divCreator = (element) => {
              ` listArray.push(li); }; @@ -41,9 +41,15 @@ let listArrayGenerator = (location, elementID) => { //This returns product id let handleAddToCart = id => { - document.getElementById("button_"+id).innerHTML = 'Remove' - document.getElementById("shoppingCart").appendChild(document.getElementById("list" + id)); - document.getElementById("shoppingCart").appendChild(document.getElementById("dropdownClick_" + id)); + if(document.getElementById('button_'+id).innerText === 'Add to Cart'){ + document.getElementById("button_"+id).innerHTML = 'Remove' + document.getElementById("shoppingCart").appendChild(document.getElementById("list" + id)); + document.getElementById("shoppingCart").appendChild(document.getElementById("dropdownClick_" + id)); + }else{ + document.getElementById("button_"+id).innerHTML = 'Add to Cart' + document.getElementById("listAll").appendChild(document.getElementById("list" + id)); + document.getElementById("listAll").appendChild(document.getElementById("dropdownClick_" + id)); + } }; //Search @@ -51,7 +57,8 @@ const searchProducts = searchValue => { let filteredProducts = products.filter(p => { return p.name === searchValue; }); - productList(filteredProducts, list); + listArray = ["Search Results"] + listArrayGenerator('searchResult',filteredProducts[0]._id) }; const setSearch=()=>{ @@ -68,7 +75,6 @@ const toggleCartView = cartView => { } else { cartView.className = "hide"; } - console.log(cartView.className) }; const setCart=()=>{ @@ -81,7 +87,6 @@ const setCart=()=>{ const handleDropDown= elementID =>{ let dropdown = document.getElementById('dropdownClick_'+elementID) - console.log(dropdown) if (dropdown.className === "description hide") { dropdown.className = "description show"; } else { diff --git a/public/styles.css b/public/styles.css index b1f5c5e2..4770b24c 100644 --- a/public/styles.css +++ b/public/styles.css @@ -51,6 +51,7 @@ li{ .description{ display: inline-flex; + margin-left: 100px; } .hide { From 501604b562072e5334349fc8b96ded38637b1617 Mon Sep 17 00:00:00 2001 From: Collin Betori Date: Mon, 29 Apr 2019 07:45:55 -0500 Subject: [PATCH 08/10] updated to more functional style --- public/index.html | 12 +- public/index.js | 253 ++++++++++++++++--------------------------- public/styles.css | 62 +++-------- version1/index.js | 190 ++++++++++++++++++++++++++++++++ version1/styles2.css | 66 +++++++++++ 5 files changed, 374 insertions(+), 209 deletions(-) create mode 100644 version1/index.js create mode 100644 version1/styles2.css diff --git a/public/index.html b/public/index.html index cfa43971..48d31d35 100644 --- a/public/index.html +++ b/public/index.html @@ -11,12 +11,14 @@
              - - - + + + +
              -
            -
              +
                diff --git a/public/index.js b/public/index.js index 8921143f..c9c337bb 100644 --- a/public/index.js +++ b/public/index.js @@ -1,171 +1,106 @@ -//Creates list on load -let cartArray = []; -let listArray = []; -let buttonText = "Add to Cart"; - -let divCreator = (element) => { - let li = - `
                - -
              • - ${element.name} -
                • - -
                - ` - listArray.push(li); -}; - -let listArrayGenerator = (location, elementID) => { - location = document.getElementById(location); - products.map(element => { - if (elementID === element._id || elementID === undefined) - divCreator(element); - }); - listArray = listArray.join(""); - location.innerHTML = listArray; -}; - -//This returns product id -let handleAddToCart = id => { - if(document.getElementById('button_'+id).innerText === 'Add to Cart'){ - document.getElementById("button_"+id).innerHTML = 'Remove' - document.getElementById("shoppingCart").appendChild(document.getElementById("list" + id)); - document.getElementById("shoppingCart").appendChild(document.getElementById("dropdownClick_" + id)); - }else{ - document.getElementById("button_"+id).innerHTML = 'Add to Cart' - document.getElementById("listAll").appendChild(document.getElementById("list" + id)); - document.getElementById("listAll").appendChild(document.getElementById("dropdownClick_" + id)); - } -}; - -//Search -const searchProducts = searchValue => { - let filteredProducts = products.filter(p => { - return p.name === searchValue; - }); - listArray = ["Search Results"] - listArrayGenerator('searchResult',filteredProducts[0]._id) -}; - -const setSearch=()=>{ - document.getElementById("handleSearch").onclick = searchBox => { - let searchValue = document.getElementById("searchBox").value; - searchProducts(searchValue); - }; +'use strict' +////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// +let filter =( value, key) =>products.filter((element)=>{return element.name === value}) +////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// +let createDIV = (array) =>{ + let divInsert = [] + let container + array.map((element)=>{ + let li = `
                + ${productNamesDIV(element)} + ${addToCartDIV(element)} +
                ` + divInsert.push(li) + container = divInsert.join('') + }) + return container } -//Shopping Cart -const toggleCartView = cartView => { - if (cartView.className === "hide") { - cartView.className = "show"; - } else { - cartView.className = "hide"; - } -}; +let productNamesDIV =(element)=>{ + let li = `
              • ${element.name}
                • ` + return li +} -const setCart=()=>{ - let shoppingCartBtn = document.getElementById("shoppingCartBtn"); - let cartView = document.getElementById("cart"); - shoppingCartBtn.onclick = () => { - toggleCartView(cartView); - }; +let addToCartDIV =(element)=>{ + let li = `` + return li +} +////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// +let insertDOM = () =>{ + getElements() +} +////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// +let createList = (array) =>{ + let list = array.map((element)=>{return element}) + let divInsert = createDIV(list) + // let cartInsert = addToCartDIV(list) + // cartInsert = cartInsert.join('') + //divInsert = divInsert.join('') + getElements().innerHTML = divInsert +} +////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// +let getElements =()=>{ + let allListElement = document.getElementById('listAll') + return allListElement +} +let cartListElement = document.getElementById('shoppingCart') +////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// +let loadCart =()=>{return stringOfNumbersToArray(sessionStorage.getItem('id'))} + +let clearCart=()=>{return sessionStorage.clear()} + +let cartClick =(value)=>{ + let cart = loadCart() + cart.push(parseFloat(value)) + cart = [...new Set(cart) ] + console.log(cart) + sessionStorage.setItem('id',cart) + return } -const handleDropDown= elementID =>{ - let dropdown = document.getElementById('dropdownClick_'+elementID) - if (dropdown.className === "description hide") { - dropdown.className = "description show"; - } else { - dropdown.className = "description hide"; +let stringOfNumbersToArray=(string)=>{ + if(string != null){ + let array = string.split(",").map((value)=>{ + return parseInt(value, 10) + }) + return array } - + return [] } -// const fillDrowpDown=()=>{ -// console.log(elementID) -// } - -window.onload = listArrayGenerator("listAll"); -window.onload = setSearch(); -window.onload = setCart(); - - -//console.log("list- "+listArray,'\n' ,"cart- "+cartArray) - -// function productList(products, list) { -// let containerNames = document.getElementById("names" + list); -// let containerButtons = document.getElementById("buttons" + list); - -// products.map((element, index) => { -// let li = document.createElement("li"); -// li.setAttribute("id", list + element._id); -// li.setAttribute("class", "nameList"); -// containerNames.appendChild(li); -// li.innerHTML = element.name; - -// let button = document.createElement("button"); -// button.setAttribute("value", element._id); -// containerButtons.appendChild(button); -// button.setAttribute("class", "buttonList"); -// if (list === "List") { -// button.innerHTML = "Add to Cart"; -// } else { -// button.innerHTML = "Remove"; -// } -// }); - - - -// let buttonClass = document.getElementsByClassName("buttonList"); -// for (let i = 0; i < buttonClass.length; i++) { -// buttonClass[i].onclick = function handleCart() { -// if (buttonClass[i].innerHTML === "Add to Cart") { -// addToCart(parseInt(buttonClass[i].value)); -// } else { -// console.log(document.getElementById("shoppingCart")); -// buttonClass[i].innerHTML = ""; -// document.getElementById("Cart" + (i + 1)).innerHTML = ""; -// } -// }; -// } - - - -// window.onload = () => productList(products, list); - - +let getCartItems=()=>{ + let cart = stringOfNumbersToArray(sessionStorage.getItem('id')) + let cartItems = [] + cart.map((id)=>{ + products.filter((element)=>{ + if(element._id === id){ + cartItems.push(element) + } + }) + }) + return cartItems +} +let viewCart=()=>{ + let cartItems = getCartItems() + console.log(cartItems) +} +////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// +let handleSearchValue=()=>{ + let value = document.getElementById('searchBox').value + return value +} -// let cartArray = []; -// const addToCart = value => { -// products.map((element, index) => { -// if (value === element._id) { -// cartArray.push(element); -// } -// }); -// removeProducts("Cart"); -// productList(cartArray, "Cart"); -// }; +let searchList=()=>{ + let searchValue = handleSearchValue() + let getSearchedValue =(searchValue)=>products.filter((element)=>{return element.name === searchValue}) + getSearchedValue = getSearchedValue(searchValue) + createList(getSearchedValue) +} +////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// +createList(products) +loadCart() -// //remove products -// const removeProducts = list => { -// let containerNames = document.getElementById("names" + list); -// let containerButtons = document.getElementById("buttons" + list); -// containerNames.innerHTML = ""; -// containerButtons.innerHTML = ""; -// }; diff --git a/public/styles.css b/public/styles.css index 4770b24c..b3e938c8 100644 --- a/public/styles.css +++ b/public/styles.css @@ -1,59 +1,31 @@ -header { - display: inline-flex; - margin: 5px; +body{ + margin: 0px; } -button { - border-radius: 5; - font-size: 14pt; - margin-left: 5px; +header{ + background-color: #2b3b4c; + padding: 10px; + height: 50px; } -li{ - list-style-type: none; +.headerBTNS{ + font-size: 14pt; + margin: 5px; + border-radius: 5px; } -#listAll { - display: inline; -} +#list{ -#shoppingCart { - display: inline; } - -.list { +.list{ display: flex; margin: 10px; } -.dropdowns{ - font-size: 2pt; -} - -.listItems { - margin-left: 20px; - min-width: 500px; +.listName{ + width: 500px; } -.names { - margin: 5px; -} - -.nameList { - margin: 9px; - height: 30px; -} - -.buttonList { - height: 30px; - margin: 5px; -} - -.description{ - display: inline-flex; - margin-left: 100px; -} - -.hide { - display: none; -} +.listBTN{ + +} \ No newline at end of file diff --git a/version1/index.js b/version1/index.js new file mode 100644 index 00000000..9c1e730b --- /dev/null +++ b/version1/index.js @@ -0,0 +1,190 @@ +//Creates list on load +let cartArray = []; +let listArray = []; +let buttonText = "Add to Cart"; + +let divCreator = (element) => { + let li = + `
                + +
              • + ${element.name} +
                • + +
                + ` + listArray.push(li); +}; + +let listArrayGenerator = (location, elementID) => { + location = document.getElementById(location); + products.map(element => { + if (elementID === element._id || elementID === undefined) + divCreator(element); + }); + listArray = listArray.join(""); + location.innerHTML = listArray; +}; + +//This returns product id +let handleAddToCart = id => { + if(document.getElementById('button_'+id).innerText === 'Add to Cart'){ + document.getElementById("button_"+id).innerHTML = 'Remove' + document.getElementById("shoppingCart").appendChild(document.getElementById("list" + id)); + document.getElementById("shoppingCart").appendChild(document.getElementById("dropdownClick_" + id)); + }else{ + document.getElementById("button_"+id).innerHTML = 'Add to Cart' + document.getElementById("listAll").appendChild(document.getElementById("list" + id)); + document.getElementById("listAll").appendChild(document.getElementById("dropdownClick_" + id)); + } +}; + +//Search +const searchProducts = searchValue => { + let filteredProducts = products.filter(p => { + return p.name === searchValue; + }); + console.log(filteredProducts) + console.log(searchValue) + if(filteredProducts.length === 0){ + document.getElementById('search').innerHTML = "No Results" + return + }else{ + listArray = [] + listArrayGenerator('searchResult',filteredProducts[0]._id) + } +}; + +const setSearch=()=>{ + let searchValue = document.getElementById("searchBox"); + let searchView = document.getElementById("search") + document.getElementById("handleSearch").onclick = searchBox => { + searchProducts(searchValue.value); + toogleView(searchView) + }; +} + +const toogleView=toggle=>{ + if(toggle.className === 'hide'){ + toggle.className = 'show' + console.log(toggle.className) + }else{ + toggle.className = 'hide' + console.log(toggle.className) + } +} + +//Shopping Cart +const toggleCartView = cartView => { + if (cartView.className === "hide") { + cartView.className = "show"; + } else { + cartView.className = "hide"; + } +}; + +const setCart=()=>{ + let shoppingCartBtn = document.getElementById("shoppingCartBtn"); + let cartView = document.getElementById("cart"); + shoppingCartBtn.onclick = () => { + toggleCartView(cartView); + }; +} + +const handleDropDown= elementID =>{ + let dropdown = document.getElementById('dropdownClick_'+elementID) + if (dropdown.className === "description hide") { + dropdown.className = "description show"; + } else { + dropdown.className = "description hide"; + } + +} + +// const fillDrowpDown=()=>{ +// console.log(elementID) +// } + +window.onload = listArrayGenerator("listAll"); +window.onload = setSearch(); +window.onload = setCart(); + + +//console.log("list- "+listArray,'\n' ,"cart- "+cartArray) + +// function productList(products, list) { +// let containerNames = document.getElementById("names" + list); +// let containerButtons = document.getElementById("buttons" + list); + +// products.map((element, index) => { +// let li = document.createElement("li"); +// li.setAttribute("id", list + element._id); +// li.setAttribute("class", "nameList"); +// containerNames.appendChild(li); +// li.innerHTML = element.name; + +// let button = document.createElement("button"); +// button.setAttribute("value", element._id); +// containerButtons.appendChild(button); +// button.setAttribute("class", "buttonList"); +// if (list === "List") { +// button.innerHTML = "Add to Cart"; +// } else { +// button.innerHTML = "Remove"; +// } +// }); + + + +// let buttonClass = document.getElementsByClassName("buttonList"); +// for (let i = 0; i < buttonClass.length; i++) { +// buttonClass[i].onclick = function handleCart() { +// if (buttonClass[i].innerHTML === "Add to Cart") { +// addToCart(parseInt(buttonClass[i].value)); +// } else { +// console.log(document.getElementById("shoppingCart")); +// buttonClass[i].innerHTML = ""; +// document.getElementById("Cart" + (i + 1)).innerHTML = ""; +// } +// }; +// } + + + +// window.onload = () => productList(products, list); + + + + + +// let cartArray = []; +// const addToCart = value => { +// products.map((element, index) => { +// if (value === element._id) { +// cartArray.push(element); +// } +// }); +// removeProducts("Cart"); +// productList(cartArray, "Cart"); +// }; + +// //remove products +// const removeProducts = list => { +// let containerNames = document.getElementById("names" + list); +// let containerButtons = document.getElementById("buttons" + list); +// containerNames.innerHTML = ""; +// containerButtons.innerHTML = ""; +// }; diff --git a/version1/styles2.css b/version1/styles2.css new file mode 100644 index 00000000..8439d646 --- /dev/null +++ b/version1/styles2.css @@ -0,0 +1,66 @@ +html{ + font-family: Arial, Helvetica, sans-serif +} + +header { + display: inline-flex; + margin: 5px; +} + +button { + border-radius: 5; + font-size: 14pt; + margin-left: 5px; +} + +li{ + list-style-type: none; + font-size: 14pt; +} + +#listAll { + display: inline; +} + +#shoppingCart { + display: inline; +} + +.list { + display: flex; + margin: 10px; +} + +.dropdowns{ + font-size: 2pt; +} + +.listItems { + margin-left: 20px; + min-width: 500px; +} + +.names { + margin: 5px; +} + +.nameList { + margin: 5px; + height: 30px; +} + +.buttonList { + height: 30px; + margin: 5px; +} + +.description{ + display: inline-flex; + font-size: 12pt; + margin-bottom: 15px; + margin-left: 100px; +} + +.hide { + display: none; +} From 3ee168622a76ce3326cbe285477f258c5ce56d15 Mon Sep 17 00:00:00 2001 From: Collin Betori Date: Mon, 29 Apr 2019 23:18:11 -0500 Subject: [PATCH 09/10] all lists working --- public/index.html | 17 ++++-------- public/index.js | 69 ++++++++++++++++++++++++++--------------------- public/styles.css | 19 ++++++++++--- 3 files changed, 59 insertions(+), 46 deletions(-) diff --git a/public/index.html b/public/index.html index 48d31d35..27a0cdb0 100644 --- a/public/index.html +++ b/public/index.html @@ -13,21 +13,14 @@
                - + +
                + + +
                - - -
                -
                  -
                  Cart
                  -
                -
                -
                  diff --git a/public/index.js b/public/index.js index c9c337bb..78db734d 100644 --- a/public/index.js +++ b/public/index.js @@ -1,7 +1,16 @@ 'use strict' -////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// +//////////////////////////////////////////////////////////////////////////////// let filter =( value, key) =>products.filter((element)=>{return element.name === value}) -////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// +//////////////////////////////////////////////////////////////////////////////// +let createList = (array, listView) =>{ + let getElements = document.getElementById('listAll') + let list = array.map((element)=>{return element}) + let divInsert = createDIV(list) + divInsert = divInsert === undefined ? `
                • No Results Found
                  • `:divInsert + listView = `

                  ${listView}

                  ` + getElements.innerHTML = listView+divInsert +} + let createDIV = (array) =>{ let divInsert = [] let container @@ -19,7 +28,7 @@ let createDIV = (array) =>{ } let productNamesDIV =(element)=>{ - let li = `
                • ${element.name}
                  • ` + let li = `
                • ${element.name}
                  • ` return li } @@ -27,28 +36,17 @@ let addToCartDIV =(element)=>{ let li = `` return li } -////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -let insertDOM = () =>{ - getElements() -} -////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -let createList = (array) =>{ - let list = array.map((element)=>{return element}) - let divInsert = createDIV(list) - // let cartInsert = addToCartDIV(list) - // cartInsert = cartInsert.join('') - //divInsert = divInsert.join('') - getElements().innerHTML = divInsert -} -////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -let getElements =()=>{ - let allListElement = document.getElementById('listAll') - return allListElement -} -let cartListElement = document.getElementById('shoppingCart') -////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -let loadCart =()=>{return stringOfNumbersToArray(sessionStorage.getItem('id'))} +let handleViewAll=()=>{createList(products, "All Products")} + +//////////////////////////////////////////////////////////////////////////////// +let handleItemClick=(id)=>{console.log(id)} + +//////////////////////////////////////////////////////////////////////////////// +//Handle Cart + +//These hanlde session storage +let loadCart =()=>{return stringOfNumbersToArray(sessionStorage.getItem('id'))} let clearCart=()=>{return sessionStorage.clear()} let cartClick =(value)=>{ @@ -60,6 +58,7 @@ let cartClick =(value)=>{ return } +//Retrieving from session storage returns string rather than intger. let stringOfNumbersToArray=(string)=>{ if(string != null){ let array = string.split(",").map((value)=>{ @@ -85,10 +84,13 @@ let getCartItems=()=>{ let viewCart=()=>{ let cartItems = getCartItems() + cartItems = cartItems.length === 0 ? []:cartItems + createList(cartItems, "Cart") console.log(cartItems) - + return cartItems } -////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// +//////////////////////////////////////////////////////////////////////////////// +//Handle Search let handleSearchValue=()=>{ let value = document.getElementById('searchBox').value return value @@ -98,9 +100,16 @@ let searchList=()=>{ let searchValue = handleSearchValue() let getSearchedValue =(searchValue)=>products.filter((element)=>{return element.name === searchValue}) getSearchedValue = getSearchedValue(searchValue) - createList(getSearchedValue) -} -////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// -createList(products) + createList(getSearchedValue, 'Search Results') +} + + +//////////////////////////////////////////////////////////////////////////////// +//Handle Login +let handleLogin=()=>{console.log("This cant sign anyone in yet...")} + +//On Load Functions +handleViewAll(products, "All Products") +//Used to get cart from session memeory loadCart() diff --git a/public/styles.css b/public/styles.css index b3e938c8..b13938ca 100644 --- a/public/styles.css +++ b/public/styles.css @@ -1,25 +1,36 @@ body{ margin: 0px; + font-family: Arial, Helvetica, sans-serif; + background-color: #e6e6e6; } - header{ - background-color: #2b3b4c; + display: flex; + background-color: #384f6b; padding: 10px; height: 50px; } +#headRight{ + margin-left: auto; +} + .headerBTNS{ font-size: 14pt; + box-shadow: 0ch; margin: 5px; border-radius: 5px; + border-style: solid; } -#list{ - +#listAll{ + list-style: none; } + + .list{ display: flex; margin: 10px; + cursor: default; } .listName{ From f79875cc9a1410602038fcc18f64abb690fc724b Mon Sep 17 00:00:00 2001 From: Collin Betori Date: Tue, 30 Apr 2019 00:01:38 -0500 Subject: [PATCH 10/10] working on viewdetail button --- public/index.html | 2 +- public/index.js | 9 ++++++++- public/styles.css | 25 ++++++++++++++++++------- 3 files changed, 27 insertions(+), 9 deletions(-) diff --git a/public/index.html b/public/index.html index 27a0cdb0..3856c45c 100644 --- a/public/index.html +++ b/public/index.html @@ -11,7 +11,7 @@
                  - + diff --git a/public/index.js b/public/index.js index 78db734d..5e920e79 100644 --- a/public/index.js +++ b/public/index.js @@ -6,6 +6,7 @@ let createList = (array, listView) =>{ let getElements = document.getElementById('listAll') let list = array.map((element)=>{return element}) let divInsert = createDIV(list) + //Handle any time no results turn up divInsert = divInsert === undefined ? `
                • No Results Found
                  • `:divInsert listView = `

                  ${listView}

                  ` getElements.innerHTML = listView+divInsert @@ -19,6 +20,7 @@ let createDIV = (array) =>{ value=${element._id} class=list> ${productNamesDIV(element)} + ${viewDetailsDIV(element)} ${addToCartDIV(element)}
                  ` divInsert.push(li) @@ -32,8 +34,13 @@ let productNamesDIV =(element)=>{ return li } +let viewDetailsDIV =(element)=>{ + let detailsBTN = `` + return detailsBTN +} + let addToCartDIV =(element)=>{ - let li = `` + let li = `` return li } diff --git a/public/styles.css b/public/styles.css index b13938ca..7e2499cf 100644 --- a/public/styles.css +++ b/public/styles.css @@ -1,5 +1,6 @@ body{ margin: 0px; + font-size: 16pt; font-family: Arial, Helvetica, sans-serif; background-color: #e6e6e6; } @@ -7,19 +8,27 @@ header{ display: flex; background-color: #384f6b; padding: 10px; - height: 50px; } #headRight{ + align-self: center; + margin: 5px; margin-left: auto; } +.searchBar{ + font-size: 12pt; + margin: 5px; + border-radius: 3px; + border-style: none; +} + .headerBTNS{ font-size: 14pt; - box-shadow: 0ch; - margin: 5px; - border-radius: 5px; - border-style: solid; + background-color: transparent; + border: 0ch; + color: whitesmoke; + font-weight: bold; } #listAll{ @@ -34,9 +43,11 @@ header{ } .listName{ - width: 500px; + width: 650px; } .listBTN{ - + margin-left: 10px; + font-size: 12pt; + border-radius: 3px; } \ No newline at end of file