Handlebars script in HTML - inside or outside the body?


#1

I just started an introduction to Handlebars, and I completed this lesson: https://www.codecademy.com/paths/web-development/tracks/webdev-building-website-templates/modules/templating-with-handlebars/lessons/learn-handlebars/exercises/handlebars-expression

What confused me was the first step, which instructs to create

     <script id="greet" type="text/x-handlebars-template">
{{greeting}}
    </script>

under the opening tag. Additionally the hint says

“Make sure you’re adding the element inside the content of the element. A element has both opening and closing tags.”

The issue is that when I’m doing this, the step one of the lesson will show error and ask me

“Did you create a element with an id of ‘greet’ ?”

And the moment I put the script outside the body, the step is completed.
Why is it doing this?


#2

Oh, and another issue showed up during the next lesson: https://www.codecademy.com/paths/web-development/tracks/webdev-building-website-templates/modules/templating-with-handlebars/lessons/learn-handlebars/exercises/handlebars-if

In the second step, I’m supposed to create paragraph text inside {{if}} block. The step continues to show error even though I’m doing it just as it tells me to, like so

    <script id="ifHelper" type="text/x-handlebars-template">
      {{#if opinion}}
        <p>"The correct way to say 'GIF' is GIF!"</p>
      {{/if}}
    </script>

What am I doing wrong?


#3

Did you create a element with an id of ‘greet

Did you add the correct type attribute to the <script> element?

This code clearly contradicts the instructions:

Start by creating your Handlebars template in index.html . Under the opening <body> tag, create a <script> element. Give the script element an attribute of id with a value of 'greet' . Then, add another attribute, type to the same script, and assign type a value of 'text/x-handlebars-template' .

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello World!</title>
    <link type="text/css" rel="stylesheet" href="public/style.css">
    <script src="handlebars.min.js"></script>
    <!--Create a new script element on the line below-->
    <script id="greet" type="text/x-handlebars-template">
    {{greeting}}
    </script>
  </head>
  <body>
    <div class="container">
      <h1>Handlebar Expressions</h1>
      <div id="hello">
      </div>
      <div class="blinker">|</div>
    </div>  
    <script src="public/main.js" type="text/javascript"></script>
  </body>
</html>

I hit the same wall as you on step 2 of lesson 4. Didn’t see any difference between my code and the solution. Be sure to send a bug report on those two lessons and mention it on your slack channel.


#4

Thanks, mtf. It looks like there are many similar bugs in this Handlebars course. The constant bugging has got me somewhat frustrated, as learning to use Handlebars without bugs is challenging enough for me.


#5

Completely agree the handlebars course is filled with bugs that I simply went elsewhere to learn how to use it So I can finish the challenge that goes after it


#6

Yep, the same here. I am at the 8th part of the lesson about Handlebards section and I reported I guess around 4 bugs so far, and it’s really frustrating couse I am not sure if this is my code not working or there’s another bug, but when I see the solution everything is exactly the same so … yep. codecademy must do smth about this.