diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..6f3a2913 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/public/index.html b/public/index.html index 138da963..58cac210 100644 --- a/public/index.html +++ b/public/index.html @@ -1,14 +1,71 @@ - + - + My Store - - - - - - - - \ No newline at end of file + + + + + + +
+ Email
+ Password
+ +
+
+ + +
+ + + +
+ +
+

List Of Products

+
+
+ +
+

Details

+
+
+ +
+

Shopping Cart

+ + + +
+
+ + + + + diff --git a/public/index.js b/public/index.js index 034dbd5e..90d60daa 100644 --- a/public/index.js +++ b/public/index.js @@ -1 +1,240 @@ -//stuff \ No newline at end of file +let detailsButton = (document.createElement("button").value = "More Details!"); +let itemQuantity = {}; +let products = []; +let txtEmail = document.getElementById("email"); +let txtPassword = document.getElementById("password"); +let btnSignUp = document.getElementById("btnSignUp"); +btnSignUp.onclick = signUp; + +class User { + constructor(email, password, cartId) { + this.email = email; + this.password = password; + this.cartId = cartId; + } +} + +//onload fetch products and then run Products function +//if there is anything in localStorage then don't display login div +window.onload = function() { + fetch("https://acastore.herokuapp.com/products") + .then(response => response.json()) + + .then(myJson => (products = myJson)) + + .then(products => { + Products(products); + + let storage = localStorage.getItem("user"); + let signUpDiv = document.getElementById("signup"); + if (storage) { + signUpDiv.style.display = "none"; + } + }); +}; + +//assigns input value from email and password to new user saved on heroku server +function signUp() { + console.log(new User(txtEmail.value, txtPassword.value, null)); + let newUser = new User(txtEmail.value, txtPassword.value, null); + localStorage.setItem("user", JSON.stringify(newUser)); + + fetch("https://acastore.herokuapp.com/users", { + method: "POST", + headers: { + "Content-Type": "application/json" + }, + body: JSON.stringify(newUser) + }).then(response => { + // response.then(data => { + // console.log(data); + // }); + console.log("response: ", response.json()); + }); +} + +function createCart(userID) { + let newCart = { + userID: userID, + products: [] + }; + + fetch("https://acastore.herokuapp.com/users", { + method: "POST", + headers: { + "Content-Type": "application/json" + }, + body: JSON.stringify(newCart) + }).then(response => response.json()); +} + +//put products in html +//map through products +function Products(products) { + document.getElementById("products").innerHTML = products + .map((product, index) => { + let amount = sessionStorage.getItem(product.id); + if (amount) { + addToCart(product.id, amount); + } + itemQuantity[product.id] = 0; + + return `
+ +

${product.name}

+ image of ${product.name} +

${product.description}

+ + +
+ + + +
+
`; + }) + .join(" "); +} + +//*************Search Function ********/ +function Search() { + //takes in user input + let input = document.getElementById("searchBox"); + let filter = input.value; + let foundProdArr = []; + products.map((item, index) => { + //splits up each word in item name and put into an array + + let nameArray = item.name.toLowerCase().split(" "); + nameArray.filter(name => { + //if the name matches user input then push into array + if (name == filter) { + foundProdArr.push(item); + } + }); + }); + //origianl function run displays new array of found products + return Products(foundProdArr); +} + +//**********Show more Details of Specific Product********/ +function moreDetails(prodId) { + let foundProduct = products.find(p => p.id === prodId); + + document.getElementById( + "productDetail" + ).innerHTML = `
+

${foundProduct.name}

+

Ratings: ${foundProduct.rating}/5

+ image of ${foundProduct.name} +

Product ID: ${foundProduct.id}

+

${foundProduct.description}

