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

Get Help JavaScript
#1

I looked at it again, and I followed things closely with the tutorial again to see if I missed something, but, I can’t really tell if I missed anything, but I can’t get it to load the Store section after swapping the html content with the handlebar. I doublechecked the person’s tutorial with my code, but I couldn’t find where I went wrong. Can anyone please offer some insight into this? Thanks a lot for your help :slight_smile:

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://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;

Store’s 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 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>

I followed the same exact steps as I did with the home.html so I’m not sure where I am doing things wrong compared to the tutorial. I can’t move on without this so any help will be greatly welcomed and appreciated. Also, of note, I had a hard time trying to debug in console, so if anyone could offer me a better way to debug in that, please let me know.

#2

The syntax highlighting in the learning environment makes this difficult to spot just from glancing at it, but it stands out a bit more here in the forums. Double check how you’re including the image here (you have an extra character)

 <img class="image" src="{{#this.image}}" alt="{{this.name}}">

As for debugging, more details can be seen if you click the little triangle to expand the error message:

image

From here, the important thing to keep in mind is that the lineNumber isn’t from the beginning of the HTML file, but instead is relative to where the <script> section was defined. It’s also mentioning the each loop and this.image so those were more clues to go on.

1 Like
#3

Thanks a lot for this. Really bad mistake to not really, deeply, clearly read the code. I let it slide because of the # 's I had used earlier, but thanks a lot for this! Fixed it and voila! It’s all good now.

Re: debugging in browser, thanks for the helpful tip. I am still trying to get familiar with errors and debugging so I found this incredible confusing, because, like it said, I kept going back on lines in Java and I was like, “but there is no error here”, and then I thought I wasn’t able to get the console running properly or something.

Any helpful tips other than what you offered about getting comfortable with debugging in browser? Or just trying to read clues and asking around?

Thanks a lot for your help on this exercise!

#4

You’re welcome!

This was a little different because it was using the handlebars library. I think most error messages wouldn’t quite be like that, but they will have similarities. You’ll get more comfortable with things like this as time goes on.

Part of the path you’re on will cover some debugging techniques, but not necessarily ones specific to using the browser’s tools. A lot of times, logging and other techniques help a lot with the browser still though.

You might find this resource helpful too: https://developers.google.com/web/tools/chrome-devtools/javascript

There’s an intro video and some techniques for using the built-in tools available in most browsers. This one is for DevTools in Chrome, but FireFox (and others) have similar tools.

1 Like
#5

Thanks a lot for this! I’ll refer to it and well, perhaps pay significantly more and more attention to the code, lol :slight_smile: