AustinCodingAcademy · kelly-tnguyen · Jun 25, 2019 · Jun 27, 2019 · Jul 1, 2019 · Jul 5, 2019
diff --git a/images/decrease.png b/images/decrease.png
diff --git a/images/exit.png b/images/exit.png
diff --git a/images/hamburger.png b/images/hamburger.png
diff --git a/images/increase.png b/images/increase.png
diff --git a/images/product test.png b/images/product test.png
diff --git a/images/shopping-cart-256.png b/images/shopping-cart-256.png
diff --git a/public/index.html b/public/index.html
@@ -4,11 +4,89 @@
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <title>My Store</title>
+    <link href="https://fonts.googleapis.com/css?family=Hammersmith+One|Kaushan+Script|Lato|Saira|Sawarabi+Mincho&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="store-styles.css">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-
 </head>
+
 <body>
-     <script src="products.js"></script>    
+
+<div id="registration">
+        <form>
+            <h2 id="welcome">Welcome to</h2>
+            <h1 id="">Kelly's MiniMart</h1>
+            <input type="text" placeholder="Username"><br>
+            <input type="email" id="email" placeholder="Email"><br>
+            <input type="password"  id="password" placeholder="Password"><br><br>
+            <button class="button submit" id ="btnSignup" type="button" onClick="signUp()">Sign In</button> 
+        </form>
+    </div>
+
+
+<div id = "mainScreen" style="display:none">
+<!-- Navigation Bar -->
+<nav class="navbar">
+    <div class="navbar-center">
+        <div class="cart-btn">
+            <span><img class = "icon hamburger" src="/images/hamburger.png"></span>
+        </div>
+        <button id="home" onclick="goHome()"><h1 id="goHome">Kelly's Minimart</h1></button>
+        <div class="cart-btn">
+            <span><img onClick="inCart()" class = "icon cartNum" src="/images/shopping-cart-256.png"></span>
+            <div id="numberCart" onClick="incart()" class="cart-items"></div>
+        </div>
+    </div>
+</nav>
+
+ <!-- Search Bar -->
+    <div id="searchSection">
+        <br>
+        <input type="search" placeholder="Search.." class="searchBox" id="searchBox" oninput = "search()"> 
+        <button type="submit" onclick="search()">Submit</button>
+        <!-- <button type="reset" onClick="reset()">Reset</button> -->
+        <br> <br>
+    </div>
+
+
+<!-- Products -->
+    <section class="prodContainer">
+        <div class="products img-container" id="products"></div>
+
+        <!-- <button class="bag-btn" data-id="1">
+            <img class = "icon cartNum" src="/images/shopping-cart-256.png">Add to Bag
+        </button> -->
+    </section>
+</div>
+<!-- Cart -->
+ <!-- <div class="cart-overlay">
+    <div class="cart">
+        <span class = "close-cart"> <img class="exit" src="/images/exit.png"> </span>
+        <h2>Your Cart</h2>
+        <div class="cart-content"></div> -->
+        <!-- Cart Item -->
+        <!-- <div class="cart-item">
+            <img class="productPic" src="/images/product test.png">
+            <div>
+                <h4>Queen Bed</h4>
+                <h5>$9.00</h5>
+                <span class="remove-item">Remove</span>
+            </div>
+            <div>
+                <img class="increase pic" src="/images/increase.png">
+                <p class="item-amount">1</p>
+                <img class="decrease pic" src="/images/decrease.png">
+            </div>
+        </div> -->
+        <!-- End of Cart Item -->
+
+<!-- <div class="cart-footer">
+        <h3>Your Total: $ <span class="cart-total">0</span> </h3>
+        <button class="clear-cart banner-btn">Clear Cart</button>
+    </div>
+</div>
+</div> -->
+
+    <!-- <script src="products.js"></script>     -->
     <script src="index.js"></script>   
 </body>
 </html>
