Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 8da9552

Browse files
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‎

Lines changed: 53 additions & 0 deletions
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‎

Lines changed: 30 additions & 0 deletions
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‎

Lines changed: 129 additions & 0 deletions
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)

AltStyle によって変換されたページ (->オリジナル) /