I have done the last few projects in the Web Development skill path on my own text editor (VSCode), but I cannot seem to get this one to work. If anyone could help me out with how to get Handlebars running on my own editor, I would appreciate it.
Hi there, welcome to the forums.
Can you elaborate a little on how it’s not working? 
Yes, and please add a link to the exercise with your reply. Thanks.
I downloaded Handlebars and put the js folder directly in my directory. Then I put the path name into “src” in the script tag. From what little information I could find on the process, this is what i could gather on how to do this. I will just attached screenshots so you can see what is going on.
Thanks for the reply, I shared some screenshots below.
Raw code is much preferred. As would be appreciated a link to the handlebars lesson for context, please. I haven’t taken the course but might be able catch up to you, given the time.
@course8916106445, your screenshot of index.html is not the entire file; or, if it is, that’s why it’s not working.
This is why properly formatted code is preferred. There’s some key things in the bottom half of that HTML file which could explain why your code is misbehaving, but we can’t see it.
1 Like
I only sent screenshots so you could see how my files are arranged. Here is the code.
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="style.css" rel="stylesheet">
<script src="handlebars-v4.7.6.js"></script>
<script id="templateHB" type="text/x-handlebars-template">
<h1>{{title}}</h1>
<p>{{body}}</p>
<a href="store.html">ShopNow</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">
<h1>Welcome to Musicon</h1>
<p>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!</p>
<a href="store.html">Shop Now</a>
</section>
</article>
<footer>
<p>© Musicon</p>
</footer>
<script src="public/main.js"></script>
</body>
</html>
Here is the .js with it
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;
What is it that you’re expecting Handlebars to do?
You’ve hard-coded the content into the HTML document, which Handlebars will overwrite as soon as it renders your template with the same content.
I’m not sure what you’re expecting it to do that it isn’t, tbh.
Sorry I meant to clarify that. When I delete the hard coded part, everything disappears. I can delete the hard coded part and repost it if you want, but since it disappears anyways, that would imply that I either don’t have Handlebars set up properly or there is something wrong with my script tags because it’s not pulling the code from my js file
Sorry for the poor quality of the post. By the time I posted on here, I was pretty much over this project. I will reformat the information the best I can here. Here is the index.html with the hardcode removed:
<!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="style.css" rel="stylesheet">
<script src="handlebars-v4.7.6.js"></script>
<script id="templateHB" type="text/x-handlebars-template">
<h1>{{title}}</h1>
<p>{{body}}</p>
<a href="store.html">ShopNow</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>© Musicon</p>
</footer>
<script src="public/main.js"></script>
</body>
</html>
…And here is the javascript file:
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;
When I run the index file in a browser, both my title and body that I am suppose to be pulling from the object in main.js are gone.
1 Like