Lessons 298 to 310 – Complete 2020 Web Development Bootcamp

Lesson 298 – Challenge 6

The challenge in this lesson is to connect the “Home”, “About Me” and “Contact Me” items in the Nav Bar to their respective pages so that when you click on them you are taken to the correct page.

In order to do this, the nav bar code in the header.ejs file has to be amended by inserting the correct href address.

The amended nav bar code is –

<nav class="navbar navbar-default">
    <div class="container">
      <div class="navbar-header">
        <p class="navbar-brand">DAILY JOURNAL</p>
      </div>
        <ul class="nav navbar-nav navbar-right">
          <!-- 6 -->
          <li id="home"><a href="/">HOME</a></li>
          <li id="about"><a href="/about">ABOUT ME</a></li>
          <li id="contact"><a href="/contact">CONTACT ME</a></li>
        </ul>
    </div>
  </nav>

Lesson 300 – Challenge 7

The goal of the challenge is to create a new “compose” page. The compose page must have a text input and a button labelled “Publish”.

To do this this code has to be inserted in the compose.ejs file –

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

<form action="/" class="" method="POST">

	<h1>Compose</h1>

	<input type="text" name="" class="" placeholder="" required>

	<button class="" type="submit">Publish</button>

</form>

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

A new app.get method has to be inserted in the app.js file –

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

Lesson 302 – Challenge 8

The goal for this challenge is to update the code so that when you go to the compose page and type in the text box and click the Publish button, it should console log the text typed in the text box.

To do this, you first have to amend the compose.ejs file to add a name to the text input element. The amended text input element including the added name looks like this –

<input type="text" name="postTitle" required> 

The input field and the button have to be inside a form with an action=”/” and a method=”POST”.

The code for the form containing the h1 element, the input element and the button element looks like this –

<form action="/compose" class="" method="POST">

	<h1>Compose</h1>

	<input type="text" name="postTitle" class="" placeholder="" required>

	<button class="" type="submit" name="button">Publish</button>

</form>

Next you have to add an app.post method to the app.js file to capture the text posted in the input box and console.log it. The app.post method code looks like this –

app.post("/compose", function(req, res) {

	const text = req.body.postTitle;
	console.log(text);

});

Lesson 304 – Challenge 9

The goal of this challenge is to transform the compose page so that it takes two inputs. One input is labelled “Title” and takes the title text. The other input is labelled “Post” and takes the post text. The button is a Bootstrap button.

This is the refactored compose.ejs file code to create two text areas and to style the text areas and the button with bootstrap classes.

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

<form action="/compose" class="" method="POST">

	<h1>Compose</h1>

	<div class="form-group">

		<label for="exampleInputTitle">Title</label>
		<input type="text" name="postTitle" class="form-control" placeholder="" autofocus required>

	</div>

	<div class="form-group">

		<label for="exampleInputPost">Post</label>
		<textarea name="postBody" class="form-control" placeholder="" rows="5" cols="30" required></textarea>

	</div>

	<button class="btn btn-primary" type="submit" name="button">Publish</button>

</form>

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

Lesson 306 – Challenge 10

The challenge is to create a Javascript object that is called “post”. It has to store both the post title and the post body.

To do this we have to refactor the app.post method in the app.js file.

This is the refactored app.post method –

app.post("/compose", function(req, res) {

	const post = {
		title: req.body.postTitle,
		content: req.body.postBody
	};

});

Lesson 308 – Challenge 11

The challenge is to put the const post created in Challenge 10 inside an array which is a global variable called “posts”.

At the end of the post route you will redirect to the app.get(“/”) route and inside of that route you will log all of the posts you have created inside the “posts” array.

To complete this challenge, you first create the “posts” array by inserting this code in the app.js file above all of the app.get and app.post methods –

const posts = [];

Next you add this code to the app.post method in order to push the post to the posts array and to redirect to the home page –

posts.push(post);
res.redirect("/");

The new app.post code including the addition is –

app.post("/compose", function(req, res) {

	const post = {
		title: req.body.postTitle,
		content: req.body.postBody
	};

	posts.push(post);
	res.redirect("/");

});

Next in the app.get(“/”) method you add this code to console log the posts array using this code –

console.log(posts);

The new app.get method code including the addition is –

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

	res.render("home", {startingContent: homeStartingContent});
	console.log(posts);

});

Lesson 310 – Challenge 12

The challenge is to pass the posts from to the home.ejs file and log them there.

This is done by adding another key: value pair to the res.render in the app.get(“/”) method in the app.js file. The app.get method with the added key: value pair of post: post looks like this –

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

	res.render("home", {

		startingContent: homeStartingContent, 
		posts: posts
	});
	
});

The home.ejs file then needs to be amended by adding the console.log(posts) inside EJS scriplet tags like this –

<% console.log(posts) %>

The whole home.ejs file including the console.log statement now looks like this –

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

<h1>Home</h1>

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

<% console.log(posts) %>

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