productlist.js

var mydatabase= [
    {
        id: 1,
        image_url: "https://images.bewakoof.com/t640/men-s-black-oversized-sweatshirt-555427-1671801629-1.jpg", 
        brand: "Bewakoof",
        name: "Men's Black Oversized Sweatshirt",
        price:764,
        strikeprice: 1099,
        tribememprice: 699,
        fav: false,
        //filtered keys and value
        type: "sweatshirt",
        sizes : {
            XS: true,
            S: true,
            M: true,
            L: true,
            
        },
        color :{
            black: true,
            blue: true,
            green: true,
            yellow: true,
        },
        rating:4.3,

        kind: "Popular"
    },
    {
        id: 2,
        image_url: "https://images.bewakoof.com/t640/men-s-blue-zipper-hoodie-363707-1672410888-1.jpg", 
        brand: "Bewakoof",
        name: "Men's Blue Zipper Hoodie",
        price:764,
        strikeprice: 1099,
        tribememprice: 699,
        fav: false,
        //filtered keys and value
        type: "hoodie",
        sizes : {
            XS: true,
            S: false,
            M: true,
            L: true
        },
        color :{
            black: true,
            blue: true,
            green: true,
            yellow: true,
        },
        rating:4.6,
        kind: "Popular"
    },

    {
        id: 3,
        image_url: "https://images.bewakoof.com/t640/men-s-teal-blue-hoodie-499039-1674553104-1.jpg", 
        brand: "Bewakoof",
        name: "Men's Teal Blue Hoodie",
        price:799,
        strikeprice: 1099,
        tribememprice: 699,
        fav: false,
        //filtered keys and value
        type: "hoodie",
        sizes : {
            XS: true,
            S: true,
            M: false,
            L: true
        },
        color :{
            black: true,
            blue: true,
            green: true,
            yellow: true,
        },
        rating:4.6,
        kind: "Popular"
    },

    {
        id: 4,
        image_url: "https://images.bewakoof.com/t640/men-0-05-goku-badge-printed-sweatshirt-551684-1668513057-1.jpg", 
        brand: "Bewakoof",
        name: "Men's Blue Goku Badge Printed Sweatshirt",
        price:889,
        strikeprice: 1099,
        tribememprice: 699,
        fav: false,
        //filtered keys and value
        type: "hoodie",
        sizes : {
            XS: true,
            S: true,
            M: true,
            L: true
        },
        color :{
            black: true,
            blue: true,
            green: true,
            yellow: true,
        },
        rating:4.6,
        kind: "Popular"
    },

    {
        id: 5,
        image_url: "https://images.bewakoof.com/t640/men-0-05-goku-badge-printed-sweatshirt-551684-1668513057-1.jpg", 
        brand: "Bewakoof",
        name: "Men's Blue Goku Badge Printed Sweatshirt",
        price:899,
        strikeprice: 1099,
        tribememprice: 699,
        fav: false,
        //filtered keys and value
        type: "sweatshirt",
        sizes : {
            XS: true,
            S: true,
            M: true,
            L: true
        },
        color :{
            black: true,
            blue: true,
            green: true,
            yellow: true,
        },
        rating:4.6,
        kind: "New"
    },

    {
        id: 6,
        image_url: "https://images.bewakoof.com/t640/men-0-05-goku-badge-printed-sweatshirt-551684-1668513057-1.jpg", 
        brand: "Bewakoof",
        name: "Men's Blue Goku Badge Printed Sweatshirt",
        price:599,
        strikeprice: 1099,
        tribememprice: 699,
        fav: false,
        //filtered keys and value
        type: "hoodie",
        sizes : {
            XS: true,
            S: true,
            M: true,
            L: true
        },
        color :{
            black: true,
            blue: true,
            green: true,
            yellow: true,
        },
        rating:3.4,
        kind: "New"
    },

    {
        id: 7,
        image_url: "https://images.bewakoof.com/t640/men-0-05-goku-badge-printed-sweatshirt-551684-1668513057-1.jpg", 
        brand: "Adro",
        name: "Men's Blue Goku Badge Printed Sweatshirt",
        price:199,
        strikeprice: 1099,
        tribememprice: 699,
        fav: false,
        //filtered keys and value
        type: "hoodie",
        sizes : {
            XS: true,
            S: true,
            M: false,
            L: true
        },
        color :{
            black: true,
            blue: true,
            green: true,
            yellow: true,
        },
        rating:4.6,
        kind: "New"
    },

    {
        id: 8,
        image_url: "https://images.bewakoof.com/t640/men-0-05-goku-badge-printed-sweatshirt-551684-1668513057-1.jpg", 
        brand: "Rigo",
        name: "Men's Blue Goku Badge Printed Sweatshirt",
        price:899,
        strikeprice: 1099,
        tribememprice: 699,
        fav: false,
        //filtered keys and value
        type: "sweatshirt",
        sizes : {
            XS: false,
            S: true,
            M: false,
            L: true
        },
        color :{
            black: true,
            blue: true,
            green: true,
            yellow: true,
        },
        rating:2.6,
    },
    {
        id: 9,
        image_url: "https://images.bewakoof.com/t640/men-0-05-goku-badge-printed-sweatshirt-551684-1668513057-1.jpg", 
        brand: "Rigo",
        name: "Men's Blue Goku Badge Printed Sweatshirt",
        price:899,
        strikeprice: 1099,
        tribememprice: 699,
        fav: false,
        //filtered keys and value
        type: "hoodie",
        sizes : {
            XS: false,
            S: true,
            M: false,
            L: true
        },
        color :{
            black: true,
            blue: true,
            green: true,
            yellow: true,
        },
        rating:4.6,
    },
    {
        id: 10,
        image_url: "https://images.bewakoof.com/t640/men-0-05-goku-badge-printed-sweatshirt-551684-1668513057-1.jpg", 
        brand: "Bewakoof",
        name: "Men's Blue Goku Badge Printed Sweatshirt",
        price:899,
        strikeprice: 1099,
        tribememprice: 699,
        fav: false,
        //filtered keys and value
        type: "hoodie",
        sizes : {
            XS: false,
            S: false,
            M: false,
            L: true
        },
        color :{
            black: true,
            blue: true,
            green: true,
            yellow: true,
        },
        rating:3.3,
    },
    {
        id: 11,
        image_url: "https://images.bewakoof.com/t640/men-0-05-goku-badge-printed-sweatshirt-551684-1668513057-1.jpg", 
        brand: "Snitch",
        name: "Men's Blue Goku Badge Printed Sweatshirt",
        price:899,
        strikeprice: 1099,
        tribememprice: 699,
        fav: false,
        //filtered keys and value
        type: "hoodie",
        sizes : {
            XS: false,
            S: true,
            M: false,
            L: true
        },
        color :{
            black: true,
            blue: true,
            green: true,
            yellow: true,
        },
        rating:2.6,
    },
    {
        id: 12,
        image_url: "https://images.bewakoof.com/t640/men-0-05-goku-badge-printed-sweatshirt-551684-1668513057-1.jpg", 
        brand: "Bewakoof",
        name: "Men's Blue Goku Badge Printed Sweatshirt",
        price:899,
        strikeprice: 1099,
        tribememprice: 699,
        fav: false,
        //filtered keys and value
        type: "hoodie",
        sizes : {
            XS: false,
            S: false,
            M: true,
            L: true
        },
        color :{
            black: true,
            blue: true,
            green: true,
            yellow: true,
        },
        rating:4.6,
    },
    {
        id: 13,
        image_url: "https://images.bewakoof.com/t640/men-0-05-goku-badge-printed-sweatshirt-551684-1668513057-1.jpg", 
        brand: "Bewakoof",
        name: "Men's Blue Goku Badge Printed Sweatshirt",
        price:899,
        strikeprice: 1099,
        tribememprice: 699,
        fav: false,
        //filtered keys and value
        type: "hoodie",
        sizes : {
            XS: false,
            S: true,
            M: false,
            L: true
        },
        color :{
            black: true,
            blue: true,
            green: true,
            yellow: true,
        },
        rating:3.7,
    }

]

    // mydatabase.map(function(elem, index){
    // console.log(elem.image_url)
    // })
    document.querySelector(".total-product-count").textContent=mydatabase.length;
    var favitems= JSON.parse(localStorage.getItem("bewakoof_wishlist")) || [];
    displayProducts(mydatabase);
    function displayProducts(data){
        document.querySelector("#right").textContent="";
        data.map(function(elem, index){
            var div= document.createElement("div");
            div.setAttribute("class", "container");

            var img= document.createElement("img");
            img.setAttribute("src",elem.image_url)
            img.setAttribute("class", "img")
            img.addEventListener("click", function() {
              window.location.href = "single_product.html";
            });

            //
            var divforbrandandname=document.createElement("div");
            divforbrandandname.setAttribute("class", "divforbrandandname");

            var h3= document.createElement("h3");
            h3.textContent=elem.brand;

            var h4= document.createElement("h4");
            h4.textContent=elem.name;
            divforbrandandname.append(h3,h4)
            //

            //////

            //
            var divforfavicon=document.createElement("div");
            divforfavicon.setAttribute("class", "divforfavicon");

            var heart=document.createElement("i");
            heart.setAttribute("class", "fa-regular fa-heart heart-icon");
            
            divforfavicon.append(heart);

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

            divfornamesandfavicon.append(divforbrandandname,divforfavicon)
            //
            //////

            //
            var divforprices=document.createElement("div");
            divforprices.setAttribute("class", "divforprices");
            var p=document.createElement("p");
            p.setAttribute("class", "price");

            p.textContent= "₹" + elem.price;

            var strikeprice=document.createElement("p");
            strikeprice.textContent="₹" + elem.strikeprice;

            //var adtocartbtn=document.createElement("button");
          
            divforprices.append(p, strikeprice );
            //

            /////


            //
            var divfortribemember= document.createElement("div");
            var tribeprice=document.createElement("p");
            tribeprice.textContent= "₹" + elem.tribememprice + " For TriBe Members";
            divfortribemember.setAttribute("class", "divfortribemember");
            divfortribemember.append(tribeprice);

            heart.addEventListener("click", function(){
              //addfavItems(elem, index);

              if (favitems.indexOf(elem) === -1) {
                addfavItems(elem, index);
                event.target.style.color = "red";
              } else {
                removefavItems(elem, index);
                event.target.style.color = "black";
              }
            });


            div.append(img,divfornamesandfavicon,divforprices, divfortribemember  );
            document.querySelector("#right").append(div);
        })
    }


   
