Handlebars.js CDN

Hello there.

I am on the Musicon (handlebars) project on JavaScript. So far everything is working fine.

However, I tried to work on the project outside codecademy. I use Visual Studio Code.

I copied all the codes to my local directory and I linked the handlebars CDN, but it’s not working.

Do you have any idea on how to fix this?

Here’s the link of my project in codecademy - https://www.codecademy.com/paths/web-development/tracks/build-interactive-websites/modules/templating-with-handlebars/projects/musicon

Here’s my HTML code =

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

Here’s the JS code:

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;

Hope you can help.


hey man
I’m facing the same problem right now
did you know what the solution ?? or maybe u can help me!!

I’m having the exact same problem. The code in the CodeCademy window runs fine, whether using the handlebars.min.js file or a CDN. The same code copy/pasted into a files in Visual Studio Code doesn’t work. I don’t have an answer but throwing out there that it’s not just you.

Hey! Just had the same problem.
I have an easy fix for you:
you need to load the templebars template externally, for example by inserting this script as the source:

after that change the file source for your js file at the bottom of the HTML file: