mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-06-28 21:00:56 +08:00
fix(curriculum): use correct pronouns on workshop projects (#56769)
Co-authored-by: Ilenia <26656284+ilenia-magoni@users.noreply.github.com> Co-authored-by: Dario-DC <105294544+Dario-DC@users.noreply.github.com>
This commit is contained in:
Anna
GitHub
parent
a810c671f6
commit
6a94e01bf0
@ -9,7 +9,7 @@ dashedName: step-14
|
||||
|
||||
You have styled three elements by writing CSS inside the `style` tags. This works, but since there will be many more styles, it's best to put all the styles in a separate file and link to it.
|
||||
|
||||
We have created a separate `styles.css` file for you and switched the editor view to that file. You can change between files with the tabs at the top of the editor.
|
||||
A separate `styles.css` file has been created for you and the editor view has been switched to that file. You can change between files with the tabs at the top of the editor.
|
||||
|
||||
Start by rewriting the styles you have created into the `styles.css` file. Make sure to exclude the opening and closing `style` tags.
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@ During the development process, it is important to be able to check what’s goi
|
||||
|
||||
Node is just a JavaScript environment. Like client side JavaScript, you can use the console to display useful debug information. On your local machine, you would see console output in a terminal. On Gitpod, a terminal is open at the bottom of the editor by default.
|
||||
|
||||
We recommend to keep the terminal open while working at these challenges. By reading the output in the terminal, you can see any errors that may occur.
|
||||
It is recommended to keep the terminal open while working at these challenges. By reading the output in the terminal, you can see any errors that may occur.
|
||||
|
||||
The server must be restarted after making changes to its files.
|
||||
|
||||
@ -26,7 +26,7 @@ You can stop the server from the terminal using `Ctrl + C` and start it using No
|
||||
|
||||
For example, the `"start": "node server.js"` script would be run from the terminal using `npm run start`.
|
||||
|
||||
To implement server auto restarting on file save Node provides the `--watch` flag you can add to your start script `"start": "node --watch server.js"` or you can install an npm package like `nodemon`. We will leave this to you as an exercise.
|
||||
To implement server auto restarting on file save Node provides the `--watch` flag you can add to your start script `"start": "node --watch server.js"` or you can install a npm package like `nodemon`. This will be left to you as an exercise.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -8,9 +8,9 @@ dashedName: start-a-working-express-server
|
||||
|
||||
# --description--
|
||||
|
||||
In the first two lines of the file `myApp.js`, you can see how easy it is to create an Express app object. This object has several methods, and you will learn many of them in these challenges. One fundamental method is `app.listen(port)`. It tells your server to listen on a given port, putting it in running state. For testing reasons, we need the app to be running in the background so we added this method in the `server.js` file for you.
|
||||
In the first two lines of the file `myApp.js`, you can see how easy it is to create an Express app object. This object has several methods, and you will learn many of them in these challenges. One fundamental method is `app.listen(port)`. It tells your server to listen on a given port, putting it in running state. For testing reasons, the app needs to be running in the background, so this method has been added in the `server.js` file for you.
|
||||
|
||||
Let’s serve our first string! In Express, routes takes the following structure: `app.METHOD(PATH, HANDLER)`. METHOD is an http method in lowercase. PATH is a relative path on the server (it can be a string, or even a regular expression). HANDLER is a function that Express calls when the route is matched. Handlers take the form `function(req, res) {...}`, where req is the request object, and res is the response object. For example, the handler
|
||||
Let’s serve our first string! In Express, routes takes the following structure: `app.METHOD(PATH, HANDLER)`. METHOD is an HTTP method in lowercase. PATH is a relative path on the server (it can be a string, or even a regular expression). HANDLER is a function that Express calls when the route is matched. Handlers take the form `function(req, res) {...}`, where req is the request object, and res is the response object. For example, the handler
|
||||
|
||||
```js
|
||||
function(req, res) {
|
||||
@ -24,7 +24,8 @@ will serve the string 'Response String'.
|
||||
|
||||
Use the `app.get()` method to serve the string "Hello Express" to GET requests matching the `/` (root) path. Be sure that your code works by looking at the logs, then see the results in the preview if you are using Gitpod.
|
||||
|
||||
**Note:** All the code for these lessons should be added in between the few lines of code we have started you off with.
|
||||
**Note:** All the code for these lessons should be added in between the few lines of code that have been
|
||||
written for you.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@ dashedName: serve-an-html-file
|
||||
|
||||
# --description--
|
||||
|
||||
You can respond to requests with a file using the `res.sendFile(path)` method. You can put it inside the `app.get('/', ...)` route handler. Behind the scenes, this method will set the appropriate headers to instruct your browser on how to handle the file you want to send, according to its type. Then it will read and send the file. This method needs an absolute file path. We recommend you to use the Node global variable `__dirname` to calculate the path like this:
|
||||
You can respond to requests with a file using the `res.sendFile(path)` method. You can put it inside the `app.get('/', ...)` route handler. Behind the scenes, this method will set the appropriate headers to instruct your browser on how to handle the file you want to send, according to its type. Then it will read and send the file. This method needs an absolute file path. It's recommended that you use the Node global variable `__dirname` to calculate the path like this:
|
||||
|
||||
```js
|
||||
absolutePath = __dirname + '/relativePath/file.ext'
|
||||
@ -16,7 +16,7 @@ absolutePath = __dirname + '/relativePath/file.ext'
|
||||
|
||||
# --instructions--
|
||||
|
||||
Send the `/views/index.html` file as a response to GET requests to the `/` path. If you view your live app, you should see a big HTML heading (and a form that we will use later…), with no style applied.
|
||||
Send the `/views/index.html` file as a response to GET requests to the `/` path. If you view your live app, you should see a big HTML heading (and a form that you will use later…), with no style applied.
|
||||
|
||||
**Note:** You can edit the solution of the previous challenge or create a new one. If you create a new solution, keep in mind that Express evaluates routes from top to bottom, and executes the handler for the first match. You have to comment out the preceding solution, or the server will keep responding with a string.
|
||||
|
||||
|
||||
@ -12,7 +12,7 @@ An HTML server usually has one or more directories that are accessible by the us
|
||||
|
||||
In Express, you can put in place this functionality using the middleware `express.static(path)`, where the `path` parameter is the absolute path of the folder containing the assets.
|
||||
|
||||
If you don’t know what middleware is... don’t worry, we will discuss in detail later. Basically, middleware are functions that intercept route handlers, adding some kind of information. A middleware needs to be mounted using the method `app.use(path, middlewareFunction)`. The first `path` argument is optional. If you don’t pass it, the middleware will be executed for all requests.
|
||||
If you don’t know what middleware is... don’t worry, this will be discussed in detail later. Basically, middleware are functions that intercept route handlers, adding some kind of information. A middleware needs to be mounted using the method `app.use(path, middlewareFunction)`. The first `path` argument is optional. If you don’t pass it, the middleware will be executed for all requests.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -10,7 +10,7 @@ dashedName: serve-json-on-a-specific-route
|
||||
|
||||
While an HTML server serves HTML, an API serves data. A <dfn>REST</dfn> (REpresentational State Transfer) API allows data exchange in a simple way, without the need for clients to know any detail about the server. The client only needs to know where the resource is (the URL), and the action it wants to perform on it (the verb). The GET verb is used when you are fetching some information, without modifying anything. These days, the preferred data format for moving information around the web is JSON. Simply put, JSON is a convenient way to represent a JavaScript object as a string, so it can be easily transmitted.
|
||||
|
||||
Let's create a simple API by creating a route that responds with JSON at the path `/json`. You can do it as usual, with the `app.get()` method. Inside the route handler, use the method `res.json()`, passing in an object as an argument. This method closes the request-response loop, returning the data. Behind the scenes, it converts a valid JavaScript object into a string, then sets the appropriate headers to tell your browser that you are serving JSON, and sends the data back. A valid object has the usual structure `{key: data}`. `data` can be a number, a string, a nested object or an array. `data` can also be a variable or the result of a function call, in which case it will be evaluated before being converted into a string.
|
||||
The first thing you will create is a simple API. Create a route that responds with JSON at the path `/json`. You can do it as usual, with the `app.get()` method. Inside the route handler, use the method `res.json()`, passing in an object as an argument. This method closes the request-response loop, returning the data. Behind the scenes, it converts a valid JavaScript object into a string, then sets the appropriate headers to tell your browser that you are serving JSON, and sends the data back. A valid object has the usual structure `{key: data}`. `data` can be a number, a string, a nested object or an array. `data` can also be a variable or the result of a function call, in which case it will be evaluated before being converted into a string.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -14,7 +14,7 @@ The environment variables are accessible from the app as `process.env.VAR_NAME`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Let's add an environment variable as a configuration option.
|
||||
For this challenge you should add an environment variable as a configuration option.
|
||||
|
||||
Create a `.env` file in the root of your project directory, and store the variable `MESSAGE_STYLE=uppercase` in it.
|
||||
|
||||
|
||||
@ -21,7 +21,7 @@ app.get('/user', function(req, res, next) {
|
||||
});
|
||||
```
|
||||
|
||||
This approach is useful to split the server operations into smaller units. That leads to a better app structure, and the possibility to reuse code in different places. This approach can also be used to perform some validation on the data. At each point of the middleware stack you can block the execution of the current chain and pass control to functions specifically designed to handle errors. Or you can pass control to the next matching route, to handle special cases. We will see how in the advanced Express section.
|
||||
This approach is useful to split the server operations into smaller units. That leads to a better app structure, and the possibility to reuse code in different places. This approach can also be used to perform some validation on the data. At each point of the middleware stack you can block the execution of the current chain and pass control to functions specifically designed to handle errors.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@ dashedName: get-route-parameter-input-from-the-client
|
||||
|
||||
# --description--
|
||||
|
||||
When building an API, we have to allow users to communicate to us what they want to get from our service. For example, if the client is requesting information about a user stored in the database, they need a way to let us know which user they're interested in. One possible way to achieve this result is by using route parameters. Route parameters are named segments of the URL, delimited by slashes (/). Each segment captures the value of the part of the URL which matches its position. The captured values can be found in the `req.params` object.
|
||||
When building an API, you have to allow users to communicate to us what they want to get from our service. For example, if the client is requesting information about a user stored in the database, they need a way to let us know which user they're interested in. One possible way to achieve this result is by using route parameters. Route parameters are named segments of the URL, delimited by slashes (/). Each segment captures the value of the part of the URL which matches its position. The captured values can be found in the `req.params` object.
|
||||
|
||||
<blockquote>route_path: '/user/:userId/book/:bookId'<br>actual_request_URL: '/user/546/book/6754' <br>req.params: {userId: '546', bookId: '6754'}</blockquote>
|
||||
|
||||
|
||||
@ -8,11 +8,11 @@ dashedName: get-data-from-post-requests
|
||||
|
||||
# --description--
|
||||
|
||||
Mount a POST handler at the path `/name`. It’s the same path as before. We have prepared a form in the html frontpage. It will submit the same data of exercise 10 (Query string). If the body-parser is configured correctly, you should find the parameters in the object `req.body`. Have a look at the usual library example:
|
||||
Mount a POST handler at the path `/name`. It’s the same path as before. A form has been prepared in the html frontpage. It will submit the same data of exercise 10 (Query string). If the body-parser is configured correctly, you should find the parameters in the object `req.body`. Have a look at the usual library example:
|
||||
|
||||
<blockquote>route: POST '/library'<br>urlencoded_body: userId=546&bookId=6754 <br>req.body: {userId: '546', bookId: '6754'}</blockquote>
|
||||
|
||||
Respond with the same JSON object as before: `{name: 'firstname lastname'}`. Test if your endpoint works using the html form we provided in the app frontpage.
|
||||
Respond with the same JSON object as before: `{name: 'firstname lastname'}`. Test if your endpoint works using the html form provided in the app frontpage.
|
||||
|
||||
Tip: There are several other http methods other than GET and POST. And by convention there is a correspondence between the http verb, and the operation you are going to execute on the server. The conventional mapping is:
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@ dashedName: use-the-caret-character-to-use-the-latest-minor-version-of-a-depende
|
||||
|
||||
# --description--
|
||||
|
||||
Similar to how the tilde we learned about in the last challenge allows npm to install the latest PATCH for a dependency, the caret (`^`) allows npm to install future updates as well. The difference is that the caret will allow both MINOR updates and PATCHes.
|
||||
Similar to how the tilde you learned about in the last challenge allows npm to install the latest PATCH for a dependency, the caret (`^`) allows npm to install future updates as well. The difference is that the caret will allow both MINOR updates and PATCHes.
|
||||
|
||||
Your current version of `@freecodecamp/example` should be `~1.2.13` which allows npm to install to the latest `1.2.x` version. If you were to use the caret (^) as a version prefix instead, npm would be allowed to update to any `1.x.x` version.
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-23
|
||||
|
||||
# --description--
|
||||
|
||||
Now we can add the horizontal spacing using `flex`. In your `p` selector, add a `display` property set to `flex` and a `justify-content` property set to `space-between`.
|
||||
Now you can add the horizontal spacing using `flex`. In your `p` selector, add a `display` property set to `flex` and a `justify-content` property set to `space-between`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-10
|
||||
|
||||
# --description--
|
||||
|
||||
It's time to test each of the functions. You can use any of the recipes for this, but let's start with `recipe1`.
|
||||
It's time to test each of the functions. You can use any of the recipes for this, but this tutorial will start with `recipe1`.
|
||||
|
||||
Create three new variables: `recipe1AverageRating`, `recipe1TotalIngredients`, and `recipe1DifficultyLevel`. Assign them the values by calling the corresponding function for each variable and passing in the appropriate `recipe1` property.
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ dashedName: step-5
|
||||
|
||||
# --description--
|
||||
|
||||
Before we move on, you should practice how to access properties from an object.
|
||||
Before you move on, you should practice how to access properties from an object.
|
||||
|
||||
You can use either dot (`.`) or bracket (`[]`) notation to do this. Here's an example:
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@ Margin is the area outside of the box, and can be used to control the space betw
|
||||
|
||||
Here the bottom element has a larger top margin, pushing it further down the page.
|
||||
|
||||
Now that you quickly reviewed the CSS box model, let's get started on the Rothko painting.
|
||||
Now that you quickly reviewed the CSS box model, it's time to get started on the Rothko painting.
|
||||
|
||||
Remove the `<img>` element.
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user