Untitled
unknown
javascript
a year ago
3.0 kB
6
Indexable
// 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();
Editor is loading...
Leave a Comment