Video Course

Build an Interactive JavaScript Food Menu: Lesson 8 of 14

Creating the Modal

Up Next

Setting Up a Central State

Autoplaying in 7 seconds!

Cancel

The last piece of this puzzle is the modal. Once we get this completed, we can get on to some more interesting stuff. Let's add the modal to the app.

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

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

  return appEle;
}

Notice I am passing the items into the modal. This is not how things will be later. This is just for demonstrative purposes so you can see what the cart will look like with stuff in it. Next let's create that module at src/js/components/modal.js.

import { addClass, addId, button, div, h1, i, p, section, text, ul } from '../builders';
import modalItem from './modalItem';

export default function modal(items = []) {
  const close = addId(addClass(i(), 'fa', 'fa-times', 'close'), 'close');
  const title = addClass(h1(text('Cart')), 'title');

  let cart;
  if (items.length === 0) {
    cart = p(text('Your cart is empty.'));
  else {
    cart = addClass(ul(items.map(modalItem), 'menu'));
  }

  const cartContainer = addId(div(cart), 'cart-items');
  const checkoutButton = addClass(button(text('Checkout')), 'button', 'is-fullwidth');
  const modalContainer = addClass(div(close, title, cartContainer, checkoutButton), 'modal-container');
  const modalEle = addId(addClass(section(modalContainer), 'modal'), 'modal');

  return modalEle;
}

Here we are constructing the modal like the others. We create the cart by seeing if any items were passed in. If not, we just create some text saying there are none in the cart. If there are some, then we map over the items and create a modalItem for each. This is the same thing we did with the menu module. We pulled out each piece to make it more manageable. We haven't created a ul builder yet. So let's make that.

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

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

import { addClass, i, li, span, text } from '../builders';
import { formatPrice } from '../helpers';

export default function modalItem(itemData) {
  const name = addClass(span(text(itemData.name)), 'name');
  const price = addClass(span(text(formatPrice(itemData.price))), 'price', 'is-pulled-right');
  const removeButton = addClass(i(), 'fa', 'fa-times', 'remove');

  const item = addClass(li(name, price, removeButton), 'menu-item');
  item.dataset.key = itemData.id;

  return item;
}

This is very similar to the menuItem module. You will notice, though, that we are adding the item's key as a data attribute to the item we are creating. This will be available on the item in the HTML as data-key. We will use this later. Lastly, let's create the li builder.

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

View it in the browser...and there's nothing? The modal is hidden by default. We haven't built the functionality to show it yet. So to view it, open the dev tools. Select it using the element selector and then uncheck the CSS rule that says display : none;. The modal should pop up on screen. It will be full of items. To remove them all and get it to where it should be, just remove the items that are passed to the modal when we created it in the app.js module.

Well that's it. The page is being 100% built with JavaScript! Pat yourself on the back. But we aren't done yet. People want to be able to add things to their cart. To do this, we will create a central store that will hold all the information about our application. Onward, we march!

Chris Sevilleja

161 posts

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