Gain insights into building real-world components using JavaScript. Delve into dropdown menus, auto-validating forms, autocomplete search, infinite scroll, and tooltips to tackle common frontend challenges seamlessly.

Learn to apply your introductory knowledge of HTML, CSS, and JavaScript to build beautiful, real-world components. In this course, you'll go through the process of developing several complex components, including:

- eBay's dropdown menu
- Gmail's auto-validating form
- Google's main autocomplete enabled search
- Twitter's infinitely scrolling list
- Medium's tooltips

You'll learn how to approach common frontend challenges, what questions to ask yourself, how to design solutions once you've thought of them, how to debug and work with mistakes, and more.

The end-goal is to empower you to look at anything you see on a website and be able to say, "I can build that!"

Intermediate JavaScript: Building Frontend Components

# The document structure
Let's layout the minimum amount of HTML needed to have something to work with as we build out the functionality. Remember, we're focusing on JavaScript first for this component.

The search component looks like it can be split up into three main sub-components:
- The search bar where the input and icon are
- The autocomplete results
- The buttons

The search bar will consist of the input element and something (maybe a `div`, maybe a `button`) for the microphone icon (whatever it does isn't within the scope of this project, but we'll account for its presence nonetheless).

The autocomplete results look like it can just contain an unordered list as the sole element. Unordered in this case means that HT​ML's `ul`, as opposed to `ol` -- ordered list. The name shouldn't be taken too seriously. Its meaning is closer to un-numbered-by-default. The buttons are just two buttons, as pointed out in the scoping phase. We'll have to anticipate that it'll need to blend in with the autocomplete results when they show up. We should be able to manipulate it as required with JavaScript.

# The HTML
Let's write some code.

Let's set the template as a framework to begin building Google's Autocomplete Functionality.

Welcome

Building a Dropdown Menu

Building the Autocomplete Search

Building Tooltips

Building an Autovalidating Form

Building an Infinite List

From Toy Components to Production

Setting up a Framework to build Google's Autocomplete

The document structure #