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

# Toggling submenu visibility
First thing's first: the submenu shouldn't be visible when a menu item isn't hovered over. Let's set the `display: none` property to be the default state, and when a menu item is hovered, it toggles back to `display: block`.

:root {
  --dark-grey: #333333;
  --light-grey: #555;
  --border-grey: #CFCFCF;
}

* {
  font-family: Roboto;
  box-sizing: border-box;
}

body {
  background: blue;
  height: 500px;
}

.menu {
  margin: 0 auto;
  width: 70rem;
  background: #F7F6F5;
  border-top: 1px solid var(--border-grey);
}

.menu__main {
  width: 90%;
  margin: 0 auto;
}

.menu__main__item {
  display: inline-block;
  padding: 0.5rem 2rem;
  border-bottom: 1px solid var(--border-grey);
}

.menu__main__item:hover {
  background: white;
  border-bottom: none;
  border-right: 1px solid #CFCFCF;
  border-left: 1px solid #CFCFCF;
  margin: 0 -1px;
}

.menu__main__item--current .menu__main__item__link {
  color: var(--dark-grey);
  border-bottom: 2px solid #333;
  padding-bottom: 0.3rem;
}

.menu__main__item__link {
  text-decoration: none;
  color: var(--light-grey);
  font-family: Roboto;
  font-size: 0.9rem;
  font-weight: 800;
}

.menu__main__item__link:hover {
  text-decoration: underline;
  color: #1C60BB;
}

.menu__sub {
  height: 18rem;
  background: white;
  display: none;
}

.menu__sub__categories {
  vertical-align: top;
  display: inline-block;
  width: calc(40% - 1rem - 2px);
  padding: 0.8rem;
  margin-left: 1rem;
}

.menu__sub__visual {
  display: inline-block;
  width: calc(60% - 2px);
  padding: 0.5rem;
  height: 100%;
}

.menu__sub__visual__img {
  width: 100%;
  height: 100%;
}

.menu__sub__categories__category {
  display: inline-block;
  width: calc(50% - 2px);
  vertical-align: top;
}

.menu__sub__categories__header {
  font-size: 0.9rem;
  border-bottom: 1px solid var(--border-grey);
  margin-right: 1rem;
  padding-bottom: 1rem;
}

.menu__sub__categories__items {
  list-style: none;
  padding: 0;
  line-height: 1.6rem;
  color: var(--light-grey);
}

.menu__sub__categories__item__link {
  text-decoration: none;
  color: var(--light-grey);
  font-size: 0.8rem;
  font-weight: 800;
}

.menu__sub__categories__item__link:hover {
  text-decoration: underline;
}

<html>
 <head>
   <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
 </head>
 <body>
  <div class="menu">
    <div class="menu__main">
      <div class="menu__main__item menu__main__item--current menu__main__item--home">
        <a class="menu__main__item__link" href="#">Home</a>
      </div><div class="menu__main__item menu__main__item--motors">
        <a class="menu__main__item__link" href="#">Motors</a>
      </div><div class="menu__main__item menu__main__item--fashion">
        <a class="menu__main__item__link" href="#">Fashion</a>
      </div><div class="menu__main__item menu__main__item--electronics">
        <a class="menu__main__item__link" href="#">Electronics</a>
      </div><div class="menu__main__item menu__main__item--toys">
        <a class="menu__main__item__link" href="#">Toys</a>
      </div><div class="menu__main__item menu__main__item--motors">
        <a class="menu__main__item__link" href="#">Motors</a>
      </div><div class="menu__main__item menu__main__item--fashion">
        <a class="menu__main__item__link" href="#">Fashion</a>
      </div><div class="menu__main__item menu__main__item--electronics">
        <a class="menu__main__item__link" href="#">Electronics</a>
      </div>
    </div>
    <div class="menu__sub">
      <div class="menu__sub__categories">
        <div class="menu__sub__categories__top menu__sub__categories__category">
          <h3 class="menu__sub__categories__header">
            Top Categories
          </h3>
          <ul class="menu__sub__categories__items">
            <li class="menu__sub__categories__item">
              <a href="#" class="menu__sub__categories__item__link">Apple</a>
            </li>
            <li class="menu__sub__categories__item">
              <a href="#" class="menu__sub__categories__item__link">Banana</a>
            </li>
            <li class="menu__sub__categories__item">
              <a href="#" class="menu__sub__categories__item__link">Pear</a>
            </li>
            <li class="menu__sub__categories__item">
              <a href="#" class="menu__sub__categories__item__link">Orange</a>
            </li>
            <li class="menu__sub__categories__item">
              <a href="#" class="menu__sub__categories__item__link">Watermelon</a>
            </li>
          </ul>
        </div>
        <div class="menu__sub__categories__additional menu__sub__categories__category">
          <h3 class="menu__sub__categories__header">
            Additional Categories
          </h3>
          <ul class="menu__sub__categories__items">
            <li class="menu__sub__categories__item">
              <a href="#" class="menu__sub__categories__item__link">Circle</a>
            </li>
            <li class="menu__sub__categories__item">
              <a href="#" class="menu__sub__categories__item__link">Square</a>
            </li>
            <li class="menu__sub__categories__item">
              <a href="#" class="menu__sub__categories__item__link">Oval</a>
            </li>
            <li class="menu__sub__categories__item">
              <a href="#" class="menu__sub__categories__item__link">Diamond</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="menu__sub__visual">
        <img class="menu__sub__visual__img" src="/udata/1m5lkL7p9Q0/dog.jpeg" />
      </div>
    </div>
  </div>
 </body>
</html>


codemirror

We'll find all the elements that are of the class name `menu__main__item`, and iterate through them so that we can bind functions to events. When one of these items get the event `onmouseenter` triggered, the function `menuItemEnter` is called. `menuItemEnter` finds the submenu by the class name, and sets the display property.

Do you see the issue here? We can't select anything in the submenu! That's because we're technically leaving the menu item when our mouse traverses to the submenu. To fix this, let's bind the mouse, leaving events to the submenu as well.

# Hiding submenu correctly
By the way, this part is a little magical -- how does moving the mouse away trigger the event it's supposed to? The goal is to teach you how to build in components in plain JavaScript, so there are as little unknowns as possible, but unfortunately, we have to hit a wall unless you want to learn about computer architecture. But at least the APIs we're relying on that seem magical are ones provided by vanilla JavaScript (as opposed to a library built on top of it), which is the lowest layer available in web development.

This lesson is a step-by-step guide on how to implement a working dropdown menu in JavaScript.

Welcome

Building a Dropdown Menu

Building the Autocomplete Search

Building Tooltips

Building an Autovalidating Form

Building an Infinite List

From Toy Components to Production

Implementing the Behavior of Dropdown Menu

Toggling submenu visibility #