Learn
Learn Handlebars
Introduction to Handlebars

In this lesson, you will expand your ability to create dynamic web pages by learning about an external library, Handlebars.js!

A library is a collection of code that is already written that makes development easier. In the case of Handlebars, you are provided a templating engine which allows you to generate reusable HTML with JavaScript. Another benefit is that Handlebars keeps a clear separation of when you’re writing HTML or JavaScript.

Invitations are a great example of a “real life” template. Invitation cards usually include the invitee’s name, the venue location, the time and date, and maybe a short description. If you had to write all of that information out, then you would realize that most of the information is repeated — the only change you really need to make is the name! Creating a template with a blank space for the name would make it much easier for you to invite all your friends and family!

The idea of templating becomes even more useful for web pages that have thousands or even millions of views. Take for instance this exercise that you’re working on right now — it has the same material for every visitor, the only major difference is your own personal icon on the top right corner. You wouldn’t want to create a unique page for every single visitor, use a template and sub in the values you need to.

Instructions

1.

Take a look at the text on the web page and note all the instances that ‘vanilla’ comes up.

In main.js, re-assign the value of flavor in the context object to 'chocolate'. Then run your code.

Notice all the changes you made with one edit!

Folder Icon

Sign up to start coding

Already have an account?