fix(guide): restructure curriculum guide articles (#36501)

* fix: restructure certifications guide articles
* fix: added 3 dashes line before prob expl
* fix: added 3 dashes line before hints
* fix: added 3 dashes line before solutions
This commit is contained in:
Randell Dawson
2019-07-24 00:59:27 -07:00
committed by mrugesh
parent c911e77eed
commit 1494a50123
990 changed files with 13202 additions and 8628 deletions

View File

@@ -1,41 +1,61 @@
---
title: Chain Middleware to Create a Time Server
---
## Chain Middleware to Create a Time Server
# Chain Middleware to Create a Time Server
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
---
## Problem Explanation
Similar to the last challenge, but now we are chaining 2 functions together. It seems complicated, but it's just JavaScript.
### Hint
---
## Hints
### Hint 1
Instead of responding with the time we can also add any arbitrary property to the request object and pass it to the next function by calling the `next()` method. This is trivial, but it makes for a decent example. The code will looks like this:
```javascript
app.get("/now", (req, res, next) => {
// adding a new property to req object
// in the middleware function
req.string = "example";
next();
}, (req, res) => {
// accessing the newly added property
// in the main function
res.send(req.string);
});
app.get(
"/now",
(req, res, next) => {
// adding a new property to req object
// in the middleware function
req.string = "example";
next();
},
(req, res) => {
// accessing the newly added property
// in the main function
res.send(req.string);
}
);
```
### Solution
---
## Solutions
<details><summary>Solution 1 (Click to Show/Hide)</summary>
```javascript
app.get("/now", (req, res, next) => {
req.time = new Date().toString();
next();
}, (req, res) => {
res.send({
time: req.time
});
});
app.get(
"/now",
(req, res, next) => {
req.time = new Date().toString();
next();
},
(req, res) => {
res.send({
time: req.time
});
}
);
```
</details>
<details><summary>Solution 2 (Click to Show/Hide)</summary>
You can also declare the middleware beforehand to use in multiple routes as shown below:
@@ -51,3 +71,5 @@ app.get("/now", middleware, (req, res) => {
});
});
```
</details>

View File

@@ -1,31 +1,35 @@
---
title: Get Data from POST Requests
---
## Get Data from POST Requests
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
# Get Data from POST Requests
---
## Problem Explanation
Just like using req.query we can do req.body to get our data. This challenge is very similar to "Get Query Parameter Input from the Client."
In order to get data from a post request a general format is:
## Hint
---
## Hints
### Hint 1
```javascript
app.post(PATH, function(req, res) {
// Handle the data in the request
});
```
## Solution
---
## Solutions
<details><summary>Solution 1 (Click to Show/Hide)</summary>
```javascript
app.post('/name', function(req, res) {
app.post("/name", function(req, res) {
// Handle the data in the request
var string = req.body.first+ ' '+req.body.last;
res.json({"name": string});
var string = req.body.first + " " + req.body.last;
res.json({ name: string });
});
```
<a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/apis-and-microservices/basic-node-and-express/use-body-parser-to-parse-post-requests/index.md' target='_blank' rel='nofollow'>Help our community expand these hints and guides</a>.
</details>

View File

@@ -1,13 +1,18 @@
---
title: Get Query Parameter Input from the Client
---
## Get Query Parameter Input from the Client
# Get Query Parameter Input from the Client
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
---
## Problem Explanation
Given the endpoint URL, `/name?first=firstname&last=lastname`, we can extract the query parameters (`first` and `last`) and their corresponding values from the `req.query` object and send a custom JSON response containing values derived from the query parameters to the client.
### Solution
---
## Solutions
<details><summary>Solution 1 (Click to Show/Hide)</summary>
```javascript
app.get("/name", function(req, res) {
@@ -21,3 +26,4 @@ app.get("/name", function(req, res) {
});
});
```
</details>

View File

@@ -1,13 +1,17 @@
---
title: Get Route Parameter Input from the Client
---
## Get Route Parameter Input from the Client
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
# Get Route Parameter Input from the Client
---
## Problem Explanation
If someone tells you to build a GET or POST endpoint you would achieve the same using `app.get(...)` or `app.post(...)` accordingly.
## Hint
---
## Hints
## Hint #1
In order to get route parameters from a POST request, the general format is as follows:
@@ -23,7 +27,11 @@ app.post("/:param1/:param2", (req, res) => {
});
```
## Solution
---
## Solutions
<details><summary>Solution 1 (Click to Show/Hide)</summary>
```javascript
app.get("/:word/echo", (req, res) => {
@@ -33,3 +41,4 @@ app.get("/:word/echo", (req, res) => {
});
});
```
</details>

View File

@@ -1,12 +1,19 @@
---
title: Implement a Root-Level Request Logger Middleware
---
## Implement a Root-Level Request Logger Middleware
# Implement a Root-Level Request Logger Middleware
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
---
## Problem Explanation
It is easier to write this challenge all at the top (there is already a stub for it). This is because middleware must be placed the function calls you want it to be used for.
---
## Hints
### Hint 1
To set up your own middleware you can do it like so:
```javascript
@@ -15,14 +22,13 @@ app.use(function middleware(req, res, next) {
// Call the next function in line:
next();
});
```
If you have trouble formatting the string correctly, one way to do it looks like:
```javascript
var string = req.method + ' ' + req.path + ' - ' + req.ip;
var string = req.method + " " + req.path + " - " + req.ip;
```
### Resources
#### Relevant Links
- [Express Middleware](https://expressjs.com/en/guide/using-middleware.html)

View File

@@ -1,7 +1,7 @@
---
title: Basic Node and Express
---
## Basic Node and Express
# Basic Node and Express
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/mathematics/quadratic-equations/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.

View File

@@ -1,21 +1,20 @@
---
title: Meet the Node console
---
## Meet the Node console
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
# Meet the Node console
---
## Problem Explanation
Make sure you have cloned the correct repository/glitch project and are writing your code in myapp.js.
There are many methods available from the node console. You can find a list of these methods with Node.js documentation
<a href='https://nodejs.org/dist/latest-v10.x/docs/api/console.html' target='_blank' rel='nofollow'>here</a>. A common use would be to log errors such as:
```javascript
console.log("An error happened");
console.log("An error happened");
```
### If you use Glitch
**Note:** If you use Glitch
- Glitch had changed the 'Logs' button to 'Status' button, still on the top-left, under the app name
- Don't submit the 'Edit' page directly. Click the 'Show' button (on top) and submit the application show page's url (url format is like https://appname.glitch.me/)

View File

@@ -1,18 +1,18 @@
---
title: Serve an HTML File
---
## Serve an HTML File
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
# Serve an HTML File
---
## Problem Explanation
You probably need to comment out the last challenge. If you have a website and want to serve an index.html file you probably want to put this in a public folder. This is to ensure the public doesn't see something you dont want them to, and it sometimes is called "public" or "views," but you can technically call it whatever you want.
To serve an index.html in a folder called "public" at the root domain you would do so like this:
```javascript
app.get("/", function(req, res) {
res.sendFile( __dirname + "/public/index.html");
});
app.get("/", function(req, res) {
res.sendFile(__dirname + "/public/index.html");
});
```
Note: __dirname returns the root directory is a best practice for node developers.
**Note:** __dirname returns the root directory is a best practice for node developers.

View File

@@ -1,16 +1,17 @@
---
title: Serve JSON on a Specific Route
---
## Serve JSON on a Specific Route
# Serve JSON on a Specific Route
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
---
## Problem Explanation
It is rather simple to serve a JSON object with Node (at the `/json` route), if we want to deliver an object containing a key `message` and with the value `"Hello json"` we can do so as indicated:
```javascript
app.get("/json", (req, res) => {
res.json({
"message": "Hello json"
});
res.json({
message: "Hello json"
});
});
```

View File

@@ -1,10 +1,10 @@
---
title: Serve Static Assets
---
## Serve Static Assets
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
# Serve Static Assets
---
## Problem Explanation
Serving static webpages and assets is fairly simple with `express`. This could be useful for building your own portfolio website or blog, single-page web applications etc.
To serve static assets from the `public` folder in the you can use the `express.static()` method as the middleware. This method takes the endpoint and the absolute path to the directory containing the static assets as arguments and exposes the files in that folder at the given endpoint. By default, if the endpoint is not passed to the method, the folder is exposed at the root endpoint i.e. `/` for the application.

View File

@@ -1,9 +1,13 @@
---
title: Start a Working Express Server
---
## Start a Working Express Server
# Start a Working Express Server
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
---
## Hints
### Hint 1
If you had a website at "example.com/" and wanted to serve a string such as "Hello Express" to whoever visits the root domain you could do so easily using Node and/or express:

View File

@@ -1,16 +1,16 @@
---
title: Use body-parser to Parse POST Requests
---
## Use body-parser to Parse POST Requests
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
# Use body-parser to Parse POST Requests
---
## Problem Explanation
The body-parser should already be added to your project if you used the provided boilerplate, but if not it should be there as:
```json
"dependencies": {
"body-parser": "^1.19.0",
...
"express": "^4.17.1"
}
```
@@ -22,7 +22,7 @@ This guide assumes you have imported the `body-parser` module into your file as
In order to import the same, you just need to add the following line at the top of your file:
```javascript
var bodyParser = require('body-parser');
var bodyParser = require("body-parser");
```
All you need to do for this challenge is pass the middleware to `app.use()`. Make sure it comes before the paths it needs to be used on. Remember that body-parser returns with `bodyParser.urlencoded({extended: false})`. Use the following as a template:

View File

@@ -1,24 +1,22 @@
---
title: Use the .env File
---
## Use the .env File
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
# Use the .env File
---
## Problem Explanation
We can use the .toUpperCase() method to make a string all caps, such as:
```javascript
var response = "Hello World".toUpperCase(); // now becomes "HELLO WORLD"
var response = "Hello World".toUpperCase(); // now becomes "HELLO WORLD"
```
All we need to do now is check what the value of the environment variable is, which you can do like:
```javascript
if (process.env.VAR_NAME === "allCaps") {
response = "Hello World".toUpperCase();
} else {
response = "Hello World";
}
});
if (process.env.VAR_NAME === "allCaps") {
response = "Hello World".toUpperCase();
} else {
response = "Hello World";
}
```