Musicon Project - Handlebars Error

Projects Skill Path Projects
#1

Link to project - https://www.codecademy.com/courses/build-interactive-websites/projects/musicon

I believe something has gone wrong after following step 40 of 42. Once I had finished writing the handlebars template the next step was to delete the html code as the handlebars code would provide the information. But once I deleted the html code and refreshed the page everything disappeared and I can’t seem to find where I went wrong in the handlebars code for it not to show up. Below is my main.js code and my store.html code. If anyone can help it would be really appreciated.

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’);

const templateSource = templateElement.innerHTML;

const template = Handlebars.compile(templateSource);

const compiledHtml = template(context);

document.getElementById(‘information’).innerHTML = compiledHtml;

store.html -

Musicon

Musicon

    <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="showcase">
  <section id="information" class="container">
  </section>
</article>

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

<script src="public/main.js"></script>
1 Like
#2

Hello David,

Can I kindly see your code from instruction 35 to 39 (the handlebars code)?.. Am thinking that’s where the problem might be.

#3

Hello! Thank you for the reply, please see the code for steps 35-39 below.

{{#each instrument}}
    <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>{{this.price}}</del></p>
        <p class="sale">{{this.sale}}</p>
        {{else}}
        <p class="price">{{this.price}}</p>
        {{/if}}
      </section>
    </article>
{{/each}}
#4

Hey David,

Sorry I have taken a while. I found the problem though.

So your class name in your element is “instrument” instead of “instruments”. I believe after you change this, your code will work just fine :slightly_smiling_face:

It should look like this:

<article class="instruments">

Oh and in the paragraph elements with class “price”…add Price: before the handbar expression so it looks like this:

<p class="price"><del>Price: {{this.price}}</del></p>

and in the else block:

<p class="price">Price: {{this.price}}</p>

Hope this helps! :slightly_smiling_face:

#5

Hey Bwambura,

No need to apologise, sorry for my late response too haha. I will amend my code when I get home from work. Thank you for your help!!! :slight_smile:

#6

Your welcome! :slightly_smiling_face:

#7

Actually i also faced the same problem . however i understood how to use handlebars.js. though i couldnt solve it . i want discontinue and move forward. the class= instruments
solution didnt work though.

1 Like
#8

Relatively old topic but for future reference in case any one else gets stuck, the issue is to do with this line:

{{#each instrument}}

This needs to match up with the property array, in this case the property is instruments

const context = {
title: ‘Welcome to Musicon’,
body: ‘[...]’,
instruments: [
...

So the handlebars code would be {{each instruments}}

#9

Me neither. Did you find a solution in the end?

#10

I need help with this. I did it on my own, and then after I replaced the shop content, everything disappeared, and now I can’t figure out where I’m going wrong. I cross check with the tutorial, and it seems to be fine? Unless I am skipping a step or made a mistake somewhere. Also, the console f12 is a bit hard for me to understand. It says (if I am not wrong) the error is on line 28 of the .js file, but I haven’t touched it and it’s price, which shouldn’t be an error?
Can someone look at this and see what’s going wrong here, so I can finish it and understand it, please? Thank you! :slight_smile:

Link: https://www.codecademy.com/paths/web-development/tracks/build-interactive-websites/modules/templating-with-handlebars/projects/musicon

<!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="{{this.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 style = "./style.css" type="text/css"> 
              <a href="index.html"> Home </a>
            </li>
            <li>
              <a class="current" 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>


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://content.codecademy.com/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://content.codecademy.com/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://content.codecademy.com/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://content.codecademy.com/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');
const templateSource = templateElement.innerHTML;
const template = Handlebars.compile(templateSource);

const compiledHtml = template(context);

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