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>