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.

Table of Contents

    <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

    173 posts

    Founder of Scotch.io. Google Developer Expert in Web Technologies. Slapping the keyboard until something good happens.