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
+
+
+
+
+
+
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.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;
+}