AustinCodingAcademy · AFutureWebDev · Jun 29, 2019 · Jul 1, 2019 · Jul 8, 2019 · Jul 14, 2019
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/public/index.html b/public/index.html
@@ -4,11 +4,84 @@
     <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">
-
+    <meta name="viewport" content="width=device-width, initial-scale=1">  
+    <link rel="stylesheet" href="styles.css">
 </head>
+
 <body>
-     <script src="products.js"></script>    
+
+    <!-- Sign in/up components -->
+    <div id="register">
+        <form action="">
+            <label for="email">Email:</label>
+            <input id ="email" type="text" placeholder="example@email.com" required> <br/>
+            <label for="password">Password:</label>
+            <input id="password" type="password"> <br/>
+            <button type="button" id="btn-signup" onclick="signUp()">Sign Up</button>
+        </form>
+    </div>
+
+    <div id="mainScreen" style="display:none">
+        <header id="head-container">
+            <h1 id="title">ACA Store</h1>
+        </header>
+
+        <div id="search">
+            <div id="home">
+                <button type="button" id="btnHome" onclick="showHome()">Home</button>
+            </div>
+            <input type="text" id="searchBox" placeholder="Search..."><button id="find" onclick="search()">Search</button>
+            <div id = "cat-container">
+                <h3>Filter:</h3>
+                <select id="categories">
+                    <option value="">--Choose--</option>
+                    <option value="food">Food</option>
+                    <option value="electronics">Electronics</option>
+                    <option value="Sporting">Sporting</option>
+                </select>
+            </div>
+        </div>
+
+        <div id ="products"></div>
+
+
+        <h2>CART</h2>
+            <div class="cart-row">
+                <span class="cart-item cart-header cart-column">ITEM</span>
+            </div>
+
+            <ul id="cart-items"></ul>
+
+            <div class="cart-total">
+                <span class="cart-total-title">Total</span>
+                <span id="cart-total">$0.00</span>
+            </div>
+
+            <h2>Please Fill out the Following Form:</h2>
+            <form id="checkout" action="">
+                <label for="first-name">First Name:</label>
+                <input type="text" id="first-name">
+                <label for="last-name">Last Name:</label>
+                <input type="text" id="last-name">
+                <label for="email">Email Address:</label>
+                <input type="email" name="email" id="email"  placeholder="example@email.com">
+                <button type="submit" id="placeOrder">Place Order</button>
+            </form>
+
+            <!-- Admin Only -->
+            <!-- ## Create Product
+            * Create a screen that is intended to be used by the employees of the company
+            * Create text input for name,description, price
+            * Create a save button, when clicked will do a post to /products. Refresh the list of products -->
+            <button type="button" id="admin-btn" onclick="admin()">Admin</button>
+            <div id="admin-container" style="display:none">
+                Product Name:<input type="text" id="product-name">
+                Description: <input type="text" id="product-description">
+                Price: <input type="text" id="product-price">
+                <button type="button" id="save-btn" onclick="save()">Save</button>
+            </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,191 @@
-//stuff
+let products = [];
+
+window.onload = function() {
+    fetch("https://acastore.herokuapp.com/products")
+        .then(response => response.json())
+        .then(data => products = data)
+        .then(products => Products(products))
+    mainDiv = document.getElementById("mainScreen");
+    register = document.getElementById("register");
+    home = document.getElementById("home");
+    txtEmail = document.getElementById("email");
+    txtPassword = document.getElementById("password");
+    btnSignUp = document.getElementById("btn-signup");
+    btnSignUp.onclick = signUp;
+    adminBtn = document.getElementById("admin-btn");
+    adminBtn.onclick = admin;
+    adminContainer = document.getElementById("admin-container");
+    txtName = document.getElementById("product-name");
+    txtDescription = document.getElementById("product-description");
+    txtPrice = document.getElementById("product-price");
+    btnSave = document.getElementById("save-btn");
+    btnSave.onclick = save;
+}
+
+class User {
+    constructor(email, password, cartId) {
+      this.email = email;
+      this.password = password;
+      this.cartId = cartId;
+    }
+  }
+
+function signUp() {
+    mainDiv.style.display = "block";
+    register.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 showHome() {
+    Products(products);
+}
+
+
+function Products(products) {
+let productLi = "";
+let detailsButton = document.createElement('button').value = "More Details";
+let toCartButton = document.createElement('button').value = "Add to Cart";
+
+for (let i =0; i < products.length; i++) {
+        let product = products[i];
+        productLi += `<div class ="container">${product.name}
+        <div class="product-image"><img id="picture" src=${product.imgUrl}></div>
+        <div class="details" style="visibility: hidden;" id="${product.id}">
+            <div>Description: ${product.description}</div>
+            <div>Price: ${product.price}</div>
+            <div>Number of Reviews: ${product.reviewsNum}</div>
+            <div>Rating: ${product.rating}</div>
+        </div>
+        </div>
+        <button onclick = "moreDetails(${product.id})">${detailsButton}</button>
+        <button onclick ="addToCart(${product.id});calculateCartTotal();">${toCartButton}</button>
+        <select id="quantity">
+            <option value="">--Quantity--</option>
+            <option value="1">1</option>
+            <option value="2">2</option>
+            <option value="3">3</option>
+            <option value="4">4</option>
+            <option value="5">5</option>
+            <option value="6">6</option>
+            <option value="7">7</option>
+            <option value="8">8</option>
+            <option value="9">9</option>
+            <option value="10">10</option>
+        </select>`;
+}
+document.getElementById("products").innerHTML= productLi;
+}
+
+function populateCart() {
+parsedItems.forEach()
+    let cartItems = document.getElementById('cart-items');
+    let li = document.createElement('li');
+    let removeButton = document.createElement('button');
+    removeButton.innerHTML = "Remove";
+    removeButton.addEventListener("click", function(){
+        this.parentElement.remove();
+    })
+    li.appendChild(document.createTextNode(product.name));
+    cartItems.appendChild(li);
+    let price = document.createElement('span');
+    price.className = "amount";
+    price.style.paddingLeft = "10px";
+    price.appendChild(document.createTextNode(product.price));
+    li.appendChild(price);
+    li.append(removeButton);
+}
+
+
+
+function moreDetails(id) {
+    let detailsDiv = document.getElementById(id);
+    if (detailsDiv !== null) {
+        if (detailsDiv.style.visibility === "visible") {
+            detailsDiv.style.visibility = "hidden";
+        } else if (detailsDiv.style.visibility === "hidden") {
+            detailsDiv.style.visibility = "visible";
+        }
+    } 
+}
+
+function addToCart(id) {
+    let cartItems = document.getElementById('cart-items');
+    let product = products.find(function(product) {
+        return product.id == id;
+    });
+    let li = document.createElement('li');
+    let removeButton = document.createElement('button');
+    removeButton.innerHTML = "Remove";
+    removeButton.addEventListener("click", function(){
+        this.parentElement.remove();
+        calculateCartTotal();
+    })
+    li.appendChild(document.createTextNode(product.name));
+    cartItems.appendChild(li);
+    let price = document.createElement('span');
+    price.className = "amount";
+    price.style.paddingLeft = "10px";
+    price.appendChild(document.createTextNode(product.price));
+    li.appendChild(price);
+    li.append(removeButton);
+}
+
+
+
+function calculateCartTotal() {
+   let amounts = document.getElementsByClassName("amount");
+   let total = 0;
+   for (let i = 0; i < amounts.length; i++) {
+       const amount = parseFloat(amounts[i].innerText.replace('$', ''));
+       total = total + amount;
+       total = Math.round(total * 100) / 100;
+   }
+   console.log(total);
+   let cartTotal = document.getElementById('cart-total');
+   cartTotal.innerText = "$" + total;
+}
+
+function search() {
+    let searchWord = document.getElementById("searchBox").value.toLowerCase();
+    let filteredProducts = products.filter(p => p.name.toLowerCase() === searchWord)
+
+    Products(filteredProducts);
+}
+
+
+class Save {
+    constructor(name, description, price) {
+      this.name = name;
+      this.description = description;
+      this.price = price;
+    }
+  }
+
+function admin(){
+    adminContainer.style.display = "block";
+}
+
+function save() {
+    let newProduct = new Save(txtName.value, txtDescription.value, txtPrice.value);
+    fetch("https://acastore.herokuapp.com/products", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify(newProduct)
+    }).then(response => response.json());
+    console.log(newProduct);
+    localStorage.setItem('newProduct', JSON.stringify(newProduct));
+    Products(products);
+}
+
+
diff --git a/public/products.js b/public/products.js
@@ -2,7 +2,7 @@ const products = [{
   "id": 1,
   "name": "Body Luxuries Sweet Lavender Hand Sanitizer",
   "description": "Makes your hands clean",
-  "reviews": 46,
+  "reviewsNum": 46,
   "rating": 2,
   "imgUrl": "http://dummyimage.com/136x167.bmp/cc0000/ffffff",
   "price": "$95.11",

diff --git a/public/styles.css b/public/styles.css
@@ -0,0 +1,78 @@
+#title {
+    text-align: center;
+    font-size: 50px;
+    font-weight: bold;
+}
+
+#search {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+
+#btnHome {
+    height: 30px;
+    margin-right: 25px;
+}
+
+#searchBox {
+    width: 500px;
+    height: 25px;
+    border: 1px solid black;
+    margin-right: 5px;
+}
+
+#find {
+    border: 1px solid black;
+    color: white;
+    background-color: black;
+    margin-right: 20px;
+    height: 30px;
+}
+
+#find:hover {
+    color: black;
+    background-color: lightgray;
+}
+
+#cat-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    height: 30px;
+}
+
+#categories {
+    border: 1px solid black;
+}
+
+h3 {
+    margin-right: 5px;
+    text-align: start;
+    margin-top: 5px;
+}
+
+#products {
+    font-weight: bold;
+    font-size: 20px;
+    /* display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-around; */
+}
+
+/* .details {
+    display: flex;
+    justify-content: column;
+    justify-content: center;
+} */
+
+.details {
+    font-weight: 400;
+    font-size: 15px;
+}
+
+#checkout {
+    margin-top: 10px;
+}
+