AustinCodingAcademy · cbetori · Apr 11, 2019 · Apr 14, 2019 · Apr 15, 2019 · Apr 15, 2019
diff --git a/public/index.html b/public/index.html
@@ -1,14 +1,29 @@
 <!DOCTYPE html>
 <html>
+
 <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <title>My Store</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-
+    <link rel="stylesheet" href="styles.css">
 </head>
+
 <body>
-     <script src="products.js"></script>    
-    <script src="index.js"></script>   
+    <header>
+        <input id='searchBox' class='searchBar' type='input' placeholder='search' />
+        <button id='searchValue' class='headerBTNS' onclick='searchList()'>Search</button>
+        <button id='viewAll' class='headerBTNS' onclick='handleViewAll()'>View All</button>
+        <button id='clearCartBtn' class='headerBTNS' onclick="clearCart()">Clear Cart</button>
+        <div id='headRight'> 
+            <button id='shoppingCartBtn' class='headerBTNS' onclick="viewCart()">Shopping Cart</button>
+            <button id='login' class='headerBTNS' onclick="handleLogin()">Login</button>
+        </div>
+    </header>
+
+    <ul id='listAll'></ul>
 </body>
+<script src="products.js"></script>
+<script src="index.js"></script>
+
 </html>
diff --git a/public/index.js b/public/index.js
@@ -1 +1,122 @@
-//stuff
+'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 ? `<li class=list>No Results Found</li>`:divInsert
+    listView = `<h1>${listView}</h1>`
+    getElements.innerHTML = listView+divInsert
+}
+
+let createDIV = (array) =>{
+    let divInsert = []
+    let container
+    array.map((element)=>{
+        let li =    `<div id=list${element._id}
+                    value=${element._id}
+                    class=list>
+                    ${productNamesDIV(element)}
+                    ${viewDetailsDIV(element)}
+                    ${addToCartDIV(element)}
+                    </div>`
+        divInsert.push(li)
+        container = divInsert.join('')
+    })
+    return container
+}
+
+let productNamesDIV =(element)=>{
+    let li =  `<li onclick=handleItemClick(${element._id}) class=listName>${element.name}</li>`
+    return li
+}
+
+let viewDetailsDIV =(element)=>{
+    let detailsBTN = `<button value=${element._id} class=listBTN onclick=handleItemClick(${element._id})>View Details</button>`
+    return detailsBTN  
+}
+
+let addToCartDIV =(element)=>{
+    let li = `<button value=${element._id} class=listBTN onclick=cartClick(value)>Add to Cart</button>`
+    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
@@ -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;
+}
diff --git a/version1/index.1.html b/version1/index.1.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>My Store</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="styles1.css">
+</head>
+<body>
+    <header>
+        <input id='searchBox' type='input' placeholder='search'/>
+        <button id='handleSearch'>Search</button>
+        <button id='shoppingCartBtn'>Shopping Cart</button>
+    </header>
+
+    <div id='searchResult'/>
+
+    <ul id='shoppingCart' class="list hide">
+        <div id='namesCart' class="names"></div>
+        <div id='buttonsCart' class='buttons'></div>
+    </ul>
+
+    <div id='searchResult'/>
+
+    <ul id='listAll' class="list">
+        <div id='namesList' class="names"></div>
+        <div id='buttonsList' class='buttons'></div>
+    </ul>
+</body>
+<script src="products.js"></script>
+<script src="index1.js"></script>
+</html>