diff --git a/public/index.html b/public/index.html index 138da963..7b794090 100644 --- a/public/index.html +++ b/public/index.html @@ -5,10 +5,49 @@ My Store - + + + + - +
+
+ View Cart +
+

ACA STORE PROJECT

+
+
+
+
+
+ +
+
+ Search + Reset +
+
+ +
+
+
+
+
+ + + + + \ No newline at end of file diff --git a/public/index.js b/public/index.js index 6515a734..29d5aa09 100644 --- a/public/index.js +++ b/public/index.js @@ -1,2 +1,278 @@ -//stuff -//more stuff \ No newline at end of file +//? Why is storing the shopping cart in sessionStorage not the best choice? +//* It is not the best choice because local storage is a much better option. If the customer leaves their tab in +//* any way (close tab/browser, shuts down computer, battery dies, etc) they would lose everything they placed in their cart */ +//? What should happen when the Place Order button is clicked? +//* We should use the POST to send out data (cart and client info) to the server */ + +//! declaring variables for container, holding data for functions, and are you there feature +let container = document.querySelector('.product_list'); +let holder = ''; +let areYouThere = true; + +// //! SetTimeout for 'Are you there' +// let promptTimeout = () => { +// // maintains timeout true each time a click occurs +// areYouThere = true; +// console.log('user click - 60 sec timer til prompt'); +// setInterval(() => { +// // switch varaibale to false +// areYouThere = false; +// console.log('Are you still there? prompt initiated'); +// // alert user if variable is false +// if (!areYouThere) {alert("Are you still there");}; +// areYouThere = true; +// console.log('user returned - 60 sec timer til prompt'); +// }, 600000); +// }; + +// document.body.addEventListener('click', promptTimeout); + +//!! Change the container DOM + +const changeContainer = (value) => { + container.innerHTML = `${value}`; + console.log('container changing to...'); + $(document).ready(function(){ + $('select').formSelect(); + }); +} + +//!! Load product overview view when different functions are complete +const loadProducts = (prod) => { + holder = ''; + for (let i = 0; i < prod.length; i++) { + let product = prod[i]; + holder += ` +
+
+
+ ${product.name} +

${product.description}

+
+

Price: ${product.price}

+
+
+ View Details +
+
+
+ ` + } + changeContainer(holder); + console.log('products overview view'); +} + +//!! Search Functionality + +let searchProduct = () => { + let searchInput = document.querySelector('#search').value; + let myRegEx = new RegExp(`${searchInput}`, 'gi'); + let holderArray = []; + for (let i = 0; i < products.length; i++) { + let productName = products[i].name; + let productDesc = products[i].description; + // search for regex match in name and description + if(productName.match(myRegEx) || productDesc.match(myRegEx)) { + holderArray.push(products[i]) + } + } + loadProducts(holderArray); + console.log('search results'); +} + +//!! Shopping Cart + +let changeQuant = (name, id) => { + let newQuant = document.querySelector(`#${id}`).value; + let sessionItem = sessionStorage.getItem(`${name}`); + let sessionArray = JSON.parse(sessionItem); + sessionArray[0] = newQuant; + sessionStorage.setItem(`${name}`, JSON.stringify(sessionArray)); + viewCart(); +} + +let viewCart = () => { + holder = '

Cart

'; + let totalCost = 0; + // loop through session storage to grab all add to cart items + for(let i = 0; i < sessionStorage.length; i++) { + let cartSeshItem = sessionStorage.getItem(sessionStorage.key(i)); + if(cartSeshItem !== 'true') { + let parsedItem = JSON.parse(cartSeshItem); + let removeDollar = parsedItem[1].price.slice(1); + // to build drop down in view cart + let optionHolder = ''; + let itemNameId = parsedItem[1].id; + // build options + for (let j = 1; j <= 10; j++) { + j == parsedItem[0] ? optionHolder += `` + : optionHolder += `` + } + holder += ` +

