Body_care.js

// navbar part 



// body part
var prounder15data = [

  

    {
         
      proimg: "https://cdn-fsly.yottaa.net/5d669b394f1bbf7cb77826ae/www.bathandbodyworks.com/v~4b.216/dw/image/v2/BBDL_PRD/on/demandware.static/-/Sites-master-catalog/default/dwffa949d1/hires/026414639.jpg?sh=471&yocs=o_s_",
      proname: "New Fragrance",
      prodesc:"Butterfly",
      procategory:"Fine Fragrance Mist",
      prorate:"$17.50",
      profragnance: "Mix & Match: Buy 3, Get 3 Free or Buy 2, Get 1 Free",
      rate: 17.50,
  
    },
    {
         
      proimg: "https://cdn-fsly.yottaa.net/5d669b394f1bbf7cb77826ae/www.bathandbodyworks.com/v~4b.216/dw/image/v2/BBDL_PRD/on/demandware.static/-/Sites-master-catalog/default/dw0f16c020/hires/026403504.jpg?sh=471&yocs=o_s_",
      proname: "New Fragrance",
      prodesc:"Body Wash and Foam Bath",
      prorate:"$15.50",
      procategory:"Body Lotion",
      profragnance: "Mix & Match: Buy 3, Get 3 Free or Buy 2, Get 1 Free",
      rate: 15.50,
  
    },
  
    {
         
      proimg: "https://cdn-fsly.yottaa.net/5d669b394f1bbf7cb77826ae/www.bathandbodyworks.com/v~4b.216/dw/image/v2/BBDL_PRD/on/demandware.static/-/Sites-master-catalog/default/dw4cbc8809/hires/026438530.jpg?sh=471&yocs=o_s_",
      proname: "New!",
      prodesc:"Japanese Cherry Blossom",
      prorate:"$15.50",
      procategory:"Ultimate Hydration Body Cream",
      profragnance: "Mix & Match: Buy 3, Get 3 Free or Buy 2, Get 1 Free",
      rate: 15.50,
  
    },
  
    {
         
      proimg: "https://cdn-fsly.yottaa.net/5d669b394f1bbf7cb77826ae/www.bathandbodyworks.com/v~4b.216/dw/image/v2/BBDL_PRD/on/demandware.static/-/Sites-master-catalog/default/dw02f5f77d/hires/026267868.jpg?sh=471&yocs=o_s_",
      proname: "Ocean",
      prodesc:"Itlian Cherry Blossom",
      prorate:"$16.50",
      procategory:"Body Spray",
      profragnance: "Mix & Match: Buy 3, Get 3 Free or Buy 2, Get 1 Free",
      rate: 16.50,
  
    },
    {
         
      proimg: "https://cdn-fsly.yottaa.net/5d669b394f1bbf7cb77826ae/www.bathandbodyworks.com/v~4b.216/dw/image/v2/BBDL_PRD/on/demandware.static/-/Sites-master-catalog/default/dw837ec9cc/hires/026401914.jpg?sh=471&yocs=o_s_",
      proname: "New Fragrance",
      prodesc:"Pineapple Lime Eucalyptus",
      prorate:"$15.50",
      procategory:"Essential Oil Mist",
      profragnance: "Mix & Match: Buy 3, Get 3 Free or Buy 2, Get 1 Free",
      rate: 15.50,
  
    },
    {
         
      proimg: "https://cdn-fsly.yottaa.net/5d669b394f1bbf7cb77826ae/www.bathandbodyworks.com/v~4b.216/dw/image/v2/BBDL_PRD/on/demandware.static/-/Sites-master-catalog/default/dw4ddf89e5/hires/026451873.jpg?sh=471&yocs=o_s_",
      proname: "New!",
      prodesc:"White Tea & Sage",
      prorate:"$13.50",
      procategory:"Shower Gel",
      profragnance: "Mix & Match: Buy 3, Get 3 Free or Buy 2, Get 1 Free",
      rate: 13.50,
  
    },
    {
         
      proimg: "https://cdn-fsly.yottaa.net/5d669b394f1bbf7cb77826ae/www.bathandbodyworks.com/v~4b.216/dw/image/v2/BBDL_PRD/on/demandware.static/-/Sites-master-catalog/default/dw79662d5a/hires/026451884.jpg?sh=471&yocs=o_s_",
      proname: "New Fragrance",
      prodesc:"Buttercups & Berry Bellini",
      prorate:"$15.50",
      procategory:"Fine Fragrance Mist",
      profragnance: "Mix & Match: Buy 3, Get 3 Free or Buy 2, Get 1 Free",
      rate: 15.50,
  
    },
    {
         
      proimg: "https://cdn-fsly.yottaa.net/5d669b394f1bbf7cb77826ae/www.bathandbodyworks.com/v~4b.216/dw/image/v2/BBDL_PRD/on/demandware.static/-/Sites-master-catalog/default/dwe94d37ab/hires/026401907.jpg?sh=471&yocs=o_s_",
      proname: "New Fragrance",
      prodesc:"Hibiscus Mandarin Violet",
      prorate:"$17.50",
      procategory:"Ultimate Hydration Body Cream",
      profragnance: "Mix & Match: Buy 3, Get 3 Free or Buy 2, Get 1 Free",
      rate: 17.50,
  
    },
    {
         
      proimg: "https://cdn-fsly.yottaa.net/5d669b394f1bbf7cb77826ae/www.bathandbodyworks.com/v~4b.216/dw/image/v2/BBDL_PRD/on/demandware.static/-/Sites-master-catalog/default/dw13bd75e8/hires/026395407.jpg?sh=471&yocs=o_s_",
      proname: "New!",
      prodesc:"Freshwater",
      prorate:"$14.50",
      procategory:"3-in-1 Hair, Face & Body Wash",
      profragnance: "Mix & Match: Buy 3, Get 3 Free or Buy 2, Get 1 Free",
      rate: 14.50,
  
    },
    {     
      proimg: "https://cdn-fsly.yottaa.net/5d669b394f1bbf7cb77826ae/www.bathandbodyworks.com/v~4b.216/dw/image/v2/BBDL_PRD/on/demandware.static/-/Sites-master-catalog/default/dwc46d71cc/hires/026451889.jpg?sh=471&yocs=o_s_",
      proname: "New Fragrance",
      prodesc:"Honeysuckle & Peach Spritz",
      prorate:"$15.50",
      procategory:"Ultimate Hydration Body Cream",
      profragnance: "Mix & Match: Buy 3, Get 3 Free or Buy 2, Get 1 Free",
      rate: 15.50,
  
    },
    {
         
      proimg: "https://cdn-fsly.yottaa.net/5d669b394f1bbf7cb77826ae/www.bathandbodyworks.com/v~4b.216/dw/image/v2/BBDL_PRD/on/demandware.static/-/Sites-master-catalog/default/dwdcece664/hires/026381189.jpg?sh=471&yocs=o_s_",
      proname: "New Fragrance",
      prodesc:"Cacao Rose",
      prorate:"$15.50",
      procategory:"Body Wash and Foam Bath",
      profragnance: "Mix & Match: Buy 3, Get 3 Free or Buy 2, Get 1 Free",
      rate: 15.50,
  
    },
    {
         
      proimg: "https://cdn-fsly.yottaa.net/5d669b394f1bbf7cb77826ae/www.bathandbodyworks.com/v~4b.216/dw/image/v2/BBDL_PRD/on/demandware.static/-/Sites-master-catalog/default/dw7a049afd/hires/026400330.jpg?sh=471&yocs=o_s_",
      proname: "New Fragrance",
      prodesc:"Strawberry Pound Cake",
      prorate:"$16.50",
      procategory:"Fine Fragrance Mist",
      profragnance: "Mix & Match: Buy 3, Get 3 Free or Buy 2, Get 1 Free",
      rate: 16.50,
  
    },
    {
        
        proimg: "https://cdn-fsly.yottaa.net/5d669b394f1bbf7cb77826ae/www.bathandbodyworks.com/v~4b.216/dw/image/v2/BBDL_PRD/on/demandware.static/-/Sites-master-catalog/default/dwdf695576/hires/026240389.jpg?sh=471&yocs=o_s_",
      proname: "New!",
      prodesc:"A Thousand Wishes",
      prorate:"$13.50",
      procategory:"Super Smooth Body Lotion",
      profragnance: "Mix & Match: Buy 3, Get 3 Free or Buy 2, Get 1 Free",
      rate: 13.50,
  
    },
    {      
      proimg: "https://cdn-fsly.yottaa.net/5d669b394f1bbf7cb77826ae/www.bathandbodyworks.com/v~4b.216/dw/image/v2/BBDL_PRD/on/demandware.static/-/Sites-master-catalog/default/dwe02395bd/hires/026353232.jpg?sh=471&yocs=o_s_",
      proname: "New!",
      prodesc:"Lavender Vanilla",
      prorate:"$14.50",
      procategory:"Pillow and Body Mist",
      profragnance: "Mix & Match: Buy 3, Get 3 Free or Buy 2, Get 1 Free",
      rate: 14.50,
  
    }, 
    {     
      proimg: "https://cdn-fsly.yottaa.net/5d669b394f1bbf7cb77826ae/www.bathandbodyworks.com/v~4b.216/dw/image/v2/BBDL_PRD/on/demandware.static/-/Sites-master-catalog/default/dw0d5f535d/hires/026438528.jpg?sh=471&yocs=o_s_",
      proname: "New!",
      prodesc:"Japanese Cherry Blossom",
      prorate:"$16.50",
      procategory:"Fine Fragrance Mist",
      profragnance: "Mix & Match: Buy 3, Get 3 Free or Buy 2, Get 1 Free",
      rate: 16.50,
  
    }, 
    {     
      proimg: "https://cdn-fsly.yottaa.net/5d669b394f1bbf7cb77826ae/www.bathandbodyworks.com/v~4b.216/dw/image/v2/BBDL_PRD/on/demandware.static/-/Sites-master-catalog/default/dw2c67d338/hires/026311427.jpg?sh=471&yocs=o_s_",
      proname: "New!",
      prodesc:"Noir",
      prorate:"$15.50",
      procategory:"Ultimate Hydration Body Cream",
      profragnance: "Mix & Match: Buy 3, Get 3 Free or Buy 2, Get 1 Free",
      rate: 15.50,
  
    }, 
    {     
      proimg: "https://cdn-fsly.yottaa.net/5d669b394f1bbf7cb77826ae/www.bathandbodyworks.com/v~4b.216/dw/image/v2/BBDL_PRD/on/demandware.static/-/Sites-master-catalog/default/dwab641367/hires/026438526.jpg?sh=471&yocs=o_s_",
      proname: "New Fragrance",
      prodesc:"Japanese Cherry Blossom",
      prorate:"$15.50",
      procategory:"Daily Nourishing Body Lotion",
      profragnance: "Mix & Match: Buy 3, Get 3 Free or Buy 2, Get 1 Free",
      rate: 15.50,
  
    }, 
    {     
      proimg: "https://cdn-fsly.yottaa.net/5d669b394f1bbf7cb77826ae/www.bathandbodyworks.com/v~4b.216/dw/image/v2/BBDL_PRD/on/demandware.static/-/Sites-master-catalog/default/dw9f92c64b/hires/026414637.jpg?sh=471&yocs=o_s_",
      proname: "New Fragrance",
      prodesc:"Butterfly",
      prorate:"$15.50",
      procategory:"Daily Nourishing Body Lotion",
      profragnance: "Mix & Match: Buy 3, Get 3 Free or Buy 2, Get 1 Free",
      rate: 15.50,
  
    }, 
    {     
      proimg: "https://cdn-fsly.yottaa.net/5d669b394f1bbf7cb77826ae/www.bathandbodyworks.com/v~4b.216/dw/image/v2/BBDL_PRD/on/demandware.static/-/Sites-master-catalog/default/dw178bb304/hires/026451890.jpg?sh=471&yocs=o_s_",
      proname: "New Fragrance",
      prodesc:"Buttercups & Berry Bellini",
      prorate:"$15.50",
      procategory:"Ultimate Hydration Body Cream",
      profragnance: "Mix & Match: Buy 3, Get 3 Free or Buy 2, Get 1 Free",
      rate: 15.50,
  
    }, 
    {     
      proimg: "https://cdn-fsly.yottaa.net/5d669b394f1bbf7cb77826ae/www.bathandbodyworks.com/v~4b.216/dw/image/v2/BBDL_PRD/on/demandware.static/-/Sites-master-catalog/default/dw4153dd78/hires/026451891.jpg?sh=471&yocs=o_s_",
      proname: "New!",
      prodesc:"White Tea & Sage",
      prorate:"$17.50",
      procategory:"Ultimate Hydration Body Cream",
      profragnance: "Mix & Match: Buy 3, Get 3 Free or Buy 2, Get 1 Free",
      rate: 17.50,
  
    }, 
];

