SPA With HTML Template Tag

Summary

Created a single page application(spa) using the HTML template tag and vanilla javascript.

The template tag holds some content that is hidden when the page loads.

I use javascript to display the content in the root element on the page.

I have used the Bootstrap library for some basic styles.

Tech

• HTML
• CSS
• JavaScript
• JS Fiddle

HTML

Only included very basic elements for the page.

• Nav
• Main
• Footer
• Menu

Here is the root element where the content is added.

<div id="root"></div>

Template

I created a template block for the home page, about page, pricing page and features page for this demo.

<!-- Home -->
<template id="homeTemplate">
  <h1>Home</h1>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati quidem
    atque dolorum ea aperiam beatae voluptatem nisi sequi, maxime quia laborum
    natus, quae, possimus iusto aut vero neque omnis nostrum. Lorem ipsum dolor,
    sit amet consectetur adipisicing elit. Quas minima culpa ratione eius
    similique aliquam inventore error corporis possimus, officia sint saepe
    perspiciatis, sunt eligendi repudiandae laudantium. Quos, quae corrupti?
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati quidem
    atque dolorum ea aperiam beatae voluptatem nisi sequi, maxime quia laborum
    natus, quae, possimus iusto aut vero neque omnis nostrum.
  </p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati quidem
    atque dolorum ea aperiam beatae voluptatem nisi sequi, maxime quia laborum
    natus, quae, possimus iusto aut vero neque omnis nostrum. Lorem ipsum dolor
    sit amet consectetur adipisicing elit. Maiores voluptates rerum
    necessitatibus accusantium excepturi veritatis natus adipisci velit
    reiciendis fugiat, aspernatur porro similique cupiditate, dolorem ad
    consequuntur pariatur ratione, minima sit voluptatibus quas sed eum
    repudiandae? Itaque reprehenderit repudiandae repellat esse reiciendis ex
    aliquam accusamus saepe natus, voluptatem nesciunt vitae!
  </p>
  <p>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Amet nihil aliquid
    numquam doloribus cupiditate cumque, optio explicabo excepturi laboriosam
    rem praesentium iusto inventore quidem neque facilis! Doloribus perferendis
    nulla quibusdam ex porro fuga unde reprehenderit facilis sint eos? Alias,
    iusto voluptates vel odit eos officia, eveniet quam, neque porro culpa quas
    accusantium? Asperiores eius, beatae error animi veritatis rerum nulla harum
    dolorum amet odio a natus commodi excepturi, illum distinctio iure quisquam
    modi deserunt ipsum. Distinctio, repellat voluptates? Vero laboriosam vitae
    nemo repellat commodi aliquam amet quibusdam quae expedita quisquam esse,
    numquam consectetur temporibus eius, molestias placeat unde non ad.
  </p>
</template>
...

JavaScript

Here is the javascript for the demo.

Note: I could do a lot of refactoring of this code. The functions could be put into one function and pass in some parameters. I could give the links classes and use query selector all and add event listeners to each of these in a loop.

const docRoot = document.getElementById('root');

function showHomeTemplate() {
  let temp = document.getElementById('homeTemplate');
  let cloneTemplate = temp.content.cloneNode(true);
  docRoot.innerHTML = '';
  docRoot.appendChild(cloneTemplate);
}

function showFeatureTemplate() {
  let temp = document.getElementById('featureTemplate');
  let cloneTemplate = temp.content.cloneNode(true);
  docRoot.innerHTML = '';
  docRoot.appendChild(cloneTemplate);
}

function showPricingTemplate() {
  let temp = document.getElementById('pricingTemplate');
  let cloneTemplate = temp.content.cloneNode(true);
  docRoot.innerHTML = '';
  docRoot.appendChild(cloneTemplate);
}

function showAboutTemplate() {
  let temp = document.getElementById('aboutTemplate');
  let cloneTemplate = temp.content.cloneNode(true);
  docRoot.innerHTML = '';
  docRoot.appendChild(cloneTemplate);
}

// Navbar Brand Link
const elementNavbarHome = document.getElementById('navbarHome');
elementNavbarHome.addEventListener('click', showHomeTemplate);

// Features
const elementNavbarFeatures = document.getElementById('navbarFeatures');
elementNavbarFeatures.addEventListener('click', showFeatureTemplate);

const elementLeftMenuFeatures = document.getElementById('leftMenuFeatures');
elementLeftMenuFeatures.addEventListener('click', showFeatureTemplate);

const elementFooterFeatures = document.getElementById('footerFeatures');
elementFooterFeatures.addEventListener('click', showFeatureTemplate);

// Pricing
const elementNavbarPricing = document.getElementById('navbarPricing');
elementNavbarPricing.addEventListener('click', showPricingTemplate);

const elementLeftMenuPricing = document.getElementById('leftMenuPricing');
elementLeftMenuPricing.addEventListener('click', showPricingTemplate);

const elementFooterPricing = document.getElementById('footerPricing');
elementFooterPricing.addEventListener('click', showPricingTemplate);

// About
const elementNavbarAbout = document.getElementById('navbarAbout');
elementNavbarAbout.addEventListener('click', showAboutTemplate);

const elementLeftMenuAbout = document.getElementById('leftMenuAbout');
elementLeftMenuAbout.addEventListener('click', showAboutTemplate);

const elementFooterAbout = document.getElementById('footerAbout');
elementFooterAbout.addEventListener('click', showAboutTemplate);

Demonstration

Here is a link to the demo on js fiddle.

Link to Demo