Skip to content

Commit 8da9552

Browse files
HuXn-WebDevHuXn-WebDev
committedOct 3, 2022
Live Users Filter HTML, CSS, JS
1 parent edbbbc4 commit 8da9552

File tree

3 files changed

+212
-0
lines changed

3 files changed

+212
-0
lines changed
 

‎80. Live User Filter/app.js

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
const result = document.getElementById("result");
2+
const filter = document.getElementById("filter");
3+
const listItems = [];
4+
5+
getData();
6+
7+
filter.addEventListener("input", (e) => filterData(e.target.value));
8+
9+
async function getData() {
10+
const res = await fetch("https://randomuser.me/api?results=50");
11+
const { results } = await res.json();
12+
13+
result.innerHTML = "";
14+
15+
results.forEach((user) => {
16+
const li = document.createElement("li");
17+
listItems.push(li);
18+
19+
li.innerHTML = `
20+
<img src="${user.picture.large}" alt="${user.name.first}" />
21+
<div class="user-info">
22+
<h4>${user.name.first} ${user.name.last}</h4>
23+
<p>${user.location.city}, ${user.location.country} </p>
24+
</div>
25+
`;
26+
27+
result.appendChild(li);
28+
});
29+
}
30+
31+
function filterData(searchTerm) {
32+
listItems.forEach((item) => {
33+
if (item.innerText.toLowerCase().includes(searchTerm.toLowerCase())) {
34+
item.classList.remove("hide");
35+
} else {
36+
item.classList.add("hide");
37+
}
38+
});
39+
}
40+
41+
// Toggler
42+
let toggler = document.getElementById("switch");
43+
44+
toggler.addEventListener("click", () => {
45+
console.log(toggler.checked);
46+
if (toggler.checked === true) {
47+
document.body.style.backgroundColor = "rgb(17, 17, 17)";
48+
document.querySelector(".header").style.backgroundColor = "crimson";
49+
} else {
50+
document.body.style.backgroundColor = "white";
51+
document.querySelector(".header").style.backgroundColor = "black";
52+
}
53+
});

‎80. Live User Filter/index.html

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Live User Filter</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<div class="container">
11+
<header class="header">
12+
<h4 class="title">Search by name and/or location</h4>
13+
<input type="text" id="filter" placeholder="Search" />
14+
</header>
15+
16+
<ul id="result" class="user-list">
17+
<li>
18+
<h3>Loading...</h3>
19+
</li>
20+
</ul>
21+
</div>
22+
23+
<div class="toggler-container">
24+
<input type="checkbox" id="switch" />
25+
<label for="switch"></label>
26+
</div>
27+
28+
<script src="app.js"></script>
29+
</body>
30+
</html>

‎80. Live User Filter/style.css

+129
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
:root {
2+
--primary-color: white;
3+
--primary-label: black;
4+
--secondary-label: white;
5+
--white-ball: white;
6+
--black-ball: black;
7+
}
8+
9+
body {
10+
background-color: var(--primary-color);
11+
font-family: sans-serif;
12+
display: flex;
13+
justify-content: center;
14+
align-items: center;
15+
height: 100vh;
16+
overflow: hidden;
17+
}
18+
19+
.container {
20+
border-radius: 5px;
21+
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
22+
width: 600px;
23+
}
24+
25+
.title {
26+
margin-bottom: 20px;
27+
}
28+
29+
.header {
30+
background-color: black;
31+
color: #fff;
32+
padding: 30px 20px;
33+
}
34+
35+
.header input {
36+
border: 0;
37+
border-radius: 50px;
38+
font-size: 14px;
39+
padding: 10px 15px;
40+
width: 100%;
41+
outline: none;
42+
}
43+
44+
.user-list {
45+
background-color: white;
46+
list-style-type: none;
47+
padding: 0;
48+
max-height: 400px;
49+
overflow-y: auto;
50+
}
51+
52+
/* JavaScript */
53+
.user-list li {
54+
display: flex;
55+
padding: 20px;
56+
}
57+
58+
.user-list img {
59+
border-radius: 50%;
60+
object-fit: cover;
61+
height: 60px;
62+
width: 60px;
63+
margin-right: 20px;
64+
}
65+
66+
.user-list .user-info h4 {
67+
margin: 0 0 10px;
68+
}
69+
70+
.user-list .user-info p {
71+
font-size: 12px;
72+
}
73+
74+
.user-list li:not(:last-of-type) {
75+
border-bottom: 1px solid #eee;
76+
}
77+
78+
.user-list li.hide {
79+
display: none;
80+
}
81+
82+
.toggler-container {
83+
position: absolute;
84+
bottom: 1rem;
85+
right: 4rem;
86+
}
87+
88+
#switch {
89+
width: 0;
90+
height: 0;
91+
visibility: hidden;
92+
}
93+
94+
label {
95+
display: block;
96+
width: 100px;
97+
height: 50px;
98+
background-color: var(--primary-label);
99+
border-radius: 100px;
100+
position: relative;
101+
cursor: pointer;
102+
transition: 0.5s;
103+
}
104+
105+
label::after {
106+
content: "";
107+
width: 40px;
108+
height: 40px;
109+
border-radius: 70px;
110+
background-color: var(--white-ball);
111+
position: absolute;
112+
top: 5px;
113+
left: 5px;
114+
transition: 0.5s;
115+
}
116+
117+
#switch:checked + label:after {
118+
background-color: var(--black-ball);
119+
left: calc(100% - 5px);
120+
transform: translateX(-100%);
121+
}
122+
123+
#switch:checked + label {
124+
background-color: var(--secondary-label);
125+
}
126+
127+
label:active:after {
128+
width: 60px;
129+
}

0 commit comments

Comments
 (0)
Failed to load comments.