boxingProducts.js

var boxingproddata = [{
        imgUrl: "https://storage.sg.content-cdn.io/cdn-cgi/image/width=500,height=500,quality=75,format=auto,fit=cover,g=top/in-resources/b368029c-a4dd-448a-a888-58348cb1b144/Images/ProductImages/Source/EVBXHNWRBK.jpg",
        category: "Boxing Accessories",
        name: "Everlast Boxing Hand Wraps(180, Black)",
        strikedOffPrice: 549,
        price: 499,
        description: "Everlast Boxing Hand Wraps(180, Black)",
        brand: "Everlast",
        size: "180",
    },
    {
        imgUrl: "https://storage.sg.content-cdn.io/cdn-cgi/image/width=500,height=500,quality=75,format=auto,fit=cover,g=top/in-resources/b368029c-a4dd-448a-a888-58348cb1b144/Images/ProductImages/Source/EVCLTG5212B.jpg",
        category: "Boxing Gloves",
        name: "Everlast Classic Training Gloves(Blue)",
        strikedOffPrice: 1499,
        price: 1349,
        description: "Everlast Classic Training Gloves(Blue)",
        brand: "Everlast",
        size: "Large",
    },
    {
        imgUrl: "https://storage.sg.content-cdn.io/cdn-cgi/image/width=500,height=500,quality=75,format=auto,fit=cover,g=top/in-resources/b368029c-a4dd-448a-a888-58348cb1b144/Images/ProductImages/Source/EVCLTG5312.jpg",
        category: "Boxing Gloves",
        name: "Everlast Classic Training Gloves(Black)",
        strikedOffPrice: 1499,
        price: 1349,
        description: "Everlast Classic Training Gloves(Black)",
        brand: "Everlast",
        size: "Small",
    },
    {
        imgUrl: "https://storage.sg.content-cdn.io/cdn-cgi/image/width=500,height=500,quality=75,format=auto,fit=cover,g=top/in-resources/b368029c-a4dd-448a-a888-58348cb1b144/Images/ProductImages/Source/EVCLTG5112.jpg",
        category: "Boxing Gloves",
        name: "Everlast Classic Training Gloves (Red)",
        strikedOffPrice: 1499,
        price: 1349,
        description: "Everlast Classic Training Gloves (Red)",
        brand: "Everlast",
        size: "Medium",
    },
    {
        imgUrl: "https://storage.sg.content-cdn.io/cdn-cgi/image/width=500,height=500,quality=75,format=auto,fit=cover,g=top/in-resources/b368029c-a4dd-448a-a888-58348cb1b144/Images/ProductImages/Source/EVMY00183.jpg",
        category: "Boxing Bags",
        name: "Everlast Muay Thai Leather Heavy Punching Bag (72'/180CM, Black)",
        strikedOffPrice: 19999,
        price: 16999,
        description: "Everlast Muay Thai Leather Heavy Punching Bag (72'/180CM, Black)",
        brand: "Everlast",
        size: "Large",
    },
    {
        imgUrl: "https://storage.sg.content-cdn.io/cdn-cgi/image/width=500,height=500,quality=75,format=auto,fit=cover,g=top/in-resources/b368029c-a4dd-448a-a888-58348cb1b144/Images/ProductImages/Source/EVBXWR4455OR.jpg",
        category: "Boxing Accessories",
        name: "Everlast Boxing Hand Wraps(120, Orange)",
        strikedOffPrice: 399,
        price: 399,
        description: "Everlast Boxing Hand Wraps(120, Orange)",
        brand: "Everlast",
        size: "120",
    },
    {
        imgUrl: "https://storage.sg.content-cdn.io/cdn-cgi/image/width=500,height=500,quality=75,format=auto,fit=cover,g=top/in-resources/b368029c-a4dd-448a-a888-58348cb1b144/Images/ProductImages/Source/EVBXWR4456BL.jpg",
        category: "Boxing Accessories",
        name: "Everlast Boxing Hand Wraps (180, Blue)",
        strikedOffPrice: 549,
        price: 499,
        description: "Everlast Boxing Hand Wraps (180, Blue)",
        brand: "Everlast",
        size: "180",
    },
    {
        imgUrl: "https://storage.sg.content-cdn.io/cdn-cgi/image/width=500,height=500,quality=75,format=auto,fit=cover,g=top/in-resources/b368029c-a4dd-448a-a888-58348cb1b144/Images/ProductImages/Source/EVBXWR4455BLU.jpg",
        category: "Boxing Accessories",
        name: "Everlast Boxing Hand Wraps (120 Blue)",
        strikedOffPrice: 399,
        price: 399,
        description: "Everlast Boxing Hand Wraps(120)",
        brand: "Everlast",
        size: "120",
    },
    {
        imgUrl: "https://storage.sg.content-cdn.io/cdn-cgi/image/width=500,height=500,quality=75,format=auto,fit=cover,g=top/in-resources/b368029c-a4dd-448a-a888-58348cb1b144/Images/ProductImages/Source/EVBXC3F100LBGL.jpg",
        category: "Boxing Bags",
        name: "Everlast C3 Foam Heavy Bag (13X46, Black/Grey)",
        strikedOffPrice: 6999,
        price: 6299,
        description: "Everlast C3 Foam Heavy Bag (13X46, Black/Grey)",
        brand: "Everlast",
        size: "Small",
    },
    {
        imgUrl: "https://storage.sg.content-cdn.io/cdn-cgi/image/width=500,height=500,quality=75,format=auto,fit=cover,g=top/in-resources/b368029c-a4dd-448a-a888-58348cb1b144/Images/ProductImages/Source/EVBXPRSTTRGLRD.jpg",
        category: "Boxing Gloves",
        name: "Everlast Pro Style Training Gloves(Red)",
        strikedOffPrice: 1899,
        price: 1699,
        description: "Everlast Pro Style Training Gloves(Red)",
        brand: "Everlast",
        size: "Large",
    },
    {
        imgUrl: "https://storage.sg.content-cdn.io/cdn-cgi/image/width=500,height=500,quality=75,format=auto,fit=cover,g=top/in-resources/b368029c-a4dd-448a-a888-58348cb1b144/Images/ProductImages/Source/EVBXSTSHBL.jpg",
        category: "Boxing Accessories",
        name: "Everlast Strike Shield(Black)",
        strikedOffPrice: 2999,
        price: 2699,
        description: "Everlast Strike Shield(Black)",
        brand: "Everlast",
        size: "Large",
    },
    {
        imgUrl: "https://storage.sg.content-cdn.io/cdn-cgi/image/width=500,height=500,quality=75,format=auto,fit=cover,g=top/in-resources/b368029c-a4dd-448a-a888-58348cb1b144/Images/ProductImages/Source/EVBXDBMTGDBL.jpg",
        category: "Boxing Accessories",
        name: "Everlast Double Mouth Guard",
        strikedOffPrice: 125,
        price: 125,
        description: "Everlast Double Mouth Guard(Black)",
        brand: "Everlast",
        size: "Medium",
    },
    {
        imgUrl: "https://www.sportsjam.in/everlast-double-mouth-guard-online-india/p/8652094",
        category: "Boxing Accessories",
        name: "Everlast Double Mouth Guard(Grey)",
        strikedOffPrice: 125,
        price: 125,
        description: "Everlast Double Mouth Guard(Grey)",
        brand: "Everlast",
        size: "Medium",
    },
    {
        imgUrl: "https://storage.sg.content-cdn.io/cdn-cgi/image/width=500,height=500,quality=75,format=auto,fit=cover,g=top/in-resources/b368029c-a4dd-448a-a888-58348cb1b144/Images/ProductImages/Source/EVBXGRGLBL.jpg",
        category: "Boxing Gloves",
        name: "Everlast Grappling Gloves (Black)",
        strikedOffPrice: 1299,
        price: 1169,
        description: "Everlast Grappling Gloves (Black)",
        brand: "Everlast",
        size: "Small",
    },
    {
        imgUrl: "https://storage.sg.content-cdn.io/cdn-cgi/image/width=500,height=500,quality=75,format=auto,fit=cover,g=top/in-resources/b368029c-a4dd-448a-a888-58348cb1b144/Images/ProductImages/Source/EVBXPRSTTRGLBLL.jpg",
        category: "Boxing Gloves",
        name: "Everlast Pro Style Training Gloves(Blue)",
        strikedOffPrice: 1899,
        price: 1699,
        description: "Everlast Pro Style Training Gloves(Blue)",
        brand: "Everlast",
        size: "Large",
    },
    {
        imgUrl: "https://storage.sg.content-cdn.io/cdn-cgi/image/width=500,height=500,quality=75,format=auto,fit=cover,g=top/in-resources/b368029c-a4dd-448a-a888-58348cb1b144/Images/ProductImages/Source/EVBXPRSTTRGLBKL.jpg",
        category: "Boxing Gloves",
        name: "Everlast Pro Style Training Gloves(Black)",
        strikedOffPrice: 1899,
        price: 1699,
        description: "Everlast Pro Style Training Gloves(Black)",
        brand: "Everlast",
        size: "Small",
    },
    {
        imgUrl: "https://storage.sg.content-cdn.io/cdn-cgi/image/width=500,height=500,quality=75,format=auto,fit=cover,g=top/in-resources/b368029c-a4dd-448a-a888-58348cb1b144/Images/ProductImages/Source/EVBXMMMNMTBL.jpg",
        category: "Boxing Gloves",
        name: "Everlast MMA Mantis Mitts(Black)",
        strikedOffPrice: 999,
        price: 899,
        description: "Everlast MMA Mantis Mitts(Black)",
        brand: "Everlast",
        size: "Large",
    },
    {
        imgUrl: "https://storage.sg.content-cdn.io/cdn-cgi/image/width=500,height=500,quality=75,format=auto,fit=cover,g=top/in-resources/b368029c-a4dd-448a-a888-58348cb1b144/Images/ProductImages/Source/EVBXP00000734.jpg",
        category: "Boxing Accessories",
        name: "Everlast Boxing Hand Wraps (120MM)",
        strikedOffPrice: 599,
        price: 499,
        description: "Everlast Boxing Hand Wraps (120MM)",
        brand: "Everlast",
        size: "120",
    },
    {
        imgUrl: "https://storage.sg.content-cdn.io/cdn-cgi/image/width=500,height=500,quality=75,format=auto,fit=cover,g=top/in-resources/b368029c-a4dd-448a-a888-58348cb1b144/Images/ProductImages/Source/EVBXGLMMA7674.jpg",
        category: "Boxing Gloves",
        name: "Everlast MMA Grappling Gloves(Black)",
        strikedOffPrice: 4799,
        price: 3839,
        description: "Everlast MMA Grappling Gloves(Black)",
        brand: "Everlast",
        size: "Medium",
    }, {
        imgUrl: "https://storage.sg.content-cdn.io/cdn-cgi/image/width=500,height=500,quality=75,format=auto,fit=cover,g=top/in-resources/b368029c-a4dd-448a-a888-58348cb1b144/Images/ProductImages/Source/EVBXHNWRBK.jpg",
        category: "Boxing Accessories",
        name: "Everlast Boxing Hand Wraps(180, Black)",
        strikedOffPrice: 549,
        price: 499,
        description: "Everlast Boxing Hand Wraps(180, Black)",
        brand: "Everlast",
        size: "180",
    },
    {
        imgUrl: "https://storage.sg.content-cdn.io/cdn-cgi/image/width=500,height=500,quality=75,format=auto,fit=cover,g=top/in-resources/b368029c-a4dd-448a-a888-58348cb1b144/Images/ProductImages/Source/EVCLTG5212B.jpg",
        category: "Boxing Gloves",
        name: "Everlast Classic Training Gloves(Blue)",
        strikedOffPrice: 1499,
        price: 1349,
        description: "Everlast Classic Training Gloves(Blue)",
        brand: "Everlast",
        size: "Large",
    },
    {
        imgUrl: "https://storage.sg.content-cdn.io/cdn-cgi/image/width=500,height=500,quality=75,format=auto,fit=cover,g=top/in-resources/b368029c-a4dd-448a-a888-58348cb1b144/Images/ProductImages/Source/EVCLTG5312.jpg",
        category: "Boxing Gloves",
        name: "Everlast Classic Training Gloves(Black)",
        strikedOffPrice: 1499,
        price: 1349,
        description: "Everlast Classic Training Gloves(Black)",
        brand: "Everlast",
        size: "Small",
    },
    {
        imgUrl: "https://storage.sg.content-cdn.io/cdn-cgi/image/width=500,height=500,quality=75,format=auto,fit=cover,g=top/in-resources/b368029c-a4dd-448a-a888-58348cb1b144/Images/ProductImages/Source/EVCLTG5112.jpg",
        category: "Boxing Gloves",
        name: "Everlast Classic Training Gloves (Red)",
        strikedOffPrice: 1499,
        price: 1349,
        description: "Everlast Classic Training Gloves (Red)",
        brand: "Everlast",
        size: "Medium",
    },
    {
        imgUrl: "https://storage.sg.content-cdn.io/cdn-cgi/image/width=500,height=500,quality=75,format=auto,fit=cover,g=top/in-resources/b368029c-a4dd-448a-a888-58348cb1b144/Images/ProductImages/Source/EVMY00183.jpg",
        category: "Boxing Bags",
        name: "Everlast Muay Thai Leather Heavy Punching Bag (72'/180CM, Black)",
        strikedOffPrice: 19999,
        price: 16999,
        description: "Everlast Muay Thai Leather Heavy Punching Bag (72'/180CM, Black)",
        brand: "Everlast",
        size: "Large",
    }

]

