product.js

var seller = [
    {
        imgPro : "https://static.thcdn.com/images/small/webp//productimg/original/11289609-8744892770898772.jpg",
        name : "SkinCeuticals C E Ferulic (1 fl. oz.)",
        print : 166.00

    },
    {
        imgPro : "https://static.thcdn.com/images/large/webp//productimg/1600/1600/11370303-1074944341868735.jpg",
        name : "EltaMD UV Clear Broad-Spectrum SPF 46 (1.7 oz.)",
        print : 37.00
    },
    {
        imgPro : "https://static.thcdn.com/images/large/webp//productimg/1600/1600/12596429-3594871019700125.jpg",
        name : "SkinMedica TNS Advanced+ Serum (1 oz.)",
        print : 295.00
    },
    {
        imgPro : "https://static.thcdn.com/images/large/webp//productimg/1600/1600/11588281-8764882139037003.jpg",
        name : "Sunday Riley GOOD GENES All-In-One Lactic Acid Treatment (1.7 oz. - $175 Value)",
        print : 122.00 
    },
    {
        imgPro : "https://static.thcdn.com/images/large/webp//productimg/1600/1600/11174178-1044909106371632.jpg",
        name : "Paula's Choice SKIN PERFECTING 2 BHA Liquid Exfoliant (4 fl. oz.)",
        print : 32.00 
    },
    {
        imgPro : "https://static.thcdn.com/images/small/webp//productimg/original/11291496-1824871578503201.jpg",
        name : "iS Clinical Cleansing Complex (6 fl. oz.)",
        print : 45.00
    },
    {
        imgPro : "https://static.thcdn.com/images/large/webp//productimg/1600/1600/11370312-1044938634157826.jpg",
        name : "EltaMD UV Clear Broad-Spectrum SPF 46 - Tinted (1.7 oz.)",
        print : 39.00
    },
    {
        imgPro : "https://static.thcdn.com/images/large/webp//productimg/1600/1600/11290635-1804892767902966.jpg",
        name : "SkinCeuticals Triple Lipid Restore 242 (1.6 fl. oz.)",
        print : 139.00
    },
    {
        imgPro : "https://static.thcdn.com/images/large/webp//productimg/1600/1600/11291541-5024871574576726.jpg",
        name : "Obagi Medical Nu-Derm Toner (6.7 fl. oz.)",
        print : 43.00
    },
    {
        imgPro : "https://static.thcdn.com/images/large/webp//productimg/1600/1600/11289682-1284871019539829.jpg",
        name : "SkinMedica TNS Essential Serum (1 oz.)",
        print : 281.00
    },
    {
        imgPro : "https://static.thcdn.com/images/large/webp//productimg/1600/1600/12747871-5844866386756265.jpg",
        name : "Dr Dennis Gross SpectraLite™ FaceWare Pro (1 piece)",
        print : 435.00
    },
    {
        imgPro : "https://static.thcdn.com/images/large/webp//productimg/1600/1600/11291956-2074871578544985.jpg",
        name : "iS Clinical Active Serum (1 fl. oz.)",
        print : 142.00
    },
    {
        imgPro : "https://static.thcdn.com/images/large/webp//productimg/1600/1600/11288881-1144871571568377.jpg",
        name : "NuFACE Mini (2 piece)",
        print : 209.00
    },
    {
        imgPro : "https://static.thcdn.com/images/large/webp//productimg/1600/1600/12901956-1634871508329232.jpg",
        name : "Supergoop!® Unseen Sunscreen SPF 40 1.7 fl. oz.",
        print : 36.00
    },
    {
        imgPro : "https://static.thcdn.com/images/large/webp//productimg/1600/1600/10560417-1534868371575033.jpg",
        name : "RevitaLash Advanced Eyelash Conditioner - 6 Month Supply (0.118 fl. oz.)",
        print : 150.00
    },
    {
        imgPro : "https://static.thcdn.com/images/large/webp//productimg/1600/1600/11289599-4344892770055931.jpg",
        name : "Earn 500 reward points when purchasing this product as a rewards member*",
        print : 100.00
    },
    {
        imgPro : "https://static.thcdn.com/images/large/webp//productimg/1600/1600/11574165-2114870996065159.jpg",
        name : "SkinMedica HA5 Rejuvenating Hydrator (1 fl. oz.)",
        print :120.00
    },
    {
        imgPro : "https://static.thcdn.com/images/large/webp//productimg/1600/1600/11395385-5474911401472936.jpg",
        name : "SkinCeuticals Hyaluronic Acid Intensifier (1 fl. oz.)",
        print : 120.00
    },
    {
        imgPro : "https://static.thcdn.com/images/large/webp//productimg/1600/1600/12597163-5554871574934407.jpg",
        name : "Olaplex No. 4 Bond Maintenance Shampoo (8.5 fl. oz.)",
        print : 28.00
    },
    {
        imgPro : "https://static.thcdn.com/images/large/webp//productimg/1600/1600/11370314-1304944342872775.jpg",
        name : "EltaMD UV Elements Tinted Broad-Spectrum SPF 44 (2 oz.)",
        print : 36.50
    },
    {
        imgPro : "https://static.thcdn.com/images/large/webp//productimg/1600/1600/13547804-2074932747456540.jpg",
        name : "SkinCeuticals Anti-Aging Radiance Duo Worth $296.00",
        print : 296.00
    },
    {
        imgPro : "https://static.thcdn.com/images/large/webp//productimg/1600/1600/11290631-5864870995720591.jpg",
        name : "SkinMedica HA5 Rejuvenating Hydrator (2 oz.)",
        print : 178.00
    },
    {
        imgPro : "https://static.thcdn.com/images/large/webp//productimg/1600/1600/12597166-1134871572767741.jpg",
        name : "Olaplex No. 7 Bonding Oil (1 fl. oz.)",
        print : 28.00
    },
    {
        imgPro : "https://static.thcdn.com/images/large/webp//productimg/1600/1600/11535233-1444892768930832.jpg",
        name : "SkinCeuticals Purifying Cleanser (6.8 fl. oz.)",
        print : 35
    },
    {
        imgPro : "https://static.thcdn.com/images/large/webp//productimg/1600/1600/11574165-2114870996065159.jpg",
        name : "SkinMedica HA5 Rejuvenating Hydrator (1 fl. oz.)",
        print :120.00
    },
    {
        imgPro : "https://static.thcdn.com/images/large/webp//productimg/1600/1600/11395385-5474911401472936.jpg",
        name : "SkinCeuticals Hyaluronic Acid Intensifier (1 fl. oz.)",
        print : 120.00
    },
    {
        imgPro : "https://static.thcdn.com/images/large/webp//productimg/1600/1600/12597163-5554871574934407.jpg",
        name : "Olaplex No. 4 Bond Maintenance Shampoo (8.5 fl. oz.)",
        print : 28.00
    },
    {
        imgPro : "https://static.thcdn.com/images/large/webp//productimg/1600/1600/12597163-5554871574934407.jpg",
        name : "Olaplex No. 4 Bond Maintenance Shampoo (8.5 fl. oz.)",
        print : 28.00
    },
    {
        imgPro : "https://static.thcdn.com/images/large/webp//productimg/1600/1600/12597163-5554871574934407.jpg",
        name : "Olaplex No. 4 Bond Maintenance Shampoo (8.5 fl. oz.)",
        print : 28.00
    },
    {
        imgPro : "https://static.thcdn.com/images/large/webp//productimg/1600/1600/12597163-5554871574934407.jpg",
        name : "Olaplex No. 4 Bond Maintenance Shampoo (8.5 fl. oz.)",
        print : 28.00
    },
    {
        imgPro : "https://static.thcdn.com/images/large/webp//productimg/1600/1600/12597163-5554871574934407.jpg",
        name : "Olaplex No. 4 Bond Maintenance Shampoo (8.5 fl. oz.)",
        print : 28.00
    },
    {
        imgPro : "https://static.thcdn.com/images/large/webp//productimg/1600/1600/12597163-5554871574934407.jpg",
        name : "Olaplex No. 4 Bond Maintenance Shampoo (8.5 fl. oz.)",
        print : 28.00
    },
    {
        imgPro : "https://static.thcdn.com/images/large/webp//productimg/1600/1600/12597163-5554871574934407.jpg",
        name : "Olaplex No. 4 Bond Maintenance Shampoo (8.5 fl. oz.)",
        print : 28.00
    },

    {
        imgPro : "https://static.thcdn.com/images/large/webp//productimg/1600/1600/12597163-5554871574934407.jpg",
        name : "Olaplex No. 4 Bond Maintenance Shampoo (8.5 fl. oz.)",
        print : 28.00
    },
    {
        imgPro : "https://static.thcdn.com/images/large/webp//productimg/1600/1600/12597163-5554871574934407.jpg",
        name : "Olaplex No. 4 Bond Maintenance Shampoo (8.5 fl. oz.)",
        print : 28.00
    },
    {
        imgPro : "https://static.thcdn.com/images/large/webp//productimg/1600/1600/12597163-5554871574934407.jpg",
        name : "Olaplex No. 4 Bond Maintenance Shampoo (8.5 fl. oz.)",
        print : 28.00
    },
    {
        imgPro : "https://static.thcdn.com/images/large/webp//productimg/1600/1600/12597163-5554871574934407.jpg",
        name : "Olaplex No. 4 Bond Maintenance Shampoo (8.5 fl. oz.)",
        print : 28.00
    },
    {
        imgPro : "https://static.thcdn.com/images/large/webp//productimg/1600/1600/12597163-5554871574934407.jpg",
        name : "Olaplex No. 4 Bond Maintenance Shampoo (8.5 fl. oz.)",
        print : 28.00
    },
    {
        imgPro : "https://static.thcdn.com/images/large/webp//productimg/1600/1600/12597163-5554871574934407.jpg",
        name : "Olaplex No. 4 Bond Maintenance Shampoo (8.5 fl. oz.)",
        print : 28.00
    },
    {
        imgPro : "https://static.thcdn.com/images/large/webp//productimg/1600/1600/12597163-5554871574934407.jpg",
        name : "Olaplex No. 4 Bond Maintenance Shampoo (8.5 fl. oz.)",
        print : 28.00
    },
    {
        imgPro : "https://static.thcdn.com/images/large/webp//productimg/1600/1600/12597163-5554871574934407.jpg",
        name : "Olaplex No. 4 Bond Maintenance Shampoo (8.5 fl. oz.)",
        print : 28.00
    },
    {
        imgPro : "https://static.thcdn.com/images/large/webp//productimg/1600/1600/12597163-5554871574934407.jpg",
        name : "Olaplex No. 4 Bond Maintenance Shampoo (8.5 fl. oz.)",
        print : 28.00
    },

]