displaydata(prounder15data);
  
  //filter function 1. by product
  
  function byproduct(){
    var selected = document.querySelector("#filter1").value;
    // console.log(selected)
  
    if(selected !== "Product Type")
    {
      var filteredlist = prounder15data.filter( function (ele){
      
        return ele.proname == selected
      
      
    });
  
    // console.log(filteredlist)
    displaydata(filteredlist)
    }
    
    else
    {
      displaydata(prounder15data)
    }
}

  //filter function 2. byfragnanceName
  
  function byNamefragnance(){
    var selected = document.querySelector("#filter2").value;
    // console.log(selected)
  
    if(selected !== "Fragnance Category")
    {
      var filteredlist = prounder15data.filter( function (ele){
      
        return ele.prodesc == selected
      
      
    });
  
    console.log(filteredlist)
    displaydata(filteredlist)
    }
  
    else
    {
      displaydata(prounder15data)
    }
  
    
  }
  //filter function 3. by fragnance
  
  function byfragnance(){
    var selected = document.querySelector("#filter3").value;
    if(selected !== "Fragnance Category")
    {
      var filteredlist = prounder15data.filter( function (ele){ 
        return ele.procategory == selected
    });
    displaydata(filteredlist)
    }
    else
    {
      displaydata(prounder15data)
    }
  
    
  }
      
  //Applied sort function here
  
    function sortfn(){
     
      var selected = document.querySelector("#dosort").value;
      if( selected =="HTL")
      {
        prounder15data.sort( function (a, b){
         
          return b.rate - a.rate;
        });
        displaydata(prounder15data)
      }

      if (selected =="LTH")
      {
        prounder15data.sort( function (a, b){
         
          return a.rate - b.rate;
        });
        displaydata(prounder15data)
      }
  
    }

   
      
