Animated Search Box – CodingNepal https://www.codingnepalweb.com CodingNepal is a blog dedicated to providing valuable and informative content about web development technologies such as HTML, CSS, JavaScript, and PHP. Sun, 14 May 2023 17:18:54 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.2 Search Bar in HTML CSS & JavaScript https://www.codingnepalweb.com/search-bar-html-css-javascript-2/ https://www.codingnepalweb.com/search-bar-html-css-javascript-2/#respond Fri, 15 Jul 2022 21:11:20 +0000 https://www.codingnepalweb.com/?p=4169 Search Bar in HTML CSS & JavaScript

Hello friend, I hope you are doing awesome. Today you will learn to create a Search Bar in HTML CSS & JavaScript I will add some animation to our search bar also. Earlier I created a Seach Box using HTML and CSS only. But in today’s search box I will add a few JavaScript.

Search Bars are the section where users can search for the things that they want to. Search Bar can be in different designs but the main objective of the search bar is to search.

Have a quick look on the given image of our search bar on the webpage. As you can see from the image of our search box. There is a search box, inside the search box there are two icons and a search section. Actually, in our real project, this search bar will be in closed form and when we click on the search icon then the search bar will open, and close the search bar we need to click on the cross icon. I have added beautiful cubic animation too.

To see the real demo of this search bar and its animation, you need to watch the give video tutorial of our search bar. Also by watching the video tutorial, you will get an idea about HTML CSS, and JavaScript codes that I have used to create this search bar.

Search Bar in HTML CSS & JavaScript | Video Tutorial

I have provided all the HTML CSS and JavaScript code that I have used to create this Search Bar. Before getting into the source code file, I would like to explain the given video tutorial briefly.

As you have seen in the video tutorial. At first, we saw one square shape box with a search icon. When I clicked on that square box, the search box opened and cross icons also appeared. When I clicked on that cross icon then the search bar closed and the cross icon disappeared. The search bar is created by HTML and CSS, for the animation, I have used CSS cubic bezier and to open and close the search bar I have used some JavaScript code.

I hope now you can create this search bar using HTML CSS and JavaScript. If you are feeling difficulty creating this sidebar, I have provided all the source code below.

You Might Like This:

Search Bar [Source Code]

To get the following HTML and CSS code for the Search Bar you need to create two files one is an HTML file and another is a CSS file. After creating these two files then you can copy-paste the given codes on your document. You can also download all source code files from the given download button.

 

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title> Animated Search Bar </title>

        <!-- CSS -->
        <link rel="stylesheet" href="css/style.css">
                
        <!-- Unicons CSS -->
        <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
                        
    </head>
    <body>
        <div class="input-box">
            <input type="text" placeholder="Search...">
            <span class="icon">
                <i class="uil uil-search search-icon"></i>
            </span>
            <i class="uil uil-times close-icon"></i>
        </div>

        <script>
            let inputBox = document.querySelector(".input-box"),
                searchIcon = document.querySelector(".icon"),
                closeIcon = document.querySelector(".close-icon");

            searchIcon.addEventListener("click", () => inputBox.classList.add("open"));
            closeIcon.addEventListener("click", () => inputBox.classList.remove("open"));
        </script>
        
    </body>
</html>