//code for the size filtration process
var sizemenu= document.querySelector('.ulClasssize');
var filtered = JSON.parse(localStorage.getItem("filtered-list")) || [];
sizemenu.addEventListener('click', function (event) {
    var selectedSize = event.target.innerHTML;

    //this is for sizes
    mydatabase.forEach(function (elem) {
        if (elem.sizes[selectedSize]) {
          let sizeIndex = filtered.indexOf(elem);
          if (sizeIndex === -1) {
            filtered.push(elem);
            event.target.style.color = "#42a2a2";
          } else {
            filtered.splice(sizeIndex, 1);
            event.target.style.color = "";
          }
        }
      });
    localStorage.setItem("filtered-list", JSON.stringify(filtered));
    if (filtered.length !=0){
        displayProducts(filtered)
        document.querySelector(".total-product-count").textContent=filtered.length;
    }
    else{
        localStorage.clear;
        location.reload();
    }
  });

  
  document.querySelector(".clearall").addEventListener("click", clearAll);

  function clearAll(){
    localStorage.clear("filtered-list");
    location.reload();
  }



//Adding in filter array for Category

var categorymenu= document.querySelector('.ulClass');
categorymenu.addEventListener('click', function (event) {
    var selectedOption = event.target.innerHTML;
  
    if (selectedOption === "hoodie" || selectedOption === "sweatshirt") {
      mydatabase.forEach(function (elem) {
        console.log(elem);
        if (elem.type === selectedOption) {
          let optionIndex = filtered.indexOf(elem);
          if (optionIndex === -1) {
            filtered.push(elem);
            event.target.style.color = "#42a2a2";
          } else {
            filtered.splice(optionIndex, 1);
            event.target.style.color = "";
          }
        }
      });
      localStorage.setItem("filtered-list", JSON.stringify(filtered));
      if (filtered.length != 0) {
        displayProducts(filtered);
        document.querySelector(".total-product-count").textContent = filtered.length;
      } else {
        localStorage.clear();
        location.reload();
      }
    }
  });
  
  var brandmenu= document.querySelector('.ulClassbrand');
  brandmenu.addEventListener('click', function (event) {
      var selectedOption = event.target.innerHTML;
    
      if (selectedOption === "Bewakoof" || selectedOption === "Rigo" || selectedOption === "Adro" || selectedOption === "Snitch") {
        mydatabase.forEach(function (elem) {
          console.log(elem);
          if (elem.brand === selectedOption) {
            let optionIndex = filtered.indexOf(elem);
            if (optionIndex === -1) {
              filtered.push(elem);
              event.target.style.color = "red";
            } else {
              filtered.splice(optionIndex, 1);
              event.target.style.color = "";
            }
          }
        });
        localStorage.setItem("filtered-list", JSON.stringify(filtered));
        if (filtered.length != 0) {
          displayProducts(filtered);
          document.querySelector(".total-product-count").textContent = filtered.length;
        } else {
          localStorage.clear();
          location.reload();
        }
      }
    });

    //for Rating

    var ratingmenu = document.querySelector('.ulClassrating');

ratingmenu.addEventListener('click', function (event) {
  var selectedOption = event.target.innerHTML;

  //Filter the products based on rating
  mydatabase.forEach(function (elem) {
    if (selectedOption === "4.5 and above" && elem.rating >= 4.5) {
      let optionIndex = filtered.indexOf(elem);
      if (optionIndex === -1) {
        filtered.push(elem);
        event.target.style.color = "red";
      } else {
        filtered.splice(optionIndex, 1);
        event.target.style.color = "";
      }
    }
    if (selectedOption === "4 to 4.4" && elem.rating >= 4 && elem.rating < 4.5) {
      let optionIndex = filtered.indexOf(elem);
      if (optionIndex === -1) {
        filtered.push(elem);
        event.target.style.color = "red";
      } else {
        filtered.splice(optionIndex, 1);
        event.target.style.color = "";
      }
    }
    if (selectedOption === "3.5 to 3.9" && elem.rating >= 3.5 && elem.rating < 4) {
      let optionIndex = filtered.indexOf(elem);
      if (optionIndex === -1) {
        filtered.push(elem);
        event.target.style.color = "red";
      } else {
        filtered.splice(optionIndex, 1);
        event.target.style.color = "";
      }
    }
    if (selectedOption === "3 to 3.4" && elem.rating >= 3 && elem.rating < 3.5) {
      let optionIndex = filtered.indexOf(elem);
      if (optionIndex === -1) {
        filtered.push(elem);
        event.target.style.color = "red";
      } else {
        filtered.splice(optionIndex, 1);
        event.target.style.color = "";
      }
    }
    if (selectedOption === "less than 3" && elem.rating < 3) {
      let optionIndex = filtered.indexOf(elem);
      if (optionIndex === -1) {
        filtered.push(elem);
        event.target.style.color = "red";
      } else {
        filtered.splice(optionIndex, 1);
        event.target.style.color = "";
      }
    }
  });

  //Store the filtered list in local storage
  localStorage.setItem("filtered-list", JSON.stringify(filtered));

  //If there are no products in the filtered list, reload the page
  if (filtered.length != 0) {
    displayProducts(filtered);
    document.querySelector(".total-product-count").textContent = filtered.length;
  } else {
    localStorage.clear();
    location.reload();
  }
});



var sortByMenu = document.querySelector('.ulClasskind');

sortByMenu.addEventListener('click', function (event) {
  var selectedOption = event.target.innerHTML;
  if (selectedOption === "Popular" || selectedOption === "New" || selectedOption === "Price : High to Low" || selectedOption === "Price : Low to High") {
    mydatabase.forEach(function (elem) {
      if (elem.kind === selectedOption) {
        let optionIndex = filtered.indexOf(elem);
        if (optionIndex === -1) {
          filtered.push(elem);
          event.target.style.color = "red";
        } else {
          filtered.splice(optionIndex, 1);
          event.target.style.color = "";
          console.log(filtered.length)
        }

      }
    });

    if (selectedOption == "Price : Low to High") {
        event.target.style.color = "red";
        var htl= document.querySelector(".htl");
        htl.style.color="black";
      mydatabase.sort((a, b) => a.price - b.price);
      displayProducts(mydatabase)
    } else if (selectedOption == "Price : High to Low") {
        mydatabase.sort((a, b) => b.price - a.price);
        event.target.style.color = "red";
        var lth= document.querySelector(".lth");
        lth.style.color="black";
        displayProducts(mydatabase)
    }

    
    

    localStorage.setItem("filtered-list", JSON.stringify(filtered));
    if (filtered.length != 0) {
        console.log(filtered.length)
      displayProducts(filtered);
      document.querySelector(".total-product-count").textContent = filtered.length;
    } else {
      localStorage.clear();
      //location.reload();
    }
  }
});



///Code for add to fav

// var favitems= JSON.parse(localStorage.getItem("cart-items")) || [];

// function addfavItems(elem, index){
     
//   if (favitems.indexOf(elem) !==-1){
//     console.log(" present")
//     event.target.style.color = "black";
//   }
//   favobject= mydatabase.filter(function(elem, ind){
//     if(index == ind){
//       event.target.style.color = "red";
//       return index == ind
//     }
    
     
//   })
  
//   favitems.push(favobject[0]);
  
  
//   localStorage.setItem("cart-items", JSON.stringify(favitems));
// }


function addfavItems(elem, index){
  favitems.push(elem);
  localStorage.setItem("bewakoof_wishlist", JSON.stringify(favitems));
}

function removefavItems(elem, index){
  let itemIndex = favitems.indexOf(elem);
  favitems.splice(itemIndex, 1);
  localStorage.setItem("bewakoof_wishlist", JSON.stringify(favitems));
}