You are currently viewing Create Search Bar HTML, CSS & JavaScript

Create Search Bar HTML, CSS & JavaScript

Create Search Bar HTML, CSS & JavaScript

Create Search Bar HTML, CSS & JavaScript
Create Search Bar HTML, CSS & JavaScript

 

Welcome to Code With Random blog. In this article, We Create a Working Search Bar. We use Html, Css, And JavaScript for Search Bar project code.

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

Play Unlimited Quiz Of HTML, CSS, and JavaScript – Click Here

HTML code for Search bar

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

There is all html code for the Search bar. Now, you can see output without Css and Javascript code. Then we write Css and Javascript for our Search Bar.

Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code)

Html output search bar

 

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

 

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);
}
Now we have completed our css section for the search bar.  Here is our updated output with html and css for the search bar.
Html css search bar output

 

 

Now add javascript for the open & close Search bar and then we search anything in the Search bar.

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()
})

Final output Search bar

 

Create Search Bar HTML, CSS And JavaScript
Create Search Bar HTML, CSS And JavaScript

 

5+ HTML CSS project With Source Code

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 

Leave a Reply