Skip to content

Commit 89f1001

Browse files
HuXn-WebDevHuXn-WebDev
committed
Animated Search Bar Using HTML CSS and JavaScript
1 parent ae4c082 commit 89f1001

File tree

3 files changed

+109
-0
lines changed

3 files changed

+109
-0
lines changed

‎66. Animated Search Bar/app.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
const searchContainer = document.querySelector(".container");
2+
const mic = document.querySelector(".mic-icon");
3+
const magnifier = document.querySelector(".magnifier");
4+
5+
magnifier.addEventListener("click", () => {
6+
searchContainer.classList.toggle("active");
7+
mic.classList.toggle("hidden");
8+
});

‎66. Animated Search Bar/index.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
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>Animated Search Bar</title>
7+
<link
8+
rel="stylesheet"
9+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
10+
integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
11+
crossorigin="anonymous"
12+
referrerpolicy="no-referrer"
13+
/>
14+
<link rel="stylesheet" href="style.css" />
15+
</head>
16+
<body>
17+
<div class="container">
18+
<i class="fa-solid fa-magnifying-glass magnifier"> </i>
19+
<input type="text" class="input" placeholder="Search..." />
20+
<i class="fa-solid fa-microphone mic-icon"></i>
21+
</div>
22+
23+
<script src="app.js"></script>
24+
</body>
25+
</html>

‎66. Animated Search Bar/style.css‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
font-family: sans-serif;
6+
}
7+
8+
body {
9+
height: 100vh;
10+
margin: 0;
11+
display: flex;
12+
justify-content: center;
13+
align-items: center;
14+
background: #1b1b1b;
15+
}
16+
17+
.container {
18+
display: flex;
19+
align-items: center;
20+
background: #292929;
21+
padding: 5px;
22+
width: 300px;
23+
height: 50px;
24+
border-radius: 50px;
25+
box-shadow: 1px 1px 5px #292929;
26+
margin: 10px;
27+
position: relative;
28+
transition: width 1.5s;
29+
}
30+
31+
.input {
32+
margin: 10px 50px;
33+
width: 100%;
34+
color: #fff;
35+
border: none;
36+
background: transparent;
37+
outline: none;
38+
transition-delay: 0.5s;
39+
}
40+
41+
.magnifier {
42+
position: absolute;
43+
left: 15px;
44+
width: 25px;
45+
text-align: center;
46+
margin: 0 auto;
47+
cursor: pointer;
48+
color: #ffa31a;
49+
}
50+
51+
.mic-icon {
52+
position: absolute;
53+
right: 10px;
54+
width: 30px;
55+
transition: width 0.4s;
56+
transition-delay: 0.5s;
57+
color: #ffa31a;
58+
}
59+
60+
/* JavaScript */
61+
.active.container {
62+
width: 50px;
63+
display: flex;
64+
}
65+
66+
.active .input {
67+
width: 0;
68+
}
69+
70+
.active .mic-icon {
71+
width: 0;
72+
}
73+
74+
.hidden {
75+
visibility: hidden;
76+
}

0 commit comments

Comments
 (0)