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

# What we have so far
So far, we've investigated if we can use constant character widths to determine the middle, and we've tried to use the `getSelection` method alone to provide all the information we need. 

We know that we'll certainly have to use *some* information from `getSelection`, since it reliably gives us the selected characters. So the problem becomes this: given a string of characters in an HTML node, find the x and y offsets of the middle (so that we can have absolute position for the tooltip with `top` and `left` properties). 

We can divide this into subproblems. If we can find the x and y offsets of *any* HTML element, one idea is to wrap the selected text in a span, get the x and y offsets and the width of that span, and consider the middle to be `(x + width/2, y)`. 

Googling "get x and y of html node," I find the API `getBoundingClientRect()`, which has the properties we're looking for. I'm not entirely sure how to determine if the selection spans multiple lines. Maybe we can use the `height` to determine that. We'll see.

Let's write some code to test if this method works.

I'm using `console.log` to print often, and continuously test if my intermediary steps work, like getting the selected text.

One of the most interesting aspects was that the tooltip appears in the middle of our cursor. How can we do that? Let's find out in this lesson. 

How to Determine the Middle of Cursor?

One of the most interesting aspects was that the tooltip appears in the middle of our cursor. How can we do that? Let's find out in this lesson.

Welcome

Building a Dropdown Menu

Building the Autocomplete Search

Building Tooltips

Building an Autovalidating Form

Building an Infinite List

From Toy Components to Production

How to Determine the Middle of Cursor?

What we have so far #