Musicon Project - Handlebars template not rendering on browser

The handlebars template does not render in the browser…

I noticed that when working on the project via VSC, the css styling was not applied unless I removed “public” from the html files:

Before

    <link rel="stylesheet" href="public/style.css"> 

After

    <link rel="stylesheet" href="style.css"> 

I thought I’d do the same for index.html and store.html, but templates not rendering for either

   <script src="main.js"></script>
//or
 <script src="public/main.js"></script>

Not sure what I am doing wrong…

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 rel="stylesheet" href="style.css"> 

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

    <footer>
      <p>&copy; Musicon</p>
    </footer>
    <script src="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 rel="stylesheet" href="style.css" > 

  <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="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");
  const templateSource = templateElement.innerHTML;
  const template = Handlebars.compile(templateSource);
  const compiledHtml = template(context);
  
  document.getElementById("information").innerHTML = compiledHtml;

Hi there.

Since you’re working on this locally, can you please share a screenshot of what the working folder looks like? By this, I mean I’d like to see the folder that all your files are in as well as each subdirectory and their contents.

If stuff isn’t loading, the obvious thing to check first are the paths - but I need to know how your folder is laid out to check them. :slight_smile:

Hello,

Of course - the folder is in my desktop, and I attached the screenshot of the files.
Is this what you are looking for?

Screen Shot 2020-07-31 at 4.05.47 PM

Stick a period and forward slash in front so it would be ./style.css

The reason beforehand why it wasn’t working with public/style.css is because there’s a public folder missing that wasn’t replicated in your local.

image

Notice the main.js and style.css are in the public folder. But as you’ve not got that folder and everything is in the one main folder, just use ./

It is, thank you.

You’ve seemingly not downloaded all of the files from the LE.

The Handlebars templating relies on the handlebars.min.js file, which you don’t seem to have. If you look at the screenshot that @munroe4985 has posted, you’ll see this file exists in the LE:

You’ll need the Handlebars JS file before you’ll be able to use it to produce the content. :slight_smile:

That makes sense, thank you :slight_smile:
I npm installed handlebars; what should go into the handlebars.min.js file?

You don’t add anything to that file; it’s the minified version of the Handlebars library.

If you’ve obtained the Handlebars code from elsewhere (like NPM), then you simply need to link that into your HTML files wherever you’re relying on Handlebars for templating. :slight_smile: