📜 Hidden Search Widget

Welcome to my GitHub project! In this repository, I've created a cool and interactive web widget that allows you to add a hidden search bar to your website or application. 🔍

🌟 Features

• 🖱️ Interactive Button: Click to reveal the hidden search bar.
• 🌐 Search Functionality: Smooth transition effect when the search bar expands and contracts.
• 🎨 Stylish Design: Modern look using HTML, CSS, and JavaScript.

🛠️ Technologies Used

• HTML: Structure of the web page.
• CSS: Styling and animations.
• JavaScript: Interactivity and functionality.

📂 Project Structure

📦 hidden-search-widget
├── 📜 index.html
├── 📜 styles.css
└── 📜 script.js

🚀 Getting Started

Follow these steps to get a copy of the project up and running on your local machine.

📥 Installation

1. Clone the repository:

2. Navigate to the project directory:

▶️ Usage

1. Open
   index.html
   in your favorite web browser.
2. Click the search button to reveal the search bar and see the transition effect in action!

✨ Made with ❤️ by good-gis ✨

🔧 How It Works

This widget features a hidden search bar that is activated by clicking a button with a search icon from Font Awesome. When the button is clicked, a JavaScript event toggles a class that adds a CSS transition, causing the search bar to expand while moving the button using a transform translate X. Clicking the button again will shrink the search bar back.

The project leverages CSS transitions for smooth animations and a small amount of JavaScript to handle the event and class toggling.

Happy coding! 💻