mens.js

let mensData = [
  {
    image_url:
      'https://content.shop4reebok.com/static/Product-EX4296/reebok_EX4296_1.jpg.plp',
    name: "MEN'S REEBOK RUNNING ROADMAP SHOES",
    price: 1170,
    type: 'shoes',
    strikedoffprice: 2599,
    brand: 'Addidas',
  },
  {
    image_url:
      'https://content.shop4reebok.com/static/Product-EX3921/reebok_EX3921_1.jpg.plp',
    name: "MEN'S REEBOK SWIM ARUBA FLIP SLIPPERS ",
    price: 699,
    type: 'flips',
    strikedoffprice: 999,
    brand: 'Reebok',
  },
  {
    image_url:
      'https://content.shop4reebok.com/static/Product-EX4160/reebok_EX4160_1.jpg.plp',
    name: " MEN'S REEBOK RUNNING AUSTIN SHOES",
    price: 945,
    type: 'shoes',
    strikedoffprice: 2099,
    brand: 'Addidas',
  },
  {
    image_url:
      'https://content.shop4reebok.com/static/Product-FV8798/MEN_SWIM_SLIPPERS_FV8798_1.jpg.plp',
    name: "MEN'S REEBOK SWIM AVENGER FLIP LP SLIPPERS",
    price: 399,
    type: 'flips',
    strikedoffprice: 799,
    brand: 'Reebok',
  },
  {
    image_url:
      'https://content.shop4reebok.com/static/Product-EW5173/reebok_EW5173_1.jpg.plp',
    name: "MEN'S REEBOK RUNNING TEMPO SHOES ",
    price: 1620,
    type: 'shoes',
    strikedoffprice: 3599,
    brand: 'Addidas',
  },
  {
    image_url:
      'https://content.shop4reebok.com/static/Product-FV7329/reebok_FV7329_1.jpg.plp ',
    name: " MEN'S REEBOK RUNNING ASTRO BOOSTER SHOES ",
    price: 1440,
    type: 'shoes',
    strikedoffprice: 3199,
    brand: 'Reebok',
  },
  {
    image_url:
      'https://content.shop4reebok.com/static/Product-GD8567/MEN_TRAINING_PANTS_GD8567_1.jpg.plp ',
    name: " MEN'S TRAINING WORKOUT READY ELITAGE PANTS ",
    price: 1999,
    type: 'pants',
    strikedoffprice: 3199,
    brand: 'Addidas',
  },
  {
    image_url:
      'https://content.shop4reebok.com/static/Product-GQ8758/reebok_GQ8758_1.jpg.plp ',
    name: "MEN'S REEBOK TRAINING  POLO T-SHIRTS TEE  ",
    price: 769,
    type: 'tshirts',
    strikedoffprice: 1099,
    brand: 'Reebok',
  },
  {
    image_url:
      'https://content.shop4reebok.com/static/Product-GP7180/reebok_GP7180_1.jpg.plp',
    name: "MEN'S REEBOK TRAINING WORKOUT  TEE  ",
    price: 1299,
    type: 'tshirts',
    strikedoffprice: 1440,
    brand: 'Addidas',
  },
  {
    image_url:
      'https://content.shop4reebok.com/static/Product-EX3924/reebok_EX3924_1.jpg.plp ',
    name: "MEN'S REEBOK SUPER SOFT FLIP SLIPPERS",
    price: 699,
    type: 'flips',
    strikedoffprice: 999,
    brand: 'Reebok',
  },
  {
    image_url:
      'https://content.shop4reebok.com/static/Product-FW0343/reebok_FW0343_1.jpg.plp ',
    name: "MEN'S REEBOK RUNNING RUN SHOES  ",
    price: 1620,
    type: 'shoes',
    strikedoffprice: 3599,
    brand: 'Addidas',
  },
  {
    image_url:
      'https://content.shop4reebok.com/static/Product-EX4285/reebok_EX4285_1.jpg.plp ',
    name: "MEN'S REEBOK RUNNING GENESIS RUNNER SHOES  ",
    price: 1620,
    type: 'shoes',
    strikedoffprice: 3599,
    brand: 'Reebok',
  },
  {
    image_url:
      'https://content.shop4reebok.com/static/Product-FV9519/MEN_SWIM_SLIPPERS_FV9519_1.jpg.plp ',
    name: "MEN'S REEBOK SWIM RUSSLE FLIP SLIPPERS  ",
    price: 599,
    type: 'flips',
    strikedoffprice: 999,
    brand: 'Addidas',
  },
  {
    image_url:
      'https://content.shop4reebok.com/static/Product-FW0318/reebok_FW0318_1.jpg.plp ',
    name: " MEN'S REEBOK RUNNING TREND RUNNER SHOES",
    price: 1575,
    type: 'shoes',
    strikedoffprice: 3499,
    brand: 'Reebok',
  },
  {
    image_url:
      'https://content.shop4reebok.com/static/Product-H00024/reebok_H00024_1.jpg.plp ',
    name: 'UNISEX REEBOK RUNNING ZIG KINETICA II SHOES  ',
    price: 9999,
    type: 'shoes',
    strikedoffprice: 12000,
    brand: 'Addidas',
  },
  {
    image_url:
      'https://content.shop4reebok.com/static/Product-GK9170/reebok_GK9170_1.jpg.plp ',
    name: " MEN'S REEBOK TRAINING BAS POLO TEE ",
    price: 779,
    type: 'tshirts',
    strikedoffprice: 1299,
    brand: 'Reebok',
  },
  {
    image_url:
      'https://content.shop4reebok.com/static/Product-GK9175/reebok_GK9175_1.jpg.plp',
    name: "MEN'S REEBOK TRAINING FOUNDATION  PANTS  ",
    price: 1019,
    type: 'pants',
    strikedoffprice: 1699,
    brand: 'Addidas',
  },
  {
    image_url:
      'https://content.shop4reebok.com/static/Product-GK9176/reebok_GK9176_1.jpg.plp ',
    name: "MEN'S REEBOK TRAINING FOUNDATION PANTS  ",
    price: 1019,
    type: 'pants',
    strikedoffprice: 1699,
    brand: 'Reebok',
  },
  {
    image_url:
      'https://content.shop4reebok.com/static/Product-FW0318/reebok_FW0318_1.jpg.plp ',
    name: " MEN'S REEBOK RUNNING TREND SHOES",
    price: 1575,
    type: 'shoes',
    strikedoffprice: 3499,
    brand: 'Addidas',
  },
  {
    image_url:
      ' https://content.shop4reebok.com/static/Product-G57776/reebok_G57776_1.jpg.plp ',
    name: "  MEN'S REEBOK RUNNING ZTAUR RUN SHOES ",
    price: 3499,
    type: 'shoes',
    strikedoffprice: 4999,
    brand: 'Reebok',
  },
  {
    image_url:
      ' https://content.shop4reebok.com/static/Product-FV9555/MEN_SWIM_SLIPPERS_FV9555_1.jpg.plp  ',
    name: "MEN'S REEBOK SWIM ULTRA FLIP SLIPPERS   ",
    price: 749,
    type: 'flips',
    strikedoffprice: 1499,
    brand: 'Addidas',
  },
  {
    image_url:
      'https://content.shop4reebok.com/static/Product-EX3994/reebok_EX3994_1.jpg.plp   ',
    name: "  MEN'S REEBOK SWIM FLEX CONNECT SANDALS ",
    price: 1149,
    type: 'flips',
    strikedoffprice: 2299,
    brand: 'Reebok',
  },
  {
    image_url:
      ' https://content.shop4reebok.com/static/Product-EX4287/reebok_EX4287_1.jpg.plp  ',
    name: " MEN'S REEBOK RUNNING GENESIS RUNNER SHOE  ",
    price: 1620,
    type: 'shoes',
    strikedoffprice: 3599,
    brand: 'Addidas',
  },
  {
    image_url:
      ' https://content.shop4reebok.com/static/Product-GK9180/reebok_GK9180_1.jpg.plp  ',
    name: " MEN'S REEBOK TRAINING RUNNER SHORTS  ",
    price: 779,
    type: 'pants',
    strikedoffprice: 1299,
    brand: 'Reebok',
  },
  {
    image_url:
      ' https://content.shop4reebok.com/static/Product-HB5732/reebok_HB5732_1.jpg.plp  ',
    name: ' MEN REEBOK CLASSICS TRACKSUIT HOODIE  ',
    price: 3499,
    type: 'tshirts',
    strikedoffprice: 4999,
    brand: 'Addidas',
  },
  {
    image_url:
      ' https://content.shop4reebok.com/static/Product-HB5733/reebok_HB5733_1.jpg.plp  ',
    name: "MEN'S REEBOK CLASSIC TRACKSUIT GOLF HOODIE   ",
    price: 3499,
    type: 'tshirts',
    strikedoffprice: 4999,
    brand: 'Reebok',
  },
  {
    image_url:
      'https://content.shop4reebok.com/static/Product-FQ5364/reebok_FQ5364_1.jpg.plp   ',
    name: ' UNISEX REEBOK TRAINING ACTIVE  BAG ',
    price: 1399,
    type: 'bags',
    strikedoffprice: 2799,
    brand: 'Addidas',
  },
  {
    image_url:
      'https://content.shop4reebok.com/static/Product-FW0318/reebok_FW0318_1.jpg.plp ',
    name: " MEN'S REEBOK RUNNING TREND RUNNER SHOES",
    price: 1575,
    type: 'shoes',
    strikedoffprice: 3499,
    brand: 'Reebok',
  },
  {
    image_url:
      'https://content.shop4reebok.com/static/Product-G57705/reebok_G57705_1.jpg.plp',
    name: 'UNISEX REEBOK CLASSICS  BASKETBALL SHOES',
    price: 3919,
    type: 'shoes',
    strikedoffprice: 5599,
    brand: 'Addidas',
  },
  {
    image_url:
      'https://content.shop4reebok.com/static/Product-FW0344/reebok_FW0344_1.jpg.plp',
    name: "MEN'S REEBOK RUNNING RUN FUSION  SHOES",
    price: 1620,
    type: 'shoes',
    strikedoffprice: 3599,
    brand: 'Reebok',
  },
  {
    image_url:
      'https://content.shop4reebok.com/static/Product-EX4272/reebok_EX4272_1.jpg.plp',
    name: "MEN'S REEBOK RUNNING QUICK DRIFTER SHOES",
    price: 1620,
    type: 'shoes',
    strikedoffprice: 3599,
    brand: 'Addidas',
  },
  {
    image_url:
      'https://content.shop4reebok.com/static/Product-H02293/reebok_H02293_1.jpg.plp',
    name: "MEN'S REEBOK DYNAMIC ZIGZAG SHOES",
    price: 7599,
    type: 'shoes',
    strikedoffprice: 9999,
    brand: 'Reebok',
  },
  {
    image_url:
      'https://content.shop4reebok.com/static/Product-FV9551/MEN_SWIM_SLIPPERS_FV9551_1.jpg.plp',
    name: "MEN'S REEBOK SWIM SUPERSOFT FLIP SLIPPERS",
    price: 909,
    type: 'flips',
    strikedoffprice: 1299,
    brand: 'Addidas',
  },
  {
    image_url:
      'https://content.shop4reebok.com/static/Product-HC3528/reebok_HC3528_1.jpg.plp',
    name: "MEN'S REEBOK TRAINING ACTIVE BASIC POLO TEE",
    price: 779,
    type: 'tshirts',
    strikedoffprice: 1299,
    brand: 'Reebok',
  },
  {
    image_url:
      'https://content.shop4reebok.com/static/Product-HF3794/reebok_HF3794_01.JPG.plp ',
    name: "MEN'S REEBOK TRAINING ACTIVE MOVE TEE ",
    price: 1749,
    type: 'tshirts',
    strikedoffprice: 2499,
    brand: 'Addidas',
  },
  {
    image_url:
      'https://content.shop4reebok.com/static/Product-HG5456/reebok_HG5456_1.jpg.plp',
    name: "MEN'S REEBOK FITNESS TRAINING  SWEATSHIRT",
    price: 1079,
    type: 'tshirts',
    strikedoffprice: 1799,
    brand: 'Reebok',
  },
]
// This is done by Nirmal
// displayPage function start

