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 Working Search Bar.

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.

Hope you enjoy our blog so let's start with a basic HTML structure for a Working Search bar.

Working Search Bar Html Code:-

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.

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.

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.

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.

Working Search Bar JavaScript 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 ().

Hope you like the Working Search Bar. You can see the output project screenshots. See our other blogs and gain knowledge in front-end development.

Thank you

Written by - code with random/anki

Blog

Create Working Search Bar Using HTML and JavaScript

Codewithrandom Blogs

Working Search Bar Html Code:-

Working Search Bar CSS Code:-

Working Search Bar JavaScript Code:-

Join Our Newsletter. No Spam, Only the good stuff.

Related