var cartArr = JSON.parse(localStorage.getItem("cartItems")) || [];
  
function displaydata(data){

  document.querySelector("#cardpro-box").innerHTML="";

  data.forEach( function (ele) {

  var card = document.createElement("div");
  card.setAttribute("id","cardpro")
 
  var imgdiv = document.createElement("div");
  imgdiv.setAttribute("id", "imgdiv")
 
  var imglogo = document.createElement("img")
      imglogo.setAttribute("src",ele.proimg)
      imgdiv.append(imglogo);
  
  var prodiv = document.createElement("div");
 prodiv.setAttribute("id","prodiv");
 
  var name = document.createElement("h3");
       name.innerText = ele.proname;
 
  var desc = document.createElement("h4");
  desc.innerText = ele.prodesc;
 
  var h3 = document.createElement("h3");
  h3.innerText = ele.procategory;
  
  var price = document.createElement("p");
  price.innerText=ele.prorate;

   var p = document.createElement("p");
   p.setAttribute("id","Doit")
   p.innerText = ele.profragnance;

   var addtobag = document.createElement("button");
   addtobag.setAttribute("id", "addtobagbtn")
   addtobag.innerText="Add to Bag";
   addtobag.style.cursor= "pointer";
   addtobag.addEventListener("click", function(){
     addtobagfn(ele)
    });
    
    
    // sd.style.color ="orange"
    var span1 = document.createElement("span");
    span1.setAttribute("class","fa fa-star dropit");
    
    var span2 = document.createElement("span");
    span2.setAttribute("class","fa fa-star dropit");
    // span2.innerText = "fa fa-star"
    var span3 = document.createElement("span");
    span3.setAttribute("class","fa fa-star dropit");
    // span3.innerText = "fa fa-star"
    var span4 = document.createElement("span");
    span4.setAttribute("class","fa fa-star dropit");
    // span4.innerText = "fa fa-star"
    var span5 = document.createElement("span");
    span5.setAttribute("class","fa fa-star");
    // span5.innerText = "fa fa-star"

  // sd.append(span1,span2,span3,span4,span5);
 
 prodiv.append(name,desc,h3,price,p,addtobag,span1,span2,span3,span4,span5);
     
   card.append(imgdiv, prodiv);
 
   document.querySelector("#cardpro-box").append(card);
 
 });
}

function addtobagfn(ele){
  cartArr.push(ele);
  localStorage.setItem("cartItems", JSON.stringify(cartArr));
  alert("This item is Added in your Cart")

}