pet.js

var pet = [

    {
        img:
            "https://img.shop.com/Image/240000/243300/243385/products/559052312.jpg?plain&size=750x750",
        name: "Pet Health OPC Formula for Cats & Dogs with Glucosamine",
        soldBy: "Sold by Pet Health™",
        strikedprice: "80.00",
        price: "40.00",
        ratio: "+ up to $3.00 / 8% Cashback",
        shipping: "Free shipping with $50.00 orders",
        category:"petHealth"

    },
    {
        img:
            "https://img.shop.com/Image/240000/243300/243385/products/559052317.jpg?plain&size=750x750",
            name: "PetHealth™ Multivitamin for Dogs",
            soldBy: "Sold by Pet Health™",
        strikedprice: "35.00",
        price: "15.00",
        ratio: "+  $2.40 / 3% Cashback",
        shipping: "Free shipping with $40.00 orders",
        category:"petHealth"
    },
    {
        img:
            "https://img.shop.com/Image/240000/243300/243385/products/1943471621.jpg?plain&size=750x750",
            name: "Pet Health CBD Formula for Cats & Dogs Pet Tincture",
            soldBy: "Sold by Pet Health™",
        strikedprice: "35.00",
        price: "30.00",
        ratio: "+ up to $1.22 / 2% Cashback",
        shipping: "Free shipping with $40.00 orders",
        category:"petHealth"
    },
    {
        img:
            "https://img.shop.com/Image/240000/243300/243385/products/559052316.jpg?plain&size=750x750",
        name: "PetHealth™ Pad & Paw Balm",
        soldBy: "Sold by Pet Health™",
        strikedprice: "399",
        price: "110",
        ratio: "+ up to $1.22 / 2% Cashback",
        shipping: "Free shipping with $40.00 orders",
        category:"petHealth"
    },
    {
        img:
            "https://img.shop.com/Image/290000/291700/291715/products/1952389647.jpg?plain&size=400x400",
        name: "Nestuo Cat Bed, a Covered Cat Hideaway Hut of Rattan Houses Pets in Dome Basket, Washable",
        soldBy: "Sold by Instachew",
        strikedprice: "89",
        price: "20",
        ratio: "+  $0.63 / 3% Cashback",
        shipping: "Free shipping with $40.00 orders",
        category:"cats"
    },
    {
        img:
            "https://img.shop.com/Image/240000/248300/248358/products/1901199675.jpg?plain&size=400x400",
        name: "Clearance Center Pet Bed Small ",
        soldBy: "Sold by Instachew",
        strikedprice: "89",
        price: "53",
        ratio: "+  $0.63 / 6% Cashback",
        shipping: "Free shipping with $40.00 orders",
        category:"cats"
    },

    {
        img:
            "https://img.shop.com/Image/260000/263300/263383/products/1937741650.jpg?plain&size=400x400",
            name: "Aspen Pet 19 In. x 17 In. Oval Polyester Animal Print Cat ",
            soldBy: "Sold by Instachew",
        strikedprice: "189",
        price: "53",
        ratio: "+  $0.63 / 3% Cashback",
        shipping: "Free shipping with $40.00 orders",
        category:"cats"
    },
    {
        img:
            "https://img.shop.com/Image/290000/291700/291715/products/1930573294.jpg?plain&size=400x400",
        name: "Rockaby Pet Bed",
        soldBy: "Sold by Instachew",
        strikedprice: "77",
        price: "33",
        ratio: "+  $0.63 / 3% Cashback",
        shipping: "Free shipping with $40.00 orders",
        category:"cats"
    },
    {
        img:
            "https://img.shop.com/Image/240000/247900/247927/products/1882272867.jpg?plain&size=400x400",
            name: "Shopping Annuity Brand Premium Grain-Free Dog Treats",
            soldBy: "  Sold by  Shopping Annuity Necessities",
        strikedprice: "177",
        price: "39",
        ratio: "+  $0.63 / 3% Cashback",
        shipping: "Free shipping with $40.00 orders",
        category:"dogs"
    },
    {
        img:
            "https://img.shop.com/Image/270000/273400/273475/products/1871871527.jpg?plain&size=400x400",
            name: "Ultra Chewy 8035569 2.8 oz Peanut Butter Treats for Dogs - Pack of 12",
            soldBy: "Sold by AllGourmetFood",
        strikedprice: "57",
        price: "55",
        ratio: "+  $0.63 / 3% Cashback",
        shipping: "Free shipping with $40.00 orders",
        category:"dogs"
    },
    {
        img:
            "https://img.shop.com/Image/270000/273400/273475/products/1848796362.jpg?plain&size=400x400",
            name: "Natural Balance 723633775335 8 oz Loving Pets True Venison Jerky Sliders Dog Treats",
            soldBy: "Sold by AllGourmetFood",
        strikedprice: "57",
        price: "27",
        ratio: "+  $0.63 / 3% Cashback",
        shipping: "Free shipping with $40.00 orders",
        category:"dogs"
    },
    {
        img:
            "https://img.shop.com/Image/270000/273400/273475/products/1947373704.jpg?plain&size=400x400",
        name: "Shameless Pets 00356077 Bacon Dog Treat - Pack of 6",
        soldBy: "Sold by AllGourmetFood",
        strikedprice: "57",
        price: "25",
        ratio: "+  $0.63 / 3% Cashback",
        shipping: "Free shipping with $40.00 orders",
        category:"dogs"
    },
    {
        img:
            "https://img.shop.com/Image/240000/248000/248061/products/1885179812.jpg?plain&size=400x400",
            name: "45 Brown and Gray Unique Durable Tudor Rabbit Hutch",
            soldBy: "Sold by  Christmas Central",
        strikedprice: "80",
        price: "40",
        ratio: "+ up to $3.00 / 8% Cashback",
        shipping: "Free shipping with $40.00 orders",
        category:"animals"

    },
    {
        img:
            "https://img.shop.com/Image/250000/251800/251872/products/1946352087.jpg?plain&size=400x400",
       
        name: "Marshall MA00370 Fleece Front Carry Pack for Ferrets",
        soldBy: "Sold by UnbeatableSale",
        strikedprice: "109",
        price: "79",
        ratio: "+  $2.40 / 3% Cashback",
        shipping: "Free shipping with $40.00 orders",
        category:"animals"
    },
    {
        img:
            "https://img.shop.com/Image/250000/251800/251872/products/1792959413.jpg?plain&size=400x400",
        name: "Carolina Pet 0PP0001-ROC Pendleton Pet National Park Pet Bed - Rocky Mountain, Small",
        soldBy: "Sold by  UnbeatableSale",
        strikedprice: "60",
        price: "45",
        ratio: "+ up to $1.22 / 2% Cashback",
        shipping: "Free shipping with $40.00 orders",
        category:"animals"
    },
    {
        img:
            "https://img.shop.com/Image/250000/250000/250006/products/1923714140.jpg?plain&size=400x400",
        name: "Multi Dura Chew Plus Nyla Multi-Dura Chew Plus Spr",
        soldBy: "Sold by  UnbeatableSale",
        strikedprice: "60",
        price: "45",
        ratio: "+ up to $1.22 / 2% Cashback",
        shipping: "Free shipping with $40.00 orders",
        category:"animals"
    },
   

];
displayfun(pet);