let cartData = JSON.parse(localStorage.getItem('cartData')) || []
window.addEventListener('load', function () {
  cartItems()
})
function displayPage(mensData) {
  document.querySelector('#Right-section').innerHTML = ''
  for (let i = 0; i < mensData.length; i++) {
    let element = mensData[i]

    let div = document.createElement('div')
    let img = document.createElement('img')
    img.setAttribute('src', element.image_url)

    let brand = document.createElement('h2')
    brand.innerText = element.brand
    brand.setAttribute('id', 'brand')

    let name = document.createElement('p')
    name.innerText = element.name

    let price = document.createElement('span')
    price.innerText = 'Rs' + ' ' + element.price
    price.setAttribute('id', 'price')

    let sprice = document.createElement('span')
    sprice.innerText = element.strikedoffprice
    sprice.setAttribute('id', 'sprice')

    let addtocart = document.createElement('button')
    addtocart.innerText = 'Add to Cart'
    addtocart.setAttribute('id', 'addtocart')
    addtocart.addEventListener('click', function () {
      addToCart(element)
      // if(addToCart(element)===true){
      //   cartData[i].quantity++

      //   alert('Added to cart already')
      // }
      // else{
      //   element.quantity=1
      //   cartData.push(element)
      //   localStorage.setItem('cartData',JSON.stringify(cartData))
      //   alert('Added to cart Succefully');
      // }
    })

    div.append(img, brand, name, price, sprice, addtocart)

    let container = document.querySelector('#Right-section')
    container.append(div)
  }
}
displayPage(mensData)
// diaplayPage function end

