41 lines
1.5 KiB
JavaScript
41 lines
1.5 KiB
JavaScript
|
//I didn't write this code, see this tutorial for more info --> https://www.youtube.com/watch?v=TlP5WIxVirU&t=324s
|
||
|
|
|
||
|
|
const userCardTemplate = document.querySelector("[data-user-template]")
|
||
|
|
const userCardContainer = document.querySelector("[data-user-cards-container]")
|
||
|
|
const searchInput = document.querySelector("[data-search]")
|
||
|
|
|
||
|
|
let users = []
|
||
|
|
|
||
|
|
searchInput.addEventListener("input", e => {
|
||
|
|
const value = e.target.value.toLowerCase()
|
||
|
|
users.forEach(user => {
|
||
|
|
const isVisible =
|
||
|
|
user.name.toLowerCase().includes(value) ||
|
||
|
|
(Array.isArray(user.tags) && user.tags.some(tags => tags.toLowerCase().includes(value))) ||
|
||
|
|
(typeof user.tags === 'string' && user.tags.toLowerCase().includes(value)) ||
|
||
|
|
user.link.toLowerCase().includes(value)
|
||
|
|
user.element.classList.toggle("hide", !isVisible)
|
||
|
|
})
|
||
|
|
})
|
||
|
|
|
||
|
|
fetch("list.json")
|
||
|
|
.then(res => res.json())
|
||
|
|
.then(data => {
|
||
|
|
users = data.map(user => {
|
||
|
|
const card = userCardTemplate.content.cloneNode(true).children[0]
|
||
|
|
const header = card.querySelector("[data-header]")
|
||
|
|
const body = card.querySelector("[data-body]")
|
||
|
|
const hyperlink = card.querySelector("[data-link]");
|
||
|
|
|
||
|
|
// Check if "user.tag" is an array
|
||
|
|
const tags = Array.isArray(user.tags) ? user.tags.join(', ') : user.tags;
|
||
|
|
|
||
|
|
hyperlink.href = user.link;
|
||
|
|
hyperlink.textContent = user.name;
|
||
|
|
body.textContent = tags;
|
||
|
|
|
||
|
|
userCardContainer.append(card)
|
||
|
|
return { name: user.name, tags: user.tags, link: user.link, element: card }
|
||
|
|
})
|
||
|
|
})
|