freeCodeCamp/curriculum/challenges/english/06-information-security-and-quality-assurance/advanced-node-and-express/use-a-template-engines-powers.english.md

id, title, challengeType, forumTopicId

id	title	challengeType	forumTopicId
5895f70bf9fc0f352b528e64	Use a Template Engine's Powers	2	301567

Description

As a reminder, this project is being built upon the following starter project on Glitch, or cloned from GitHub. One of the greatest features of using a template engine is being able to pass variables from the server to the template file before rendering it to HTML. In your Pug file, you're able to use a variable by referencing the variable name as #{variable_name} inline with other text on an element or by using an equal sign on the element without a space such as p=variable_name which assigns the variable's value to the p element's text. We strongly recommend looking at the syntax and structure of Pug here on GitHub's README. Pug is all about using whitespace and tabs to show nested elements and cutting down on the amount of code needed to make a beautiful site. Looking at our pug file 'index.pug' included in your project, we used the variables title and message. To pass those along from our server, you will need to add an object as a second argument to your res.render with the variables and their values. For example, pass this object along setting the variables for your index view: {title: 'Hello', message: 'Please login'} It should look like: res.render(process.cwd() + '/views/pug/index', {title: 'Hello', message: 'Please login'}); Now refresh your page and you should see those values rendered in your view in the correct spot as laid out in your index.pug file! Submit your page when you think you've got it right.

Instructions

Tests

tests:
  - text: Pug should correctly render variables.
    testString: getUserInput => $.get(getUserInput('url')+ '/') .then(data => { assert.match(data, /pug-variable("|')>Please login/gi, 'Your projects home page should now be rendered by pug with the projects .pug file unaltered'); }, xhr => { throw new Error(xhr.statusText); })

Challenge Seed

Solution

/**
  Backend challenges don't need solutions, 
  because they would need to be tested against a full working project. 
  Please check our contributing guidelines to learn more.
*/