// Add_to_cart for function
function addToCart(ele) {
  let flag = false
  for (let i = 0; i < cartData.length; i++) {
    if (cartData[i].name == ele.name) {
      cartData[i].quantity++
      cartData[i].cartprice = ele.price * cartData[i].quantity
      flag = true
      alert(`Product ${ele.name} Added to Cart ${cartData[i].quantity} Times`)
    }
  }
  if (!flag) {
    ele.quantity = 1
    ele.cartprice = ele.price * ele.quantity
    cartData.push(ele)
    alert(`Product ${ele.name} Added to Cart Succesfuly`)
  }
  localStorage.setItem('cartData', JSON.stringify(cartData))
  cartItems()
  // let filtered=cartData.filter(function(elem){
  //   return elem.name===element.name
  // })
  // if(filtered.length>0){
  //   return true
  // }
  // else{
  //   return false
  // }
}

//filters section
// Sort by Price function calling Start
let sortbyprice = document.querySelector('#pricesort')
sortbyprice.addEventListener('change', function () {
  sortByPrice(mensData)
})
function sortByPrice(mensData) {
  let val = document.querySelector('#pricesort').value
  if (val === 'Low to High') {
    let filteredData = mensData.sort((a, b) => a.price - b.price)
    displayPage(filteredData)
  } else if (val === 'High to Low') {
    let filteredData = mensData.sort((a, b) => b.price - a.price)
    displayPage(filteredData)
  }
}
// Sort by price end

