Hidden Search Widget Project

This project uses JavaScript and CSS transitions to display a search icon; when the icon is clicked, the search bar widens for typing.

Objective

• Use JavaScript event handlers to activate a transition that widens the search bar when the search icon button is clicked.
• Use CSS transitions and transform: translateX on the button so that it moves with the search bar after clicking.

hidden-search-widget.mov

Launch

View the Hidden Search Widget Project here: https://marisabrantley.github.io/hidden-search-widget/

Class

Brad Traversy's Udemy Course "50 Projects in 50 Days"
https://www.udemy.com/course/50-projects-50-days/