Product: ${parsedItem[1].name}

+

Price: ${parsedItem[1].price}

+

Quantity: +

Cost: $${parseFloat(Math.round(parseFloat(removeDollar) * parseFloat(parsedItem[0] * 100)) / 100).toFixed(2)}

+ + ` + // multiply the quantity and price for each + let multiplyQuantity = parseFloat(removeDollar) * parseInt(parsedItem[0]); + // then add to totalCost variable + totalCost += multiplyQuantity; + } + } + // maintain 2 decimal points with total + totalCost = parseFloat(Math.round(totalCost * 100) / 100).toFixed(2); + holder += ` +

Cart Total: $${totalCost}

+ ` + changeContainer(holder); +} + +const removeCartItem = (item) => { + sessionStorage.removeItem(item); + console.log(`${item} removed from cart`); + viewCart(); +} + +//!! Checkout Functionality + +const checkoutFunc = (cost) => { + holder = ''; + holder += ` +

Cart Total: $${cost}

+
+ First name: +
+ +
+ Last name: +
+ +
+ Email: +
+ +
+ +
+ ` + changeContainer(holder); + console.log('checkout form dislpayed') +} + +//!! View Details + +let viewDetail = (num) => { + // loop through array to find product id of item clicked + let filterProduct = products.filter(x => x.id == num); + let product = filterProduct[0]; + holder = '' + let eachRating = ''; + // loop to store each rating in object + for (let i = 0; i < product.reviews.length; i++) { + eachRating += `
  • + person + Rating: ${product.reviews[i].rating} +

    ${product.reviews[i].description}

    +
    • ` + } + holder += ` +
    +
    +
    + ${product.name} +

    + +

    +
    +
    +

    ${product.name}

    +

    ${product.description}

    +

    Rating: ${product.rating}

    +

    Number of Reviews: ${product.reviews.length}

    +

    Price: ${product.price}

    +

    Category: ${product.category}

    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    +
    Ratings:
    + +
    +
    + + ` + changeContainer(holder); + console.log('product detail view'); +} + +//!! Reset functionality + +const resetFunc = () => { + console.log('reset clicked'); + // empty search input + document.querySelector('#search').value = ''; + //reload all products + loadProducts(products); +} + +//!! Add to cart + +let addToCart = (num) => { + // grab quantity so it can be stored in sessionStorage + let quantityItem = document.querySelector('#quantity').value; + let cartItem = products.filter(x => x.id == num); + let cartItemName = cartItem[0].name; + let holderArray = []; + // set key to item name for storage + //* if item already exist in sessionStorage, the new addToCart will override + holderArray.push(quantityItem, cartItem[0]); + sessionStorage.setItem(`${cartItemName}`, JSON.stringify(holderArray)); + console.log('item added to cart') +} + +//!! Category Filter + +let categoryFilter = (category) => { + console.log(`filter select for ${category}`); + let holderArray = []; + // load all products if all categories is selected + category == '' ? holderArray = products : + // loop through products array to find matching categories + products.forEach(val => { + if(category === val.category) { + holderArray.push(val) + } + }); + loadProducts(holderArray); + console.log('category results'); +} + + +// initial product load +loadProducts(products); diff --git a/public/style.css b/public/style.css new file mode 100644 index 00000000..a9319004 --- /dev/null +++ b/public/style.css @@ -0,0 +1,26 @@ +* { + font-family: Lato; + color:#fff; +} + +h1 { + text-align: center; +} + +body { + background-image:url('https://images.unsplash.com/photo-1558538337-aab544368de8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80'); + background-size: cover; + margin: 20px !important; + background-repeat: no-repeat; + background-attachment: fixed; +} + +.grey.darken-4 { + opacity:.8; +} + +div#view_cart { + display: flex; + justify-content: flex-end; + margin-right: 10px; +} \ No newline at end of file