product.js

var mensData = [
  {
    image_url:
      "https://images.bewakoof.com/t640/men-s-black-across-the-spiderverse-graphic-printed-oversized-t-shirt-599555-1687765574-1.jpg",
    name: "Marvel X Bewakoof Merchandise",
    ptag: "Men's Black Across The Spiderverse Graphic...",
    price: "₹799",
    sort: 799,
    strikeoffPrice: "₹1699",
    button: "₹739 for Tribe Members",
    button1: "100% COTTON",
    a: "./details/product_1.html",
  },
  {
    image_url:
      "https://images.bewakoof.com/t640/men-s-black-thunder-breathing-1st-form-graphic-printed-oversized-t-shirt-599563-1687766143-1.jpg",
    name: "Marvel X Bewakoof Merchandise",
    ptag: "Men's Black Across The Spiderverse Graphic..",
    price: "₹649",
    sort: 699,
    strikeoffPrice: "₹1299",
    button: "₹599 for Tribe Members",
    button1: "100% COTTON",
    a: "./details/product_2.html",
  },
  {
    image_url:
      "https://images.bewakoof.com/t640/men-s-black-across-the-spiderverse-graphic-printed-oversized-t-shirt-599566-1687765259-1.jpg",
    name: "Bewakoof®",
    ptag: "Men's Black Across The Spiderverse Graphic..",
    price: "₹599",
    sort: 599,
    strikeoffPrice: "₹1299",
    button: "₹549 for Tribe Members",
    button1: "100% COTTON",
    a: "./details/product_1.html",
  },
  {
    image_url:
      "https://images.bewakoof.com/t640/men-s-black-skater-donald-graphic-printed-oversized-t-shirt-602561-1688380293-1.jpg",
    name: "Disney X Bewakoof Merchandise",
    ptag: "Men's Black Across The Spiderverse Graphic..",
    price: "₹649",
    sort: 649,
    strikeoffPrice: "₹1299",
    button: "₹599 for Tribe Members",
    button1: "100% COTTON",
    a: "./details/product_2.html",
  },
  {
    image_url:
      "https://images.bewakoof.com/t640/men-s-grey-skater-donald-graphic-printed-oversized-t-shirt-602558-1688380650-1.jpg",
    name: "Disney X Bewakoof Merchandise",
    ptag: "Men's Black Across The Spiderverse Graphic..",
    price: "₹799",
    sort: 799,
    strikeoffPrice: "₹1699",
    button: "₹739 for Tribe Members",
    button1: "100% COTTON",
    a: "./details/product_1.html",
  },
  {
    image_url:
      "https://images.bewakoof.com/t640/men-s-black-we-are-venom-graphic-printed-oversized-t-shirt-602541-1688380410-1.jpg",
    name: "Bewakoof®",
    ptag: "Men's Black Across The Spiderverse Graphic...",
    price: "₹799",
    sort: 799,
    strikeoffPrice: "₹1699",
    button: "₹739 for Tribe Members",
    button1: "100% COTTON",
    a: "./details/product_1.html",
  },
  {
    image_url:
      "https://images.bewakoof.com/t640/men-s-white-flame-hashira-graphic-printed-oversized-t-shirt-602543-1688385134-1.jpg",
    name: "Marvel X Bewakoof Merchandise",
    ptag: "Men's Black Across The Spiderverse Graphic..",
    price: "₹799",
    sort: 799,
    strikeoffPrice: "₹1699",
    button: "₹739 for Tribe Members",
    button1: "100% COTTON",
    a: "./details/product_1.html",
  },
  {
    image_url:
      "https://images.bewakoof.com/t640/men-s-black-we-are-venom-graphic-printed-oversized-t-shirt-602541-1688380410-1.jpg",
    name: "Bewakoof®",
    ptag: "Men's Black Across The Spiderverse Graphic",
    price: "₹599",
    sort: 599,
    strikeoffPrice: "₹1299",
    button: "₹549 for Tribe Members",
    button1: "100% COTTON",
    a: "./details/product_1.html",
  },
  {
    image_url:
      "https://images.bewakoof.com/t640/men-s-orange-music-is-life-graphic-printed-oversized-t-shirt-602547-1688456756-1.jpg",
    name: "Bewakoof®",
    ptag: "Men's Black Across The Spiderverse Graphic",
    price: "₹599",
    sort: 599,
    strikeoffPrice: "₹1299",
    button: "₹549 for Tribe Members",
    button1: "100% COTTON",
    a: "./details/product_1.html",
  },
  {
    image_url:
      "https://images.bewakoof.com/t640/men-s-purple-beast-within-2-0-oversized-t-shirt-581488-1677228989-1.jpg",
    name: "Bewakoof®",
    ptag: "Men's Black Across The Spiderverse Graphic",
    price: "₹799",
    sort: 799,
    strikeoffPrice: "₹1499",
    button: "₹739 for Tribe Members",
    button1: "100% COTTON",
    a: "./details/product_1.html",
  },
  {
    image_url:
      "https://images.bewakoof.com/t640/men-s-blue-godspeed-zenitsu-graphic-printed-oversized-t-shirt-602434-1688120819-1.jpg",
    name: "Bewakoof®",
    ptag: "Men's Black Across The Spiderverse Graphic",
    price: "₹799",
    sort: 799,
    strikeoffPrice: "₹1699",
    button: "₹739 for Tribe Members",
    button1: "100% COTTON",
    a: "./details/product_1.html",
  },
  {
    image_url:
      "https://images.bewakoof.com/t640/men-s-black-flame-hashira-graphic-printed-oversized-t-shirt-602420-1688120902-1.jpg",
    name: "Bewakoof®",
    ptag: "Men's Black Across The Spiderverse Graphic",
    price: "₹699",
    sort: 699,
    strikeoffPrice: "₹1299",
    button: "₹639 for Tribe Members",
    button1: "100% COTTON",
    a: "./details/product_1.html",
  },
  {
    image_url:
      "https://images.bewakoof.com/t640/men-s-black-kokushibo-graphic-printed-oversized-t-shirt-602424-1688121488-1.jpg",
    name: "Bewakoof®",
    ptag: "Men's Black Across The Spiderverse Graphic",
    price: "₹799",
    sort: 799,
    strikeoffPrice: "₹1699",
    button: "₹739 for Tribe Members",
    button1: "100% COTTON",
    a: "./details/product_1.html",
  },
  {
    image_url:
      "https://images.bewakoof.com/t640/men-s-black-water-breathing-giyu-tomioka-graphic-printed-oversized-t-shirt-602410-1688120858-1.jpg",
    name: "Bewakoof®",
    ptag: "Men's Black Across The Spiderverse Graphic",
    price: "₹999",
    sort: 999,
    strikeoffPrice: "₹1999",
    button: "₹919 for Tribe Members",
    button1: "100% COTTON",
    a: "./details/product_1.html",
  },
  {
    image_url:
      "https://images.bewakoof.com/t640/men-s-orange-giyu-tomioka-graphic-printed-oversized-t-shirt-602408-1688126186-1.jpg",
    name: "Bewakoof®",
    ptag: "Men's Black Across The Spiderverse Graphic",
    price: "₹699",
    sort: 699,
    strikeoffPrice: "₹1699",
    button: "₹599 for Tribe Members",
    button1: "100% COTTON",
    a: "./details/product_1.html",
  },
  {
    image_url:
      "https://images.bewakoof.com/t640/game-over-minimal-half-sleeve-t-shirt-navy-blue-305202-1655748497-1.jpg",
    name: "Marvel X Bewakoof Merchandise",
    ptag: "Men's Black Across The Spiderverse Graphic",
    price: "₹ 799",
    sort: 799,
    strikeoffPrice: "₹ 1699",
    button: "₹739 for Tribe Members",
    button1: "100% COTTON",
    a: "./details/product_1.html",
  },
  {
    image_url:
      "https://images.bewakoof.com/t640/warriors-half-sleeve-t-shirt-511263-1655709413-1.jpg",
    name: "Offical Dc Bewakoof Merchandise",
    ptag: "Men's Black Across The Spiderverse Graphic",
    price: "₹699",
    sort: 699,
    strikeoffPrice: "₹1299",
    button: "₹639 for Tribe Members",
    button1: "100% COTTON",
    a: "./details/product_1.html",
  },
  {
    image_url:
      "https://images.bewakoof.com/t640/warrior-king-half-sleeve-t-shirt-521400-1658427832-1.jpg",
    name: "Bewakoof®",
    ptag: "Men's Black Across The Spiderverse Graphic",
    price: "₹699",
    sort: 699,
    strikeoffPrice: "₹1299",
    button: "₹639 for Tribe Members",
    button1: "100% COTTON",
    a: "./details/product_1.html",
  },
  {
    image_url:
      "https://images.bewakoof.com/t640/aot-founding-titan-half-sleeve-t-shirt-518256-1657791545-1.jpg",
    name: "Bewakoof®",
    ptag: "Men's Black Across The Spiderverse Graphic",
    price: "₹699",
    sort: 699,
    strikeoffPrice: "₹1299",
    button: "₹639 for Tribe Members",
    button1: "100% COTTON",
    a: "./details/product_1.html",
  },
  {
    image_url:
      "https://images.bewakoof.com/t640/men-s-black-valhalla-2-0-t-shirt-498402-1655748735-1.jpg",
    name: "Bewakoof®",
    ptag: "Men's Black Across The Spiderverse Graphic",
    price: "₹499",
    sort: 499,
    strikeoffPrice: "₹1099",
    button: "₹409 for Tribe Members",
    button1: "100% COTTON",
    a: "./details/product_1.html",
  },
  {
    image_url:
      "https://images.bewakoof.com/t640/men-s-black-warriors-graphic-printed-oversized-t-shirt-519149-1679048409-1.jpg",
    name: "Bewakoof®",
    ptag: "Men's Black Across The Spiderverse Graphic",
    price: "₹499",
    sort: 499,
    strikeoffPrice: "₹409",
    button: "₹409 for Tribe Members",
    button1: "100% COTTON",
    a: "./details/product_1.html",
  },
  {
    image_url:
      "https://images.bewakoof.com/t640/men-s-black-slayer-squad-graphic-printed-oversized-t-shirt-591648-1683288608-1.jpg",
    name: "Bewakoof®",
    ptag: "Men's Black Across The Spiderverse Graphic",
    price: "₹499",
    sort: 499,
    strikeoffPrice: "₹1299",
    button: "₹439 for Tribe Members",
    button1: "100% COTTON",
    a: "./details/product_1.html",
  },
  {
    image_url:
      "https://images.bewakoof.com/t640/spaced-nasa-half-sleeve-t-shirt-475126-1679049282-1.jpg",
    name: "Bewakoof®",
    ptag: "Men's Black Across The Spiderverse Graphic",
    price: "₹499",
    sort: 499,
    strikeoffPrice: "₹1299",
    button: "₹439 for Tribe Members",
    button1: "100% COTTON",
    a: "./details/product_1.html",
  },
  {
    image_url:
      "https://images.bewakoof.com/t640/men-s-black-hangin-astronaut-graphic-printed-t-shirt-500322-1655748579-1.jpg",
    name: "Bewakoof®",
    ptag: "Men's Black Across The Spiderverse Graphic",
    price: "₹499",
    sort: 429,
    strikeoffPrice: "₹1299",
    button: "₹439 for Tribe Members",
    button1: "100% COTTON",
    a: "./details/product_1.html",
  },
];