window.addEventListener("load" ,function(){
    Seller(seller);
});


function sortbyprice(){
    //var select = document.querySelector("#price").value;

    var selection = document.querySelector("#price").value;

    console.log(selection)

    if(selection=="select"){
        Seller(seller);
    }

    if(selection == "LTH"){
        seller.sort(function(a,b){
            return a.print - b.print;
        })
        Seller(seller);
    }

    if(selection == "HTL"){
        seller.sort(function(a,b){
            return b.print - a.print;
        })
        Seller(seller);
    }
}


function Seller(seller){
    document.querySelector("#utkk").innerText = "";







seller.map(function(ele){

    var box = document.createElement("div");

    var img = document.createElement("img");
    img.src = ele.imgPro;
    img.setAttribute("class","image");

    var name = document.createElement("p");
    name.innerText = ele.name;
    name.style.textAlign="center";

    var print = document.createElement("h3");
    print.innerText = ele.print;
    print.style.textAlign= "center";

    var btn = document.createElement("button");
    btn.innerText = "Add to Cart";
    btn.setAttribute("class","btn-btn")

    box.append(img,name,print,btn)
    document.querySelector("#utkk").append(box)

    btn.addEventListener("click",function(){
        product(ele);
    })
    img.addEventListener("click",function(){
        productd(ele)
    })
});
}


var arr_product = JSON.parse(localStorage.getItem("product_details")) || []

function product(ele){
   console.log(ele)
   var objproduct={
    img:ele.imgPro,
    name:ele.name,
    price:ele.print,
}
   arr_product.push(objproduct);
   localStorage.setItem("product_details",JSON.stringify(arr_product))
}

var detaq = JSON.parse(localStorage.getItem("detaq")) || []
function productd(ele)
{
    console.log(ele)
   var onepage = {
       img:ele.imgPro,
       name:ele.name,
       price:ele.print,
   }
   detaq.push(onepage);
   localStorage.setItem("care", JSON.stringify(detaq))
   window.location.href="productde.html";
}