Days 4 | 50 Projects in 50 Days

#webdev #100daysofcode #html #css

Hidden Search Widget

I've been busy lately, so I haven't focused on this, but I'm back now. This was my 4th project - A Hidden Search Widget.

If you missed it, here’s my post on Days 1–3.

This project was actually easy, and I really enjoyed it. It’s the hidden search widget - when you click the search button, the bar expands, and clicking it again collapses it back.

This was my HTML structure

<div class="search">
  <input class="search-bar" type="text" placeholder="Search..." />
  <button id="search-button"><i class="fa-solid fa-search"></i></button>
</div>

I did mine by setting the div to flex so the input and button sit side by side. At first, the input’s width is zero, so it’s invisible. When the button is clicked, the input grows to 180px.

I also used the JavaScript method focus() (searchBar.focus();) so that the cursor jumps right into the input when it expands.

The instructor’s approach was different. He didn’t shrink the input all the way down. He kept it at 50px (same size as the button), then used position: absolute to place the button on top of it. On click, the input expands to 200px and the button shifts to its right using the transform property.

This project reminded me that there’s rarely only one way to do something. Both methods worked, but I liked seeing how the different techniques achieved the same effect.

After the last project felt a bit more complicated, this one was like a breather.