AustinCodingAcademy · anniebaker · Jul 14, 2019 · Aug 5, 2019
diff --git a/public/index.html b/public/index.html
@@ -1,14 +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="style.scss">
+  <script src="index.js"></script>
+  <!-- <script src="products.js"></script> -->
 </head>
+
 <body>
-     <script src="products.js"></script>    
-    <script src="index.js"></script>   
+  <div id="home" style="display:none">
+    <button type="button" id="btnSearch" onClick="showHome()">Home</button>
+    Search<input id="search" onChange="searchTextChanged(this)">
+    <button type="button" id="btnSearch" onClick="search()">Search</button>
+    <button type="button" id="btnCart" onClick="showCart()">Cart</button>
+    <div id="main"></div>
+    <button style="display:none" type="button" id="btnAddToCart" onClick="addToCart(state.currentProductToAdd)">Add
+      To Cart</button>
+  </div>
+  <div id="signup">
+    Email <input id="email"> <br>
+    Password <input id="password"> <br>
+    <button type="button" id="btnSignUp" onClick="signUp()">Sign Up</button>
+  </div>
+  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
+    crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
+    crossorigin="anonymous"></script>
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
+    crossorigin="anonymous"></script>
 </body>
+
 </html>
diff --git a/public/index.js b/public/index.js
@@ -1 +1,108 @@
-//stuff
+// Code goes here
+const bootstrap = require("bootstrap");
+
+let state = {
+  searchText: "",
+  currentProductToAdd: null
+}
+let cart = [];
+let addCartButton = null;
+let txtEmail = null;
+let txtPassword = null;
+let btnSignUp = null;
+let signup = null;
+let home = null;
+let mainDiv = null;
+let Users = [];
+let products = [];
+let id = 0;
+
+
+window.onload = function () {
+  fetch("https://acastore.herokuapp.com/products")
+    .then(response => response.json())
+    .then(myJson => (products = myJson))
+    .then(products => {
+      console.log(products)
+      listProducts(products);
+    })
+  mainDiv = document.getElementById("main");
+  signup = document.getElementById("signup");
+  home = document.getElementById("home");
+
+
+  addCartButton = document.getElementById("btnAddToCart");
+  txtEmail = document.getElementById("email");
+  txtPassword = document.getElementById("password");
+  btnSignUp = document.getElementById("btnSignUp");
+  btnSignUp.onclick = signUp;
+}
+
+class User {
+  constructor(id, email, password) {
+    this.id = id;
+    this.email = email;
+    this.password = password;
+  }
+}
+
+function signUp() {
+  txtEmail = document.getElementById("email");
+  txtPassword = document.getElementById("password");
+  id += 1;
+  let newUser = new User(id, txtEmail.value, txtPassword.value);
+  Users.push(newUser);
+  console.log(Users);
+  document.getElementById("home").style.display = "block";
+  document.getElementById("signup").style.display = "none";
+  fetch("https://acastore.herokuapp.com/users", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify(newUser)
+  }).then(response => {
+    console.log("response: ", response.json());
+  });
+
+}
+
+function searchTextChanged(e) {
+  state.searchText = e.value;
+}
+function search() {
+  let filteredProducts = products.filter(p => p.name.indexOf(state.searchText) > -1);
+  listProducts(filteredProducts);
+}
+
+function showProductDetail(id) {
+  addCartButton.style.display = "block";
+  let product = products.find(p => p.id === id);
+  state.currentProductToAdd = product;
+  mainDiv.innerHTML = product.description;
+}
+function listProducts(products) {
+  let prodDivs = products.map(p => {
+    return `<hr><div onclick="showProductDetail(${p.id})">${p.name}</div>`
+
+  });
+  mainDiv.innerHTML = prodDivs.join("");
+}
+function addToCart(prod) {
+  cart.push(prod);
+  showHome();
+}
+function showHome() {
+  addCartButton.style.display = "none";
+  state.currentProductToAdd = null;
+  listProducts(products);
+}
+function placeOrder() {
+
+}
+function showCart() {
+  listProducts(cart);
+  var e = document.createElement('div');
+  e.innerHTML = "<button onClick='placeOrder()'>Place Order</button>";
+  mainDiv.appendChild(e);
+}
diff --git a/public/style.css b/public/style.css
@@ -0,0 +1,29 @@
+ul {
+  list-style: none;
+}
+
+.menu li {
+  /* display: inline-block; */
+  background-color: white;
+  padding: 10px 15px;
+  transition: all 0.1s ease;
+  position: relative;
+}
+
+.menu li:hover {
+  cursor: pointer;
+  background-color: blue;
+}
+
+#dropdown {
+  display: none;
+  position: absolute;
+  z-index: 1;
+  text-align: center;
+  left: 0;
+  /* top: 100%; */
+}
+
+#dropdown.active {
+  display: block;
+}