Aaron Altounian

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. <a class='back' onclick='displayProducts(products)'>Go Home</a>`
+    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 += `<li>
+                                    <label for="qty">Qty:</label>
+                                    <input style="width:20px;" id="${index}" value=${value.qty}>
+                                    <button onclick='removeFromCart(${index})'>Remove All</button>
+                                    <a onclick='focusProduct(${productsIndex})'><span>${value.price}</span> ${value.name}</a>
+                                </li>`;
+        })
+        cartTotal.innerHTML = `<h2>Cart Total: $${getTotal()}</h2>
+                               <button class='cartButton' id="updateItemQty" onclick='changeQty()'>Update Cart</button>
+                               <button class='cartButton' onclick='clearCart()'>Clear Cart</button>
+                               <button class='checkoutButton' onclick='checkout()'>Checkout</button>`;
+    }
+}
+
+// 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();
+}

public/checkout.js

@@ -0,0 +1,13 @@
+
+const checkout = () => {
+    reset()
+    item.innerHTML = `<h3>Cart Total: $${getTotal()}
+                      <button onclick='viewCart()'>Back to Cart</button>
+                      <h2>Checkout</h1>
+                      <form>
+                        <input type='text' placeholder='First Name' />
+                        <input type='text' placeholder='Last Name' />
+                        <input type='email' placeholder='Email Address' />
+                        <button type='submit'>Submit</button>
+                      </form>`
+}

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!')
+}

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 += `<li>
+                                <a onclick='focusProduct(${index})'>${product.name}</a>
+                            </li>`
+    })
+}

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');

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 += `<option value=${i}>${i}</value>`
+        }
+    }
+    selectOptions();
+
+    // use deconstructed properties to populate some HTML:
+    item.innerHTML =   `<img src=${imgUrl} />
+                        <h1>${name}</h1>
+                        <h2>${price}</h2>
+                        <select id='itemQty'>${options}</select>
+                        <button onclick='addToCart(${index})'>Add To Cart</button>
+                        <p>${description}</p>`;
+}

public/index.html

@@ -1,14 +1,55 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta charset='utf-8' />
+    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
     <title>My Store</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-
+    <meta name='viewport' content='width=device-width, initial-scale=1'>
+
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
+    <link rel='stylesheet' href='style.css'>
 </head>
 <body>
-     <script src="products.js"></script>    
-    <script src="index.js"></script>   
+    <header>
+        <a onclick='displayProducts(products)'>Home</a>
+        <div class='cart'>
+            <span id='cartQty' onclick='viewCart()'></span>
+            <a onclick='viewCart()'>View Cart</a>
+        </div>
+        <div class='search'>
+            <input id='searchBox' oninput='search()' type='text' placeholder='Find a product...' />
+            <button onclick='clearSearch()'>Clear</button>
+        </div>
+        <h1>Aaronzon</h1>
+    </header>
+
+    <label for='category'>Filter by category: </label>
+    <select id='category' onchange='displayFiltered()'>
+        <option value=''>--Please select a category--</option>
+        <option value='food'>Food</option>
+        <option value='electronics'>Electronics</option>
+        <option value='sporting'>Sporting</option>
+    </select>
+
+    <ul id='list'></ul>
+    <p id='cartTotal'></p>
+
+    <div id='productContainer'>
+        <div id='reviews'></div>
+    </div>
+
+    <div id='searchResults'></div>
+
+    <script src='elements.js'></script>
+    <script src='reset.js'></script>
+    <script src='search.js'></script>
+    <script src='display-filtered.js'></script>
+    <script src='checkout.js'></script>
+    <script src='cart.js'></script>
+    <script src='display-products.js'></script>
+    <script src='focus-product.js'></script>
+    <script src='reviews.js'></script>
+    <script src='products.js'></script>    
+    <script src='index.js'></script>   
 </body>
 </html>

public/index.js

@@ -0,0 +1,7 @@
+'use strict'
+
+let cart = [];
+
+
+displayProducts(products);
+updateQty();