Lessons 320 to 328 – Complete 2020 Web Development Bootcamp

Lesson 320 – Challenge 17

The aim of this challenge is if we can type localhost:3000/posts/Test and then have the console log “Match found”.

To complete this challenge, you have to refactor the code in the app.get(“/posts/:postName”) method.

The first step is to create a new const called “requestedTitle” which has the value of req.params.postName. The code is –

const requestedTitle = req.params.postName;

The above code captures the web address parameter typed in by the user and stores it as “requestedTitle”.

The next step is to create a forEach loop to loop through the posts array and check whether or not the “requestedTitle” equals the “storeTitle” constant variable which is created within the forEach loop and equals the post.title.

The code for the forEach loop is –

posts.forEach(function(post) {

		const storedTitle = post.title;

		if (storedTitle === requestedTitle) {
			console.log("Match found!");
		} else {
			console.log("Not a match.");
		}	
	});

The code for the refactored app.get(“/posts/:postName”) method is –

app.get("/posts/:postName", function(req, res) {

	const requestedTitle = req.params.postName;
	
	posts.forEach(function(post) {

		const storedTitle = post.title;

		if (storedTitle === requestedTitle) {
			console.log("Match found!");
		} else {
			console.log("Not a match.");
		}
	});
});

Lesson 322 – Challenge 18

The goal of this challenge is to read through the documentation about Lodash on lodash.com and find out how to install and require Lodash. Then use the documentation and search for lowercase to find the method that allows you to turn all strings into lowercase.

The first step is to intall lodash in the project folder. To install lodash you type the following code in the terminal command line –

npm i lodash

You then have to require lodash in the app.js file using this code –

const _ = require("lodash");

The constant variables created in the previous lesson have to refactored to use lodash to convert them to lowercase.

The refactored code is –

app.get("/posts/:postName", function(req, res) {

	const requestedTitle = _.lowerCase(req.params.postName);
	
	posts.forEach(function(post) {

		const storedTitle = _.lowerCase(post.title);

		if (storedTitle === requestedTitle) {
			console.log("Match found!");
		} else {
			console.log("Not a match.");
		}
	
	});

});

Lesson 324 – Challenge 19

The goal of this challenge is to be able to input the name a post in the title bar and be taken to the page containing that post.

To complete this challenge we first have to prepare our post.ejs file by including the header and footer partials and including an h1 and a paragraph element inside of which we use EJS script tags to pass the post title and content from our app.js file.

This if the code for the post.ejs file –

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

<h1> <%= title %>  </h1>

<p> <%= content %> </p>

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

The next step is to refactor the code in the app.get(“/posts/:postName”) method to include a res.render method to pass the post title and content information to the post.ejs page.

This is the refactored app.get(“/posts/:postName”) method code –

app.get("/posts/:postName", function(req, res) {

	const requestedTitle = _.lowerCase(req.params.postName);
	
	posts.forEach(function(post) {

		const storedTitle = _.lowerCase(post.title);

		if (storedTitle === requestedTitle) {
			res.render("post", {

				title: post.title,
				content: post.content

			});
		} 
	
	});

});

Lesson 326 – Challenge 20

The goal of this challenge is to figure out how to change the code so that the home page truncates the length of each blog post to only 100 characters with 3 dots (…) at the end of the 100 characters.

To complete this challenge, you have to refactor the code inside the EJS scriplet tag inside of the paragraph element in the home.ejs file. Originally, this was the code inside the paragraph element –

<p> <%= post.content %> </p>

In order to truncate the the post.content string, you can use the .substring() method. As the challenge is to only show the first 100 characters the starting parameter inside the .substring method will be 0 and the ending parameter will be 100. The refactored code using the .substring() method is –

<p> <%= post.content.substring(0, 100) + " ..." %> </p>

Lesson 328 – Challenge 21

This challenge is to add an anchor tag next to the truncated text of each post on the home page.

To do this you have to refactor the code of the paragraph element in the home.ejs file. The refactored paragraph element code looks like this –

<p> <%= post.content.substring(0, 100) + " ..." %> <a href="/posts/<%= post.title %>">Read More</a> </p>