Build an Interactive JavaScript Food Menu: Lesson 4 of 14

Creating the Navbar

Up Next

Creating the Hero

Autoplaying in 7 seconds!

Cancel

Create a Free Account to Watch

There are lessons in this course. of learning!

Sign Up Now

Login to your account

Creating this next piece will be very similar to creating the app wrapper. However, there is more to the navbar. So we will have to create some more builders to help us get it done.

Make your app.js look like the following.

import { div, addId } from '../builders';
import navbar from './navbar';

export default function app() {
  const navbarEle = navbar();
  const appEle = addId(div(navbarEle), 'app-container');

  return appEle;
}

Here we have simply added an import to the top to bring in a navbar. We will create this in just a second. Next, in our app function, we have created a navbar element and have given that to the div method. Remember, as long as we pass a DOM node to our HTML builder methods, it will put the node inside the element it is creating. As we create more elements, to add them to our app, we simply will need to create the element and then pass it to our div method that creates the app. Simple!

Now let's create the navbar. Create a file at src/js/components/navbar.js and put the following code in it.

import { addClass, addId, div, i, nav, span } from '../builders';

export default function navbar() {
  const navLeft = addClass(div(), 'navbar-left');

  const cartIcon = addId(addClass(i(), 'fa', 'fa-shopping-cart'), 'cart-icon');
  const cartItems = addClass(span(), 'cart-items');
  const navbarItem = addClass(div(cartIcon, cartItems), 'navbar-item');
  const navRight = addClass(div(navbarItem), 'navbar-right', 'cart');

  return addClass(nav(navLeft, navRight), 'navbar');
}

Here we are importing more element builders from our builders.js file. Then we are creating a navbar that looks like the following:

<nav class="navbar">
    <div class="navbar-left">
    </div>
    <div class="navbar-right cart">
        <div class="navbar-item">
            <i class="fa fa-shopping-cart" id="cart-icon"></i>
            <span class="cart-items"></span>
        </div>
    </div>
</nav>

The only thing that is truly different here is that we have an addClass method that takes more than one class. Once you see the implementation, you will understand! Let's create these new builders. Add this to our builders.js file.

export function i(...children) {
  return createElement('i', ...children);
}

export function nav(...children) {
  return createElement('nav', ...children);
}

export function span(...children) {
  return createElement('span', ...children);
}

export function addClass(element, ...klasses) {
  const newElement = element.cloneNode(true);
  klasses.forEach(klass => newElement.classList.add(klass));
  return newElement;
}

All these builders are very similar to the ones from before. That is the nice thing here. We can make builders for any element that we actually need and don't need to bring along any more than we use in our project. Notice img is a little different in that it creates the element and then sets the src of the image.

That is it for this element. Start up your server and view this in the browser. You should be able to see the navbar in the source of the page. You may not be able to see it on page, unfortunately, due to the styles. However, in the next one, we will add what I call the "hero banner" so that we may be able to see it and to give our little restaurant some branding

Chris Sevilleja

Co-founder of Scotch.io. Slapping the keyboard until something good happens.