diff --git a/images/decrease.png b/images/decrease.png new file mode 100644 index 00000000..28035e25 Binary files /dev/null and b/images/decrease.png differ diff --git a/images/exit.png b/images/exit.png new file mode 100644 index 00000000..957a4095 Binary files /dev/null and b/images/exit.png differ diff --git a/images/hamburger.png b/images/hamburger.png new file mode 100644 index 00000000..54bdd1bf Binary files /dev/null and b/images/hamburger.png differ diff --git a/images/increase.png b/images/increase.png new file mode 100644 index 00000000..49daa1a8 Binary files /dev/null and b/images/increase.png differ diff --git a/images/product test.png b/images/product test.png new file mode 100644 index 00000000..a0c2b643 Binary files /dev/null and b/images/product test.png differ diff --git a/images/shopping-cart-256.png b/images/shopping-cart-256.png new file mode 100644 index 00000000..781b364b Binary files /dev/null and b/images/shopping-cart-256.png differ diff --git a/public/index.html b/public/index.html index 138da963..e9425a3a 100644 --- a/public/index.html +++ b/public/index.html @@ -4,11 +4,89 @@ My Store + + - + - + +
+
+

Welcome to

+

Kelly's MiniMart

+
+
+

+ +
+
+ + + + + + + + + + + + \ No newline at end of file diff --git a/public/index.js b/public/index.js index 034dbd5e..5cef2bcd 100644 --- a/public/index.js +++ b/public/index.js @@ -1 +1,132 @@ -//stuff \ No newline at end of file +let shoppingCart = []; +let products = []; + +function Products(products){ + let productDivs = ""; + + for (let i=0; i < products.length; i++) { + let product = products[i]; + productDivs += + `
+

${product.name}

+
+
+
Price: ${product.price}
+
+
+ +
+
` + } + 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 = + `
+
  • Description: ${product.description}
    • +
  • Category: ${product.category}
    • +
  • Rating (5 is the highest): ${product.rating}
    • +
    `; + 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"); +// } \ No newline at end of file diff --git a/public/store-styles.css b/public/store-styles.css new file mode 100644 index 00000000..51b01ebe --- /dev/null +++ b/public/store-styles.css @@ -0,0 +1,245 @@ +body { + background: whitesmoke; + text-align: center; + font-family: 'Lato', sans-serif; +} + +h1 { + font-family: 'Kaushan Script', cursive; +} + +#registration { + text-align: center; + padding-top: 250px; +} + + + +/* Navigation Bar */ +.navbar { + background:pink; + margin-bottom: 10px; + margin-right: auto; + position: sticky; + top: 0; + display: flex; + align-items: center; + z-index: 1; + width: 100%; +} + +.navbar-center { + width: 100%; + max-width: 1170px; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: space-between; +} + +.cart-btn { + position: relative; + cursor: pointer; +} + +.cart-items { + position: absolute; + border: 1px solid gray; + top: -8px; + right: -8px; + background: darkorange; + padding: 0 5px; + border-radius: 30%; +} +/* End of Navigation Bar */ + +/* Products section */ +#product { + border: 1px solid black; + margin: 5px; + width: 280px; + height: 500px; + padding: 10px; +} + +#products { + text-align: center; + display: flex; + flex-direction: row; + flex-wrap: wrap; +} + +#pictures { + width: 200px; + height: 200px; + padding-bottom: 20px; +} + +.icon { + height: 25px; + width: 25px; +} + +.smallerCart { + height: 15px; + width: 15px; + padding-right: 5px; +} + +#bag-btn { + /* top: 70%; + right: 0; */ + border: 10px; + text-transform: uppercase; + padding: 0.5rem 0.75rem; + font-weight: bold; + /* transition: 0s; + transform: translateX(101%); */ + margin-top: 30px; + cursor: pointer; +} + +#bag-btn:hover { + cursor: pointer; + background: gray; + color: white; +} + +#product:hover { + opacity: 0.8; +} + +#home { + background: pink; +} + +/* End of Product Section */ +/* +/* Cart */ +/* .exit { + height: 25px; + width: 25px; +} */ + +/* COMMENT THIS OUT IF IT DOESN'T WORK */ +/* .cart-overlay { + position: fixed; + top: 0; + right: 0; + width: 100%; + height: 100%; + background: transparent; + transition: ease-in; + /* background: lightpink; + z-index: 2; + visibility: hidden; +} + +.cart { + position: fixed; + top: 0; + right: 0; + width: 100%; + height: 100%; + overflow: scroll; + z-index: 3; + background:lightgray; + padding: 1.5rem; + transition: ease-in; + transform: translateX(100%); +} + +.showCart { + transform: translateX(0); +} + +.transparentBcg { + visibility: visible; +} + +@media screen and (min-width: 768px) { + .cart { + width: 30vw; + min-width: 450px; + } +} + +.close-cart { + font-size: 1.7rem; + cursor: pointer; +} + +.cart h2 { + text-align: center; + margin-bottom: 2rem; +} +.productPic { + height: 100px; + width: 100px; +} + +.increase, .decrease{ + height: 30px; + width: 30px; + cursor: pointer; +} + +/* End of Cart */ + +/* Cart Item */ +/* +.exit:hover { + background: gray; +} + +.cart-item { + display: grid; + align-items: center; + grid-template-columns: auto 1fr auto; + grid-column-gap: 1.5rem; + margin: 1.5rem 0; +} + +.cart-item h4 { + font-size: 0.85rem; +} + +.cart-tem h5 { + margin: 0.5rem 0; +} + +.item-amount { + text-align: center; +} + +.remove-item { + color: lightgray; + cursor: pointer; + padding: 2px; +} + +.remove-item:hover { + color: white; +} + +.clear-cart { + background: lightgray; + border: 1px solid black; + padding: 7px; +} + +.clear-cart:hover { + background: gray;; + color: white; +} + +/* End of Cart Item */ + +/* .cart-footer { + margin-top: 2rem; + text-align: center; +} + +.cart-footer h3 { + margin-bottom: 1rem; +} */ \ No newline at end of file