displayfun(pet);
document.getElementById("filter").addEventListener("change", changed);

function displayfun(q) {
    document.querySelector("#product-container").innerHTML = "";
    q.map(function (elem, i) {
        var box = document.createElement("div");

        var im = document.createElement("img");
        im.setAttribute("src", elem.img);

        var na = document.createElement("h3");
        na.innerText = elem.name;

        var sbp = document.createElement("p");

        var logo = document.createElement("img");
        logo.setAttribute("src", "https://img.shop.com/Image/resources/images/onecart-icon.svg");
        // logo.setAttribute("class", "cartlogo"); 
        logo.style.height = "15px"
        logo.style.width = "15px";

        var sb = document.createElement("span");
        sb.innerText = elem.soldBy;
        sb.setAttribute("class", "sold");
        sbp.append(logo, sb);
        sbp.style.marginTop = "-15px";

        var pr = document.createElement("p");

        var sp1 = document.createElement("span");
        sp1.innerText = "$"+elem.strikedprice;
        sp1.style.fontSize = ".75rem";
        sp1.style.textDecoration = "line-through";
        var sp2 = document.createElement("span");
        sp2.innerText = "$"+elem.price;
        sp2.setAttribute("class", "oprice");
        pr.append(sp1, sp2);
        pr.style.marginTop = "-6px";

        var cbp = document.createElement("p");

        var rato = document.createElement("span");
        rato.innerText = elem.ratio;
        rato.style.marginRight = "5px";
        var logo2 = document.createElement("img");
        logo2.setAttribute("src", "https://img.shop.com/Image/resources/images/cashback-icon.svg");
        //logo2.setAttribute("class", "dollar"); 
        logo2.style.height = "13px";
        logo2.style.width = "13px";
        var cb = document.createElement("span");
        cb.innerText = "Cashback";
        cbp.append(rato, logo2, cb);
        cbp.style.fontSize = ".75rem";
        cbp.style.marginTop = "-8px";


        var sp = document.createElement("span");
        sp.innerText = elem.shipping;
        sp.style.color = "#007e97";
        sp.style.fontSize = ".75rem";
        sp.style.marginBottom = "15px";

        var bdiv = document.createElement("div");
        bdiv.setAttribute("class", "buttons")

        var sd = document.createElement("div");
        
        var anchor=document.createElement("a");
        anchor.innerText="See Details";
        sd.append(anchor);
        anchor.setAttribute("href","details.html");
        anchor.setAttribute("class","anch");
        anchor.addEventListener("click",function(){
            det(elem);
        });
        //sd.setAttribute("class", "details"); 
        var atc = document.createElement("button");
        atc.innerText = "Add to Cart";
        atc.addEventListener("click", function () {
            cart(elem, i);
        });

        // atc.setAttribute("class", "addtocart"); 
        bdiv.append(sd, atc)

        box.append(im, na, sbp, pr, cbp, sp, bdiv);
        document.getElementById("product-container").append(box);


    });
}

