50projectsIn50days – Day 4: Hidden Search

A search bar that has an interesting animation inside it. The changes happen when the “active” selector is used. There are two, one for the input, and other for the button:

.search.active .input {
    width: 200px;
}

.search.active .btn {   
    transform: translate(198px);
}

Is a simple project that helps to understand how the transform property works. As you can read in the Mozilla Docs

The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.

Developer Mozilla Docs

in this case we are translating the button making int bigger. The interactivity is quite easy. After select the search and the button we add an Event Listener ‘click’ to the button, when it happens the class “search” will be changing from “search” to “search active”.

The JavaScript Code is the following:

const search = document.querySelector('.search')
const btn = document.querySelector('.btn')
const input = document.querySelector('input')

btn.addEventListener('click', () => {
    search.classList.toggle('active')
    input. Focus()
})

You can see the code in this GitHub Repository: 04.hidden_search and the demo of the project is here: Hidden Search