From a780ab6e7ceeb3a885a715158fcde76225fe19eb Mon Sep 17 00:00:00 2001 From: anniebaker Date: Sun, 14 Jul 2019 11:48:34 -0500 Subject: [PATCH 1/2] aca-store-update --- public/index.html | 44 +++++++++++++++----- public/index.js | 103 +++++++++++++++++++++++++++++++++++++++++++++- public/style.css | 29 +++++++++++++ 3 files changed, 165 insertions(+), 11 deletions(-) create mode 100644 public/style.css diff --git a/public/index.html b/public/index.html index 138da963..c8f55b4f 100644 --- a/public/index.html +++ b/public/index.html @@ -1,14 +1,38 @@ - + - + My Store - - - - - - - - \ No newline at end of file + + + + +
+

Search Results

+ + + + +

Shopping Cart

+ +
+ + + + diff --git a/public/index.js b/public/index.js index 034dbd5e..dcd323d4 100644 --- a/public/index.js +++ b/public/index.js @@ -1 +1,102 @@ -//stuff \ No newline at end of file +function Products(products) { + let productDivs = ""; + for (let i = 0; i < products.length; i++) { + let product = products[i]; + productDivs += `
+
${product.name}
+ + +
`; + } + document.getElementById("products").innerHTML = productDivs; +} + +window.onload = () => { + Products(products); +}; + +function ProductDetail(id) { + let prod = products.find(p => p.id === id); + document.getElementById("productDetail").innerHTML = ` +
Average rating of ${FindAverage(id)} from ${ + prod.reviews.length + } reviews
+
${prod.description}
+
${prod.price}
`; +} + +function FindAverage(id) { + let prod = products.find(p => p.id === id); + let averageRating = + Math.round( + (prod.reviews.map(p => p.rating).reduce((a, b) => a + b) / + prod.reviews.length) * + 10 + ) / 10; + return averageRating; +} + +let cart = []; +function AddCart(id) { + let prod = products.find(p => p.id === id); + cart.push(prod); + let cartItems = cart + .map(p => { + return ` +
+
${p.name}
+
${p.price}
+ Quantity: + + +
`; + // let e = document.getElementById("quantityDropdown"); + // let mult = e.options[e.selectedIndex].value; + // let newPrices = cart.map(p => Number(p.price.substr(1))) * mult; + // console.log(newPrices); + }) + .join(" "); + document.getElementById("cart").innerHTML = ` +
${cartItems}
`; +} +function howMany(prodID, qty) { + let product = cart.find(p => p.id === prodID); + product.quantity = Number(qty); + console.log(product.quantity); +} + +function removeCart() { + let cartElement = document.getElementById("cartRow"); + console.log(cartElement); +} + +function search() { + let searchWord = document.getElementById("search").value.toLowerCase(); + let filteredProducts = products.filter(p => + p.name.toLowerCase().includes(searchWord) + ); + Products(filteredProducts); + document.getElementById("search").value = ""; +} + +function categorySearch(cat) { + if (cat.toLowerCase() === "all") { + Products(products); + } else { + let filteredCategories = products.filter( + p => p.category === cat.toLowerCase() + ); + Products(filteredCategories); + } +} diff --git a/public/style.css b/public/style.css new file mode 100644 index 00000000..c0dd82b0 --- /dev/null +++ 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; +} From 98d5da8428bc2da171293e6ea8eeec4db4c4cf9e Mon Sep 17 00:00:00 2001 From: anniebaker Date: Mon, 5 Aug 2019 13:53:24 -0600 Subject: [PATCH 2/2] aca-two --- public/index.html | 67 ++++++++--------- public/index.js | 180 ++++++++++++++++++++++++---------------------- 2 files changed, 124 insertions(+), 123 deletions(-) diff --git a/public/index.html b/public/index.html index c8f55b4f..cd37eb2a 100644 --- a/public/index.html +++ b/public/index.html @@ -1,38 +1,33 @@ - - - - My Store - - - - -
-

Search Results

- - - - -

Shopping Cart

- -
- - - - + + + + + + + + + +
+ Email
+ Password
+ +
+ + + + + + \ No newline at end of file diff --git a/public/index.js b/public/index.js index dcd323d4..f03e086a 100644 --- a/public/index.js +++ b/public/index.js @@ -1,102 +1,108 @@ -function Products(products) { - let productDivs = ""; - for (let i = 0; i < products.length; i++) { - let product = products[i]; - productDivs += `
-
${product.name}
- - -
`; - } - document.getElementById("products").innerHTML = productDivs; +// 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"); -window.onload = () => { - Products(products); -}; -function ProductDetail(id) { - let prod = products.find(p => p.id === id); - document.getElementById("productDetail").innerHTML = ` -
Average rating of ${FindAverage(id)} from ${ - prod.reviews.length - } reviews
-
${prod.description}
-
${prod.price}
`; + addCartButton = document.getElementById("btnAddToCart"); + txtEmail = document.getElementById("email"); + txtPassword = document.getElementById("password"); + btnSignUp = document.getElementById("btnSignUp"); + btnSignUp.onclick = signUp; } -function FindAverage(id) { - let prod = products.find(p => p.id === id); - let averageRating = - Math.round( - (prod.reviews.map(p => p.rating).reduce((a, b) => a + b) / - prod.reviews.length) * - 10 - ) / 10; - return averageRating; +class User { + constructor(id, email, password) { + this.id = id; + this.email = email; + this.password = password; + } } -let cart = []; -function AddCart(id) { - let prod = products.find(p => p.id === id); - cart.push(prod); - let cartItems = cart - .map(p => { - return ` -
-
${p.name}
-
${p.price}
- Quantity: - - -
`; - // let e = document.getElementById("quantityDropdown"); - // let mult = e.options[e.selectedIndex].value; - // let newPrices = cart.map(p => Number(p.price.substr(1))) * mult; - // console.log(newPrices); - }) - .join(" "); - document.getElementById("cart").innerHTML = ` -
${cartItems}
`; +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 howMany(prodID, qty) { - let product = cart.find(p => p.id === prodID); - product.quantity = Number(qty); - console.log(product.quantity); + +function searchTextChanged(e) { + state.searchText = e.value; +} +function search() { + let filteredProducts = products.filter(p => p.name.indexOf(state.searchText) > -1); + listProducts(filteredProducts); } -function removeCart() { - let cartElement = document.getElementById("cartRow"); - console.log(cartElement); +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 `
${p.name}
` -function search() { - let searchWord = document.getElementById("search").value.toLowerCase(); - let filteredProducts = products.filter(p => - p.name.toLowerCase().includes(searchWord) - ); - Products(filteredProducts); - document.getElementById("search").value = ""; + }); + 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 categorySearch(cat) { - if (cat.toLowerCase() === "all") { - Products(products); - } else { - let filteredCategories = products.filter( - p => p.category === cat.toLowerCase() - ); - Products(filteredCategories); - } } +function showCart() { + listProducts(cart); + var e = document.createElement('div'); + e.innerHTML = ""; + mainDiv.appendChild(e); +} \ No newline at end of file