diff --git a/public/cart.js b/public/cart.js new file mode 100644 index 00000000..7967c764 --- /dev/null +++ b/public/cart.js @@ -0,0 +1,113 @@ +'use strict'; + +// function to update cart quantity displayed at top of page: +const updateQty = () => { + // initialize variable to count cart quantity: + let count = 0; + // loop through cart and add the qty value of each product to the count: + for(let product of cart) { + count += Number(product.qty); + } + // return some html using ternary expression and string template literal: + return cartQty.innerHTML = count === 1 ? `${count} item in cart.` : `${count} items in cart.`; +} + +// function to add item to cart: +const addToCart = (index) => { + // define variable to shorten DOM target: + let itemQty = document.getElementById('itemQty'); + // add the quantity specified in the select box to the qty value of the product at the passed-in index value: + products[index].qty += Number(itemQty.value); + // push the item to the cart: + cart.push(products[index]) + // remove duplicates from the cart using filter function: + cart = cart.filter( (element, index, array) => { + return array.indexOf(element) === index; + }) + updateQty(); +} + +// function to remove item from cart: +const removeFromCart = (index) => { + // get a product's location in the products array from the id of the product in the cart array, to update the qty in the products array (since the index in the cart array differs from the index in the products array): + let product = products[ cart[index].id - 1 ] + product.qty = 0; + // splice 1 item from the array at the specified index position: + cart.splice(index, 1); + // update cart quantity: + updateQty(); + // re-render the updated cart array: + viewCart(cart); +} + +// function to display total price of cart: +const getTotal = () => { + // define variable to count the total: + let total = 0; + + // loop through cart array: + for( let product of cart ) { + // slice the price after the dollar sign: + let price = product.price.slice(1); + // since the price is stored as a string, use Number() and multiply the price times the quantity: + total += Number(price) * Number(product.qty); + } + + // round off the total to the 2nd decimal place: + total = total.toFixed(2); + return total; +} + +// function to view cart: +const viewCart = () => { + reset(); + // display message if cart is empty: + if(cart.length === 0) list.innerHTML = `Cart is empty. Go Home` + else { + cart.map( (value, index) => { + // use index from map function to be able to remove item from its location in cart array, but also define an index based on the item's position within the products array in order to display details for that product when it is clicked: + let productsIndex = value.id - 1; + + list.innerHTML += `
  • + + + + ${value.price} ${value.name} +
    • `; + }) + cartTotal.innerHTML = `

    Cart Total: $${getTotal()}

    + + + `; + } +} + +// change quantity of items using input boxes when in cart view: +const changeQty = () => { + // loop through the cart to update quantity at each position: + for( let i = 0; i < cart.length; i++ ) { + // define variable to hold the value of the input box at each position: + let qty = document.getElementById(i).value; + // define variable to hold the index position of each item within the products array: + let productsIndex = cart[i].id - 1; + // set the qty property of the product within the products array equal to the qty derived from the input box value: + products[productsIndex].qty = Number(qty); + // splice out the item from cart if qty is made 0: + if(qty == 0) { cart.splice(i, 1); } + } + // rerender cart and update quantities: + viewCart(); + updateQty(); +} + +// function to clear cart: +const clearCart = () => { + // clear the cart array + cart = []; + // set qty of each product to 0: + for(let product of products) { + product.qty = 0; + } + updateQty(); + viewCart(); +} \ No newline at end of file diff --git a/public/checkout.js b/public/checkout.js new file mode 100644 index 00000000..9c4db648 --- /dev/null +++ b/public/checkout.js @@ -0,0 +1,13 @@ + +const checkout = () => { + reset() + item.innerHTML = `

    Cart Total: $${getTotal()} + +

    Checkout

    +
    + + + + +
    ` +} diff --git a/public/display-filtered.js b/public/display-filtered.js new file mode 100644 index 00000000..1a34225d --- /dev/null +++ b/public/display-filtered.js @@ -0,0 +1,18 @@ +'use strict' + +// define function to display products by selected category: +const displayFiltered = () => { + // define empty array to add selected items to: + let selected = []; + // if a category is selected: + if(category.value) { + products.map( (product) => { + // if a product's category matches the selected category, push the product to the selected array: + if(product.category === category.value) selected.push(product); + }) + // use the displayProducts function with the selected array: + displayProducts(selected); + } + // if no category is selected, display an alert message: + else alert('You must select a category!') +} \ No newline at end of file diff --git a/public/display-products.js b/public/display-products.js new file mode 100644 index 00000000..f818c0a8 --- /dev/null +++ b/public/display-products.js @@ -0,0 +1,14 @@ +// function to display all products: +const displayProducts = (products) => { + reset(); + // map the products array and generate html for each position: + products.map( (product) => { + // instead of using index from the map function for ID's, use the '_id' property for each item minus 1. + // this returns the index of the item within the original products array, even when different arrays are passed through (e.g. a search results array) + let index = product.id - 1; + // manipulate DOM to list out products: + list.innerHTML += `
  • + ${product.name} +
    • ` + }) +} \ No newline at end of file diff --git a/public/elements.js b/public/elements.js new file mode 100644 index 00000000..7d694996 --- /dev/null +++ b/public/elements.js @@ -0,0 +1,14 @@ +// define variables to make DOM manipulation easier: +const list = document.getElementById('list'); +const item = document.getElementById('productContainer'); +const reviews = document.getElementById('reviews'); + +const cartQty = document.getElementById('cartQty'); +const cartTotal = document.getElementById('cartTotal'); +const itemQty = document.getElementById('itemQty'); + +const searchResults = document.getElementById('searchResults'); +const searchBox = document.getElementById('searchBox'); +const searchButton = document.getElementById('searchButton'); + +const category = document.getElementById('category'); \ No newline at end of file diff --git a/public/focus-product.js b/public/focus-product.js new file mode 100644 index 00000000..1087242e --- /dev/null +++ b/public/focus-product.js @@ -0,0 +1,29 @@ +// function to display details about a product when clicked: +const focusProduct = (index) => { + reset(); + + // deconstruct properties from the passed-in index position of products array: + let { + name, + price, + description, + imgUrl, + } = products[index]; + + // create loop function to generate HTML for select box input options: + let options; + function selectOptions() { + for(let i = 1; i <= 10; i++) { + options += `