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

Let's write some actual code! The first thing we'll be doing is adjusting positions and dimensions:

.search {
  width: 36rem;
  margin: 0 auto;
  margin-top: 5rem;
  background: blue;
}

.search__bar__input {
  width: calc(100% - 1.9rem);
  padding: 0.8rem;
}

.search__actions {
  text-align: center;
}

// Server

function getRandomString({length}) { 
  const characterChoices = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 "; 
  const characters = [];
  while (characters.length < length) {
    const randomIndex = Math.floor(Math.random() * characterChoices.length);
    characters.push(characterChoices[randomIndex]);
  }
  return characters.join('');
}

function getRandomInteger({min, max}) {
  return Math.floor(Math.random() * (max - min) + min);
}

function generateSuggestion(prefix) {
  const RATIO_EXACT_MATCH = 0.3;
  const RATIO_AUTOCORRECT = 0.1;
  
  if (Math.random() < RATIO_AUTOCORRECT) {
    return getRandomString({ length: getRandomInteger({min: 1, max: prefix.length}) })
  }
  
  if (Math.random() < RATIO_EXACT_MATCH) {
    return prefix;
  }

  return prefix + getRandomString({ length: getRandomInteger({min: 1, max: 10}) })
}

function getAutocompleteHandler(data) {
  const MAX_CHARS = 10;
  const NUM_AUTOCOMPLETE_RESULTS = 10;
  const RATIO_AUXILLERY_DATA = 0.1;
  
  if (data.length > MAX_CHARS) {
    return [];
  }
  
  const results = [];
  while (results.length < NUM_AUTOCOMPLETE_RESULTS) {
    const suggestion = generateSuggestion(data)
    if (results.find(result => result.suggestion === suggestion)) {
      continue;
    }
    
    if (Math.random() < RATIO_AUXILLERY_DATA) {
      for (let i = 0; i < 2; i++) {
        results.push({
          suggestion, 
          auxillery: getRandomString({ length: getRandomInteger({min: 5, max: 15}) }) 
        });
      }
    } else {
      results.push({ suggestion, auxillery: "" });
    }
  }
  return results;
}

const endpoints = {
  "/": {
    "get": () => "hello world"
  },
  "/autocomplete": {
    "get": getAutocompleteHandler
  }
}

// API library

function getFunction(url, data, callback) {
  const domain = url.substring(0, url.indexOf("/"));
  const endpoint = url.substring(url.indexOf("/"), url.length);

  callback(endpoints[endpoint]["get"](data));
}

const api = {
  get: getFunction
};


<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div class="search">
    <div class="search__bar">
      <input type="text" class="search__bar__input" />
    </div>
    <div class="search__suggestions">
      <ul class="search__suggestions__list">
      </ul>
    </div>
    <div class="search__actions">
      <button class="search__actions__action search__actions__action--search">Google search</button>
      <button class="search__actions__action search__actions__action--lucky">I'm Feeling Lucky</button>
    </div>
  </div>
</body>
</html>

codemirror

It's a bit awkward to demonstrate an example with too much height change in an iframe like above, so I'll adapt the component to have less margin. On a regular webpage, 5rem is probably too little and leaves too much space below.

Two things have made reappearances from the last lesson:
- Coloring of subcomponents in development. There's a pixel of a margin between the search input and the component edges.
- `calc` to dynamically adjust the width. If it had just been width:100%, the padding would make the input look as if it extends past the `search` component, and the buttons would no longer look centered.

Next, we'll format the autosuggest. We need to remove the default list decorations, give each row the greyish hover that Google has, and put a bit of padding between each item.

In this lesson, we'll be modifying our backend component look 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

Further Styling an Autocomplete Enabled Engine