42 lines
1.1 KiB
JavaScript
42 lines
1.1 KiB
JavaScript
|
const result = document.getElementById('result')
|
||
|
|
const filter = document.getElementById('filter')
|
||
|
|
const listItems = []
|
||
|
|
|
||
|
|
getData()
|
||
|
|
|
||
|
|
filter.addEventListener('input', (e) => filterData(e.target.value))
|
||
|
|
|
||
|
|
async function getData() {
|
||
|
|
const res = await fetch('https://randomuser.me/api?results=50')
|
||
|
|
|
||
|
|
const { results } = await res.json()
|
||
|
|
|
||
|
|
// Clear result
|
||
|
|
result.innerHTML = ''
|
||
|
|
|
||
|
|
results.forEach(user => {
|
||
|
|
const li = document.createElement('li')
|
||
|
|
|
||
|
|
listItems.push(li)
|
||
|
|
|
||
|
|
li.innerHTML = `
|
||
|
|
<img src="${user.picture.large}" alt="${user.name.first}">
|
||
|
|
<div class="user-info">
|
||
|
|
<h4>${user.name.first} ${user.name.last}</h4>
|
||
|
|
<p>${user.location.city}, ${user.location.country}</p>
|
||
|
|
</div>
|
||
|
|
`
|
||
|
|
|
||
|
|
result.appendChild(li)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
function filterData(searchTerm) {
|
||
|
|
listItems.forEach(item => {
|
||
|
|
if(item.innerText.toLowerCase().includes(searchTerm.toLowerCase())) {
|
||
|
|
item.classList.remove('hide')
|
||
|
|
} else {
|
||
|
|
item.classList.add('hide')
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|