Telegram Group Join Now
Create Working Search Bar HTML, CSS & JavaScript
The area of an Internet browser where you can search the Internet for what you’re looking for is called the search bar. For instance, the image depicts the search bar in Firefox, which not only enables Internet searching but also allows you to select the specific search engine you wish to use.
100+ JavaScript Projects With Source Code ( Beginners to Advanced)
Hope you enjoy our blog so let’s start with a basic HTML structure for a Search bar.
Code by | N/A |
Project Download | Link Available Below |
Language used | HTML, CSS, And JavaScript |
External link / Dependencies | YES |
Responsive | YES |
Codepen Preview:
ADVERTISEMENT
Create Simple Portfolio Website Using HTML and CSS
HTML code for Search bar
HTML stands for HyperText Markup Language. This is a markup language. Its main job is to give our project structure. We will provide our project structure by utilising this markup language. So let’s look at our HTML code.
We start with the HTML file. First, copy the code below and paste it into your HTML file inside your IDE.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" /> <link rel="stylesheet" href="style.css" /> <title>Hidden Search</title> </head> <body> <div class="search"> <input type="text" class="input" placeholder="Search..."> <button class="btn"> <i class="fas fa-search"></i> </button> </div> <script src="script.js"></script> </body> </html>
We must update certain links before we start our search box project. In order to complete this project, we had to connect the three distinct files we utilised for our HTML, CSS, and JavaScript. In order to achieve this, kindly place links to our CSS inside the header.
Weather App Using Html,Css And JavaScript
All of the links for the various icons that we utilised in our project must be embedded. You must include the Javascript file inside the HTML’s body if you want to link it to our HTML file.
The search bar’s HTML code may be found here. You can now view the output without using JavaScript or CSS. The search bar is then created using CSS and Javascript.
//Head section <link rel="stylesheet" href="style.css"> <script src="https://kit.fontawesome.com/1cf483120b.js" crossorigin="anonymous"></script> <script defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAi0RCj8aLdKFX-cvYkW6kDveuaUlMnpes&libraries=places&callback=initMap"></script> //Body Section <script src="index.js"></script>
Now let’s Add the structure for our hidden Searchbox.
We’ll use the basic html elements to add the structure of our searchbox.
- Using the div tag, with class as “search” we willl create the container for our searchbar.
- Now we’ll make a div tag that will be utilised to provide text suggestions when the user fills into the search field.
- Using the font-awesome class we will add an search icon inside our searchbox.
We don’t require anything else to build the structure for our image editor. Now that we are using CSS, we will style our image editor. But let’s look at our structure first.
Output:
Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code)
Html output search bar
CSS Code for Search bar
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); * { box-sizing: border-box; } body { background-image: linear-gradient(90deg, #7d5fff, #7158e2); font-family: 'Roboto', sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } .search { position: relative; height: 50px; } .search .input { background-color: #fff; border: 0; font-size: 18px; padding: 15px; height: 50px; width: 50px; transition: width 0.3s ease; } .btn { background-color: #fff; border: 0; cursor: pointer; font-size: 24px; position: absolute; top: 0; left: 0; height: 50px; width: 50px; transition: transform 0.3s ease; } .btn:focus, .input:focus { outline: none; } .search.active .input { width: 200px; } .search.active .btn { transform: translateX(198px); }
Step1:First, we’ll use the import link to include the Roboto font from Google Fonts. Using the universal selection, we will set the box-sizing to the border box and the margin and padding to “zero”. Roboto is chosen as the font family using the font-family attribute.
Math Game using HTML, CSS & JavaScript
Now, we’ll layout our website’s body utilising the body tag selector. We’ll set the display to the flex and the background of our body to a linear gradient of “dark purple” and “light purple.” The overflow attribute will be used to set the overflow to “hidden,” the margin to “zero,” and the body height to 100 vh.
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); * { box-sizing: border-box; } body { background-image: linear-gradient(90deg, #7d5fff, #7158e2); font-family: 'Roboto', sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; }
Step2:We’ll set the background colour of our search field to “white” and the border to “0” using the class selector (.search). We will increase the width with an easy effect by setting the width and height values to “50px” and the transition property.
We will now style the search box button by setting the backdrop colour to “white,” the cursor type to “pointer,” and the space to “zero” using the top and left attributes. The width of our concealed searchbar will rise as a result of the addition of various classes to our search box.
.search { position: relative; height: 50px; } .search .input { background-color: #fff; border: 0; font-size: 18px; padding: 15px; height: 50px; width: 50px; transition: width 0.3s ease; } .btn { background-color: #fff; border: 0; cursor: pointer; font-size: 24px; position: absolute; top: 0; left: 0; height: 50px; width: 50px; transition: transform 0.3s ease; } .btn:focus, .input:focus { outline: none; } .search.active .input { width: 200px; } .search.active .btn { transform: translateX(198px); }
ADVERTISEMENT
ADVERTISEMENT
Now add javascript for the open & close Search bar and then we search anything in the Search bar.
ADVERTISEMENT
10+ HTML CSS Projects For Beginners with Source Code
ADVERTISEMENT
Javascript code for Search bar
const search = document.querySelector('.search') const btn = document.querySelector('.btn') const input = document.querySelector('.input') btn.addEventListener('click', () => { search.classList.toggle('active') input.focus() })
First, we will choose the HTML input and button elements using the document. queryselector() method. Click the button now. Using the toggle function, we will add and remove the active class inside our hidden searchbar icon as soon as the user clicks the search button in addEventListener ().
ADVERTISEMENT
Final output Search bar
5+ HTML CSS project With Source Code
Live output Search bar
Now we have completed our javascript section for the Search bar. Here is our updated output with Html, Css, and Javascript code for the search bar. Hope you like the search bar.
You can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you
In this post, we learn how to create a hidden search bar using simple html & css, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.
Written by – code with random/anki
Which code editor do you use for this Search Bar project coding?
I personally recommend using VS Code Studio, it’s straightforward and easy to use.
is this project responsive or not?
Yes! this project is a responsive project.
Do you use any external links to create this project?
Yes!