├── index.html ├── script.js └── styles.css /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Document 10 | 11 | 12 |
13 | 14 | 15 |
16 |
17 | 23 | 24 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const userCardTemplate = document.querySelector("[data-user-template]") 2 | const userCardContainer = document.querySelector("[data-user-cards-container]") 3 | const searchInput = document.querySelector("[data-search]") 4 | 5 | let users = [] 6 | 7 | searchInput.addEventListener("input", e => { 8 | const value = e.target.value.toLowerCase() 9 | users.forEach(user => { 10 | const isVisible = 11 | user.name.toLowerCase().includes(value) || 12 | user.email.toLowerCase().includes(value) 13 | user.element.classList.toggle("hide", !isVisible) 14 | }) 15 | }) 16 | 17 | fetch("https://jsonplaceholder.typicode.com/users") 18 | .then(res => res.json()) 19 | .then(data => { 20 | users = data.map(user => { 21 | const card = userCardTemplate.content.cloneNode(true).children[0] 22 | const header = card.querySelector("[data-header]") 23 | const body = card.querySelector("[data-body]") 24 | header.textContent = user.name 25 | body.textContent = user.email 26 | userCardContainer.append(card) 27 | return { name: user.name, email: user.email, element: card } 28 | }) 29 | }) 30 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | .search-wrapper { 2 | display: flex; 3 | flex-direction: column; 4 | gap: .25rem; 5 | } 6 | 7 | input { 8 | font-size: 1rem; 9 | } 10 | 11 | .user-cards { 12 | display: grid; 13 | grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); 14 | gap: .25rem; 15 | margin-top: 1rem; 16 | } 17 | 18 | .card { 19 | border: 1px solid black; 20 | background-color: white; 21 | padding: .5rem; 22 | } 23 | 24 | .card > .header { 25 | margin-bottom: .25rem; 26 | } 27 | 28 | .card > .body { 29 | font-size: .8rem; 30 | color: #777; 31 | } 32 | 33 | .hide { 34 | display: none; 35 | } --------------------------------------------------------------------------------