diff --git a/public/index.js b/public/index.js
@@ -1 +1,132 @@
-//stuff
+let shoppingCart = [];
+let products = [];
+
+function Products(products){
+    let productDivs = "";
+
+    for (let i=0; i < products.length; i++) {
+         let product = products[i];
+          productDivs += 
+         `<div id = 'product'>
+         <div><h2>${product.name}</h2></div>
+         <div><img id = "pictures" src=${product.imgUrl}></div>
+         <div id = "more ${product.id}"></div>
+         <div>Price: ${product.price}</li></div>
+         <br>
+         <button id = "viewBtn ${product.id}" onClick="ProductDetails(${product.id})">View</button><br>
+         <button id="bag-btn ${product.id}" onClick="addToCart(${product.id})">
+            <img class = "icon cartNum smallerCart" src="/images/shopping-cart-256.png">Add to Cart</button>
+            <div id="cartView${product.id}"></div>
+          </div>`
+       }
+    document.getElementById("products").innerHTML = productDivs;
+
+    let counter = 0;
+    shoppingCart.map(p => {
+        counter = counter + p.quantity
+    })
+    document.getElementsByClassName("cart-items").innerHTML = counter;
+
+    document.getElementById("numberCart").innerHTML = `${counter}`;
+}
+
+window.onload = () => {
+        fetch("https://acastore.herokuapp.com/products")
+        .then(response => response.json())
+        .then(data => products = data)
+        .then(products => Products(products));
+    // Products(products);
+    mainScreen = document.getElementById("mainScreen");
+    registration = document.getElementById("registration");
+    btnSignup = document.getElementById("btnSignup");
+    btnSignup.onclick = signUp;
+    txtEmail = document.getElementById("email");
+    txtPassword = document.getElementById("password");
+}
+
+class User {
+    constrctor(email, password, cartId) {
+        this.email = email;
+        this.password = password;
+        this.cartId = cartId;
+    }
+}
+    function signUp() {
+        mainScreen.style.display = "block";
+        registration.style.display = "none";
+        let newUser = new User(txtEmail.value, txtPassword.value, null);
+        fetch("https://acastore.herokuapp.com/users", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify(newUser)
+        }).then(response => response.json());
+        console.log(newUser);
+        localStorage.setItem('newUser', JSON.stringify(newUser));
+    }
+
+function ProductDetails(id) {
+    let product = products.find(p=>p.id === id);
+    let button = document.getElementById(`viewBtn ${product.id}`);
+    document.getElementById(`more ${product.id}`).innerHTML = 
+    `<div>
+        <div><li>Description: ${product.description}</li></div>
+        <div><li>Category: ${product.category}</li></div>
+        <div><li>Rating (5 is the highest): ${product.rating}</li></div>
+    </div>`; 
+        button.setAttribute('onClick', `hideDetails(${product.id})`)
+        button.innerHTML = "Hide";
+}
+
+function hideDetails(id) {
+    let product = products.find(p => p.id === id);
+    document.getElementById(`more ${product.id}`).innerHTML = "";
+    document.getElementById(`viewBtn ${product.id}`).setAttribute('onClick', `ProductDetails(${product.id})`)
+}
+
+function search(){
+    let searchWord = document.getElementById("searchBox").value;
+    //Shows exact mathing 
+    let filteredProducts = products.filter(p => p.name.toLowerCase().includes(searchWord))
+
+    Products(filteredProducts);
+}
+
+function addToCart(prodID){
+    let foundProd = products.find(p => p.id === prodID);
+    let inCart = shoppingCart.find(p => p.id === prodID);
+
+    if (!inCart) {
+        shoppingCart.push(foundProd);
+        shoppingCart.find(p => p.id === prodID).quantity=1;
+
+    } else {
+        inCart.quantity +=1;
+    }
+    console.log(shoppingCart);
+
+    Products(products);
+}
+
+function inCart() {
+    Products(shoppingCart);
+    shoppingCart.map(p => { 
+       let bagBtn = document.getElementById(`bag-btn ${p.id}`);
+       bagBtn.innerHTML = "Remove";
+       bagBtn.setAttribute( "onClick", `remove(${p.id})`);
+
+        document.getElementById(`cartView${p.id}`).innerHTML = `QTY: ${p.quantity}`;
+    });
+}
+
+function remove(prodId) {
+    let idx = shoppingCart.findIndex(p => p.id === prodId);
+    shoppingCart.splice(idx, 1);
+    inCart();
+}
+
+// function goHome() {
+//     Products(products);
+//     document.getElementById("goHome");
+// }