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 is the goal of adding auto validation to forms?

When forms validate inputs for users before they hit submit, it's to prevent frustration when they later hit submit with improper inputs and are rejected. The second worst user experience you can provide is to wait until the user has filled out all the information and hits submit, only to be rejected for an unclear reason and forced to re-enter information- I'll get to the worst in a second.

Therefore, let's only validate when the user appears to be finished with that input.

There are some exceptions to this rule, and that's where the requirements are ambiguous. Everyone knows what emails are supposed to look like, but different websites can have different requirements for passwords depending on their audience, risk of security breaches (it's not the end of the world if someone gains access to your yoga membership account, ​but it could be disastrous if they do gain access to your bank account). It's reasonable to show the requirements of inputs with varying rules before the user enters them -- or better yet, as the user enters them:

In this lesson, let's choose which rules will be used to validate various user input types such as birthday, name and username. 

Rules for User Input Categories

In this lesson, let's choose which rules will be used to validate various user input types such as birthday, name and username.

Welcome

Building a Dropdown Menu

Building the Autocomplete Search

Building Tooltips

Building an Autovalidating Form

Building an Infinite List

From Toy Components to Production

Rules for User Input Categories

What is the goal of adding auto validation to forms? #