women_accessories.js

wadata=[
    { product_id :"wa1",
    price : 440,
    category : "Belts",
    brand : "GUCCI",
    img : "https://cdna.lystit.com/200/250/tr/photos/ruelala/9ab669e3/gucci-Black-Double-G-Leather-Belt.jpeg" },
    { product_id :"wa2",
    price : 392,
    category : "Belts",
    brand : "OFF-WHITE C/O VIRGIL ABLOH",
    img : "https://cdna.lystit.com/200/250/tr/photos/mytheresa/12de5d02/saint-laurent-black-Cintura-Monogram-in-pelle.jpeg" },
    { product_id :"wa3",
    price : 399,
    category : "Belts",
    brand : "GUCCI",
    img : "https://cdna.lystit.com/200/250/tr/photos/ruelala/060e1789/gucci-Black-Double-G-Leather-Belt.jpeg" },
    { product_id :"wa4",
    price : 360,
    category : "Belts",
    brand : "GUCCI",
    img : "https://cdna.lystit.com/200/250/tr/photos/ruelala/74771585/gucci-Black-Double-G-Thin-Leather-Belt.jpeg" },
    { product_id :"wa5",
    price : 450,
    category : "Belts",
    brand : "GUCCI",
    img : "https://cdna.lystit.com/200/250/tr/photos/ruelala/5c7a8bd9/gucci-Black-Double-G-Leather-Belt.jpeg" },
    { product_id :"wa6",
    price : 525,
    category : "Belts",
    brand : "GUCCI",
    img : "https://cdna.lystit.com/200/250/tr/photos/mytheresa/886d6d1c/gucci-black-GG-Leather-Belt.jpeg" },
    { product_id :"wa7",
    price : 345,
    category : "Belts",
    brand : "CALVIN KLEIN",
    img : "https://cdna.lystit.com/200/250/tr/photos/cettire/ec0e8828/burberry-Multi-Tb-Monogram-Plaque-Reversible-Belt.jpeg" },
    { product_id :"wa8",
    price : 129,
    category : "Belts",
    brand : "CALVIN KLEIN",
    img : "https://cdna.lystit.com/200/250/tr/photos/toryburch/6bafdff5/tory-burch-Gray-HeronPoblanoGold-1-Reversible-Double-T-Belt.jpeg" },
    { product_id :"wa9",
    price : 480,
    category : "Belts",
    brand : "GUCCI",
    img : "https://cdna.lystit.com/200/250/tr/photos/mytheresa/75f53ff9/gucci-Beige-Cintura-in-canvas-GG-Supreme-e-pelle.jpeg" },
    { product_id :"wa10",
    price : 30,
    category : "Belts",
    brand : "MOSCHINO",
    img : "https://cdna.lystit.com/200/250/tr/photos/thehut/eaf49a74/guess-Black-G-Logo-Belt.jpeg" },
    { product_id :"wa11",
    price : 42,
    category : "Phone cases",
    brand : "MOSCHINO",
    img : "https://cdna.lystit.com/200/250/tr/photos/cettire/5bf11937/moschino-Black-Teddy-Iphone-11-Pro-Case.jpeg" },
    { product_id :"wa12",
    price : 114,
    category : "Phone cases",
    brand : "OFF-WHITE C/O VIRGIL ABLOH",
    img : "https://cdna.lystit.com/200/250/tr/photos/vitkac/d33f23d9/dolce-gabbana-BLACK-Iphone-13-Pro-Max-Case-Unisex-Black.jpeg" },
    { product_id :"wa13",
    price : 162,
    category : "Phone cases",
    brand : "OFF-WHITE C/O VIRGIL ABLOH",
    img : "https://cdna.lystit.com/200/250/tr/photos/dolcegabbana/0c60ec2c/dolce-gabbana-Pink-Calfskin-Iphone-13-Pro-Max-Cover.jpeg" },
    { product_id :"wa14",
    price : 57,
    category : "Phone cases",
    brand : "OFF-WHITE C/O VIRGIL ABLOH",
    img : "https://cdna.lystit.com/200/250/tr/photos/cettire/8f6f902b/off-white-co-virgil-abloh-Black-Floral-printed-Iphone-12-Pro-Max-Case.jpeg" },
    { product_id :"wa15",
    price : 100,
    category : "Phone cases",
    brand : "OFF-WHITE C/O VIRGIL ABLOH",
    img : "https://cdna.lystit.com/200/250/tr/photos/dolcegabbana/85bc5af7/dolce-gabbana-BLACKWHITE-Lace-Rubber-Iphone-12-Pro-Max-Cover.jpeg" },
    { product_id :"wa16",
    price : 69,
    category : "Phone cases",
    brand : "CALVIN KLEIN",
    img : "https://cdna.lystit.com/200/250/tr/photos/toryburch/52a15fdd/tory-burch-Gold-Perry-Glitter-Phone-Case.jpeg" },
    { product_id :"wa17",
    price : 60,
    category : "Phone cases",
    brand : "MOSCHINO",
    img : "https://cdna.lystit.com/200/250/tr/photos/cettire/cb0eebdf/kenzo-Black-Iphone-1313-Pro-Cover.jpeg" },
    { product_id :"wa18",
    price : 84,
    category : "Phone cases",
    brand : "MOSCHINO",
    img : "https://cdna.lystit.com/200/250/tr/photos/cettire/aa7e8aac/palm-angels-Black-Teddy-Printed-Iphone-12-Pro-Case.jpeg" },
    { product_id :"wa19",
    price : 22,
    category : "Phone cases",
    brand : "OFF-WHITE C/O VIRGIL ABLOH",
    img : "https://cdna.lystit.com/200/250/tr/photos/24sevres/2c3444c5/off-white-co-virgil-abloh-black_white-Phone-Case-Iphone-11-Pro.jpeg" },
    { product_id :"wa20",
    price : 162,
    category : "Phone cases",
    brand : "OFF-WHITE C/O VIRGIL ABLOH",
    img : "https://cdna.lystit.com/200/250/tr/photos/dolcegabbana/f9925e53/dolce-gabbana-Black-Calfskin-Iphone-13-Pro-Max-Cover.jpeg" },
    
    { product_id :"wa21",
    price : 11,
    category : "Face masks",
    brand : "CALVIN KLEIN",
    img : "https://cdna.lystit.com/200/250/tr/photos/tessuti/a9d20c38/calvin-klein-Black-Side-Logo-Face-Mask.jpeg" },
    { product_id :"wa22",
    price : 9,
    category : "Face masks",
    brand : "MOSCHINO",
    img : "https://cdna.lystit.com/200/250/tr/photos/tessuti/fe70f3c8/michael-kors-BlackWhite-Logo-Face-Mask-Multi.jpeg" },
    { product_id :"wa23",
    price : 35,
    category : "Face masks",
    brand : "CALVIN KLEIN",
    img : "https://cdna.lystit.com/200/250/tr/photos/toryburch/6c6548a7/tory-burch-Seasonal-Print-Printed-Face-Mask-Set-Of-5.jpeg" },
    { product_id :"wa24",
    price : 19,
    category : "Face masks",
    brand : "CALVIN KLEIN",
    img : "https://cdna.lystit.com/200/250/tr/photos/tessuti/13655b8e/calvin-klein-Pink-Monogram-Logo-Face-Mask.jpeg" },
    { product_id :"wa25",
    price : 63,
    category : "Face masks",
    brand : "OFF-WHITE C/O VIRGIL ABLOH",
    img : "https://cdna.lystit.com/200/250/tr/photos/mytheresa/e47fc543/off-white-co-virgil-abloh-black-Logo-Stretch-jersey-Mask.jpeg" },
    { product_id :"wa26",
    price : 19,
    category : "Face masks",
    brand : "CALVIN KLEIN",
    img : "https://cdna.lystit.com/200/250/tr/photos/tessuti/b65bf382/calvin-klein-Black-Monogram-Logo-Face-Mask.jpeg" },
    { product_id :"wa27",
    price : 4,
    category : "Face masks",
    brand : "CALVIN KLEIN",
    img : "https://cdna.lystit.com/200/250/tr/photos/ruelala/ddd64043/goldie-Yellow-Cloth-Face-Mask.jpeg" },
    { product_id :"wa28",
    price : 17,
    category : "Face masks",
    brand : "MOSCHINO",
    img : "https://cdna.lystit.com/200/250/tr/photos/gilt/ec7db0f0/zadig-and-voltaire-PASSION-Pack-Of-2-Cloth-Face-Masks.jpeg" },
    { product_id :"wa29",
    price : 35,
    category : "Face masks",
    brand : "CALVIN KLEIN",
    img : "https://cdna.lystit.com/200/250/tr/photos/toryburch/650e733e/tory-burch-Seasonal-Print-Mask-2022-Printed-Face-Mask-Set-Of-5.jpeg" },
    { product_id :"wa30",
    price : 15,
    category : "Face masks",
    brand : "MOSCHINO",
    img : "https://cdna.lystit.com/200/250/tr/photos/tessuti/e66436d0/michael-kors-Pink-Classic-Logo-Face-Mask.jpeg" },
    { product_id :"wa31",
    price : 742,
    category : "Gloves",
    brand : "GUCCI",
    img : "https://cdna.lystit.com/200/250/tr/photos/mytheresa/482e4d4f/gucci-black-Lace-Gloves.jpeg" },
    { product_id :"wa32",
    price : 37,
    category : "Gloves",
    brand : "MOSCHINO",
    img : "https://cdna.lystit.com/200/250/tr/photos/frmoda/d61fc685/moschino-NERO-Gloves-Double-Question-Mark.jpeg" },
    { product_id :"wa33",
    price : 720,
    category : "Gloves",
    brand : "GUCCI",
    img : "https://cdna.lystit.com/200/250/tr/photos/mytheresa/7015790b/gucci-black-Embroidered-Polka-dot-Tulle-Gloves.jpeg" },
    { product_id :"wa34",
    price : 55,
    category : "Gloves",
    brand : "MOSCHINO",
    img : "https://cdna.lystit.com/200/250/tr/photos/frmoda/2980bd82/moschino-NERO-Gloves-Teddy-Bear.jpeg" },
    { product_id :"wa35",
    price : 90,
    category : "Gloves",
    brand : "GUCCI",
    img : "https://cdna.lystit.com/200/250/tr/photos/forwardforward/601e85a7/norma-kamali-Snow-White-Long-Gloves.jpeg" },
    { product_id :"wa36",
    price : 63,
    category : "Gloves",
    brand : "MOSCHINO",
    img : "https://cdna.lystit.com/200/250/tr/photos/frmoda/cdecd8c8/moschino-NERO-Gloves-Teddy.jpeg" },
    { product_id :"wa37",
    price : 499,
    category : "Gloves",
    brand : "GUCCI",
    img : "https://cdna.lystit.com/200/250/tr/photos/cettire/bdb77ed3/gucci-Black-Double-G-Leather-Gloves.jpeg" },
    { product_id :"wa38",
    price : 454,
    category : "Gloves",
    brand : "GUCCI",
    img : "https://cdna.lystit.com/200/250/tr/photos/mytheresa/368361ed/jean-paul-gaultier-blue-Leather-Gloves.jpeg" },
    { product_id :"wa39",
    price : 55,
    category : "Gloves",
    brand : "MOSCHINO",
    img : "https://cdna.lystit.com/200/250/tr/photos/frmoda/07f72696/moschino-ROSA-Gloves-Teddy-Bear.jpeg" },
    { product_id :"wa40",
    price : 683,
    category : "Gloves",
    brand : "GUCCI",
    img : "https://cdna.lystit.com/200/250/tr/photos/mytheresa/cf1ac806/gucci-brown-GG-canvas-And-Leather-Gloves.jpeg" },
    { product_id :"wa41",
    price : 480,
    category : "Hats",
    brand : "CALVIN KLEIN",
    img : "https://cdna.lystit.com/200/250/tr/photos/mrporter/7e8789c3/fendi-Brown-Logo-print-Canvas-Baseball-Cap.jpeg" },
    { product_id :"wa42",
    price : 110,
    category : "Hats",
    brand : "CALVIN KLEIN",
    img : "https://cdna.lystit.com/200/250/tr/photos/mytheresa/45c93797/jacquemus-green-Chapeau-Le-Bob-Gadjo-en-coton.jpeg" },
    { product_id :"wa43",
    price : 629,
    category : "Hats",
    brand : "GUCCI",
    img : "https://cdna.lystit.com/200/250/tr/photos/mytheresa/12826737/gucci-brown-Hut-GG-aus-Canvas.jpeg" },
    { product_id :"wa44",
    price : 550,
    category : "Hats",
    brand : "MOSCHINO",
    img : "https://cdna.lystit.com/200/250/tr/photos/lncc/53e90f92/prada-Black-Logo-Bucket-Hat.jpeg" },
    { product_id :"wa45",
    price : 134,
    category : "Hats",
    brand : "CALVIN KLEIN",
    img : "https://cdna.lystit.com/200/250/tr/photos/forwardforward/27fc291d/jacquemus-Turquoise-Le-Bob-Artichaut.jpeg" },
    { product_id :"wa46",
    price : 321,
    category : "Hats",
    brand : "CALVIN KLEIN",
    img : "https://cdna.lystit.com/200/250/tr/photos/cettire/f849ac56/burberry-Multi-Vintage-Check-Bucket-Hat.jpeg" },
    { product_id :"wa47",
    price : 93,
    category : "Hats",
    brand : "CALVIN KLEIN",
    img : "https://cdna.lystit.com/200/250/tr/photos/cettire/79c25085/jacquemus-Blue-Le-Bob-Gadjo-Bucket-Hat.jpeg" },
    { product_id :"wa48",
    price : 282,
    category : "Hats",
    brand : "CALVIN KLEIN",
    img : "https://cdna.lystit.com/200/250/tr/photos/eraldo/ffaefbd5/burberry-Neutrals-Check-Print-Baseball-Cap.jpeg" },
    { product_id :"wa49",
    price : 22,
    category : "Hats",
    brand : "MOSCHINO",
    img : "https://cdna.lystit.com/200/250/tr/photos/scottsmenswear/10b5c564/nike-black-Heritage-86-Cap.jpeg" },
    { product_id :"wa50",
    price : 480,
    category : "Hats",
    brand : "CALVIN KLEIN",
    img : "https://cdna.lystit.com/200/250/tr/photos/mytheresa/14608f70/burberry-black-Cappello-da-pescatore-con-logo.jpeg" }
    ];
    let womendata = document.getElementById("box");
    let arrLS = JSON.parse(localStorage.getItem("cartData")) || [];

    function displayProducts(wadata) {
        womendata.innerHTML = "";
        wadata.forEach(function (elem) {
            let product = document.createElement("div");
            let product1 = document.createElement("div");
            let product2 = document.createElement("div");
            let product3 = document.createElement("div");

            let img = document.createElement("img");
            img.src = elem.img;

            let name = document.createElement("p")
            name.innerText = elem.brand

            let product_id = document.createElement("p")
            product_id.innerText = elem.product_id

            let category = document.createElement("p")
            category.innerText = elem.category

            let price = document.createElement("h3")
            price.innerText = "$" + elem.price

            let btn = document.createElement("button")
            btn.innerText = "Add To Cart"

            btn.addEventListener("click",function(){
                if(addtocartfunc(elem.product_id)==true){
                 alert("Product added Successfully");
                 arrLS.push(elem);
                 localStorage.setItem("cartData",JSON.stringify(arrLS));
                }
                else{
                  alert("Product already in the cart");
                }
              })
              elem.quant=1;
            product1.append(img)
            product2.append(name, product_id,category,price)
            product3.append(btn)
            product.append(product1, product2, product3);
            womendata.append(product)

        })
        
    }
    displayProducts(wadata)

function addtocartfunc(product_id){
        for(let i=0; i<arrLS.length; i++){
        if(arrLS[i].product_id===product_id){
        return false;
        }
        }
        return true;
          }
          
    document.querySelector("#Category").addEventListener("change", function (){
        let val = document.querySelector("#Category").value;
        if (val == "All") {
            displayProducts(wadata);
        }
        else {
            let filtered = wadata.filter(function (elem) {
                return elem.category == val;
            })
            displayProducts(filtered);
        }
    })
    document.querySelector("#Brand").addEventListener("change", function () {
        let val = document.querySelector("#Brand").value;
        if (val == "All") {
            displayProducts(wadata);
        }
        else {
            let filtered = wadata.filter(function (elem) {
                return elem.brand == val;
            })
            displayProducts(filtered);
        }
    })
    document.querySelector("#SortPrice").addEventListener("change", function () {
        let val = document.querySelector("#SortPrice").value;
        if (val == "Ascending") {
            wadata.sort(function (a, b) {
                if (a.price < b.price) return -1
                if (a.price > b.price) return 1
                return 0;
            })
            displayProducts(wadata);;
        }
        else if (val == "Descending") {
            wadata.sort(function (a, b) {
                if (a.price < b.price) return 1
                if (a.price > b.price) return -1
                return 0;
            })
            displayProducts(wadata);
        }
    } )
document.querySelector( "#navbar" ).style.width = "100%";
document.querySelector( "#navbar" ).style.height = "105px";