basketballProducts.js

var basketballproddata = [
    { 
        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/STABBRSTD9.jpg",
        category:"Basketball Equipment",
        name:"Stag Standard Basket Ball Ring",
        strikedOffPrice:750,
        price:750,
        description: "Stag Standard Basket Ball Ring",
        brand:"Stag",
        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/STABBRHDGA20.jpg",
        category:"Basketball Equipment",
        name:"Stag Heavy Duty Galvanized Basketball Ring",
        strikedOffPrice:2100,
        price:1999,
        description: "Stag Heavy Duty Galvanized Basketball Ring",
        brand:"Stag",
        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/STABBRHAT9.jpg",
        category:"Basketball Equipment",
        name:"Stag Hang Time Basket Ball Ring",
        strikedOffPrice:700,
        price:700,
        description: "Stag Hang Time Basket Ball Ring",
        brand:"Stag",
        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/NKBB0635-492.jpg",
        category:"Basketballs",
        name:"Nike Dominate 8P Basketball (Size 7, Blue/White)",
        strikedOffPrice:1295,
        price:1295,
        description: "Nike Dominate 8P Basketball (Size 7, Blue/White)",
        brand:"Nike",
        size: "7",        
    },
    { 
        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/NKAC4354-753.jpg",
        category:"Baketball Equipment",
        name:"Nike Essential Ball Pump (Volt/Black)",
        strikedOffPrice: 950,
        price: 950,
        description: "Nike Essential Ball Pump (Volt/Black)",
        brand:"Nike",
        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/NKAC4354-027.jpg",
        category:"Basketball Equipment",
        name:"Nike Essentail Ball Pump (Black/White)",
        strikedOffPrice:950,
        price:950,
        description: "Nike Essentail Ball Pump (Black/White)",
        brand:"Nike",
        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/SPBB74531Z.jpg",
        category:"Basketballs",
        name:"Spalding TF-250 Basketball (Brick, Size 7)",
        strikedOffPrice:2179,
        price:1749,
        description: "Spalding TF-250 Basketball (Brick, Size 7)",
        brand:"Spalding",
        size: "7",        
    },
    { 
        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/SPBB83189Z.jpg",
        category:"Basketballs",
        name:"Spalding NBA Alley Oop Basketball",
        strikedOffPrice:1279,
        price:1025,
        description: "Spalding NBA Alley Oop Basketball (Black, Size 7)",
        brand:"Spalding",
        size: "7",        
    },
    { 
        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/SPBB83510Z.jpg",
        category:"Basketballs",
        name:"Spalding Los Angeles Lakers",
        strikedOffPrice:1399,
        price:1125,
        description: "Spalding Los Angeles Lakers Baketball (Purple/Yellow, Size 7)",
        brand:"Spalding",
        size: "7",        
    },
    { 
        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/SPBB74532Z.jpg",
        category:"Basketballs",
        name:"Spalding TF-250 Basketball (Brick, Size 6)",
        strikedOffPrice:2099,
        price:1675,
        description: "Spalding TF-250 Basketball (Brick, Size 6)",
        brand:"Spalding",
        size: "6",        
    },
    { 
        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/SPBB83648Z.jpg",
        category:"Basketballs",
        name:"Spalding NBA Trend Series Digital Basketball (Blue/Orange, Size 7)",
        strikedOffPrice:1299,
        price:1049,
        description: "Spalding NBA Trend Series Digital Basketball (Blue/Orange, Size 7)",
        brand:"Spalding",
        size: "7",        
    },
    { 
        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/SPBB83347Z.jpg",
        category:"Basketballs",
        name:"Spalding James Harden Basketball",
        strikedOffPrice:1549,
        price:1249,
        description: "SPALDING JAMES HARDEN BASKETBALL (RED/LIGHT GREY, SIZE 7)",
        brand:"Spalding",
        size: "7",        
    },
    { 
        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/SPBB83570Z.jpg",
        category:"Basketballs",
        name:"Spalding Kevin Durant NBA Basketball (Yellow/Blue/White, Size 7)",
        strikedOffPrice:1549,
        price:1249,
        description: "Spalding Kevin Durant NBA Basketball (Yellow/Blue/White, Size 7)",
        brand:"Spalding",
        size: "7",        
    },
    { 
        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/SPBB83496Z.jpg",
        category:"Basketballs",
        name:"Spalding Highlight Basketball (Blue/Orange, Size 7)",
        strikedOffPrice:1629,
        price:1299,
        description: "Spalding Highlight Basketball (Blue/Orange, Size 7)",
        brand:"Spalding",
        size: "7",        
    },
    { 
        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/SPBB83343Z.jpg",
        category:"Basketballs",
        name:"Spalding Stephen Curry Player Basketball (Yellow/Blue, Size 7)",
        strikedOffPrice:1549,
        price:1249,
        description: "Spalding Stephen Curry Player Basketball (Yellow/Blue, Size 7)",
        brand:"Spalding",
        size: "7",        
    },
    { 
        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/SPBB83331Z.jpg",
        category:"Basketballs",
        name:"Spalding NBA Team Spurs Basketball (Black, Size 7)",
        strikedOffPrice:1329,
        price:1075,
        description: "Spalding NBA Team Spurs Basketball",
        brand:"Spalding",
        size: "7",        
    },
    { 
        imgUrl:"https://storage.sg.content-cdn.io/cdn-cgi/image/width=80,height=80,quality=75,format=auto/in-resources/b368029c-a4dd-448a-a888-58348cb1b144/Images/ProductImages/Source/SPBB83509Z.jpg",
        category:"Basketballs",
        name:"Spalding New York Knicks Basketball (Orange/Royal, Size 7)",
        strikedOffPrice:1379,
        price:1099,
        description: "Spalding New York Knicks Basketball (Orange/Royal, Size 7)",
        brand:"Spalding",
        size: "7",        
    },
    { 
        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/SPBB83507Z.jpg",
        category:"Basketballs",
        name:"Spalidng Miami Heat Basketball (Brick/Yellow, Size 7)",
        strikedOffPrice:1399,
        price:1125,
        description: "Spalidng Miami Heat Basketball (Brick/Yellow, Size 7)",
        brand:"Spalding",
        size: "7",        
    },
    { 
        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/SPBB83544Z.jpg",
        category:"Basketballs",
        name:"Spalding NBA Sweater Basketball (Blue/Red, Size 7)",
        strikedOffPrice:1299,
        price:1049,
        description: "Spalding NBA Sweater Basketball (Blue/Red, Size 7)",
        brand:"Spalding",
        size: "7",        
    },{ 
        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/SPBB83333Z.jpg",
        category:"Basketballs",
        name:"Spalding warriors Basketball (Yellow/Black, Size 7)",
        strikedOffPrice:1329,
        price:1075,
        description: "Spalding warriors Basketball (Yellow/Black, Size 7)",
        brand:"Spalding",
        size: "7",        
    },{ 
        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/SPBB83504Z.jpg",
        category:"Basketballs",
        name:"Spalding Team Calaiers Basketball (Yellow/Brick, size 7)",
        strikedOffPrice:1299,
        price:1049,
        description: "Spalding Team Calaiers Basketball (Yellow/Brick, size 7)",
        brand:"Spalding",
        size: "7",        
    },{ 
        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/STABBRSS18.jpg",
        category:"Basketball Equipment",
        name:"Stag Solid Steel Basketball Ring 18MM",
        strikedOffPrice:1250,
        price:1199,
        description: "Stag Solid Steel Basketball Ring 18MM",
        brand:"Stag",
        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/STABBRHB9.jpg",
        category:"Basketball Equipment",
        name:"Stag Hobby SOlid Steel Basketball Ring (9MM)",
        strikedOffPrice:800,
        price:749,
        description: "Stag Hobby SOlid Steel Basketball Ring (9MM)",
        brand:"Stag",
        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/STABBRSS20.jpg",
        category:"Basketball Equipment",
        name:"Stag Solid Steel Basketball Ring (20MM)",
        strikedOffPrice:1575,
        price:1499,
        description: "Stag Solid Steel Basketball Ring (20MM)",
        brand:"Stag",
        size: "Large",        
    }
]

localStorage.setItem("basketballDatabase",JSON.stringify(basketballproddata));

var prodData = JSON.parse(localStorage.getItem("basketballDatabase"));
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;