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

# Multiline Highlight
There's a case where highlighting multiple lines make the tooltip appear in the middle of the line in which the highlight began. So it can fall outside the selected text.

My first thought is that we can get the width of the element surrounding the text and divide that by two for our x coordinate and whatever that Selection gives us for the `y` coordinate (at the beginning of selection). I inspect the rectangle that `selection.getRangeAt(0).getClientRects()[0]` gives, and compare it to when I highlight one line vs. multiple lines. I would expect the multiple line version to give a different height. But since that's not the case, I check the output of `getClientRects` and realize that it gives multiple rectangles when the selection calls for it. That makes a lot of sense since the shape of a multiline selection often can't be represented by one rectangle.

So the conditional logic for displaying the tooltip in the middle of the line that the selection started with is when `getClientRects` gives more than one rectangle, and the coordinates are given by the width of the surrounding node, and the `y` coordinate of the first rectangle.

In this lesson, we will try to fix the behavior of our tooltip on multiline highlights.

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 3: Multiline Highlights

Multiline Highlight