localStorage.setItem("boxingDatabase", JSON.stringify(boxingproddata));

var user = JSON.parse(localStorage.getItem("userDatabase"))
var signin = document.getElementById("signin")
var logout = document.getElementById("logout")
var acnt = document.getElementById("acnt")
if (user != null) {
    logout.style.display = "flex";
    signin.style.display = "none"
    acnt.style.display = "none"
}

logout.onclick = function() { localStorage.removeItem("userDatabase") }

var prodData = JSON.parse(localStorage.getItem("boxingDatabase"));
var cart = JSON.parse(localStorage.getItem("shoppingCart")) || [];
displayProducts(prodData);

function displayProducts(arr) {
    document.querySelector(".displayProducts").innerHTML = "";
    arr.map(function(elem, index) {
        var div = document.createElement("div");
        div.setAttribute("class", "productDiv");




        var wishlistIcon = document.createElement("img");
        wishlistIcon.setAttribute("src", "https://cdn-icons-png.flaticon.com/512/1077/1077035.png")
        wishlistIcon.setAttribute("class", "wlIcon")
        var image = document.createElement("img");
        image.setAttribute("src", elem.imgUrl);

        //Clicking on image takes you to product page
        image.addEventListener("click", function() {
            localStorage.setItem("quickViewProduct", JSON.stringify(elem));
            window.location.href = "../individualProduct.html"

        })


        var prodName = document.createElement("h3");
        prodName.textContent = elem.name;

        var strikedOffPrice = document.createElement("p");
        strikedOffPrice.textContent = "₹" + elem.strikedOffPrice;
        strikedOffPrice.style.textDecoration = "line-through";
        strikedOffPrice.style.color = "grey"

        var price = document.createElement("p");
        price.textContent = "₹" + elem.price;


        var discPercent = document.createElement('p');
        var discount = Math.floor(((elem.strikedOffPrice - elem.price) / elem.strikedOffPrice) * 100);
        discPercent.textContent = discount + "% off"
        discPercent.style.color = "orange";

        var star = document.createElement("img");
        star.setAttribute("src", "https://winonan.org/wp-content/uploads/2018/04/5-stars-900x225.jpg");
        star.style.width = "80px";
        var innerDiv = document.createElement("div");
        var quickviewbtn = document.createElement("button");
        quickviewbtn.setAttribute("class", "quickviewbtn");
        quickviewbtn.textContent = "Quick View";


        innerDiv.append(strikedOffPrice, price, discPercent, star);

        div.append(wishlistIcon, image, quickviewbtn, prodName, innerDiv);
        var prodDiv = document.querySelector(".displayProducts");



        prodDiv.append(div);
        if (window.matchMedia("(min-width:800px)").matches) {
            div.addEventListener("mouseenter", function() {
                quickviewbtn.style.display = "block"
            })
            div.addEventListener("mouseleave", function() {
                quickviewbtn.style.display = "none"
            })


            quickviewbtn.addEventListener("click", function() {
                localStorage.setItem("quickViewProduct", JSON.stringify(elem));
                document.querySelector(".quickview").style.display = "block";
                showQuickView();
            })

        }

    })
    document.querySelector("#itemsFound").textContent = "Found " + arr.length + " item(s)";
}

