- Notifications
You must be signed in to change notification settings - Fork2
foundersandcoders/server-challenge
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Practice using Express to create an HTTP server with a variety of different features.
Make sure you have Git and Node (v18) installed.
- Use this template, clone your copy, cd into it
- Run
npm installto install all the dependencies - Run
npm run devto start the server.
This uses thenodemonlibrary to auto-restart the server when you save changes.
Each challenge has associated unit tests. You can either run all the tests withnpm test, or each individual challenge's tests withnpm run test:1,npm run test:2 etc.
Make sure you read test failures carefully—the output can be noisy but the error message should provide useful information to help you.
Create a new route for the homepage atGET /. It should return an HTML body including a<h1>Hello Express</h1>.
Create a new route atGET /colour. It should check the URL's search parameters for ahex property. If present the returned HTML page should have its<body> element's background-color set to thehex value. E.g. this requestGET /colour?hex=ff0000 should result in an HTML page with a red background. Ifhex is not present the background should be white.
Hint: you can dynamically create the HTML response body using a template literal string—and HTML pages can include inline<style> tags...
Edit yourGET /colour route to include a form in the HTML response. This form should include an input for the user to type in a hex code. When the form is submitted aGET request will be sent to the same route, which will change the background of the page to whatever the user entered.
Create a new routeGET /cheese. It should return an HTML response containing a form for submitting new cheeses. The form should send POST requests to the same page. It should include a text input for the cheese name and a range input for the cheese's rating (from 0 to 5).
Create a new routePOST /cheese. It should receive the POST request from the previous form and use the built-in Express middleware to read the url-encoded request body.
It should store each cheese rating in an arrayoutside of the handler function, so other routes can access this information. Once the new rating is pushed to this array it should redirect back to the same page.
Amend theGET /cheese handler to render a list of cheese ratings that have been submitted.
Hint: you can dynamically create an HTML list from an array by looping over it withfor..of or.map().join("") to create a string. E.g.
constnums=[1,2,3];constlist=nums.map((num)=>`<li>${num}</li>`);consthtml=`<ul>${list.join("")}</ul>`;
Submitting the form should result in the page reloading and displaying the newly added cheese in the list.
cheese-demo.mp4
About
Practice using Express to create an HTTP server with a variety of different features.
Resources
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Uh oh!
There was an error while loading.Please reload this page.
Contributors3
Uh oh!
There was an error while loading.Please reload this page.