64 lines
2.1 KiB
JavaScript
64 lines
2.1 KiB
JavaScript
|
// * https://jsonplaceholder.typicode.com/users
|
||
|
|
|
||
|
|
const userCardTemplate = document.querySelector("[data-user-template]");
|
||
|
|
// console.log(userCardTemplate);
|
||
|
|
|
||
|
|
const userCardsContainer = document.querySelector(
|
||
|
|
"[data-user-cards-container]"
|
||
|
|
);
|
||
|
|
// console.log(userCardsContainer);
|
||
|
|
|
||
|
|
// Original code from video used the attribute for the query rather
|
||
|
|
// than the ID that he had setup. So I swapped it over.
|
||
|
|
// const searchInput = document.querySelector("[data-search]");
|
||
|
|
const searchInput = document.querySelector("#search");
|
||
|
|
// console.log(searchInput);
|
||
|
|
|
||
|
|
let users = []; // filed from user data retrieved from server
|
||
|
|
|
||
|
|
searchInput.addEventListener("input", (event) => {
|
||
|
|
const value = event.target.value.toLowerCase();
|
||
|
|
// console.log(users);
|
||
|
|
users.forEach((user) => {
|
||
|
|
// this seems wasteful to run toLowerCase each time you type a letter
|
||
|
|
// surely better to just store a lowercase version when saving original data
|
||
|
|
// const isVisible =
|
||
|
|
// user.name.toLowerCase().includes(value) ||
|
||
|
|
// user.email.toLowerCase().includes(value);
|
||
|
|
|
||
|
|
const isVisible =
|
||
|
|
user.lowercaseName.includes(value) ||
|
||
|
|
user.lowercaseEmail.includes(value);
|
||
|
|
|
||
|
|
user.element.classList.toggle("hide", !isVisible);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
fetch("https://jsonplaceholder.typicode.com/users")
|
||
|
|
.then((res) => res.json())
|
||
|
|
.then((data) => {
|
||
|
|
users = data.map((user) => {
|
||
|
|
const card = userCardTemplate.content.cloneNode(true).children[0];
|
||
|
|
|
||
|
|
const name = card.querySelector("[data-name]");
|
||
|
|
const email = card.querySelector("[data-email]");
|
||
|
|
|
||
|
|
name.textContent = user.name;
|
||
|
|
email.textContent = user.email;
|
||
|
|
|
||
|
|
// console.log(card);
|
||
|
|
|
||
|
|
userCardsContainer.append(card);
|
||
|
|
|
||
|
|
// Below is original return
|
||
|
|
// return { name: user.name, email: user.email, element: card };
|
||
|
|
return {
|
||
|
|
name: user.name,
|
||
|
|
email: user.email,
|
||
|
|
lowercaseName: user.name.toLowerCase(),
|
||
|
|
lowercaseEmail: user.email.toLowerCase(),
|
||
|
|
element: card,
|
||
|
|
};
|
||
|
|
});
|
||
|
|
});
|