git clone https://github.com/Code-Your-Future/node-status-code-website.git
npm install
npm test
The goal is to write a web application that displays information about different HTTP status codes. When you navigate to http://localhost:4000/200, you should see a web page that tells you that the HTTP status code 200
means OK
.
You need to fetch the information from an API, which you have built yourself. The repository for the status code API is Code-Your-Future/node-status-code-api.
To achieve this goal, you'll have to complete the following steps.
- Make an Express route that accepts a status code as a parameter.
- In the route endpoint, fetch the status code data from the API
- Render the page using the Handlebars template in views/code.hbs. The Handlebars renderer has been already configured.
Next, we'll add some additional information about the status code to the page. We'll use the numbersapi.com service.
- In the Express route handler, fetch the information that corresponds to the status code, e.g. for
200 OK
, fetch http://numbersapi.com/200. - Add the new information into the template.
Hint: The trick is to execute two API calls simultaneously, and wait for both to complete before rendering the template. Promise.all might be helpful.
This repository contains a set of tests, which check that the app works correctly. Run npm test
to check if things work as expected. When the application works correctly, you should see something like:
HTML serving app
✓ has a '/:code' route
✓ calls the api with the correct code
✓ renders templates that live in the views directory, and correctly renders the data
3 passing (121ms)
Currently, when you navigate to http://localhost:4000, you're greeted with a rude Cannot GET /
. Your job is to make an index page that lists all the available status codes... as cats.
Create a new endpoint http://localhost:8080/code in Code-Your-Future/node-status-code-api that returns a list of status code
s and phrase
s. For each status code object in the list, dynamically add a new field image
, that points to the corresponding status code in the https://http.cat service, so that the response becomes:
[
{
"code": "200",
"phrase": "OK",
"image": "https://http.cat/200.jpg"
},
{
"code": "201",
"phrase": "Created",
"image": "https://http.cat/201.jpg"
},
...
]
Create a new Handlebars template in the website repository that displays the code, phrase and the cat image for each object in the response. Clicking the cat should take the user to the corresponding status detail page.
Create a new route /
in the website that fetches the cats from the new API endpoint defined in step 1, and renders them using the template created in step 2.
To make the website doubly awesome, consider doing one or more of the following stretch homework goals:
- Write tests for the new API endpoint and the website route
- Make the cat index page into a responsive grid using Flexbox CSS
- Write a
/search/?query=...
endpoint that receives a query parameter and returns a list of all status codes whosephrase
partially matches the query, e.g./search/?query=bad
should return400 Bad Request
and503 Bad Gateway
.