diff options
| -rw-r--r-- | readme.md | 2 |
1 files changed, 1 insertions, 1 deletions
@@ -40,7 +40,7 @@ The buttons to order tickets will all get the same functionality. A so called ev 1. Define a function on the top level of `client/src/index.js` that will act as the event listener for the "order" buttons. Name this function `orderButtonClicked`. Register it on every button using `document.querySelectorAll()` with a CSS selector as the first argument, iterating over all matching elements and finally calling `.addEventListener()` of type `"click"`. The browser will automatically call `orderButtonClicked` when the user clicks on the elements you've registered the event listener on. 2. Add a call to `console.log()`to the body of `orderButtonClicked`. Open the developer tools in your browser. Click on the order buttons. Is the call properly logged? If not: debug! -3. Event listenersreceives information on the event as the first argument. Add an argument named `event` to the parameter list of `orderButtonClicked`. This object has a `.target` property, in our case the element the user clicked on (the order button.) Use this element reference as a starting point and walk the DOM tree using methods and properties like `parentNode`, `classList.contains()`, `nextElementSibling`, `previousElementSibling`, among others. We are interested in three nodes: the `<div>` containing the attraction name as the text content and two `<input>` elements for the user to enter numbers. Use these nodes to find the name of the attraction (obtained by calling `.innerText` on the `<div>` element), the number of adults (obtained by calling `.value` on the `<input>` element and casting the result to a number) and the number of children (obtained the same way). +3. Event listeners receive information on events as their first argument. Add an argument named `event` to the parameter list of `orderButtonClicked`. This object has a `.target` property, in our case the element the user clicked on (the order button.) Use this element reference as a starting point and walk the DOM tree using methods and properties like `parentNode`, `classList.contains()`, `nextElementSibling`, `previousElementSibling`, among others. We are interested in three nodes: the `<div>` containing the attraction name as the text content and two `<input>` elements for the user to enter numbers. Use these nodes to find the name of the attraction (obtained by calling `.innerText` on the `<div>` element), the number of adults (obtained by calling `.value` on the `<input>` element and casting the result to a number) and the number of children (obtained the same way). 4. Write a separate function named `saveOrderInShoppingBasket` that will be called from `orderButtonClicked`. This function should receive three arguments: the name of the chosen attraction, the number of adults and the number of children. Give each of the parameters a sensible name. `orderButtonClicked` can provide this information from the nodes you've found. 5. Implement `saveOrderInShoppingBasket`. The order should be saved locally on the clients machine in a way that allows the user to close the browser without the order being lost by using `localStorage`. The `localStorage` is a key-value pair store that works with string values only. You'll need to think of a way to persist/save several orders at once. 6. Once the order is added to the shopping basket the number of items in the shopping basket should be updated. It's displayed in the element with class `"badge"` under the `"#shoppingbasket"`. |