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

Returning to our component, we last left it in a state that was ready to accept validation rules. If you'll remember, we wrote some basic code to show an error on each input field upon blur, as if validation failed.

.signup__field__input--error {
  border: 1px solid red;
}

.signup__field__error {
  color: red;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div class="wrapper">
    <form class="signup">
      <fieldset class="signup__field signup__field--name">
        <legend class="signup__field__header">Name</legend>
        <input type="text" class="signup__field__input signup__field__input--firstname" placeholder="First" aria-label="First Name" />
        <input type="text" class="signup__field__input signup__field__input--firstname" placeholder="Last" aria-label="Last Name" />
        <div class="signup__field__error"></div>
      </fieldset>
      <fieldset class="signup__field signup__field--username">
        <legend class="signup__field__header">Choose your username</legend>
        <input type="text" class="signup__field__input signup__field__input--username" aria-label="Username" />
        <div class="signup__field__error"></div>
      </fieldset>
      <fieldset class="signup__field signup__field--password">
        <legend class="signup__field__header">Create a password</legend>
        <input type="password" class="signup__field__input signup__field__input--password" aria-label="Password" />
        <div class="signup__field__error"></div>
      </fieldset>
      <fieldset class="signup__field signup__field--confirm-password">
        <legend class="signup__field__header">Confirm your password</legend>
        <input type="password" class="signup__field__input signup__field__input--confirm-password" aria-label="Confirm Password" />
        <div class="signup__field__error"></div>
      </fieldset>
      <fieldset class="signup__field signup__field--birthday">
        <legend class="signup__field__header">Birthday</legend>
        <div class="signup__field__selection">Month</div>
        <input type="hidden" class="signup__field__input signup__field__input--birth-month" aria-label="Month"/>
        <input type="text" class="signup__field__input signup__field__input--birth-day" placeholder="Day" aria-label="Day" />
        <input type="text" class="signup__field__input signup__field__input--birth-year" placeholder="Year" aria-label="Year" />
        <div class="signup__field__error"></div>
      </fieldset>
      <fieldset class="signup__field signup__field--phone">
        <legend class="signup__field__header">Mobile phone</legend>
        <input type="text" class="signup__field__input signup__field__input--phone" aria-label="Phone" />
        <div class="signup__field__error"></div>
      </fieldset>
      <fieldset class="signup__field signup__field--current-email">
        <legend class="signup__field__header">Your current email address</legend>
        <input type="text" class="signup__field__input signup__field__input--current-email" aria-label="Email" />
        <div class="signup__field__error"></div>
      </fieldset>
    </form>
  </div>
</body>
</html>


codemirror

# Selecting the right validator
To correctly validate each field, of course, we have to differentiate which one is being blurred and apply the rules for that specific field. 

Take a moment to inspect the code above. Without changing anything, how would you know which validation rule to apply in the `validate` function?

Back to our form!  In this lesson, we'll learn how to distinguish each field instead of showing the same error for each one.

Welcome

Building a Dropdown Menu

Building the Autocomplete Search

Building Tooltips

Building an Autovalidating Form

Building an Infinite List

From Toy Components to Production

Unique Errors for Each Field

Selecting the right validator #