// Sort by name function and calling start
let sortbyname = document.querySelector('#namesort')
sortbyname.addEventListener('change', function () {
  sortByName(mensData)
})
function sortByName(mensData) {
  let val = document.querySelector('#namesort').value
  if (val === 'Ascending') {
    let filteredData = mensData.sort(function (a, b) {
      if (a.name > b.name) return 1
      else if (a.name < b.name) return -1
      return 0
    })
    displayPage(filteredData)
  } else if (val === 'Descending') {
    let filteredData = mensData.sort(function (a, b) {
      if (a.name > b.name) return -1
      else if (a.name < b.name) return 1
      return 0
    })
    displayPage(filteredData)
  }
}
// sort by name end

// total items function start
function totalItems(arr) {
  let count = 0
  arr.forEach(function (elem) {
    count++
  })
  document.querySelector('#count').innerText = count
}
totalItems(mensData)
// total items function end

// left filters section
// categories section start
let tshirts = document.querySelector('#tshirts')

tshirts.addEventListener('click', function () {
  Tshirts()
})
function Tshirts() {
  let val = document.querySelector('#tshirts')
  if (val.checked === true) {
    let filtered = mensData.filter(function (elem) {
      return elem.type === val.value
    })
    displayPage(filtered)
    totalItems(filtered)
  } else {
    displayPage(mensData)
    totalItems(mensData)
  }
}
let shoes = document.querySelector('#shoes')
shoes.addEventListener('click', function () {
  Shoes()
})
function Shoes() {
  let val = document.querySelector('#shoes')
  if (val.checked === true) {
    let filtered = mensData.filter(function (elem) {
      return elem.type === val.value
    })
    displayPage(filtered)
    totalItems(filtered)
  } else {
    displayPage(mensData)
    totalItems(mensData)
  }
}

