Scribd
Upload
20 views2 pages

Fetch and Search in Data

The document defines a function to create user cards from data by mapping over elements to create DOM elements for each user, add them to the page, and return an object. It also adds an input search handler to toggle the visibility of cards based on name matches on input. Finally, it fetches user data from an API and calls the card creation function.

Uploaded by

sopi.bagatrishvili.1
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
Download as docx, pdf, or txt
20 views2 pages

Fetch and Search in Data

The document defines a function to create user cards from data by mapping over elements to create DOM elements for each user, add them to the page, and return an object. It also adds an input search handler to toggle the visibility of cards based on name matches on input. Finally, it fetches user data from an API and calls the card creation function.

Uploaded by

sopi.bagatrishvili.1
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
Download as docx, pdf, or txt
Download as docx, pdf, or txt
You are on page 1/ 2

let CreateUserCard = (data)=>{

element = data.map(element => {


let wrapper = document.querySelector(".users");
let mainDiv = document.createElement("div");
mainDiv.classList.add("users__card");
let header = document.createElement("div");
header.classList.add("header");
header.textContent = element.name;
let body = document.createElement("div");
body.classList.add("body");
body.textContent = element.email;
mainDiv.appendChild(header);
mainDiv.appendChild(body);
wrapper.appendChild(mainDiv);
return {name:element.name,email: element.email, element:mainDi
v}
});

}
let searchInput = document.querySelector("[data-search]");
searchInput.addEventListener("input",(event)=>{
let value = event.target.value;
element.forEach(user=>{
let isvisible = user.name.toLowerCase().includes(value.toLower
Case());
user.element.classList.toggle("hide",!isvisible);
})
})
fetch("users.json",{
method:"GET"
})
.then((response =>{
if (response.status !==200){
throw "error";
}
return response.json();
}))
.then((responseData =>{
CreateUserCard(responseData);

}))
.catch((error =>{
console.log(error);
}))

<div class="search">
<label for="input">Search</label>
<input type="search" class="input" data-search>
</div>
<div class="users">

</div>

You might also like