Skip to content

Commit 8da9552

Browse files
HuXn-WebDevHuXn-WebDev
committed
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+
constresult=document.getElementById("result");
2+
constfilter=document.getElementById("filter");
3+
constlistItems=[];
4+
5+
getData();
6+
7+
filter.addEventListener("input",(e)=>filterData(e.target.value));
8+
9+
asyncfunctiongetData(){
10+
constres=awaitfetch("https://randomuser.me/api?results=50");
11+
const{ results }=awaitres.json();
12+
13+
result.innerHTML="";
14+
15+
results.forEach((user)=>{
16+
constli=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+
functionfilterData(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+
lettoggler=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+
<htmllang="en">
2+
<head>
3+
<metacharset="UTF-8" />
4+
<metahttp-equiv="X-UA-Compatible" content="IE=edge" />
5+
<metaname="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Live User Filter</title>
7+
<linkrel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<divclass="container">
11+
<headerclass="header">
12+
<h4class="title">Search by name and/or location</h4>
13+
<inputtype="text" id="filter" placeholder="Search" />
14+
</header>
15+
16+
<ulid="result" class="user-list">
17+
<li>
18+
<h3>Loading...</h3>
19+
</li>
20+
</ul>
21+
</div>
22+
23+
<divclass="toggler-container">
24+
<inputtype="checkbox" id="switch" />
25+
<labelfor="switch"></label>
26+
</div>
27+
28+
<scriptsrc="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:3px3px10pxrgba(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:30px20px;
33+
}
34+
35+
.headerinput{
36+
border:0;
37+
border-radius:50px;
38+
font-size:14px;
39+
padding:10px15px;
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-listli{
54+
display: flex;
55+
padding:20px;
56+
}
57+
58+
.user-listimg{
59+
border-radius:50%;
60+
object-fit: cover;
61+
height:60px;
62+
width:60px;
63+
margin-right:20px;
64+
}
65+
66+
.user-list .user-infoh4{
67+
margin:0010px;
68+
}
69+
70+
.user-list .user-infop{
71+
font-size:12px;
72+
}
73+
74+
.user-listli:not(:last-of-type){
75+
border-bottom:1px solid #eee;
76+
}
77+
78+
.user-listli.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)