/* Google Fonts - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #4070f4;
  overflow: hidden;
}
.input-box{
  position: relative;
  height: 55px;
  max-width: 55px;
  width: 100%;
  margin: 0 40px;
  border-radius: 6px;
  background-color: #fff;
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.input-box.open{
  max-width: 350px;
}
input{
  position: relative;
  outline: none;
  border: none;
  height: 100%;
  width: 100%;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 400;
  color: #333;
  background-color: #fff;
}
.input-box.open{
  padding: 0 15px 0 65px;
}
.icon{
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  width: 60px;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  background-color: #fff;
}
.search-icon,
.close-icon{
  position: absolute;
  top: 50%;
  font-size: 30px;
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.search-icon{
  color: #4070f4;
  
  transform: translateY(-50%) rotate(90deg);
}
.input-box.open .search-icon{
  transform: translateY(-50%) rotate(0);
}
.close-icon{
  right: -45px;
  color: #fff;
  padding: 5px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
}
.input-box.open .close-icon{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) rotate(180deg);
}

 

 

]]> https://www.codingnepalweb.com/search-bar-html-css-javascript-2/feed/ 0 How To Make Search Box Using HTML & CSS https://www.codingnepalweb.com/how-to-make-search-box-using-html-css/ https://www.codingnepalweb.com/how-to-make-search-box-using-html-css/#respond Mon, 15 Feb 2021 21:09:48 +0000 https://www.codingnepalweb.com/?p=4236 Search Box Design Using HTML CSS

Hello Readers, today in this blog I’m going to create a Search Box Design Using HTML CSS, and this search box will fully responsive. Earlier I have shared How To Create Login Form in HTML CSS, now we will go for search bar design.

Simply, A search box is an input field where the user has to type what they wanted from the specific webpages. Nowadays there are various types of search boxes on the internet but the main motive of a search bar is the same.

As you can see on the given image of this program [Responsive Search Box], This is the real example of a search bar. At first, this search bar is in small form literally we can see only the search icon and when we clicked on that search icon smoothly search box appears with an input field.

If you want to see the essential code behind this program [Responsive Search Bar Design], and all animation that I have added to this program please do watch the full video tutorial of this program [Animated Search Box Design] that I have provided below.

Full Video Tutorial Search Box Design Using HTML & CSS

As you have seen in the given tutorial of this program [Search Box Design ], At first there is only a search box icon on the screen in round shape, when we clicked on that search icon search’s input field smoothly and the round shape of the icon turns into rectangle shape in the left part and round shape in the right side. To make this animation I have used HTML input’s checkbox.

If you are familiar with HTML & CSS then you can easily create this program [Responsive Search Box Design], those friends who are feeling difficulty to build this program, don’t worry i have provided full source code below.

You Might Like This:

Search Box [Source Code]

To copy-paste the given codes of this program [Animated Search Bar Design], at first you need to create two files, one is an HTML file and another is a CSS file, after creating these two files you can easily copy-paste the given codes in your document.

<!DOCTYPE html>
<!-- Created By CodingLab - www.codinglabweb.com -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <title> Responsive Search Box | CodingLab </title>
    <link rel="stylesheet" href="style.css">
    <!-- Fontawesome CDN Link -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
<body>
  <div class="box">
    <input type="checkbox" id="check">
    <div class="search-box">
      <input type="text" placeholder="Type here...">
      <label for="check" class="icon">
        <i class="fas fa-search"></i>
      </label>
    </div>
  </div>

</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins',sans-serif;
}
body{
  height: 100vh;
  width: 100%;
  background: #FF676D;
  display: flex;
  align-items: center;
  justify-content: center;
}
.box{
  max-width: 400px;
  width: 100%;

}
.box .search-box{
  position: relative;
  height: 50px;
  max-width: 50px;
  margin: auto;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
  border-radius: 25px;
  transition: all 0.3s ease;
}
#check:checked ~ .search-box{
  max-width: 380px;
}
.search-box input{
 position: absolute;
 height: 100%;
 width: 100%;
 border-radius: 25px;
 background: #fff;
 outline: none;
 border: none;
 padding-left: 20px;
 font-size: 18px;
}
.search-box .icon{
  position: absolute;
  right: -2px;
  top: 0;
  width: 50px;
  background: #FFF;
  height: 100%;
  text-align: center;
  line-height: 50px;
  color: #FF676D;
  font-size: 20px;
  border-radius: 25px;
}
#check:checked ~ .search-box .icon{
  background: #FF676D;
  color: #FFF;
  width: 60px;
  border-radius: 0 25px 25px 0;
}
#check{
  display: none;
}

If you face any difficulties while creating your Animated Search Box or your code is not working as expected, you can download the source code files for this CSS Search Bar for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

]]> https://www.codingnepalweb.com/how-to-make-search-box-using-html-css/feed/ 0 Animated Search Box using HTML CSS & JavaScript https://www.codingnepalweb.com/animated-search-box-javascript/ https://www.codingnepalweb.com/animated-search-box-javascript/#comments Fri, 04 Sep 2020 13:03:00 +0000 https://codingnepalweb.com/2020/09/04/animated-search-box-using-html-css-javascript/ Animated Search Box using HTML CSS & JavaScript Elastic Animation on Search Bar

Hello readers, Today in this blog you’ll learn how to create an Animated Search Box/Bar using HTML CSS & JavaScript. Earlier I have shared a blog on how to create FullScreen Overlay Search Box Animation using only HTML & CSS and now it’s time to create an Elastic Animation on Search Bar with JavaScript.

The search box is the most important graphical element present in every website. It works as the field for a query input or searches term from the user to search and retrieve related data from the database. A simple search bar can make using HTML, CSS, and JavaScript only.

In this program [Animated Search Box], at first, on the webpage, there is only a search icon and when you click on that icon, then the search input appears with an elastic animation. When you type something and click on the search icon, your typed data is shown at the bottom of the search bar.  There is also shown a cancel or hide icon [cross sign icon] and when you click on that cancel icon, the visible search input and your typed data will be hidden.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program [Elastic Animation on Search Bar].

Video Tutorial of Elastic Animation on Search Bar

 
In the video, you have seen an Animated Search Bar and I hope you’ve understood the basic codes behind creating this program. I used pure JavaScript to create this search bar so if you’re a beginner and you know a little bit of JavaScript, then you can easily create this type of search bar animation.

If you have knowledge of backend languages like PHP then you can add PHP code and connect this search box with the database to retrieve data according to the user queries. I believe this small search bar program will help you a lot. If you like this program [Elastic Animation on Search Bar] and want to get source codes. You can easily get the source codes of this program.

You might like this: 

Animated Search Box [Source Codes]

To create this program [Elastic Animation on Search Bar]. First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file.

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Animated Search Box | CodingNepal</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
  </head>
  <body>
    <div class="search-box">
      <input type="text" placeholder="Type to search..">
      <div class="search-icon">
        <i class="fas fa-search"></i>
      </div>
<div class="cancel-icon">
        <i class="fas fa-times"></i>
      </div>
<div class="search-data">
</div>
</div>
<script>
      const searchBox = document.querySelector(".search-box");
      const searchBtn = document.querySelector(".search-icon");
      const cancelBtn = document.querySelector(".cancel-icon");
      const searchInput = document.querySelector("input");
      const searchData = document.querySelector(".search-data");
      searchBtn.onclick =()=>{
        searchBox.classList.add("active");
        searchBtn.classList.add("active");
        searchInput.classList.add("active");
        cancelBtn.classList.add("active");
        searchInput.focus();
        if(searchInput.value != ""){
          var values = searchInput.value;
          searchData.classList.remove("active");
          searchData.innerHTML = "You just typed " + "<span style='font-weight: 500;'>" + values + "</span>";
        }else{
          searchData.textContent = "";
        }
      }
      cancelBtn.onclick =()=>{
        searchBox.classList.remove("active");
        searchBtn.classList.remove("active");
        searchInput.classList.remove("active");
        cancelBtn.classList.remove("active");
        searchData.classList.toggle("active");
        searchInput.value = "";
      }
    </script>

  </body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  background: #664AFF;
}
::selection{
  color: #fff;
  background: #664AFF;
}
.search-box{
  position: relative;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  box-shadow: 5px 5px 30px rgba(0,0,0,.2);
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.search-box.active{
  width: 350px;
}
.search-box input{
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 50px;
  background: #fff;
  outline: none;
  padding: 0 60px 0 20px;
  font-size: 18px;
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.search-box input.active{
  opacity: 1;
}
.search-box input::placeholder{
  color: #a6a6a6;
}
.search-box .search-icon{
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
  height: 60px;
  width: 60px;
  background: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 60px;
  font-size: 22px;
  color: #664AFF;
  cursor: pointer;
  z-index: 1;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.search-box .search-icon.active{
  right: 5px;
  height: 50px;
  line-height: 50px;
  width: 50px;
  font-size: 20px;
  background: #664AFF;
  color: #fff;
  transform: translateY(-50%) rotate(360deg);
}
.search-box .cancel-icon{
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 25px;
  color: #fff;
  cursor: pointer;
  transition: all 0.5s 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.search-box .cancel-icon.active{
  right: -40px;
  transform: translateY(-50%) rotate(360deg);
}
.search-box .search-data{
  text-align: center;
  padding-top: 7px;
  color: #fff;
  font-size: 18px;
  word-wrap: break-word;
}
.search-box .search-data.active{
  display: none;
}

That’s all, now you’ve successfully created an Animated Search Box using HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any error/problem then please comment down or contact us from the contact page.

]]> https://www.codingnepalweb.com/animated-search-box-javascript/feed/ 19