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

# Styling
Let's put the finishing touches to our component.

We'll start with the styling. Comparing the tooltip we've built to the model Medium has, I notice they add some rounded corners, add some padding, and use a dimmer color for the divider, so it doesn't stand out so much as our's does.

:root {
  --tool-tip-color: #323230;
  --tool-tip-divider-color: #666;
}

.tooltip {
  user-select: none;
  width: 10rem;
  height: 2rem;
  background: var(--tool-tip-color);
  text-align: center;
  position: absolute;
  border-radius: 5px;
  padding: 0.2rem;
  padding-top: 0.5rem;
}

.tooltip__tail {
  width: 0; 
  height: 0; 
  position: absolute;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  
  border-top: 10px solid var(--tool-tip-color);
}

.tooltip__icon {
  vertical-align: bottom;
  display: inline-block;
  width: 2rem;
  height: 2rem;
  text-align: center;
}

.tooltip__divider {
  display: inline-block;
  width: 0.1rem;
  height: 80%;
  vertical-align: top;
  border-left: 1px solid var(--tool-tip-divider-color);
}

.tooltip__icon__svg {
  width: 100%;
  height: 100%;
  fill: white;
}

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

<html>
<head>
</head>
<body>
  <div class="article">
    <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget sem pellentesque, ultricies dolor egestas, malesuada mauris. Fusce lorem felis, egestas tincidunt purus et, sodales luctus lectus. Praesent a congue eros. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris vitae malesuada urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut in mauris justo. Curabitur rutrum, est nec viverra rutrum, dolor est volutpat dolor, vitae auctor urna nulla nec nibh. Nunc convallis libero luctus purus auctor, sed aliquet lectus fermentum. Nunc a massa ac sapien viverra consequat.
    </div>
    <br>
    <div>
      Aliquam arcu mi, vehicula a sodales ut, dictum sit amet ex. Sed nec enim sed elit dapibus porta at eu felis. Quisque faucibus vel sem in bibendum. Nulla dictum, nunc in mattis tincidunt, nisi sapien blandit metus, ut bibendum tortor metus non nunc. Duis eu ultricies risus, quis mollis magna. Duis efficitur congue ante ut imperdiet. Vestibulum at sodales eros. Etiam id dictum ligula.
    </div>
  </div>
</body>
</html>

codemirror

# Changelist
- Defined a divider color.
  - Sometimes, even if something is used once, it could make sense to create a variable for it. This is especially true if the context is unclear
- Separate divider into its own div
  - Since you can't set percentage heights for borders, I let the divider occupy its own div to do so. Otherwise, the border would've looked like this: 
  - ![](/api/collection/5750244981604352/5757334940811264/page/5655608640405504/image/5711312218750976)
  - I should note there's probably hacky ways to do it, like set a gradient that only has the middle 80% colored, and the rest is set to the background color to blend in. You want to avoid these sorts of solutions as much as possible, though. How do you recognize unconventional solutions? It simply comes from experience. Usually, it's something new you haven't done or seen before and makes you feel uneasy about its brittleness.
- Wrap the `svg`'s in divs
  - It is useful when defining excessive divs early on. In this case, our SVG content was not perfectly flush to the space it occupied, which made positioning more difficult
  - To demonstrate, this is the svg with the background set to blue:
  - ![](/api/collection/5750244981604352/5757334940811264/page/5655608640405504/image/5678807906254848)
- Add padding and rounded corners
  - Not much to say here. I will note, however, one small detail. Notice how I've defined `padding: x` and then `padding-top: y` right below it. To me, this is cleaner than `padding: y x x x`, which would've been equivalent. This is purely based on taste, though.

This lesson will help you learn how to make your tooltip look pretty so it delivers a great user experience!

Welcome

Building a Dropdown Menu

Building the Autocomplete Search

Building Tooltips

Building an Autovalidating Form

Building an Infinite List

From Toy Components to Production

Adding Styling

Styling