product.js

var productsObject = 
[
    {
        "image": "https://aeo.imgix.net/img/app/product/6/646046-6473067.jpg?auto=format",
        "name": "American Eagle Women Black Reversible Puffer Jacket",
        "price": "7999",
        "gender": "Female",
        "category": "Top"
    },
    {
        "image": "https://aeo.imgix.net/img/app/product/6/644914-6455202.jpg?auto=format",
        "name": "American Eagle Men Yellow Utility Hoodie",
        "price": "4999",
        "gender": "Male",
        "category": "Shirts"
    },
    {
        "image": "https://aeo.imgix.net/img/app/product/6/644913-6455191.jpg?auto=format",
        "name": "American Eagle Men Burgundy Utility Hoodie",
        "price": "4999",
        "gender": "Male",
        "category": "Shirts"
    },
    {
        "image": "https://aeo.imgix.net/img/app/product/6/643903-6437472.jpg?auto=format",
        "name": "American Eagle Men Burgundy Utility Hoodie",
        "price": "3999",
        "gender": "Female",
        "category": "Top"
    },
    {
        "image": "https://aeo.imgix.net/img/app/product/6/641770-6530326.jpg?auto=format",
        "name": "American Eagle Men Yellow Lightweight Puffer Jacket",
        "price": "3599",
        "gender": "Male",
        "category": "Shirts"
    },
    {
        "image": "https://aeo.imgix.net/img/app/product/6/638896-6530362.jpg?auto=format",
        "name": "American Eagle Men Olive Puffer Shacket",
        "price": "4999",
        "gender": "Male",
        "category": "Shirts"
    },
    {
        "image": "https://aeo.imgix.net/img/app/product/6/638609-6348901.jpg?auto=format",
        "name": "American Eagle Women Red Pointelle Crew Neck Sweater",
        "price": "1999",
        "gender": "Female",
        "category": "Top"
    },
    {
        "image": "https://aeo.imgix.net/img/app/product/6/638608-6348890.jpg?auto=format",
        "name": "American Eagle Women Beige Pointelle Crew Neck Sweater",
        "price": "5999",
        "gender": "Female",
        "category": "Top"
    },
    {
        "image": "https://aeo.imgix.net/img/app/product/6/635774-6697650.jpg?auto=format",
        "name": "American Eagle Women Red Fairisle Snowdrift Sweater",
        "price": "3299",
        "gender": "Female",
        "category": "Top"
    },
    {
        "image": "https://aeo.imgix.net/img/app/product/6/635773-6697642.jpg?auto=format",
        "name": "American Eagle Women Blue Fairisle Snowdrift Sweater",
        "price": "3499",
        "gender": "Female",
        "category": "Top"
    },
    {
        "image": "https://aeo.imgix.net/img/app/product/6/638606-6348868.jpg?auto=format",
        "name": "American Eagle Women Black Pointelle Crew Neck Sweater",
        "price": "4999",
        "gender": "Female",
        "category": "Top"
    },
    {
        "image": "https://aeo.imgix.net/img/app/product/6/638607-6348879.jpg?auto=format",
        "name": "American Eagle Women Pink Pointelle Crew Neck Sweater",
        "price": "4500",
        "gender": "Female",
        "category": "Top"
    },
    {
        "image": "https://aeo.imgix.net/img/app/product/6/634933-6632076.jpg?auto=format",
        "name": "American Eagle Men Green Camo Workwear Jacket",
        "price": "7999",
        "gender": "Male",
        "category": "Shirts"
    },
    {
        "image": "https://aeo.imgix.net/img/app/product/6/635761-6288679.jpg?auto=format",
        "name": "American Eagle Women Grey Plaid Blazer",
        "price": "6999",
        "gender": "Female",
        "category": "Top"
    },
    {
        "image": "https://aeo.imgix.net/img/app/product/6/633166-6239119.jpg?auto=format",
        "name": "American Eagle Women Blue Oversized Fleece Hoodie",
        "price": "3999",
        "gender": "Female",
        "category": "Top"
    },
    {
        "image": "https://aeo.imgix.net/img/app/product/6/633165-6239108.jpg?auto=format",
        "name": "American Eagle Women Brown Oversized Fleece Hoodie",
        "price": "3999",
        "gender": "Female",
        "category": "Top"
    },
    {
        "image": "https://aeo.imgix.net/img/app/product/6/633164-6239097.jpg?auto=format",
        "name": "American Eagle Women Red Oversized Fleece Hoodie",
        "price": "3499",
        "gender": "Female",
        "category": "Top"
    },
    {
        "image": "https://aeo.imgix.net/img/app/product/6/633160-6239053.jpg?auto=format",
        "name": "American Eagle Women Red Cable Knit Mock Neck Sweater",
        "price": "3599",
        "gender": "Female",
        "category": "Top"
    },
    {
        "image": "https://aeo.imgix.net/img/app/product/6/633160-6239054.jpg?auto=format",
        "name": "American Eagle Women Red Cable Knit Mock Jeans",
        "price": "3599",
        "gender": "Female",
        "category": "Jeans"
    },
    {
        "image": "https://aeo.imgix.net/img/app/product/6/633159-6239042.jpg?auto=format",
        "name": "American Eagle Women Cream Cable Knit Mock Neck Sweater",
        "price": "5000",
        "gender": "Female",
        "category": "Top"
    },
    {
        "image": "https://aeo.imgix.net/img/app/product/6/633159-6239044.jpg?auto=format",
        "name": "American Eagle Women Cream Cable Knit Mock Jeans",
        "price": "4999",
        "gender": "Female",
        "category": "Jeans"
    },
    {
        "image": "https://aeo.imgix.net/img/app/product/6/630405-6176399.jpg?auto=format",
        "name": "American Eagle Men Beige Workwear Jacket",
        "price": "4999",
        "gender": "Male",
        "category": "Shirts"
    },
    {
        "image": "https://aeo.imgix.net/img/app/product/6/630405-6176401.jpg?auto=format",
        "name": "American Eagle Men Beige Workwear jeans",
        "price": "4999",
        "gender": "Male",
        "category": "Jeans"
    },
    {
        "image": "https://aeo.imgix.net/img/app/product/6/630405-6176401.jpg?auto=format",
        "name": "American Eagle Men Black Super Soft Graphic T-Shirt",
        "price": "999",
        "gender": "Male",
        "category": "T-Shirts"
    },
    {
        "image": "https://aeo.imgix.net/img/app/product/6/644939-6697633.jpg?auto=format",
        "name": "American Eagle Men Blue Super Soft Graphic T-Shirt",
        "price": "1200",
        "gender": "Male",
        "category": "T-Shirts"
    },
    {
        "image": "https://images.pexels.com/photos/1032110/pexels-photo-1032110.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
        "name": "American Eagle Men black shoes",
        "price": "3500",
        "gender": "Male",
        "category": "Shoes"
    },
    {
        "image": "https://aeo.imgix.net/img/app/product/6/633164-6239097.jpg?auto=format",
        "name": "American Eagle Men Red Graphic Quarter Zip Jacket",
        "price": "7999",
        "gender": "Female",
        "category": "Shirts"
    },
    {
        "image": "https://aeo.imgix.net/img/app/product/6/635826-6289303.jpg?auto=format",
        "name": "American Eagle Women Blue Ne(X)T Level High-Waisted Jegging Crop",
        "price": "2999",
        "gender": "Female",
        "category": "Jeans"
    },
    {
        "image": "https://aeo.imgix.net/img/app/product/6/634936-6464084.jpg?auto=format",
        "name": "American Eagle Women Brown Cinched Blouse",
        "price": "3100",
        "gender": "Female",
        "category": "Top"
    },
    {
        "image": "https://aeo.imgix.net/img/app/product/6/609978-5762743.jpg?auto=format",
        "name": "American Eagle Women Brown Cinched Blouse",
        "price": "3100",
        "gender": "Male",
        "category": "Top"
    },
    {
        "image": "https://aeo.imgix.net/img/app/product/6/609974-6091380.jpg?auto=format",
        "name": "American Eagle Women Brown Cinched Blouse",
        "price": "4250",
        "gender": "Female",
        "category": "Top"
    },
    {
        "image": "https://aeo.imgix.net/img/app/product/6/609976-5762721.jpg?auto=format",
        "name": "American Eagle Women Brown Cinched Blouse",
        "price": "4100",
        "gender": "Male",
        "category": "Top"
    },
    {
        "image": "https://aeo.imgix.net/img/app/product/6/611447-5796082.jpg?auto=format",
        "name": "American Eagle Women Brown Cinched Blouse",
        "price": "3100",
        "gender": "Male",
        "category": "Top"
    },
    {
        "image": "https://aeo.imgix.net/img/app/product/6/630387-6176212.jpg?auto=format",
        "name": "American Eagle Women Brown Cinched Blouse",
        "price": "3100",
        "gender": "Male",
        "category": "Top"
    },
    {
        "image": "https://aeo.imgix.net/img/app/product/6/644932-6456314.jpg?auto=format",
        "name": "American Eagle Men Burgundy Super Soft Graphic T-Shirt",
        "price": "2599",
        "gender": "Male",
        "category": "Shirts"
    },
    {
        "image": "https://aeo.imgix.net/img/app/product/6/644910-6455157.jpg?auto=format",
        "name": "American Eagle Men Red Super Soft Flannel Shirt",
        "price": "3000",
        "gender": "Male",
        "category": "Shirts"
    },
    {
        "image": "https://aeo.imgix.net/img/app/product/6/643909-6437538.jpg?auto=format",
        "name": "American Eagle Men Blue Flex Slim Chino",
        "price": "3299",
        "gender": "Male",
        "category": "Jeans"
    },
    {
        "image": "https://aeo.imgix.net/img/app/product/6/643907-6437516.jpg?auto=format",
        "name": "American Eagle Men Blue Flex Slim Chino",
        "price": "4299",
        "gender": "Male",
        "category": "Jeans"
    },
    {
        "image": "https://static.langimg.com/thumb/msid-82028507,imgsize-63684,width-700,height-525,resizemode-75/navbharat-times.jpg",
        "name": "American Eagle Men Blue Flex shoes",
        "price": "4299",
        "gender": "Male",
        "category": "Shoes"
    },
    {
        "image": "https://assets.vogue.com/photos/6128027eb5cae63a108a2de7/master/w_1600%2Cc_limit/liana-shoes.jpg",
        "name": "American Eagle Men Blue Flex shoes",
        "price": "4299",
        "gender": "Female",
        "category": "Shoes"
    },
    {
        "image": "https://media.wired.com/photos/5e320d1dce1d970008fbe79a/1:1/w_2400,c_limit/Gear-Books-100032_188_L_Hyperion_Elite.jpg",
        "name": "American Eagle Men Blue Flex shoes",
        "price": "5099",
        "gender": "Male",
        "category": "Shoes"
    }
]


var products = JSON.parse(localStorage.getItem("shoppingItems")) || []
// console.log(products);
// var products = JSON.parse(productsObject);
var cart_Items = []



displayItem(productsObject,products);
// displayItem(products)
var cart_count = 0



function displayItem( productsObject,products){
document.querySelector("#pro_div").textContent=""

    productsObject.map(function (ele){
        var div = document.createElement("div")
    
        var image = document.createElement("img")
        image.setAttribute("src",ele.image)
        // image.addEventListener("click", function(){
        //     window.location.href="details.html"
        // })
    
        var Pro_name = document.createElement("p")
        Pro_name.textContent = ele.name
        Pro_name.setAttribute("id","nameFont")
    
        var price_button_div = document.createElement("div")
    
        var price = document.createElement("h5")
        price.textContent= "₹"+" "+ ele.price
        price.setAttribute("id","price")
        
        var button = document.createElement("button")
        button.textContent="Add Cart"
        button.addEventListener("click", function(){
            cart_count = cart_count+1
            document.querySelector("#quantity").textContent=cart_count
            addToCart(ele)
        })
    
        price_button_div.append(price,button)
        
    
        div.append(image,Pro_name,price_button_div)
        document.querySelector("#pro_div").append(div)
    })

        products.map(function (ele){
            var div = document.createElement("div")
        
            var image = document.createElement("img")
            image.setAttribute("src",ele.image)
            // image.addEventListener("click", function(){
            //     window.location.href="details.html"
            // })
        
            var Pro_name = document.createElement("p")
            Pro_name.textContent = ele.name
            Pro_name.setAttribute("id","nameFont")
        
            var price_button_div = document.createElement("div")
        
            var price = document.createElement("h5")
            price.textContent= "₹"+" "+ ele.price
            price.setAttribute("id","price")
            
            var button = document.createElement("button")
            button.textContent="Add Cart"
            button.addEventListener("click", function(){
                cart_count = cart_count+1
                document.querySelector("#quantity").textContent=cart_count
                addToCart(ele)
            })
        
            price_button_div.append(price,button)
            
        
            div.append(image,Pro_name,price_button_div)
            document.querySelector("#pro_div").append(div)

    })
}



function addToCart(ele){
    cart_Items.push(ele)
    localStorage.setItem("cart_Items",JSON.stringify(cart_Items))
}
document.querySelector("#itemsCartPage").addEventListener("click",function(){
    window.location.href="checkout.html"
})


function genderFilter(){
    var selected = document.querySelector("#Gender").value
    
    if (selected == "gender"){
        displayItem(productsObject,products)
    }
    else{
        var genderList = productsObject.filter(function(elem){
            return elem.gender == selected
        })
        var genderList1 = products.filter(function(ele){
            return ele.gender ==selected
        
        })
        displayItem(genderList,genderList1)
    }

    
}

function categoryFilter(){
    var selected = document.querySelector("#category").value

    var categoryList = productsObject.filter(function(elem){
        return elem.category == selected
    })
    displayItem(categoryList)
}