Animated Search Bar using Html CSS And JavaScript

Introduction

Hello friends, all of you developers are welcome to today’s beautiful blog post. Today we have created a beautiful project for you which is an animated search bar, in which we have created a search bar icon and when the user clicks on our icon, a nice navbar is displayed with animation, which looks quite amazing and the most amazing thing is that it is completely 3D designed and we have used show in it, due to which it looks even more amazing. To create it, we have used html, css and javascript. Friends, creating it is a very easy task. If you have knowledge of basic web development coding then you can make this very easily and when you make such small projects, your coding skills also improve.

For formatting this we have used image <div> and input tag in html. We have not used much html code. Then with the help of css we have designed the search bar, like adding shows, editing colors, all these things are done with the help of css. And then with the help of javascript we have run our search bar. So let’s understand our entire code step by step.

HTML (index.html)

Get Discount on Top Educational Courses

Brand Name	Discount Information	Coupon Codes Link
Educative.io	20% discount on Educative courses and plans
W3Schools	20% discount on W3Schools courses
KodeKloud	10% discount on KodeKloud courses and plans
GeeksforGeeks	30% discount on GeeksforGeeks courses
Target Test Prep	20% discount on Target Test Prep
Coding Ninjas	₹5000 discount on Coding Ninjas courses
Skillshare	40% discount on Skillshare
DataCamp	50% discount on DataCamp
365 Data Science	57% discount on 365 Data Science Plans
Get Smarter	Flat 20% discount on Get Smarter courses
SmartKeeda	Flat 40% discount on SmartKeeda courses
StackSocial	20% discount on StackSocial courses

Friends, to start any project, we first have to use HTML. We create the structure of the project with the help of HTML, which does not look good. To make it look good, we have to use CSS, which we will see next, so let us understand the code of HTML.

In Html, first of all there is <!DOCTYPE Html>, from this we come to know that this code is the code of Html
This is used to set the language of the code, you can change the language as per your requirement <html lang=”en”>
The html code file is an important file for our project, so all the links are added in this code only, for which we have to use the <head> tag of html
Then if we want to add the title of the project, we can do it in this way <title>Animated Search Bar By Codemastergoutam</title>
To link the css file to the html code file we have to use this link tag <link rel=”stylesheet” href=”style.css” />
To create the search bar, we first created a <div class=”search-bar-container active”> which is the most important
In <div> we have used a <img> attribute in which we have added the page of our icon
Then we used the HTML input tag to create the placeholder for our search bar <input type=”text” class=”input” placeholder=”Search …” />
Then in the end we have used this script tag to link the javascript file to html <script src=”index.js”></script>

<title>Animated Search Bar by codemastergoutam</title>



<div class="search-bar-container active">
  <img decoding="async" src="https://cdn4.iconfinder.com/data/icons/evil-icons-user-interface/64/magnifier-512.png" alt="magnifier" class="magnifier" />

  <img decoding="async" src="https://cdn1.iconfinder.com/data/icons/google-s-logo/150/Google_Icons-25-512.png" alt="mic-icon" class="mic-icon" />
</div>

CSS (Style.css)

Now we have created the structure of our search bar with HTML code, but this search bar is still not looking good. To design it well, we have to use CSS along with HTML, so let us now understand our CSS code.

In the body of the search bar’s css code we have used display flex, then we have centered justify-content and also centered all the items and in the background we have used this color background-color: aliceblue;
In the search bar container we have centered align-items and used padding: 5px
In the search bar container, we have kept the width of 300px, you can increase or decrease it and the height has been kept at 50px
We have used shadow in the container box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.2), -6px -6px 10px rgba(255, 255, 255, 0.7); and we have also used border-radius in it
We have set the width of the search icon to 25ps and added cursor: pointer; and kept the position absolute
In the search bar input we have used background-color: transparent; border is none and in this we have also used margin margin: 10px 50px;

body {
  margin: 0;
  display: flex;
  justify-content: center;
  height: 100vh;
  align-items: center;
  background-color: aliceblue;
}

.search-bar-container {
  display: flex;
  align-items: center;
  background-color: aliceblue;
  padding: 5px;
  width: 300px;
  height: 50px;
  border-radius: 50px;
  box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.2),
    -6px -6px 10px rgba(255, 255, 255, 0.7);
  margin: 10px;
  position: relative;
  transition: width 1.5s;
}

.magnifier {
  width: 25px;
  cursor: pointer;
  position: absolute;
  left: 20px;
}

.mic-icon {
  width: 30px;
  position: absolute;
  right: 10px;
  transition: width 0.4s;
  transition-delay: 1s;
}

.input {
  background-color: transparent;
  border: none;
  margin: 10px 50px;
  width: 100%;
  outline: none;
  color: rgb(100, 100, 100);
  transition: width 1s;
  transition-delay: 0.5s;
}

.active.search-bar-container {
  width: 50px;
}

.active .input {
  width: 0;
}

.active .mic-icon {
  width: 0;
}

Javascript (Script.js)

Now we have completed our project i.e. search bar but when user clicks on search icon, he will not see any activity there because we have not added the most important javascript code yet because we have designed our search bar using css but have not activated it, so we will have to add our javascript code to it as well

First we have created search bar document with the help of JavaScript const searchBarContainerRule = document.querySelector(“.search-bar-container”);
After this, we have linked the icon we have added in the javascript code so that when the user clicks on it, the code should run const magnifierEl = document.querySelector(“.magnifier”);
Then we have fired addEventListener in javascript on click button, as soon as user clicks on it the search bar container will become active searchBar Container.classList.toggle(“active”);

const searchBarContainerEl = document.querySelector(".search-bar-container");

const magnifierEl = document.querySelector(".magnifier");

magnifierEl.addEventListener("click", () =&gt; {
  searchBarContainerEl.classList.toggle("active");
});

Output:

Disclaimer: The code provided in this post is sourced from GitHub and is distributed under the MIT License. All credits for the original code go to the respective owner. We have shared this code for educational purposes only. Please refer to the original repository for detailed information and any additional usage rights or restrictions.