Intermediate JavaScript: Building Frontend Components/

...

/

Final Styling Touches to the Autocomplete Enabled Engine

Final Styling Touches to the Autocomplete Enabled Engine

In this lesson, we continue to make our backend component look like Google's.

We'll cover the following...

Adding a microphone icon

Let’s add the little microphone icon.

Changelist #

  • Microphone
    • Since the text shouldn’t extend to the icon, we added extra padding to the text field
      • Since we’ve introduced a dependency between two elements, we should make that clear in the code. So I took the width of the microphone as a variable, and the padding is calced to that width along with the default width (0.6rem).
    • We’re using absolute positioning so that it always sticks to the right side of the input bar, and since absolute positioning is relative to the first parent that has a non-static (default) position, we’re setting the search bar position relative.
      • This
...