Lessons 288 to 296 – Complete 2020 Web Development Bootcamp

Lesson 288 – Challenge 1

This is the first challenge of Section 22 which is a challenge section. The overall challenge is to build a blog website using node.js, express.js and EJS.

The first challenge is to add a <h1> element to the home.ejs file and then to render that file using app.js so that localhost:3000 will display the home page with the <h1> header.

In order to render the home page, an app.get() has to be added to the app.js file. This is the code –

app.get("/", function(req, res) {
	res.render("home");
});

Lesson 290 – Challenge 2

The second challenge is to render the const homeStartingContent to the homepage so that the text contained in that const is visible to the viewer of the homepage.

This is accomplished by creating a <p> element in the home.ejs file and using the EJS tag <%= %> to output the const homeStartingContent to the home.ejs file. Inside the EJS tag you put a variable name – in this case “startingContent”.

The code look like this –

<p><%= startingContent %></p>

The next step in completing this challenge is to amend the res.render method inside the app.get method to include the content of the const homeStartingContent. In order for the content of the const homeStarting Content to be rendered to the home page, you have to add a javascript object with a key value pair to the res.render object. The key is the variable that you put inside the EJS tag in the home.ejs file. The value is the homeStartingContent const variable. The amended app.get method looks like this –

app.get("/", function(req, res) {
	res.render("home", {startingContent: homeStartingContent});
});

Lesson 292 – Challenge 3

The challenge in this lesson is add the footer.ejs file and the header.ejs file so that when a user views the home page, they are viewing a page which has a header and footer.

To complete this challenge you add a header include and a footer include in the home.ejs file.

The header include looks like this –

<%- include("header") -%>

The footer include looks like this –

<%- include("footer") -%>

The home.ejs file with the header and footer includes looks like this –

<%- include("header") -%>

<h1>Home</h1>

<p><%= startingContent %></p>

<%- include("footer") -%>

Lesson 294 – Challenge 4

This lesson’s challenge is to create a new folder labelled “partials” inside the views folder and to move the header.ejs and footer.ejs into the partials folder.

Once this has been done, the includes in the home.ejs file no longer work because the location of the header.ejs and the footer.ejs files has changed. The challenge is to make the includes point to the correct location so that they function properly again.

To make the includes function properly again the have to point to “partials/header” and “partials/footer” as the header.ejs file and the footer.ejs file are now inside of the new partials folder.

The corrected code looks like this –

<%- include("partials/header") -%>

<h1>Home</h1>

<p><%= startingContent %></p>

<%- include("partials/footer") -%>

Lesson 296 – Challenge 5

This challenge is to add the code to the about.ejs file and the contact.ejs file so that the header and footer partials are included in those files and there is an <h1> element and a <p> element. The <p> element has to use an EJS tag <%= %> to display the text assigned to either the const aboutContent or the const contactContent in the app.js file.

This is the code for the about.ejs file –

<%- include("partials/header") -%>

<h1>About Me</h1>

<p><%= aboutContent %></p>

<%- include("partials/footer") -%>

This is the code for the contact.ejs file –

<%- include("partials/header") -%>

<h1>Contact Me</h1>

<p><%= contactContent %></p>

<%- include("partials/footer") -%>

In order to get the about page and the contact page to render as html pages to the viewer two more get.app methods have to be added to the app.js file.

This is the code for the two new get.app methods –

app.get("/about", function(req, res) {
	res.render("about", {aboutContent: aboutContent});
});

app.get("/contact", function (req, res) {
	res.render("contact", {contactContent: contactContent});
});