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

We now have a basic form, some JavaScript to execute validation on each input at the correct time, a way to distinguish which field is which, and a set of validation rules to apply to each one. Let's put the pieces together now!


.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--name" data-field="name" placeholder="First" aria-label="First Name" />
        <input type="text" class="signup__field__input signup__field__input--name" data-field="name" 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" data-field="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" data-field="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" data-field="confirmPassword" 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" data-field="month" aria-label="Month"/>
        <input type="text" class="signup__field__input signup__field__input--birth-day" placeholder="Day" data-field="day" aria-label="Day" />
        <input type="text" class="signup__field__input signup__field__input--birth-year" placeholder="Year" data-field="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" data-field="phoneNumber" 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" data-field="email" aria-label="Email" />
        <div class="signup__field__error"></div>
      </fieldset>
    </form>
  </div>
</body>
</html>


class ValidationError extends Error {
  constructor(message) {
    super();
    this.message = message;
  }
}

function validateName(name) {
  const nameRegex = /^[a-zA-Z]+$/;
  if (!nameRegex.test(name)) {
    throw new ValidationError('Please enter a valid name');
  }
}

function validateEmail(email) {
  const emailRegex = /^[a-zA-Z0-9]{1}[a-zA-Z0-9@._-]+[a-zA-Z]$/;
  if (!emailRegex.test(email)) {
    throw new ValidationError('Please enter a valid email');
  }
  const necessaryEmailCharacters = ['@', '.'];
  for (const necessaryEmailCharacter of necessaryEmailCharacters) {
    if (!email.includes(necessaryEmailCharacter)) {
      throw new ValidationError('Please enter a valid email');
    }
  }
}

function validateUsername(username) {
  const usernameRegex = /^[a-zA-Z0-9._]+$/;
  if (!usernameRegex.test(username)) {
    throw new ValidationError('Please enter a valid username');
  }
}

function validateDay(day) {
  const dayRegex = /^[0-9]{1,2}$/;
  if (!dayRegex.test(day)) {
    throw new ValidationError('Please enter a valid day');
  }
}

function validateYear(year) {
  const yearRegex = /^[0-9]{4}$/;
  if (!yearRegex.test(year)) {
    throw new ValidationError('Please enter a valid year');
  }
}

function validatePhoneNumber(phoneNumber) {
  const FORMATTING_CHARACTERS = ['(', ')', '-'];
  function validateFormattedNumber() {
    const regex = /^[0-9(]{1}[0-9)-]+[0-9]$/;
    const hasOpeningParentheses = phoneNumber.includes('(');
    const hasClosingParentheses = phoneNumber.includes(')');
    if (hasOpeningParentheses && !hasClosingParentheses) {
      throw new ValidationError('Phone number missing closing parentheses');
    }
    if (!regex.test(phoneNumber)) {
      throw new ValidationError('Please enter valid phone number');
    }
  }
  function validateNonformattedNumber() {
    const regex = /^[0-9]+$/;
    if (!regex.test(phoneNumber)) {
      throw new ValidationError('Please enter valid phone number');
    }
  }
  for (const formattingCharacter of FORMATTING_CHARACTERS) {
    if (phoneNumber.includes(formattingCharacter)) {
      return validateFormattedNumber();
    }
  }
  validateNonformattedNumber();
}

const validationMapping = {
  'name': validateName,
  'email': validateEmail,
  'username': validateUsername,
  'day': validateDay,
  'year': validateYear,
  'phoneNumber': validatePhoneNumber
}

function validate(event) {
  const inputElement = event.target;

  const field = inputElement.dataset.field;
  
  if (field === 'password') {
    // TODO: Something special
    return;
  }

  const errorMessageElement = event.target.parentElement.getElementsByClassName('signup__field__error')[0];
  try {
    validationMapping[field](inputElement.value); 
    errorMessageElement.innerHTML = '';
    inputElement.classList.remove('signup__field__input--error');
  } catch (err) {
    if (!(err instanceof ValidationError)) {
      // Log real error
      throw err 
    }
    errorMessageElement.innerHTML = err.message;
    inputElement.classList.add('signup__field__input--error');
  }
}

const inputs = document.getElementsByClassName('signup__field__input');

for (const input of inputs) {
  input.onblur = validate;
}


codemirror

Changelist
----------
- Create a unique error class
  - This lets us do things only with expected errors that arise from validation by checking `instanceof`.
- Introduce a `try/catch` for validation.
  - The `catch` clause is where the error view is rendered. 
  - We could have used enums and passed back something like `{status: 'error', message: 'blah'}` for errors and `{status: 'success'}` to signal passing validation, but if the set of return possibilities are many different ways of specifying a type of error and one way of specifying success, we should make use of error handling which covers this exact case. We want to avoid defining a new ad-hoc object, its schema (what fields it contains) is just another thing to keep track of.
- Each input maps to the validation rule through a mapping.
  - Cleaner than a switch statement.
- `validate` functions that match the previous lesson, except they throw an error when validation fails instead​ of returning `false`.

Hopefully, this all makes sense. I skipped `password` and `confirmPassword` for now because that uses some special handling. Try playing around with this form and check for yourself.

When you implement a new rule, how do you check that it works? Testing it manually doesn't give us confidence, so let's adjust our test and see if it passes.

The first step to getting error messages to show up when validation fails

Welcome

Building a Dropdown Menu

Building the Autocomplete Search

Building Tooltips

Building an Autovalidating Form

Building an Infinite List

From Toy Components to Production

Displaying Actual Errors

Changelist