How to Create Animated Search Bar with Toggle using JavaScript
Hey friends, today in this blog you'll learn how to create an Animated Search Bar with Toggle Button Using JavaScript .
In the earlier blog, I have shared How To Create a Responsive Sign Up Form Using HTML and CSS and now it's time to Create an Animated Search Bar with Toggle Button Using JavaScript.
Hello Friends, We will using HTML, CSS and JavaScript we will make it fun. Today we will learn how to create an Animated Search Bar with Toggle Button Using JavaScript . So here is the code and my work. Hope you are gonna love this and share with your friends too.
You Can Also Read : How to create a website using HTML and CSS
You Can Read Also:- How to create a Responsive Navigation Menu Bar using HTML, CSS and JavaScript
Step 1) Open a any code Editor in any Devices
Step 2) Create a file and save it index.html with .html extension
Step 3) Paste these code on index.html file and save it (ctrl+s)
Add this Code in index.html Page
1: <!DOCTYPE html>
2: <html>
3: <head>
4: <title></title>
5: <link rel="stylesheet" type="text/css" href="style.css">
6: <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
7: </head>
8: <body>
9: <div class="container">
10: <form class="formBox">
11: <input type="text" placeholder="Search" id="searchBox">
12: <button id="btn" type="button" onclick="myFunction()"><i class="fa fa-search"></i></button>
13: </form>
14: </div>
15: <script type="text/javascript">
16: function myFunction() {
17: var x = document.getElementById("searchBox");
18: if (x.style.display === "block") {
19: x.style.display = "none";
20: } else {
21: x.style.display = "block";
22: }
23: }
24: </script>
25: </body>
26: </html>
*<link rel="stylesheet" type="text/css" href="css/style.css"> This Code be must be added without these code stylesheet code not run.
Step 4) Again create a file name it style.css with .css extension
Step 5) Paste These Code on style.css Page and save it.
Add this Code in style.css Page
1: *{
2: padding: 0;
3: margin: 0;
4: box-sizing: border-box;
5: }
6: body{
7: font-family: sans-serif;
8: }
9: .container{
10: width: 100%;
11: height: 100vh;
12: position: relative;
13: background-color: #55a790;
14: align-items: center;
15: }
16: .formBox{
17: width: 365px;
18: position: absolute;
19: top: 50%;
20: left: 50%;
21: transform: translate(-50%,-50%);
22: height: 40px;
23: }
24: #searchBox{
25: width: 100%;
26: padding: 16px 25px;
27: border: 0;
28: outline: none;
29: border-radius: 30px;
30: display: none;
31: }
32: #btn{
33: width: 42px;
34: padding: 14px 0px;
35: outline: none;
36: cursor: pointer;
37: background-color: red;
38: border: 0;
39: border-radius: 40px;
40: color: #fff;
41: position: absolute;
42: top: 2px;
43: left: 88%;
44: } Step 6) Now Copy File Path and pate it any browser.
Step 7) See magic.....😊
Thank you...........
0 Comments