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

In this lesson, we'll address any outstanding functionality that relies on JavaScript.

# Outstanding Functionality
- Using a template for the suggestion and auxiliary data.
  - We need to insert it between `<li>` elements, so it conforms to regular HTML inside a `<ul>`, which is where we're inserting these suggestions.
- Determine which sections need to be bolded
  - Using a comparison between the input value and the given suggestion
- Add classes to elements as necessary for them to change their styles dynamically
  - The buttons look like they merge into the autosuggestions list, so I plan to apply a `--autosuggest` modifier class to the element when the autosuggestion results are shown.
  
# Using a template
Wrapping API​ results into a template has gotten a lot easier since ES6 introduced template literals. The alternative before this was to just concatenate sections of the template with dynamic variables, either through `+` or have them in a list to join. For example, `"<div>" + name + "</div">`. With template literals, we just use `${variable}` anywhere in our template string.

In this lesson, we'll address any outstanding functionality that relies on JavaScript.

# Outstanding Functionality
- Using a template for the suggestion and auxiliary data.
  - We need to insert it between `<li>` elements, so it conforms to regular HTML inside a `<ul>`, which is where we're inserting these suggestions.
- Determine which sections need to be bolded
  - Using a comparison between the input value and the given suggestion
- Add classes to elements as necessary for them to change their styles dynamically
  - The buttons look like they merge into the autosuggestions list, so I plan to apply a `--autosuggest` modifier class to the element when the autosuggestion results are shown.
  
# Using a template
Wrapping API​ results into a template has gotten a lot easier since ES6 introduced template literals. The alternative before this was to just concatenate sections of the template with dynamic variables, either through `+` or have them in a list to join. For example, `"<div>" + name + "</div">`. With template literals, we just use `＄{variable}` anywhere in our template string.

Let's style the autocomplete suggestions in this lesson to make them look more like Google's.

Welcome

Building a Dropdown Menu

Building the Autocomplete Search

Building Tooltips

Building an Autovalidating Form

Building an Infinite List

From Toy Components to Production

Formatting the Autocomplete Suggestions

Outstanding Functionality