function discount(num1, num2) {
    var disc = Math.floor(((num1 - num2) / num1) * 100);
    return disc;
}

document.querySelector("#sortBy").addEventListener("change", sortBy);

//Sorting Function
function sortBy() {
    var val = document.querySelector("#sortBy").value;
    if (val == "priceAsc") {
        prodData.sort(function(a, b) {
            return a.price - b.price
        })
    } else if (val == "priceDesc") {
        prodData.sort(function(a, b) {
            return b.price - a.price
        })
    } else if (val == "discount") {
        prodData.sort(function(a, b) {
            var x = Math.floor(((a.strikedOffPrice - a.price) / a.strikedOffPrice) * 100);
            var y = Math.floor(((b.strikedOffPrice - b.price) / b.strikedOffPrice) * 100);
            return y - x;
        })
    }
    displayProducts(prodData);
}
//Trying to create the filter categories on their own without need for hardcoding them into the html page
function getAllCategories(arr) {
    var uniq = {};
    for (var i = 0; i < arr.length; i++) {
        if (uniq[arr[i].category] === undefined) {
            uniq[arr[i].category] = 1;
        } else {
            uniq[arr[i].category]++;
        }
    }
    console.log(uniq)
    return uniq;
}

function getAllBrand(arr) {
    var uniq = {};
    for (var i = 0; i < arr.length; i++) {
        if (uniq[arr[i].brand] === undefined) {
            uniq[arr[i].brand] = 1;
        } else {
            uniq[arr[i].brand]++;
        }
    }
    console.log(uniq)
    return uniq;
}

