Card Carousel Using Javascript | Frontend Everything - 2022

  

Neumorphism Search Bar in HTML, CSS & JavaScript | Web Development Project | Frontend everything

Hello Everyone 👋Welcome to My New Blog. Today We have made a Neumorphism Search Bar with the help of HTML, CSS, and JavaScript |

I am Piyush, Sharing About Web development Daily. You can also check out me at @frontendeverything.

Let's start making this neuromorphic search bar step by step.

Video  of the project,

So that was the preview now let us start making the project 😄 First, we will code HTML then CSS and javascript, and also I have shared codepen ink to make it easier for you.

HTML 🎈( step - 1)

In HTML we have made a div for the container. And Used <form> tag for the input field for better interaction.

 <div class="container">  
  <form autocomplete="off">  
   <div class="finder">  
    <div class="finder__outer">  
     <div class="finder__inner">  
      <div class="finder__icon" ref="icon"></div>  
      <input class="finder__input" type="text" name="q" />  
     </div>  
    </div>  
   </div>  
  </form>  
 </div>  

After the HTML we will design the Neumorphism Search Bar!

CSS🎈( step - 2)

 html,  
 body {  
  padding: 0;  
  margin: 0;  
  color: #292929;  
  background-color: #eaeaea;  
 }  
 .container {  
  text-align: center;  
  color: #2c3e50;  
  width: 100%;  
  height: 100%;  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  flex-direction: column;  
 }  
 form {  
  transition: all 0.5s;  
  position: absolute;  
  top: 50%;  
  transform: translateY(-50%);  
 }  
 .finder {  
  border: 1px solid #fff;  
  background-color: #f6f5f0;  
  border-radius: 15px;  
  padding: 8px;  
  box-shadow: 9px 9px 16px rgba(189, 189, 189, 0.6), -9px -9px 16px rgba(255, 255, 255, 0.5);  
 }  
 .finder__outer {  
  display: flex;  
  width: 600px;  
  padding: 1.5rem 2rem;  
  border-radius: 10px;  
  box-shadow: inset 10px 10px 15px -10px #c3c3c3, inset -10px -10px 15px -10px #ffffff;  
 }  
 .finder__inner {  
  display: flex;  
  align-items: center;  
  position: relative;  
  flex: 1;  
 }  
 .finder__form {  
  flex: 1;  
  height: calc(100% + 3rem);  
 }  
 .finder__input {  
  height: calc(100% + 3rem);  
  border: none;  
  background-color: transparent;  
  outline: none;  
  font-size: 1.5rem;  
  letter-spacing: 0.75px;  
 }  
 .finder__icon {  
  width: 40px;  
  height: 40px;  
  margin-right: 1rem;  
  transition: all 0.2s;  
  box-shadow: inset 0 0 0 20px #292929;  
  border-radius: 50%;  
  position: relative;  
 }  
 .finder__icon:after, .finder__icon:before {  
  display: block;  
  content: "";  
  position: absolute;  
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);  
 }  
 .finder__icon:after {  
  width: 10px;  
  height: 10px;  
  background-color: #292929;  
  border: 3px solid #f6f5f0;  
  top: 50%;  
  position: absolute;  
  transform: translateY(-50%);  
  left: 0px;  
  right: 0;  
  margin: auto;  
  border-radius: 50%;  
 }  
 .active .finder__icon:after {  
  border-width: 10px;  
  background-color: #f6f5f0;  
 }  
 .finder__icon:before {  
  width: 4px;  
  height: 13px;  
  background-color: #f6f5f0;  
  top: 50%;  
  left: 20px;  
  transform: rotateZ(45deg) translate(-50%, 0);  
  transform-origin: 0 0;  
  border-radius: 4px;  
 }  
 .active .finder__icon:before {  
  background-color: #292929;  
  width: 6px;  
  transform: rotateZ(45deg) translate(-50%, 25px);  
 }  
 .processing .finder__icon {  
  transform-origin: 50%;  
  animation: spinner 0.3s linear infinite;  
  animation-delay: 0.5s;  
 }  
 .active .finder__icon {  
  transform: translateY(-5px);  
 }  
 @keyframes spinner {  
  0% {  
   transform: rotateZ(45deg);  
  }  
  100% {  
   transform: rotateZ(405deg);  
  }  
 }  

Now we have done the CSS coding as well, now let's move to javascript. in javascript, we have not done enough coding. we have written for making buttons work.

JavaScript🎈( step - 3)

 const input = document.querySelector(".finder__input");  
 const finder = document.querySelector(".finder");  
 const form = document.querySelector("form");  
 input.addEventListener("focus", () => {  
  finder.classList.add("active");  
 });  
 input.addEventListener("blur", () => {  
  if (input.value.length === 0) {  
   finder.classList.remove("active");  
  }  
 });  
 form.addEventListener("submit", (ev) => {  
  ev.preventDefault();  
  finder.classList.add("processing");  
  finder.classList.remove("active");  
  input.disabled = true;  
  setTimeout(() => {  
   finder.classList.remove("processing");  
   input.disabled = false;  
   if (input.value.length > 0) {  
    finder.classList.add("active");  
   }  
  }, 1000);  
 });  

All the coding part is done, now let us see the final output, and also below I have mentioned the codepen link.

Final Output

The codepen link is here for making your work easier!

Click here for the code!

.

.

project creator: Tran Dinh Trung

.

If you found any value in this blog you can support me by buying me a coffee.

.

.

.

Thank You For Scrolling Till here 😊. If You gain any knowledge then do checkout me at @frontendeverything. I am Piyush 🎉 I provide Content related to programming, technology, web development  Daily.

.

More blogs you should give a check!

• Pexels Website Clone With HTML< CSS and Javascript
• Word Counter In Angular JS
• Responsive Newsletter in CSS
• Dark And Night mode toggle button in javascript
• Best Youtube Channels For Learning Coding
• Top-notch Project ideas For HTML< CSS< Javascript

• Best Platform To sell your Website Templates
• Google Homepage Clone With Html and CSS