Video Course

Build an Interactive JavaScript Food Menu: Lesson 5 of 14

Creating the Hero

Up Next

Creating the Menu

Autoplaying in 7 seconds!

Cancel

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!

Chris Sevilleja

162 posts

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