function getAllSize(arr) {
    var uniq = {};
    for (var i = 0; i < arr.length; i++) {
        if (uniq[arr[i].size] === undefined) {
            uniq[arr[i].size] = 1;
        } else {
            uniq[arr[i].size]++;
        }
    }
    console.log(uniq)
    return uniq;
}

//Filteration Part
var filterCategories = [];
var filterBrand = [];
var filterSize = [];
var uniqCategoriesobj = getAllCategories(prodData);
var uniqBrandsobj = getAllBrand(prodData);
var uniqSizesobj = getAllSize(prodData)

var uniqCategoriesArr = [];
for (var key in uniqCategoriesobj) {
    uniqCategoriesArr.push(key);
}
var uniqBrandArr = [];
for (var key in uniqBrandsobj) {
    uniqBrandArr.push(key);
}
var uniqSizeArr = [];
for (var key in uniqSizesobj) {
    uniqSizeArr.push(key);
}

var fil = document.querySelector("#filter")
uniqCategoriesArr.map(function(elem) {
    var ckbox = document.createElement("input");
    ckbox.setAttribute("type", "checkbox");
    ckbox.setAttribute("value", elem);
    ckbox.setAttribute("name", "category");
    var elem_count = 0;
    ckbox.addEventListener("change", function(event) {

        if (elem_count % 2 == 0) {
            filterCategories.push(elem);
        } else {
            for (var i = 0; i < filterCategories.length; i++) {
                if (filterCategories[i] == elem) {
                    filterCategories.splice(i, 1);
                    break;
                }
            }
        }
        elem_count++;

        console.log(filterCategories);
        displayFilteredProducts(filterCategories);

    })
    var label = document.createElement("label");
    label.setAttribute("for", elem);
    label.textContent = `${elem} (${uniqCategoriesobj[elem]})`;
    var br = document.createElement("br")
    fil.append(ckbox, label, br);

})

