Musicon project - Handlebars template doesn't render in the browser

Evening,

I am completely stuck at step 33 of the Musicon project. After finishing this checkpoint, you should see the previously deleted content be rendered again thanks to the Handlebars template that was added in main.js. However the Handlebars template doesn’t render in the browser, whether it’s for the homepage or the store page.

I triple checked my code for typos and case, re-read the steps three times, checked my code against the solution video to find that it was identical. Also tried to use a CDN instead of the provided link for the script element to include Handlebars. Did a hard refresh.

When browsing the forums for clues, I find that many users have had the same issue after going over their code again and again, very few received an answer - though those who did realised that a typo was the culprit. But after checking my code character by character, I’m a little frustrated that I can’t find what I seem to be doing wrong.

In the hope that a pair of new eyes could spot the problem, I’m posting my html and js code:

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Musicon</title>
    <link href="public/style.css" rel="stylesheet">
    <script src="handlebars.min.js"></script>
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.6/handlebars.amd.min.js"></script>-->
    <script id="templateHB" type="text/x-handlebars-template">
      <h1>{{title}}</h1>
      <p>{{body}}</p>
      <a href="store.html">Shop Now</a>
    </script>
  </head>

  <body>
    <header>
      <section class="container">
        <h1 class="branding">Musicon</h1>

        <nav>
          <ul class="navbar">
            <li class="current"><a href="index.html">Home</a></li>
            <li><a href="store.html">Store</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
        </nav>

      </section>
    </header>

    <article id="introduction">
      <section id="information" class="container">
      </section>
    </article>

    <footer>
      <p>&copy; Musicon</p>
    </footer>
    <script src="public/main.js"></script>
  </body>
</html>

store.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Musicon</title>
    <link href="public/style.css" rel="stylesheet">
    <script src="handlebars.min.js"></script>
    <script id="templateHB" type="text/x-handlebars-template">
    {{#each instruments}}
    <article class="instrument">
          <img class="image" src="{{this.image}}" alt="{{this.name}}">
          <section class="details">
            <h2 class="name">{{this.name}}</h2>
            <p class="description">{{this.description}}</p>
            {{#if sale}}
            <p class="price"><del>Price: {{this.price}}</del></p>
            <p class="sale">On Sale! {{this.sale}}</p>
            {{else}}
            <p class="price">Price: {{this.price}}</p>
            {{/if}}
          </section>
        </article>
        {{/each}}
      </script>
  </head>

  <body>
    <header>
      <section class="container">
        <h1 class="branding">Musicon</h1>

        <nav>
          <ul class="navbar">
            <li><a href="index.html">Home</a></li>
            <li class="current"><a href="store.html">Store</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
        </nav>
      </section>
    </header>

    <article id="showcase">
      <section id="information" class="container">
      </section>
    </article>

    <footer>
      <p>&copy; Musicon 2018</p>
    </footer>

    <script src="public/main.js"></script>
  </body>
</html>

main.js:

const context = {
  title: 'Welcome to Musicon',
  body: 'Musicon is a budding musical storefront with a mission to share the joy of music. These magnificent auditory tools are designed with musical creators, like you, in mind. Hobbyists, beginners, and experts alike can appreciate the resplendent sounds supplied by each and every instrument we carry. Join us in delivering the euphoric vibrations of melodia to the citizens of the world!',
  instruments: [
    {
      image: 'https://s3.amazonaws.com/codecademy-content/courses/learn-handlebars/musicon/electronic-keyboard.png',
      name: 'Electronic Keyboard',
      description: 'A piano welcomed to the 21th century. Pianists celebrate the compact form factor and the diversity of synthesized rhythms all in one masterful musical machine.',
      price: '$1,999.00',
      sale: '$1,699.89'
    },
    {
      image: 'https://s3.amazonaws.com/codecademy-content/courses/learn-handlebars/musicon/electric-guitar.png',
      name: 'Electric Guitar',
      description: 'Join the legends of the \'50s and \'60s when the marriage of guitar and electricity created the most influential instrument of a generation. Note: picks sold separately.',
      price: '$599.99'
    },
    {
      image: 'https://s3.amazonaws.com/codecademy-content/courses/learn-handlebars/musicon/bass-guitar.png',
      name: 'Bass Guitar',
      description: 'Experience the embodiment of funkadelic frequencies that is the bass guitar. Let the deep low notes of the bass guitar resonate with heartbeats everywhere.',
      price: '$624.99'
    },
    {
      image: 'https://s3.amazonaws.com/codecademy-content/courses/learn-handlebars/musicon/drum-kit.png',
      name: 'Drum Kit',
      description: 'Ever thought, "one instrument isn\'t enough?" Find an answer in the drum kit. Coordinate a collections of drums and cymbals to dictate the rhythm of musical masterpiece.',
      price: '$649.00',
      sale: '$349.00'
    }
  ]
};

const templateElement = document.getElementById("templateHB");

templateSource = templateElement.innerHTML;

const template = Handlebars.compile(templateSource);

const compliledHtml = template(context);

document.getElementById('information').innerHTML = compiledHtml;

Thank you for your much appreciated help!

1 Like

Oh god, nevermind, mistake found!
I had a typo in the const compiledHtml :sleeping:
Two lessons to take away from this: 1) don’t try to check for typos after hours of coding, and 2) open the console in the browser to see where the problem is!