Untitled

// given data 
let user = [
    {
      id: 1,
      name: "Leanne Graham",
      username: "Bret",
      email: "Sincere@april.biz",
    },
    {
      id: 2,
      name: "Ervin Howell",
      username: "Antonette",
      email: "Shanna@melissa.tv",
    },
    {
      id: 3,
      name: "Clementine Bauch",
      username: "Samantha",
      email: "Nathan@yesenia.net",
    },
    {
      id: 4,
      name: "Patricia Lebsack",
      username: "Karianne",
      email: "Julianne.OConner@kory.org",
    },
    {
      id: 5,
      name: "Chelsey Dietrich",
      username: "Kamren",
      email: "Lucio_Hettinger@annie.ca",
    },
    {
      id: 6,
      name: "Mrs. Dennis Schulist",
      username: "Leopoldo_Corkery",
      email: "Karley_Dach@jasper.info",
    },
    {
      id: 7,
      name: "Kurtis Weissnat",
      username: "Elwyn.Skiles",
      email: "Telly.Hoeger@billy.biz",
    },
    {
      id: 8,
      name: "Nicholas Runolfsdottir V",
      username: "Maxime_Nienow",
      email: "Sherwood@rosamond.me",
    },
    {
      id: 9,
      name: "Glenna Reichert",
      username: "Delphine",
      email: "Chaim_McDermott@dana.io",
    },
    {
      id: 10,
      name: "Clementina DuBuque",
      username: "Moriah.Stanton",
      email: "Rey.Padberg@karina.biz",
    },
  ];
  
// taking container before 
let container = document.getElementById("container");

// creating cards here 
function createCard(obj){
    // creating elements 
    let card = document.createElement("div");
    let addCart = document.createElement("span");
    let h1 = document.createElement("h1");
    let username = document.createElement("div");
    let email = document.createElement("div");

    // assigning class and values to elements 
    card.className = "card";
    addCart.className = "addCart"
    h1.innerText = obj.name;
    username.innerText = "Username: "+obj.username;
    email.innerText = "Email: "+obj.email;
    addCart.innerHTML =  `<i class="fa-solid fa-cart-plus" style="color: #ffffff;"></i>`;
    id = obj.id;
    addCart.value = id;

    // adding card elements inside container 
    container.append(card);

    // adding names and other details to card 
    card.append(addCart, h1,username, email);

    //adding event listener to each addCart
    addCart.addEventListener("click",(elem)=>{
      var comp = elem.target.parentElement.value;
      console.log(elem.target.parentElement.value);
      var temp = user.filter((e)=>e.id == comp)
      var obj = temp[0];
      let arr = JSON.parse(localStorage.getItem("user_data")) || [];
      arr.push(obj);
      localStorage.setItem("user_data",JSON.stringify(arr));
      // refresh();
      
  })

}


// gives all the card present in user array 
function refresh(){
  let local_data = JSON.parse(localStorage.getItem("user_data"));
    
  user.forEach((obj)=>{
        createCard(obj);
        console.log(obj.id);
    })

 
}

refresh();