//BRands
uniqBrandArr.map(function(elem) {
        var ckbox = document.createElement("input");
        ckbox.setAttribute("type", "checkbox");
        ckbox.setAttribute("value", elem);
        ckbox.setAttribute("name", "brand");
        var elem_count = 0;
        ckbox.addEventListener("change", function(event) {

            if (elem_count % 2 == 0) {
                filterBrand.push(elem);
            } else {
                for (var i = 0; i < filterBrand.length; i++) {
                    if (filterBrand[i] == elem) {
                        filterBrand.splice(i, 1);
                        break;
                    }
                }
            }
            elem_count++;

            console.log(filterBrand);
            displayFilteredProducts(filterBrand);

        })
        var label = document.createElement("label");
        label.setAttribute("for", elem);
        label.textContent = `${elem} (${uniqBrandsobj[elem]})`;
        var br = document.createElement("br")
        document.querySelector("#filterbrand").append(ckbox, label, br);

    })
    //Sizes
uniqSizeArr.map(function(elem) {
    var ckbox = document.createElement("input");
    ckbox.setAttribute("type", "checkbox");
    ckbox.setAttribute("value", elem);
    ckbox.setAttribute("name", "size");
    var elem_count = 0;
    ckbox.addEventListener("change", function(event) {

        if (elem_count % 2 == 0) {
            filterSize.push(elem);
        } else {
            for (var i = 0; i < filterSize.length; i++) {
                if (filterSize[i] == elem) {
                    filterSize.splice(i, 1);
                    break;
                }
            }
        }
        elem_count++;

        console.log(filterSize);
        displayFilteredProducts(filterSize);

    })
    var label = document.createElement("label");
    label.setAttribute("for", elem);
    label.textContent = `${elem} (${uniqSizesobj[elem]})`;
    var br = document.createElement("br")
    document.querySelector("#filtersize").append(ckbox, label, br);

})

