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

## Clicking displays the Tooltip
There's an event JavaScript allows to be listened for -- `onselect`. However, [the docs](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onselect) show that it only applies to text in `textarea` or `input` elements. We're going to have to rely on `onmouseup` and `onmousedown` then. How about if the user triggered `onmousedown` *and* `onmouseup` on an `article` div, and it wasn't the same position. That must imply some text was selected.


# Clicking displays the Tooltip
There's an event JavaScript allows to be listened for -- `onselect`. However, [the docs](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onselect) show that it only applies to text in `textarea` or `input` elements. We're going to have to rely on `onmouseup` and `onmousedown` then. How about if the user triggered `onmousedown` *and* `onmouseup` on an `article` div, and it wasn't the same position. That must imply some text was selected.


In this lesson, we will try to fix the behavior of our tooltip and making sure it doesn't display itself by merely clicking on the text.

Welcome

Building a Dropdown Menu

Building the Autocomplete Search

Building Tooltips

Building an Autovalidating Form

Building an Infinite List

From Toy Components to Production

Bug 2: Tooltip Displays on Clicking

Clicking displays the Tooltip