I am two thirds done with the Musicon project; https://www.codecademy.com/paths/web-development/tracks/build-interactive-websites/modules/templating-with-handlebars/projects/musicon
When I am trying to building the template for the homepage, it will never display. I have double checked all code up against the solution video. I have deleted everything and redone the excercise two times. And even step-by-step following the video. So I really am stuck.
Here is my code for my index.html, style.css and main.js.
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 id='information' class="container">
</section>
</article>
<footer>
<p>© Musicon</p>
</footer>
<script src="public/main.js"></script>
</body>
</html>
style.css:
/* General Rulesets */
* {
color: #ffffff;
}
body {
font-family: Helvetica, sans-serif;
background: url("https://s3.amazonaws.com/codecademy-content/courses/learn-handlebars/musicon/musicon_bg.png") no-repeat center center fixed;
background-size: cover;
}
a {
text-decoration: none;
}
footer {
width: 100%;
text-align: center;
bottom: 0;
position: static;
}
header {
padding-top: 3%;
min-height: 70px;
}
.container {
width: 90%;
margin: 0 auto;
}
.branding {
float: left;
}
.branding h1 {
font-weight: normal;
}
nav {
float: right;
}
.navbar {
margin-top: 15%;
}
.navbar li {
display: inline-block;
padding: 0 5px;
}
.navbar li a {
color: rgba(255, 255, 255, 0.8);
font-weight: normal;
}
.navbar li a:hover, .navbar .current a {
color: #ffffff;
}
/* Home Page Rulesets */
#introduction {
text-align: center;
margin-top: 15%;
margin-bottom: 50%;
}
#introduction h1 {
font-size: 60px;
}
#introduction p {
margin: 10% auto;
font-size: 18px;
font-weight: lighter;
}
#introduction a {
display: block;
width: 20%;
padding: 3% 8%;
margin: 0 auto;
color: #ffffff;
background-color: #4c7ef3;
border-radius: 4px;
}
#introduction a:hover {
background-color: #26A69A;
}
/* Store Page Rulesets */
#showcase {
margin-top: 5%;
margin-bottom: 15%;
}
.instrument {
width: 90%;
overflow: auto;
background-color: rgba(255, 255, 255, 0.9);
padding: 2% 5%;
margin: 5% auto;
border-radius: 5px;
}
.image {
display: inline-block;
vertical-align: middle;
width: 32%;
min-width: 100px;
margin: 0 auto;
}
.details {
display: inline-block;
vertical-align: middle;
width: 60%;
margin: -1% auto;
padding: 2%;
}
.name, .description, .price, del {
color: #000000;
text-align: left;
}
.description, .price {
margin-top: 0;
margin-bottom: 16px;
}
.description {
height: 100%;
font-size: 13px;
overflow: auto;
}
.price {
margin: 0;
font-size: 16px;
font-weight: bold;
}
.sale {
margin-top: 0;
margin-bottom: 0;
color: #fa4359;
font-size: 16px;
font-weight: bold;
text-align: left;
}
/* Contact Page Rulesets */
#connection {
width: 100%;
margin: 15% auto;
text-align: center;
}
#top {
margin: 15% auto;
}
#top h2 {
margin: 3%
font-size: 30px;
font-weight: normal;
}
#top p {
margin: 3%
font-size: 18px;
font-weight: lighter;
}
.contact {
width: 100%;
margin: 10% auto;
}
.contact p, .contact ul {
margin: 1%;
font-size: 16px;
font-weight: lighter;
}
#location {
margin: 0;
padding: 0;
list-style-type: none;
}
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 = compliedHtml;