// var Men = JSON.parse(localStorage.getItem("productMen")) || []

displayMen(mensData);

function displayMen(mensData) {
  document.querySelector("#products").innerHTML = "";
  mensData.map(function (ele, ind) {
    var div = document.createElement("div");

    var span = document.createElement("span");
    span.setAttribute("id", "span");

    var alink = document.createElement("a");
    alink.setAttribute("href", ele.a);

    var image = document.createElement("img");
    image.setAttribute("src", ele.image_url);
    image.setAttribute("alt", ele.name);

    var name = document.createElement("h3");
    name.textContent = ele.name;

    var ptag = document.createElement("p");
    ptag.textContent = ele.ptag;

    var priceBox = document.createElement("div");
    priceBox.setAttribute("id", "priceBox");

    var price = document.createElement("p");
    price.textContent = ele.price;

    var strikeoffPrice = document.createElement("p");
    strikeoffPrice.textContent = ele.strikeoffPrice;

    var button = document.createElement("button");
    button.textContent = ele.button;

    var displayButton = document.createElement("div");
    displayButton.setAttribute("id", "displayBtn");

    var button1 = document.createElement("button");
    button1.textContent = ele.button1;

    span.append(image);
    alink.append(span);
    div.append(alink, name, ptag, priceBox, displayButton);

    priceBox.append(price, strikeoffPrice);
    displayButton.append(button, button1);

    document.querySelector("#products").append(div);
  });
}

document.querySelector("#Price").addEventListener("change", function () {
  var filterVal = event.target.value;
  console.log(filterVal);

  if (filterVal === "") {
    displayMen(mensData);
  }

  if (filterVal === "htl") {
    var newArr = [...mensData];
    newArr.sort(function (a, b) {
      return b.sort - a.sort;
    });
    displayMen(newArr);
  }
  if (filterVal === "lth") {
    var newArr = [...mensData];
    newArr.sort(function (a, b) {
      return a.sort - b.sort;
    });
    displayMen(newArr);
  }
});