Create Working Search Bar Using HTML and 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+ HTML,CSS and JavaScript Projects With Source Code ( Beginners to Advanced)
Hope you enjoy our blog so let’s start with a basic HTML structure for a Working Search bar.
Code by | N/A |
Project Download | Link Available Below |
Language used | HTML, CSS, And JavaScript |
External link / Dependencies | YES |
Responsive | YES |
Live Preview Of Working Search Bar:
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 utilized 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 working Search box.
We’ll use the basic html elements to add the structure of our search box.
- Using the div tag, with the class as “search” we will create the container for our search bar.
- Now we’ll make a div tag that will be utilized to provide text suggestions when the user fills in the search field.
- Using the font-awesome class we will add a search icon inside our search box.
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.
Restaurant Website Using HTML And CSS With Source Code
Html output:-
Working Search Bar Css Code:-
@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); }
Now add javascript for the open & close Search bar and then we search anything in the Search bar.
10+ HTML CSS Projects For Beginners with Source Code
JavaScript Search Bar Code:-
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 search bar icon as soon as the user clicks the search button in addEventListener ().
ADVERTISEMENT
50+ HTML, CSS and JavaScript Projects With Source Code
ADVERTISEMENT
Final Output Of Search Bar Using Html,Css and JavaScript:-
Video Output:
Hope you like the Working Search Bar. You can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.
ADVERTISEMENT
Thank you
ADVERTISEMENT
Written by – Codewithrandom/anki
ADVERTISEMENT
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!