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'll now implement the password guide.

# Validation

We still need to validate the passwords. The guides don't serve to replace validation​ since we should continue to warn of an error even if the guide is no longer showing.

:root {
  --error-red: #DB4C3F;
  --light-grey: #F1F1F1;
}

body {
  font-family: Arial;
}

.wrapper {
  background: var(--light-grey);
  padding: 1rem;
  width: 20rem;
  margin: 0 auto;
}

.signup__field {
  border: none;
}

.signup__field__header {
  font-size: 13px;
  font-weight: bold;
}

.signup__field__inputs {
  display: flex;
  flex-direction: row;
}

.signup__field__inputs__input {
  flex-grow: 1;
  flex-shrink: 1;
  width: 2rem;
  background: white;
  border: 1px solid grey;
  padding: 0.2rem;
  margin-right: 0.5rem;
}

.signup__field__inputs__selection {
  font-size: 13px;
  width: 5rem;
}

.signup__field__inputs__input--error {
  border: 1px solid var(--error-red);
}

.signup__field__error {
  color: var(--error-red);
  font-size: 13px;
  margin-top: 0.5rem;
}

<!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>
        <div class="signup__field__inputs">
          <input type="text" class="signup__field__inputs__input signup__field__inputs__input--name" data-field="name" placeholder="First" aria-label="First Name" />
          <input type="text" class="signup__field__inputs__input signup__field__inputs__input--name" data-field="name" placeholder="Last" aria-label="Last Name" />
        </div>
        <div class="signup__field__error"></div>
      </fieldset>
      <fieldset class="signup__field signup__field--username">
        <legend class="signup__field__header">Choose your username</legend>
        <div class="signup__field__inputs">
          <input type="text" class="signup__field__inputs__input signup__field__inputs__input--username" data-field="username" aria-label="Username" />
        </div>
        <div class="signup__field__error"></div>
      </fieldset>
      <fieldset class="signup__field signup__field--password">
        <legend class="signup__field__header">Create a password</legend>
        <div class="signup__field__inputs">
          <input type="password" class="signup__field__inputs__input signup__field__inputs__input--password" data-field="password" aria-label="Password" />
        </div>
        <div class="signup__field__error"></div>
      </fieldset>
      <fieldset class="signup__field signup__field--confirm-password">
        <legend class="signup__field__header">Confirm your password</legend>
        <div class="signup__field__inputs">
          <input type="password" class="signup__field__inputs__input signup__field__inputs__input--confirm-password" data-field="confirmPassword" aria-label="Confirm Password" />
        </div>
        <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__inputs">
          <div class="signup__field__inputs__input signup__field__inputs__selection">Month</div>
          <input type="hidden" class="signup__field__inputs__input--birth-month" data-field="month" aria-label="Month"/>
          <input type="text" class="signup__field__inputs__input signup__field__inputs__input--birth-day" placeholder="Day" data-field="day" aria-label="Day" />
          <input type="text" class="signup__field__inputs__input signup__field__inputs__input--birth-year" placeholder="Year" data-field="year" aria-label="Year" />
        </div>
        <div class="signup__field__error"></div>
      </fieldset>
      <fieldset class="signup__field signup__field--phone">
        <legend class="signup__field__header">Mobile phone</legend>
        <div class="signup__field__inputs">
          <input type="text" class="signup__field__inputs__input signup__field__inputs__input--phone" data-field="phoneNumber" aria-label="Phone" />
        </div>
        <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>
        <div class="signup__field__inputs">
          <input type="text" class="signup__field__inputs__input signup__field__inputs__input--current-email" data-field="email" aria-label="Email" />
        </div>
        <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 validatePassword(password) {
  if (!password) {
    throw new ValidationError('Password cannot be empty');
  }
  if (password.length < 6) {
    throw new ValidationError('Password length too short');
  }
}

function validateConfirmPassword(password) {
  const currentPassword = document.getElementsByClassName('signup__field__inputs__input--password')[0].value;
  if (password && password !== currentPassword) {
    throw new ValidationError('Password did not match');
  }
}

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,
  'password': validatePassword,
  'confirmPassword': validateConfirmPassword
}

function validate(inputElement) {
  const field = inputElement.dataset.field;

  if (field === 'password') {
    const confirmPassword = document.getElementsByClassName('signup__field__inputs__input--confirm-password')[0];
    validate(confirmPassword);
  }

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

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

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


codemirror

Changelist
---------
- Some basic validation rules
- The "Confirm Password" field compares the value in the password field for validation.
- Since these are the only fields that have validation dependencies, we need to run validation on both upon change to either.
  - So when the validation for `password` is run, the `confirmPassword` element has to be selected and validated against. And vice versa.
  - Previously, our `validate` function took an `event` as the parameter. We want to reuse the function, and `confirmPassword` won't be attached to an event. So we have it accept the HTML element directly.
  - This means the listener can't be `validate`. Listener methods are called with `event` arguments, so we use an anonymous function that calls `validate` with `event.target`.
  
# Guide
The guide is first displayed when we focus the input, is updated upon every key stroke and goes away upon blur. 

Let's get back to something we've missed: the password guide

Welcome

Building a Dropdown Menu

Building the Autocomplete Search

Building Tooltips

Building an Autovalidating Form

Building an Infinite List

From Toy Components to Production

Guide to implementing Rules for Password

Validation

Changelist