diff options
| author | SOGYO\bvdoord <bvdoord@sogyo.nl> | 2019-10-04 14:15:06 +0200 |
|---|---|---|
| committer | SOGYO\bvdoord <bvdoord@sogyo.nl> | 2019-10-04 14:15:06 +0200 |
| commit | 2c283d65a71f1a4e455472fd4f85d91b547c45fb (patch) | |
| tree | 7a508ee8754c89c44ea7855573a3fd07fc6c4318 | |
| parent | 453d988178a02d7322ad63c0210fcd160f3c21a1 (diff) | |
Spelfouten eruit gehaald
| -rw-r--r-- | client/style/main.css | 2 | ||||
| -rw-r--r-- | readme.md | 2 |
2 files changed, 2 insertions, 2 deletions
diff --git a/client/style/main.css b/client/style/main.css index b7edb5b..b6aabb5 100644 --- a/client/style/main.css +++ b/client/style/main.css @@ -8,7 +8,7 @@ body { --light-text-color: rgb(107, 107, 107); } -/* Describes the styling of the one and only emenent with id="mainheader", note the # in front of mainheader */ +/* Describes the styling of the one and only element with id="mainheader", note the # in front of mainheader */ #mainheader { background-color: var(--primary-color); font-size: 3rem; @@ -64,7 +64,7 @@ It helps if you're familiar with the basics of API's. Look into: HTTP requests, 1. Install the Node.js webserver (https://nodejs.org/en/) and run the `npm install` command in the main folder of the project. This downloads the project dependencies defined in `package.json`. Finally run the project using `node main.js` and going to `localhost:8000` in your browser. You should see the working version of the Sogyo Adventure webshop so far. 2. Open `main.js` and look at the various routes defined there. Before continuing with the other tasks, understand what each of the routes does and what they might do. 3. Go back to `client\index.html` and update it so that the various attractions are no longer hard coded. Abstract the common HTML used for every attraction into a common `<template>` (like the one used in the shopping basket). When loading the page make a call to `api/attractions` using `fetch("api/attractions")`. Await the request and parse the actual response from JSON to JavaScript objects. Instantiate a template for each of the available attractions. Dynamically show the park name, the minimum number of adults and minimum number of kids for the family discount, as well as the discount (displayed in human readable percentages.) -4. On `client\shoppingbasket.html` a call should be made to `api/placeorder` when the user clicks the pay button. Because we will be sending the order data from the client to the server, this will be a POST request. This is also done using the `fetch()` method, requiring some additional configuration. Write the client side code to make the API request (in `client\shoppingbasket.html`), then the server side code to handle the request (in `main/js`). There should be one less ticket available for each ticket the user orders. Also the order should be saved into a separate array similar to the one that contains the attraction information. Now we're running the site on a webserver, we no longer should redirect users to `client\oderplaced.html` but to just `orderplaced.html`. +4. On `client\shoppingbasket.html` a call should be made to `api/placeorder` when the user clicks the pay button. Because we will be sending the order data from the client to the server, this will be a POST request. This is also done using the `fetch()` method, requiring some additional configuration. Write the client side code to make the API request (in `client\shoppingbasket.html`), then the server side code to handle the request (in `main/js`). There should be one less ticket available for each ticket the user orders. Also the order should be saved into a separate array similar to the one that contains the attraction information. Now we're running the site on a webserver, we no longer should redirect users to `client\orderplaced.html` but to just `orderplaced.html`. 5. If there are no more tickets available for a certain attraction, the order button should be disabled. 6. Update `client\index.html` in a way to display the discount in real time. When the user enters a value for the number of adults or kids or changes the number, the total price should be shown. The discount should of course be factored into the total price, if eligible. 7. Display the total price for a ticket in the shopping basket. |
