'Musicon' project

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

Something went wrong with my code between 24th - 33rd step, and I am not able to find the error. I pasted the file of ‘index.html’ and ‘main.js’ code below.
Please help !

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;


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

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

1 Like

Are you actually getting an error message or is the problem that your code isn’t rendering the compiled HTML for the Home Page? My code looks from what I can tell exactly as yours and when I complete step 33 no HTML is rendered.

1 Like

hey man , I have the problem you just mentioned and I’m not able to know why it’s not render
if u know why please help

1 Like

It’s been a while since I went back and revisited that exercise, but I logged in right now and all pages display properly. I don’t think I changed anything, maybe it was a refresh issue or something like that? I’m trying to get a link to share the code but it’s stuck in the message “Copy the path below to share your code” It doesn’t generate the link though.

Have you tried logging out and seeing if the display issue corrects itself?

1 Like

Hey my friend , i found the problem it was in my VS code .
The handlebars file was longer than the length limit of VS code , so I had to increase the length limit from the settings…

thank you man :wink:

1 Like

haha my problem was same vs code failed to load the long line of handlebarsjs that’s why it did not work …

1 Like