Build an Interactive JavaScript Food Menu

Creating the Hero

This will be similar to the previous module we created. First we need to bring in our hero module and add it to the app container.

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

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

  return appEle;
}

Next, we need to actually create this hero element. Create a file at src/js/components/hero.js and put the following in it.

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

export default function hero() {
  const logo = addClass(img('static/fancybear_white.png'), 'logo');
  const the = addClass(p(text('The')), 'hero-text-light');
  const fancyBear = addClass(p(text('Fancy Bear')), 'hero-text-bold');
  const eateries = addClass(p(text('Eateries')), 'hero-text-light');

  const container = addClass(div(logo, the, fancyBear, eateries), 'container');

  const heroContent = addClass(div(container), 'hero-content');

  return addClass(section(heroContent), 'hero', 'splash');
}

Again, we are simply creating some HTML. The HTML will look like this.

<section class="hero splash">
    <div class="hero-content">
        <div class="container">
            <img src="static/fancybear_white.png" class="logo">
            <p class="hero-text-light">The</p>
            <p class="hero-text-bold">Fancy Bear</p>
            <p class="hero-text-light">Eateries</p>
        </div>
    </div>
</section>

Now let's add the builders that are new to this element we are creating. Add the following to the builders.js.

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

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

export function img(source) {
  const image = createElement('img');
  image.src = source;
  return image;
}

There is nothing new here. The only thing different here from the others is that the img tag takes a source and then adds that source to the newly created element before returning it.

In the next one, we will create the menu. This one is a little more involved, but I know you can handle it!