function displayFilteredProducts(arr) {
    var total_filtered_prods = []
    displayProducts(prodData);
    for (var i = 0; i < arr.length; i++) {
        var filtered = prodData.filter(function(elem) {
            return (elem.category == arr[i] || elem.brand == arr[i] || elem.size == arr[i]);
        })
        total_filtered_prods = total_filtered_prods.concat(filtered)
            //console.log(total_filtered_prods)

        displayProducts(total_filtered_prods);
    }
}




//Changing the view of the page from 3 to 4 or vice-versa//
document.querySelector("#flexofThree").addEventListener("click", function() {
    console.log("30%");
    for (var i = 0; i < prodData.length; i++) {
        document.querySelectorAll(".productDiv")[i].style.flex = "25%"
        document.querySelector("#flexOfFour").style.backgroundColor = "lightgrey";
        document.querySelector("#flexofThree").style.backgroundColor = "black";
    }

});

document.querySelector("#flexOfFour").addEventListener("click", function() {
    for (var i = 0; i < prodData.length; i++) {
        document.querySelectorAll(".productDiv")[i].style.flex = "20%"
        document.querySelector("#flexOfFour").style.backgroundColor = "black";
        document.querySelector("#flexofThree").style.backgroundColor = "lightgrey";
    }
})

function showQuickView() {
    document.querySelector(".quickViewImg").innerHTML = ""

    document.querySelector(".quickdesc").innerHTML = ""
    document.querySelector(".quantityPriceDisc").innerHTML = ""


    var product = JSON.parse(localStorage.getItem("quickViewProduct"));

    var prodName = document.createElement("p");
    prodName.textContent = product.name;
    var img = document.createElement("img");
    img.setAttribute("src", product.imgUrl);

    var strikedprc = document.createElement("p");
    strikedprc.textContent = "₹" + product.strikedOffPrice;
    strikedprc.style.textDecoration = "line-through";

    var prc = document.createElement("p");
    prc.textContent = "₹" + product.price;

    var discount = document.createElement("p");
    var x = Math.floor(((product.strikedOffPrice - product.price) / product.strikedOffPrice) * 100)
    discount.textContent = x + "%";
    discount.style.color = "orange";

    var description = document.createElement("p");
    description.textContent = product.description;

    // document.querySelector(".quickview").append();
    document.querySelector(".quickViewImg").append(prodName, img);

    document.querySelector(".quickdesc").append(description);
    document.querySelector(".quantityPriceDisc").append(strikedprc, prc, discount);

    document.querySelector("#addToCart").addEventListener("click", function() {
        var qty = document.querySelector("#qty").value
        if (qty == null || qty == "") {
            qty = 1;
        }
        var cartobj = {
            image: product.imgUrl,
            product_name: product.name,
            product_price: product.price,
            quantity: qty,
        }
        cart.push(cartobj);
        localStorage.setItem("shoppingCart", JSON.stringify(cart));
        document.querySelector(".quickview").style.display = "none";

    })

}
document.querySelector("#closequickview").addEventListener("click", function() {
    console.log("close")
    document.querySelector(".quickview").style.display = "none";
})

document.querySelector("#counter").textContent = cart.length;