Build a dropdown menu, tooltip, auto-validation form, and an infinitely scrolling list, similar to the Twitter news feed.

Become a Front-end Developer

In this module, we’ll learn to apply our introductory knowledge of HTML, CSS, and JavaScript to build beautiful, real-world components. We'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, and Medium's tooltips.
We'll also learn how to approach common frontend challenges—what questions to ask, how to design solutions once we've thought of them, how to debug and work with mistakes, and more. By the end of this module, you’ll have acquired sufficient skills to build any website.

Projects

## Adding a microphone icon
Let's add the little microphone icon.



:root {
  --light-grey: #ccc;
  --item-hover-grey: #E6E6E6;
  --button-grey: #757575;
  --button-bg-grey: #f1f1f1;
  --microphone-width: 1.5rem;
}

.search {
  width: 36rem;
  margin: 0 auto;
  margin-top: 5rem;
  font-family: Arial;
}

.search__bar {
  position: relative;
}

.search__bar__input {
  width: calc(100% - 2.6rem);
  padding: 0.6rem;
  padding-right: calc(var(--microphone-width) + 0.6rem);
  font-size: 16px;
  font-family: Arial;
}

.search__bar__microphone {
  width: var(--microphone-width);
  position: absolute;
  right: 0;
  top: 0.6rem;
}

.search__suggestions {
  border: 0.5px solid var(--light-grey);
  border-top: 0;
  border-bottom: 0;
  font-size: 16px;
  font-family: Arial;
}

.search__suggestions__list {
  line-height: 1.5;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.search__suggestions__list__result {
  padding-left: 1rem;
}

.search__suggestions__list__result:last-child {
  border-bottom: 1px solid var(--light-grey);
}

.search__suggestions__list__result:hover {
  background: var(--item-hover-grey);
}

.search__actions {
  text-align: center;
}

.search__actions__action {
  height: 2rem;
  font-size: 13px;
  font-weight: bold;
  font-family: Arial;
  color: var(--button-grey);
  margin-top: 2rem;
  background: var(--button-bg-grey);
  padding: 0.4rem 2rem;
}


// 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: 10}) }) 
        });
      }
    } 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" />
      <img class="search__bar__microphone" src="/udata/1k67lQRoagd/microphone.png" />
    </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

### Changelist
- Microphone
  - Since the text shouldn't extend to the icon, we added extra padding to the text field
    - Since we've introduced a dependency between two elements, we should make that clear in the code. So I took the width of the microphone as a variable, and the padding is `calc`ed to that width along with the default width (0.6rem).
  - We're using absolute positioning so that it always sticks to the right side of the input bar, and since absolute positioning is relative to the first parent that has a non-static (default) position, we're setting the search bar position relative.
    - This div seemingly had no purpose until now. I hadn't considered this case before when I was laying out the divs, but because we liberally added divs, our HTML is flexible enough to handle all sorts of cases that come up.

# Adding a microphone icon
Let's add the little microphone icon.



## Changelist
- Microphone
  - Since the text shouldn't extend to the icon, we added extra padding to the text field
    - Since we've introduced a dependency between two elements, we should make that clear in the code. So I took the width of the microphone as a variable, and the padding is `calc`ed to that width along with the default width (0.6rem).
  - We're using absolute positioning so that it always sticks to the right side of the input bar, and since absolute positioning is relative to the first parent that has a non-static (default) position, we're setting the search bar position relative.
    - This div seemingly had no purpose until now. I hadn't considered this case before when I was laying out the divs, but because we liberally added divs, our HTML is flexible enough to handle all sorts of cases that come up.


In this lesson, we continue to make our backend component look like Google's.

Final Styling Touches to the Autocomplete Enabled Engine

In this lesson, we continue to make our backend component look like Google's.

A Dropdown Menu

Autocomplete Search

Tooltips

Autovalidating Form

An Infinite Scrolling List

From Toy Components to Production

Conclusion

Final Styling Touches to the Autocomplete Enabled Engine

Adding a microphone icon

Changelist #