From 2555e4be4d4192b0da3f3d35f9b09795ecc041a9 Mon Sep 17 00:00:00 2001 From: Mike Vink Date: Fri, 18 Jun 2021 13:30:00 +0200 Subject: readmeTest --- readme.md | 122 +----------------------------------------------- readmeMedia/testgif.gif | Bin 0 -> 443433 bytes 2 files changed, 1 insertion(+), 121 deletions(-) create mode 100644 readmeMedia/testgif.gif diff --git a/readme.md b/readme.md index fbf113c..29b3c2d 100644 --- a/readme.md +++ b/readme.md @@ -1,121 +1 @@ -# Introduction - -Sogyo Adventure is a new service for Sogyo employees to buy family tickets for amusement parks with attractive discounts. The goal of Sogyo Adventure is to make it as easy as possible to buy tickets. That means that the webshop itself should be as easy to use as possible. According to market research the user base is split almost exactly between desktop, tablet and mobile devices. This means the site should work on every device - large and small. - -Because Sogyo Adventure wants a single, consistent theme throughout their site, the styling defined in `main.css` should be used across all pages. The stylesheet has already been referenced on the index page (also known as a home page) and should be included in the same manner on all other pages. - -The target market being Sogyo employees, the webshop can get away with assuming its userbase uses the latest version of Chrome, Firefox, Edge and other up to date browsers. This means that even though it's commonly advised to support as many older browsers as possible, Sogyo Adventure has the freedom to use the latest web technology. This includes (but is not limited to): -* Flexbox -* CSS grid -* CSS variables -* JavaScript modules -* Classes -* Interpolated string literals -* Promises -* Async await - -To get an idea of what Sogyo Adventure could look like, a prototype will first be build. Your assignment is to make that first prototype. For now you won't have to worry about security, authorisation, payment and other such things. Of course all of those are important in real life applications, but not in the prototype. - -For the time being we will focus solely on the files in the `client` folder. - -Open `client/index.html` in your browser of choice to see what the the application looks like to users. Also open `client/index.html` in your favorite editor. If you make changes to the html file, you'll need to reload that page in your browser. By using the developer tools within your browser, you can usually edit the html and/or css on the go, but changes aren't saved. - -# Task 1: styling - -Take about a day for this first task. If you can't complete it in that timeframe, don't worry. Just move on with the other tasks and come back to it later. - -There's a few requirements to the look and feel of the page: -* The header should always be at the top of the page, even if the user scrolls down, so that the shopping basket is easily accessible -* The links in the menu should be center aligned -* The links in the menu should be white, whether they've been visited before or not -* The links in the menu should be highlighted in a contrasting color when hovering over them -* Style the 'add to shopping basket' button so it doesn't look like the default. -* Set a favicon (the tiny icon shown in the browsers tab bar next to the tab name) - -Otherwise get creative! Try changing colors, fonts, color gradients, borders, rounded corners, shadows, transforms, animations, etc. Don't forget that the different pages should look and feel similar, yet clearly distinct from each other. It helps if you get comfortable with the idea of CSS selectors. `client/style/main.css` uses different three different kinds of CSS selectors by default, with comments describing what they do, but CSS selectors can be composed and there's more advanced ones as well. - -# Task 2: the index page - -The buttons to order tickets will all get the same functionality. A so called event listener that gets fired when the user clicks on one of those buttons. The following steps will guide you through the process of registering event listeners and implementing their behavior. Don't worry about the discounts for family tickets just yet. - -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 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 `
` containing the attraction name as the text content and two `` elements for the user to enter numbers. Use these nodes to find the name of the attraction (obtained by calling `.innerText` on the `
` element), the number of adults (obtained by calling `.value` on the `` 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"`. - -# Task 3: Shopping Basket - -We'll now implement the shopping basket, in `client/shoppingbasket.html` and `client/shoppingbasket.js`. - -1. The shopping basket page will have to show the user the current state of their shopping basket. To do this, first read their current orders from the `localStorage`, essentially reversing the process you used to persist it. Make sure to cast any numbers in your data back from a string to a number. -2. `client/shoppingbasket.html` defines a template, i.e. the HTML that should be used for each of the users ordered tickets, but the template itself is never shown to the user. Iterate over each ticket in the shopping basket and add a node to the `
` element for each ticket, based on the pre-defined `