search bar using html css and javascript

Create Working Search Bar Using HTML and JavaScript

Create Working Search Bar Using HTML and JavaScript

Hello Coder, Welcome to the Codewithrandom blog. In this article, we Create Working Search Bar Using HTML, CSS, and JavaScript. We add a Search Icon in our Working Search bar with the help of the font-awesome icon. So Let’s Start Creating Search Bar.
 
Working Search Bar Using HTML
Create 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+ 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 byN/A
Project DownloadLink Available Below
Language usedHTML, CSS, And JavaScript
External link / DependenciesYES
ResponsiveYES
Search Bar Table

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:-

 

 
Create Search Bar HTML, CSS And JavaScript
Search Bar Html Code Preview

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);
}
After we’ve added the CSS code, we’ll go over it step by step. To save time, you can simply copy this code and paste it into your IDE. Let us now examine our code step by step.
 

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);
}
css search bar output

 

Create Hidden Search Bar HTML, CSS And JavaScript (Source Code)
 

 

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:-

 
Create Search Bar HTML, CSS And JavaScript
Create Search Bar 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!



Leave a Reply