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

# Moving the tooltip to Javascript
Let's move the tooltip generation into JavaScript and have it replace the dot that we were testing with.


.tooltip {
  width: 10rem;
  height: 2rem;
  background: black;
  text-align: center;
  position: absolute;
}

.tooltip__icon {
  width: 1.8rem;
  height: 2rem;
  fill: white;
  padding: 0.1rem;
  text-align: center;
}

.tooltip__icon:last-child {
  border-left: 1px solid white;
}

.article {
  margin: 0 auto;
  width: 500px;
  background: yellow;
  margin-top: 5rem;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div class="article">
    <div>
    we’ll begin by scoping the
    </div>
    <div>
      what what
    </div>
  </div>
</body>
</html>

codemirror

I also gave the text some properties so that it has some space for further confirmation that the tooltip is positioned correctly. Since absolute positioning's top and left attributes tell the tooltip to align its top-left corner at the specified coordinates, this appears to be working as expected.

# Avoiding multiple tooltips
We haven't written any code to tell the tooltip to disappear and reappear when different text is highlighted, so it's expected that multiple selections make the tooltip show up multiple times. This might be annoying for testing, so rather than save this for later, we'll fix it now.

We'll refactor to move the element creation at the root level, so it's not created every time the event happens. The only things that change are its existence on the DOM and the top and left attributes.

As you can see, the Tooltip that currently appears needs to be repositioned. In this lesson, we will try to reposition it to get a neater look! 

Perfecting the Position

As you can see, the Tooltip that currently appears needs to be repositioned. In this lesson, we will try to reposition it to get a neater look!

Welcome

Building a Dropdown Menu

Building the Autocomplete Search

Building Tooltips

Building an Autovalidating Form

Building an Infinite List

From Toy Components to Production

Perfecting the Position

Moving the tooltip to Javascript #