Build an Interactive JavaScript Food Menu

Creating the Footer

This will be a very short and sweet one to build. I will be calling it the bottom for reasons to be shown shortly. First let's add it to the application.

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

export default function app(items) {
  const navbarEle = navbar();
  const heroEle = hero();
  const menuEle = menu(items);
  const bottomEle = bottom();
  const appEle = addId(div(navbarEle, heroEle, menuEle, bottomEle), 'app-container');

  return appEle;

Next we need to create the bottom module. Create a file at src/js/components/bottom.js and put the following in it.

import { addClass, div, footer, text, p } from '../builders';

export default function bottom() {
  const name = p(text('Alex Sears'));
  const content = addClass(div(name), 'content', 'is-centered');

  const container = addClass(div(content), 'container');

  return addClass(footer(container), 'footer');

This simply constructs a footer element and populates it with my name. I have called this module bottom instead of footer because we have a new builder to create called footer. Some see it as bad practice to shadow variable names like that. It can cause confusion and introduce hard to find bugs. Bottom still gets the point across. Now let's create the footer builder.

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

Nothing new here. That's all there is to this element. View our application in the browser and you should see some text in the footer at the bottom.

The last piece we need to build before we start creating the interaction is the modal. Let's move on to that!