Video Course

Build an Interactive JavaScript Food Menu: Lesson 3 of 14

Creating the App Wrapper

Up Next

Creating the Navbar

Autoplaying in 7 seconds!

Cancel

Now that our development environment is set up, let's get down to business. We are going to use some functional programming techniques along with composable functions to build out our restaurant menu. We will be using some helper functions to create each element that we will use. This will allow us to reuse functionality but will also make our code much more readable. We will also be creating each piece of the menu in modules.

Let's start with the index.js file. Open it and replace its contents with the following code.

import app from './components/app';

const body = document.querySelector('body');
body.insertBefore(app(), body.childNodes[0]);

This simply imports our app module and then inserts it into the body of our page. This app module will wrap our whole application. The HTML we are aiming to make looks something like this (minus the comments).

<div id="app-container">
    Hello, world
    <!-- modal -->
    <!-- navbar -->
    <!-- hero -->
    <!-- menu -->
    <!-- footer -->
</div>

It's a pretty simple setup. Let's make this file that we imported. Create a file at src/js/components/app.js. Put the following code in it.

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

export default function app() {
  const appEle = addId(div(text('Hello, world')), 'app-container');

  return appEle;
}

We are importing some builders, which we will create in a second. Then we are exporting a function called app that simply uses our helpers to construct the app element and then return it.

Next, let's create our builders. Create a file at src/js/builders.js and put the following in it.

export function text(words) {
  return document.createTextNode(words);
}

export function createElement(type, ...children) {
  const newElement = document.createElement(type);
  children.forEach(child => newElement.appendChild(child));
  return newElement;
}

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

export function addId(element, id) {
  const newElement = element.cloneNode(true);
  return Object.assign(newElement, { id });
}

These are our builders. The div method uses the createElement method to create a new element and then populate it with the children we pass in. The ... before the children in the function definition is the spread operator. When used in the function definition, it allows us to create rest parameters, which means any extra parameters passed to this function are wrapped up into an array called children. When the spread operator is used before an array, like in the createElement call in div, it does the opposite. It takes an array and spreads out the elements inside it. This means createElement could have a ton of arguments passed to it. Also, text simply creates a text node and returns it containing the text we pass it. addId clones the element it is given and then uses Object.assign to override its ID. This is done to make sure addId doesn't change the node it is passed. This is one place where we are using functional programming.

If you don't have your server running already, start it up using npm run serve. You should be able to see the words "Hello, world" on the screen. Try inspecting the page or looking at the source to see the markup we have created.

Now we're cooking with grease! In the next one, we are going to create the navbar.

Chris Sevilleja

161 posts

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