Build a dropdown menu, tooltip, auto-validation form, and an infinitely scrolling list, similar to the Twitter news feed.

Become a Front-end Developer

In this module, we’ll learn to apply our introductory knowledge of HTML, CSS, and JavaScript to build beautiful, real-world components. We'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, and Medium's tooltips.
We'll also learn how to approach common frontend challenges—what questions to ask, how to design solutions once we've thought of them, how to debug and work with mistakes, and more. By the end of this module, you’ll have acquired sufficient skills to build any website.

Projects

Let's do a little exploring to account for all the edge cases that aren't apparent at first, but might affect our implementation.

## Case 1:
When there exist multiple results of the same string, the detail is added after a hyphen

## Case 2:
Results seem to assume for some autocorrect, and therefore won't always be prefixed by what's in the input bar. In such cases, the entire result is bolded.

## Case 3:
Results are shown for every character input, including backspace, and only the most recent is shown. Google appears to abort outstanding​ requests if what's in the input bar is no longer the same. This is performance optimization we can ignore for our component.

Let's do a little exploring to account for all the edge cases that aren't apparent at first, but might affect our implementation.

# Case 1:
When there exist multiple results of the same string, the detail is added after a hyphen

# Case 2:
Results seem to assume for some autocorrect, and therefore won't always be prefixed by what's in the input bar. In such cases, the entire result is bolded.

# Case 3:
Results are shown for every character input, including backspace, and only the most recent is shown. Google appears to abort outstanding​ requests if what's in the input bar is no longer the same. This is performance optimization we can ignore for our component.

Before we begin building, we'll analyze Google search Engine's Autocomplete Functionality which is the component that we're aiming to build.

A Dropdown Menu

Autocomplete Search

Tooltips

Autovalidating Form

An Infinite Scrolling List

From Toy Components to Production

Conclusion

Examining Google's Autocomplete Functionality

Case 1: #

Case 2: #

Case 3: #