+
+
`; +} + +/************Call both AddToCart and Store Functions ****************/ +function addToCartAndStore(id) { + //if item in storage already dont add again + let amount = sessionStorage.getItem(id); + if (amount) { + changeQuantity(id); + } else { + addToCart(id); + } + Storage(id); +} + +//***************Session Storage*************/ +function Storage(id) { + sessionStorage.setItem(id, itemQuantity[id]); +} + +//*********************Add to Cart *************/ +function addToCart(id, quantity = itemQuantity[id]) { + let cartItemsL = document.getElementById("cartitems"); + let productId = products.find(function(product) { + return product.id == id; + }); + let cartItems = + cartItemsL.innerHTML + + `
  • ${productId.name}: ${ + productId.price + } (${quantity}) +
    • `; + + document.getElementById("cartitems").innerHTML = cartItems; +} +function changeQuantity(productId, quantity) { + let quantityElement = document.querySelector( + `#cart-item-${productId} .quantity` + ); + console.log(quantityElement); + quantityElement.innerHTML = itemQuantity[productId]; +} + +//quantity function in progress +const getValue = index => { + console.log(index); + const selectIndex = document.getElementById(`select-${index}`); + itemQuantity[index + 1] = Number(selectIndex.value); + console.log(selectIndex.value); + return itemQuantity[index + 1]; +}; + +//Fitler products by category +//function called when category is changed via dropdown menu on homepage + +function filterCategory(cat) { + //if all is selected, displays all products + if (cat.toLowerCase() === "all") { + Products(products); + } + //filters products depending on category selected + else { + let filteredProducts = products.filter( + prod => prod.category === cat.toLowerCase() + ); + Products(filteredProducts); + } +} +/**View Cart *******/ + +function viewCart() { + var cartItems = document.getElementById("cartitems"); + if (cartItems.style.display === "none") { + cartItems.style.display = "block"; + } else { + cartItems.style.display = "none"; + } +} + +//*************** search function not working**********/ + +// let newSearchedProducts=[]; +// // let moreDetailsButton=document.getElementById('moredetails') + +// for (i = 0; i < productText.length; i++) { +// txtValue = productText[i].textContent +// if (txtValue.toUpperCase().indexOf(filter) > -1) { +// newSearchedProducts.push(product) + +// } else { +// productText[i].style.display = "none"; +// // moreDetailsButton[i].style.display="none"; +// } +// } diff --git a/public/products.js b/public/products.js index 0e2facb6..280796d0 100644 --- a/public/products.js +++ b/public/products.js @@ -66,7 +66,7 @@ const products = [{ ] }, { "id": 3, - "name": "Almond", + "name": "Sweet Almond", "description": "A great treat that tastes great", "reviews": 27, "rating": 5, diff --git a/public/style.css b/public/style.css new file mode 100644 index 00000000..18876048 --- /dev/null +++ b/public/style.css @@ -0,0 +1,76 @@ +* { + font-family: Roboto; +} + +.entirepage { + display: grid; + grid-template-rows: auto; + grid-template-columns: 33% 33% 33%; + grid-template-areas: + "search search search" + "details products cart"; +} + +h3 { + text-align: center; + font-size: 1.5rem; +} + +#moreDetailsCard #inside-cart { + background-color: white; + color: grey; + margin: 12px; + padding-top: 5px; +} + +#listOfThings { + grid-area: products; + background-color: white; + text-align: center; + height: 50vw; /* or any value */ + overflow-y: auto; + color: grey; + border: 1px grey solid; +} + +#searchArea { + display: grid; + grid-area: search; + text-align: center; + background-color: #ffe57d; +} + +input { + padding: 10px; + padding-bottom: 5px; + margin: auto; +} + +#searchButton { + margin: auto; + width: 31rem; +} + +#searchBox { + width: 30rem; + height: 1rem; +} + +#cartDiv { + grid-template-areas: cart; + text-align: center; + background-color: #00c4cc; + color: white; + border: 1px grey solid; +} + +#detailsDiv { + grid-area: details; + background-color: #ffe57d; + color: white; + text-align: center; + border: 1px grey solid; +} +.productList { + text-align: center; +}