https://github.com/victorcodess/hidden-search-widget

https://github.com/victorcodess/hidden-search-widget

Last synced: 11 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/victorcodess/hidden-search-widget
• Owner: victorcodess
• Created: 2022-03-10T14:18:47.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-03-10T16:21:21.000Z (over 4 years ago)
• Last Synced: 2025-03-12T09:44:20.541Z (over 1 year ago)
• Language: CSS
• Homepage: hidden-search-widget-mocha.vercel.app
• Size: 6.51 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: Readme.md

Awesome Lists containing this project

README

          

# Hidden Search Widget

The search widget provides a customizable search interface for websites. Intially, the input form is hidden in a cirlcle, with only the search icon being revealed. When the user clicks on the search icon, the search widget stretches and reveals the input form.

This is a project form a course by Brad Traversy.

## Screenshots

![search-widget](https://user-images.githubusercontent.com/84178696/157703666-21d25ef7-0315-4dbd-aeac-fb500723197c.gif)

## Lessons Learned

#### CSS

I learn about CSS transitions. I also learnt about positioning of elements on a page. 

#### JavaScript

I learnt about event listeners, which added a class to the icons when the user clicks an icon. 

I also learnt about DOM manipulations using the style selector to change the styling of css classes.