AustinCodingAcademy · JacobGonz1993 · Jun 25, 2019 · Jul 10, 2019 · Jul 15, 2019 · Aug 18, 2019
diff --git a/index.js b/index.js
@@ -0,0 +1,21 @@
+let express = require("express");
+const app = express();
+
+app.use(express.static('public'))
+
+app.listen(3000);
+
+//day 8 express code
+// const express = require("express");
+// const bodyParser = require("body-parser");
+
+// const app = express();
+// app.use(bodyParser.json());
+
+// app.listen(3002, (err) => {
+//  if (err) {
+//    return console.log("Error", err);
+//  }
+//  console.log("Web server is now listening for messages", err);
+// });
+
diff --git a/public/index.css b/public/index.css
@@ -0,0 +1,37 @@
+*{
+    box-sizing: border-box;
+}
+body{
+    margin: 0;
+    padding: 0;
+}
+.searchbox{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    height: 40px;
+    border-radius: 40px;
+    padding: 10px;
+    color: black;
+}
+.search-btn{
+    float: right;
+    width: 40px;
+    height: 40px;
+    padding: 10px;
+    border: 1px;
+    outline-color:black;
+}
+.search-txt{
+    float: left;
+    padding: 0;
+    height: 30px;
+    outline-color: grey;
+    font-size: 16px;
+    width: 240px;
+}
+
+.item{
+    border: solid black 1px;
+}
diff --git a/public/index.html b/public/index.html
@@ -4,11 +4,50 @@
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <title>My Store</title>
+    <link rel="stylesheet" href="index.css">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
 </head>
 <body>
-     <script src="products.js"></script>    
-    <script src="index.js"></script>   
+<!--sign up code-->
+    <!-- <div id="register">
+        <form action="">
+            <label for="email">Email:</label>
+            <input id="email" type="text"
+            placeholder="example123@hotmail.com" required> <br/>
+            <label for="password">Password:</label>
+            <input id="password" type="password"> <br/>
+            <button type="button" id="btnSignUp" onclick="signUp()">Sign Up</button>
+        </form>
+    </div> -->
+
+
+    <!-- <div id="main" style="display: none"> -->
+
+
+
+    <button type="button" id="btnHome" onclick="returnHome()">Home</button>
+    <input id="btnSearch"><button type="button" onclick="search()">search</button></input>
+    <button type="button" id="btnGoToCart" onclick="goToCart()">Cart</button>
+    <!-- <form autocomplete="off" action="products.js">
+        <div class="searchbox">
+            <input class="search-txt" type="text" name="" id="myInput" placeholder="Search by name"></input>
+            <a class= "search-btn" href="#">Search </a>
+        </div>
+    </form> -->
+
+    <div id="products"></div>
+
+    <button style="display: none" type="button" id="btnAddToCart" onClick="addToCart()">Add To Cart</button>
+    <div id="products"></div>
+    </div>
+    <!-- got rid of the product.js script as recommended by eric -->
+    <script src="index.js"></script>  
+    <script type="module">
+            import('products.js').then(module => {
+                console.log(module);
+              });
+    </script>
+
 </body>
 </html>
diff --git a/public/index.js b/public/index.js
@@ -1 +1,101 @@
-//stuff
+//stuff
+//just checking
+// let prod=require("products.js");
+let products=[];
+
+//cart is an empty array you push items to
+let cart=[];
+//best practice to set this to null?
+let addCartBtn = document.getElementById("btnAddToCart").innerHTML;
+
+function listProducts(prods){
+    let productDivs = "";
+    for(let i=0; i < prods.length; i++){
+        let product = prods[i];
+        productDivs +=`<div class="item">
+        <img src="${product.imgUrl}">,
+        <br> ${product.name}, 
+        <br> Category: ${product.category},
+        <br> Description: ${product.description}, 
+        <br> Rating: ${product.rating}, 
+        <br> Price: ${product.price},
+        <br> ${addCartBtn}</div>`
+    }
+
+    document.getElementById("products").innerHTML = productDivs;
+    document.getElementById("btnAddToCart").onclick = function() {addToCart()};
+}
+//what happens on load
+window.onload = function(){
+    fetch("https://acastore.herokuapp.com/products")
+        .then(res => res.json())
+        .then(parsedData => listProducts(parsedData))
+
+
+    // listProducts(products);
+    // mainDiv = document.getElementById("main");
+    // register = document.getElementById("register");
+    // btnSignUp = document.getElementById("btnSignUp");
+    // btnSignUp.onclick = signUp;
+    // txtEmail = document.getElementById("email");
+    // txtPassword = document.getElementById("password");
+}
+//what happens when you return home
+function returnHome(){
+    fetch("https://acastore.herokuapp.com/products")
+    .then(res => res.json())
+    .then(parsedData => listProducts(parsedData))
+
+    listProducts(prod);
+}
+//what happens when you add something to the cart
+function addToCart(prod){
+    cart.push(prod);
+}
+//see the cart
+function goToCart(){
+    listProducts(cart);
+}
+//what happens when you search
+function search(){
+    let searchText = document.getElementById("btnSearch").value;
+    fetch("https://acastore.herokuapp.com/products")
+        .then(res => res.json())
+        .then(parsedData => {
+            let filteredProducts = parsedData.filter(p=>p.name.toLowerCase().includes(searchText));
+            listProducts(filteredProducts);
+        })
+
+
+  }
+
+  //user info
+class UserInfo {
+    constructor(email, password, cartId){
+        this.email= email;
+        this.password= password;
+        this.cartId= cartId;
+    }
+}
+//sign up
+function signUp(){
+    mainDiv.style.display = "block";
+    register.style.display = "none";
+   let newUser = new UserInfo(txtEmail.value, txtPassword.value, null);
+   //learn this bs its called fetch and its wild
+   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));
+
+}
+
+
+
+//document.body.innerHTML = productDivs; //this will override a text input box
+