diff --git a/public/index.html b/public/index.html index 138da963..3856c45c 100644 --- a/public/index.html +++ b/public/index.html @@ -1,14 +1,29 @@ + My Store - + + - - +
+ + + + +
+ + +
+
+ + + + + \ No newline at end of file diff --git a/public/index.js b/public/index.js index 034dbd5e..5e920e79 100644 --- a/public/index.js +++ b/public/index.js @@ -1 +1,122 @@ -//stuff \ No newline at end of file +'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) + //Handle any time no results turn up + divInsert = divInsert === undefined ? `
  • No Results Found
    • `:divInsert + listView = `

    ${listView}

    ` + getElements.innerHTML = listView+divInsert +} + +let createDIV = (array) =>{ + let divInsert = [] + let container + array.map((element)=>{ + let li = `
    + ${productNamesDIV(element)} + ${viewDetailsDIV(element)} + ${addToCartDIV(element)} +
    ` + divInsert.push(li) + container = divInsert.join('') + }) + return container +} + +let productNamesDIV =(element)=>{ + let li = `
  • ${element.name}
    • ` + return li +} + +let viewDetailsDIV =(element)=>{ + let detailsBTN = `` + return detailsBTN +} + +let addToCartDIV =(element)=>{ + let li = `` + return li +} + +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)=>{ + let cart = loadCart() + cart.push(parseFloat(value)) + cart = [...new Set(cart) ] + console.log(cart) + sessionStorage.setItem('id',cart) + return +} + +//Retrieving from session storage returns string rather than intger. +let stringOfNumbersToArray=(string)=>{ + if(string != null){ + let array = string.split(",").map((value)=>{ + return parseInt(value, 10) + }) + return array + } + return [] +} + +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() + 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 +} + +let searchList=()=>{ + let searchValue = handleSearchValue() + let getSearchedValue =(searchValue)=>products.filter((element)=>{return element.name === searchValue}) + getSearchedValue = getSearchedValue(searchValue) + 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 new file mode 100644 index 00000000..7e2499cf --- /dev/null +++ b/public/styles.css @@ -0,0 +1,53 @@ +body{ + margin: 0px; + font-size: 16pt; + font-family: Arial, Helvetica, sans-serif; + background-color: #e6e6e6; +} +header{ + display: flex; + background-color: #384f6b; + padding: 10px; +} + +#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; + background-color: transparent; + border: 0ch; + color: whitesmoke; + font-weight: bold; +} + +#listAll{ + list-style: none; +} + + +.list{ + display: flex; + margin: 10px; + cursor: default; +} + +.listName{ + width: 650px; +} + +.listBTN{ + margin-left: 10px; + font-size: 12pt; + border-radius: 3px; +} \ No newline at end of file diff --git a/version1/index.1.html b/version1/index.1.html new file mode 100644 index 00000000..47b6c01f --- /dev/null +++ b/version1/index.1.html @@ -0,0 +1,33 @@ + + + + + + My Store + + + + +
    + + + +
    + +
    + + + +
    + + + + + + \ 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/indexOLD.js b/version1/indexOLD.js new file mode 100644 index 00000000..91b6219a --- /dev/null +++ b/version1/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/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/version1/styles.1.css b/version1/styles.1.css new file mode 100644 index 00000000..b08bee87 --- /dev/null +++ b/version1/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/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; +}