let flips = document.querySelector('#flips')
flips.addEventListener('click', function () {
  Flips()
})
function Flips() {
  let val = document.querySelector('#flips')
  if (val.checked === true) {
    let filtered = mensData.filter(function (elem) {
      return elem.type === val.value
    })
    displayPage(filtered)
    totalItems(filtered)
  } else {
    displayPage(mensData)
    totalItems(mensData)
  }
}

let pants = document.querySelector('#pants')
pants.addEventListener('click', function () {
  Pants()
})
function Pants() {
  let val = document.querySelector('#pants')
  if (val.checked === true) {
    let filtered = mensData.filter(function (elem) {
      return elem.type === val.value
    })
    displayPage(filtered)
    totalItems(filtered)
  } else {
    displayPage(mensData)
    totalItems(mensData)
  }
}
let bags = document.querySelector('#bags')
bags.addEventListener('click', function () {
  Bags()
})
function Bags() {
  let val = document.querySelector('#bags')
  if (val.checked === true) {
    let filtered = mensData.filter(function (elem) {
      return elem.type === val.value
    })
    displayPage(filtered)
    totalItems(filtered)
  } else {
    displayPage(mensData)
    totalItems(mensData)
  }
}
// Categories section end

// Price section start
let one = document.querySelector('#one')
one.addEventListener('click', function () {
  let val = document.querySelector('#one')
  if (val.checked === true) {
    let filtered = mensData.filter(function (elem) {
      return elem.price >= 100 && elem.price <= 400
    })
    displayPage(filtered)
    totalItems(filtered)
  } else {
    displayPage(mensData)
    totalItems(mensData)
  }
})

let two = document.querySelector('#two')
two.addEventListener('click', function () {
  let val = document.querySelector('#two')
  if (val.checked === true) {
    let filtered = mensData.filter(function (elem) {
      return elem.price >= 401 && elem.price <= 1000
    })
    displayPage(filtered)
    totalItems(filtered)
  } else {
    displayPage(mensData)
    totalItems(mensData)
  }
})

let three = document.querySelector('#three')
three.addEventListener('click', function () {
  let val = document.querySelector('#three')
  if (val.checked === true) {
    let filtered = mensData.filter(function (elem) {
      return elem.price >= 1001 && elem.price <= 5000
    })
    displayPage(filtered)
    totalItems(filtered)
  } else {
    displayPage(mensData)
    totalItems(mensData)
  }
})

let four = document.querySelector('#four')
four.addEventListener('click', function () {
  let val = document.querySelector('#four')
  if (val.checked === true) {
    let filtered = mensData.filter(function (elem) {
      return elem.price >= 5001 && elem.price <= 10000
    })
    displayPage(filtered)
    totalItems(filtered)
  } else {
    displayPage(mensData)
    totalItems(mensData)
  }
})
// Price sectionend
function cartItems(){
  let temp = JSON.parse(localStorage.getItem('cartData')) || []
  let items=0
  temp.forEach(function(ele){
    items+=ele.quantity
  })
  document.getElementById("cart-items").innerText=items
}