rmcg.dev/projects/random/using-template/js/script.js

64 lines
2.1 KiB
JavaScript
Raw Permalink Normal View History

// * 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,
};
});
});