Build an Interactive JavaScript Food Menu: Lesson 5 of 14

Creating the Hero

Up Next

Creating the Menu

Autoplaying in 7 seconds!

Cancel

Create a Free Account to Watch

Sign Up Now

Login to your account

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

151 posts

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