function det(elem){
    var arr=[];
    arr.push(elem);
    localStorage.setItem("detail",JSON.stringify(arr));
//location.replace("details.html");
}

var cartArr = JSON.parse(localStorage.getItem("cart-list")) || [];
var count = localStorage.getItem("cartcount") || 0;
document.querySelector(".cart-count").innerText = count;

function cart(elem, i) {
    cartArr.push(elem);
    count++;
    document.querySelector(".cart-count").innerText = count;
    localStorage.setItem("cart-list", JSON.stringify(cartArr));
    localStorage.setItem("cartcount", count);
}

function changed() {
    var catt = document.querySelector("#filter").value;
    if (catt == "") {
        displayfun(pet);
    } else {
        var p = pet.filter(function (item) {
            if (item.category == catt) {
                return item;
            }
        });
        displayfun(p);
    }

}

document.querySelector("#filtergame").addEventListener("click", filterfun1);
document.querySelector("#filterhome").addEventListener("click", filterfun2);
document.querySelector("#filterapparel").addEventListener("click", filterfun3);
document.querySelector("#filterfootball").addEventListener("click", filterfun4);

function filterfun1() {
    let q =pet.filter(function (item) {
        if (item.category == "petHealth") {
            return item;
        }
    });
    displayfun(q);
}

function filterfun2() {
    let q = pet.filter(function (item) {


        if (item.category == "cats") {
            return item;
        }
    });
    displayfun(q);
}

function filterfun3() {
    let q = pet.filter(function (item) {
        if (item.category == "dogs") {
            return item;
        }
    });
    displayfun(q);
}
function filterfun4() {
    let q = pet.filter(function (item) {
        if (item.category == "animals") {
            return item;
        }
    });
    displayfun(q);
}

/* <!-- -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= --> */
function onClickMenu() {
    document.getElementById("menu").classList.toggle("icon");
    document.getElementById("nav").classList.toggle("change");
}


/* <!-- -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= --> */
document.querySelector(".logo").addEventListener("click",function(){
    window.open("project.html");
});

// search functionality

document.querySelector(".btn1").addEventListener("click",funsearch);

function funsearch(){
    event.preventDefault();
    var key=document.querySelector("#search").value;
    key=key.toUpperCase();
    if(key.includes("BEAUTY")){
        window.open("beauty.html","_self");
        document.querySelector("#search").value="";
    }else if(key.includes("CLOTH")){
        window.open("clothe.html","_self");
        document.querySelector("#search").value="";
    }else if(key.includes("FOOD")){
        window.open("food.html","_self");
        document.querySelector("#search").value="";
    }else if(key.includes("HEALTH")){
        window.open("health.html","_self");
        document.querySelector("#search").value="";
    }else if(key.includes("HOME")){
        window.open("home.html","_self");
        document.querySelector("#search").value="";
    }else if(key.includes("JWELLERY")){
        window.open("jwellery.html","_self");
        document.querySelector("#search").value="";
    }else if(key.includes("KIDS")){
        window.open("kids.html","_self");
        document.querySelector("#search").value="";
    }else if(key.includes("PET")){
        window.open("pet.html","_self");
        document.querySelector("#search").value="";
    }else if(key.includes("SHOES")){
        window.open("shoes.html","_self");
        document.querySelector("#search").value="";
    }
    else if (key.includes("ELECTRONICS")) {
        window.open("electronic.html", "_self");
        document.querySelector("#search").value = "";
    }else if(key.includes("SPORTS")){
        window.open("sports.html","_self");
        document.querySelector("#search").value="";
    }else{
        alert("item not found");
    }
}

//feedback
document.getElementById("submitfeedback").addEventListener("click",function(){
    let val=document.getElementById("feedbacktext").value;
    if(val.length>0){
        alert("Thank you for your valuable feedback!!!");
    }
});
//username
document.querySelector("#user-name").textContent=JSON.parse(localStorage.getItem("userName"))||"Sign In"

// microphone
const button = document.querySelector('#mic');
const textInput = document.querySelector('#search');

button.addEventListener('click', () => {
  const recognition = new webkitSpeechRecognition();
  recognition.onresult = event => {
    textInput.value = event.results[0][0].transcript;
  };
  recognition.start();
});