EJS template setup in Express - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this EJS template render?

Given the following EJS template and data passed from Express, what is the rendered HTML output?

Express

<h1>Welcome, <%= user.name %>!</h1>
<ul>
  <% for(let i = 0; i < user.tasks.length; i++) { %>
    <li><%= user.tasks[i] %></li>
  <% } %>
</ul>

A <h1>Welcome, Alice!</h1><ul><li>Buy milk</li><li>Walk dog</li></ul>

B <h1>Welcome, user.name!</h1><ul><li>user.tasks[0]</li><li>user.tasks[1]</li><li>user.tasks[2]</li></ul>

C <h1>Welcome, Alice!</h1><ul><li>Buy milk</li><li>Walk dog</li><li>Read book</li></ul>

D <h1>Welcome, Alice!</h1><ul></ul>

💡 Hint

Remember that <%= %> outputs the value, and <% %> runs JavaScript code without output.

The template loops through all tasks in the user.tasks array and outputs each as a list item. The user.name is inserted with <%= %>.

📝 Syntax

intermediate

Identify the syntax error in this EJS snippet

Which option contains the correct syntax to conditionally display a message if isAdmin is true?

Express

<% if (isAdmin) { %>
  <p>Welcome, admin!</p>
<% } %>

A <% if isAdmin { %><p>Welcome, admin!</p><% } %>

B <% if (isAdmin) { %><p>Welcome, admin!</p><% } %>

C <% if (isAdmin) %><p>Welcome, admin!</p><% } %>

D <% if (isAdmin) { %><p>Welcome, admin!</p>

💡 Hint

Check for proper parentheses and braces in JavaScript if statements inside EJS tags.

Option B correctly uses parentheses and braces for the if statement and closes the EJS tags properly.

❓ state_output

advanced

What is the output of this EJS template with given data?

Consider this EJS template and the data object passed from Express: Template:

<% items.forEach(item => { %>
• <%= item %>
<% }) %>

Data: { items: ['apple', 'banana', 'cherry'] } What is the rendered HTML output?

A <ul><li>apple</li><li>banana</li><li>cherry</li></ul>

B <ul><li>items[0]</li><li>items[1]</li><li>items[2]</li></ul>

C <ul><li>apple</li><li>banana</li></ul>

D <ul></ul>

💡 Hint

The forEach loop outputs each item inside

tags.

The template loops through all items and outputs each inside a list item. The output matches the array elements exactly.

🔧 Debug

advanced

Why does this EJS template cause a runtime error?

This EJS template throws an error when rendered:

<% for(let i = 0; i < tasks.length; i++) { %>
• <%= tasks[i].name %>
<% } %>

Data passed: { tasks: ['clean', 'cook', 'shop'] } What causes the error?

A Using <%= %> inside a loop is not allowed in EJS

B Syntax error: missing closing tag for the for loop

C tasks is undefined in the template context

D tasks array contains strings, but template expects objects with a 'name' property

💡 Hint

Check the data type of each item in tasks and what the template expects.

The template tries to access 'name' property on each task, but tasks are strings, not objects, causing a runtime error.

🧠 Conceptual

expert

How does Express find EJS templates by default?

When you set up Express with EJS as the view engine, where does Express look for the template files by default?

A In the 'views' folder located in the root directory of the project

B In the 'templates' folder inside the 'public' directory

C In the same folder as the server.js file

D In the 'ejs' folder inside 'node_modules'

💡 Hint

Express has a default folder name for views unless configured otherwise.

By default, Express looks for templates in a folder named 'views' at the root of the project.