diff --git a/live-user-filter/index.html b/live-user-filter/index.html new file mode 100644 index 0000000..3387842 --- /dev/null +++ b/live-user-filter/index.html @@ -0,0 +1,25 @@ + + + + + + + Live User Filter + + +
+
+

Live User Filter

+ Search by name and/or location + +
+ + +
+ + + diff --git a/live-user-filter/script.js b/live-user-filter/script.js new file mode 100644 index 0000000..a4a6dab --- /dev/null +++ b/live-user-filter/script.js @@ -0,0 +1,42 @@ +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 = ` + ${user.name.first} +
+

${user.name.first} ${user.name.last}

+

${user.location.city}, ${user.location.country}

+
+ ` + + 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') + } + }) +} \ No newline at end of file diff --git a/live-user-filter/style.css b/live-user-filter/style.css new file mode 100644 index 0000000..bae1199 --- /dev/null +++ b/live-user-filter/style.css @@ -0,0 +1,94 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); + +* { + box-sizing: border-box; +} + +body { + background-color: #f8f9fd; + font-family: 'Roboto', sans-serif; + display: flex; + align-items: center; + justify-content: center; + height: 100vh; + overflow: hidden; + margin: 0; +} + +.container { + border-radius: 5px; + box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2); + overflow: hidden; + width: 300px; +} + +.title { + margin: 0; +} + +.subtitle { + display: inline-block; + margin: 5px 0 20px; + opacity: 0.8; +} + +.header { + background-color: #3e57db; + color: #fff; + padding: 30px 20px; +} + +.header input { + background-color: rgba(0, 0, 0, 0.3); + border: 0; + border-radius: 50px; + color: #fff; + font-size: 14px; + padding: 10px 15px; + width: 100%; +} + +.header input:focus { + outline: none; +} + +.user-list { + background-color: #fff; + list-style-type: none; + margin: 0; + padding: 0; + max-height: 400px; + overflow-y: auto; +} + +.user-list li { + display: flex; + padding: 20px; +} + +.user-list img { + border-radius: 50%; + object-fit: cover; + height: 50px; + width: 50px; +} + +.user-list .user-info { + margin-left: 10px; +} + +.user-list .user-info h4 { + margin: 0 0 10px; +} + +.user-list .user-info p { + font-size: 12px; +} + +.user-list li:not(:last-of-type) { + border-bottom: 1px solid #eee; +} + +.user-list li.hide { + display: none; +}