Merge branch 'master' of https://github.coventry.ac.uk/web/foundation

05 JavaScript.md

@@ -26,15 +26,15 @@ const biggest = largestNumber(5, 8)
 ```
 
 1. The function is declared using the `function` keyword and the function is given a name which must be a valid variable name.
-    a. If the name comprises more than one word these should be written using camel casing as shown above. This is known as a **Function Declaration**
+    - If the name comprises more than one word these should be written using camel casing as shown above. This is known as a **Function Declaration**
 2. The function above takes two parameters, `a` and `b`.
     - These are variables with local scope (they can't ba accessed outside the function)
     - When the function is called, you need to pass two **values** which get assigned to the two parameters.
     - If you pass too many values the extra ones get _ignored_.
     - If you don't pass enough values the remainder are assigned a value of `null`. `Null` is an assignment value (means a value of no value).
 3. The function returns a value.
-    a. If the numbers are not the same it returns the largest.
-    b. If they are the same it returns `null`.
+    - If the numbers are not the same it returns the largest.
+    - If they are the same it returns `null`.
 
 #### 1.1.1 Test Your Understanding
 
@@ -617,31 +617,3 @@ OMDB key: 220d2590
 
 First task is for students to get an OMDB API key and paste it into the provided script.
 
-### 5.3 Nested Callbacks
-
-Use the same API and show that multiple steps cause nested callbacks and callback hell.
-
-//TODO: use the OMDB API in this section.
-
-Find films released in year X starring Y in genre Z from producer A, etc. country B.
-
-Because the code to be run after a callback is run needs to be _inside_ the callback code it is very challenging to build a script that contains several long-running tasks you get into a situation where you nest callbacks inside callbacks (inside callbacks) which makes the code very difficult to write, debug and read and means its very difficult to split into separate functions, a situation commonly known as **Callback Hell**.
-
-Open the file `nestedCallbacks.js` which asks for a _base_ currency code then prints out all the exchange rates against other currencies. Notice that there are four functions defined, three of which include a callback. Our script is designed to capture user input using `stdin` (needing a callback), identify whether a currency code is valid (requiring a second callback) and then getting the currency conversion rates for the specified currency (requiring a third callback).
-
-1. Notice that the `checkValidCurrencyCode()` function is called by the callback for the `getInput()` function and the `getData()` function is called by the callback for the `checkValidCurrencyCode()` function.
-2. Each callback takes two parameters as normal. The first contains the error (if any) and this needs to be handled in each callback.
-3. The data from the first callback is needed when calling the third function so needs to be stored in an immutable variable (constant).
-4. The fourth, and final, function does not have a callback.
-
-Callbacks are the simplest possible mechanism for asynchronous code in JavaScript. Unfortunately, raw callbacks sacrifice the control flow, exception handling, and function semantics familiar from synchronous code.
-
-### 5.4 Test Your Knowledge
-
-The callbacks are already nested 3 deep. To test your knowledge of deeply nested callbacks you are going to create a script that has 6 levels of nested callbacks!
-
-1. modify the script to ask for the currency to convert to and display only the one conversion rate.
-2. instead of printing the exchange rate, ask for the amount to be converted and them return the equivalent in the chosen currency
-3. use the [OpenExchangeRates](https://openexchangerates.org/api/currencies.json) API to display the full name of the chosen currency.
-
-Even though the script is still simple you are probably already getting in a tangle! Imagine a more complex script with conditions, it would quickly get out of hand and become practically impossible to debug.

exercises/04_css/01_formatting/html/comparison.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Comparison of three computers</title>
+    <meta charset="UTF-8" />
+</head>
+
+<body>
+    <p>A comparison of technical data of three popular 80's home computers:</p>
+
+    <table>
+        <caption>Technical comparison</caption>
+        <thead>
+            <tr>
+                <th>Property</th>
+                <th>Commodore 64</th>
+                <th>ZX Spectrum</th>
+                <th>Commodore VIC-20</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td>CPU</td>
+                <td>MOS Technology 6510</td>
+                <td>Zilog Z80</td>
+                <td>MOS Technology 6502</td>
+            </tr>
+            <tr>
+                <td>RAM</td>
+                <td>64 kilobytes</td>
+                <td>16 or 64 kilobytes</td>
+                <td>5 kilobytes</td>
+            </tr>
+            <tr>
+                <td>ROM</td>
+                <td>20 kilobytes</td>
+                <td>16 kilobytes</td>
+                <td>16 kilobytes</td>
+            </tr>
+        </tbody>
+    </table>
+
+    <hr/>
+
+</body>
+
+</html>

exercises/04_css/01_formatting/html/csstest.html

@@ -0,0 +1,56 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Vintage Home Computers</title>
+    <meta charset="utf-8" />
+</head>
+<body>
+    <article>
+    <h1>1980's Home Computers</h1>
+    <p>In early 1980's, home computers became mainstream. For the first time, computers could be
+        purchased by an average family household.</p>
+     <figure>    
+        <img src="images/computer.png" alt="A computer with a monitor"/>
+         <figcaption>Photo: Piotr Siedlecki, public domain via <a href="http://www.publicdomainpictures.net">http://www.publicdomainpictures.net</a>.</figcaption>
+    </figure> 
+    <h2>Novel uses</h2>
+    <p>The main usage for a home computer was, of course, games. As cool games may not be a valid reason for purchasing an expensive gadget,
+    a wide variety of potential uses were invented to satisfy those family members who might otherwise be sceptical.
+    </p>
+    <p>Some reasons often mentioned were:</p>
+    <ul>
+        <li>learning to write computer programs</li>
+        <li>managing family finances</li>
+        <li>keeping track of freezer contents</li>
+    </ul>
+    <p>While some of these use cases are perfectly valid, it is still unclear how many families actually used
+    their brand new home computer (duly equipped with a cassette drive) to actually record every food item they removed from the freezer.</p>
+
+    <h2>Legendary computers</h2>
+    <p>The three most memorizable  1980's home computers, in subjective order of importance, might be:</p>
+    <ol>
+        <li>Commodore 64</li>
+        <li>Sinclair ZX Spectrum</li>
+        <li>Commodore Vic-20</li>
+    </ol>
+    <p>Read the <a href="http://en.wikipedia.org/wiki/Retrocomputing">Wikipedia article for Retrocomputing</a>.</p>
+
+    <h2>Key concepts</h2>
+    The hardware charateristics of a home computer could be defined by its graphics and sound capabilities, CPU, and amount of memory. The types of memory were:
+    <dl>
+        <dt>RAM</dt>
+        <dd>Random access memory. The memory usable by programs. The amount was typically in the ballpark of 20 to 64 kilobytes. However, the Basic interpreter by default consumed a part of this.</dd>
+
+        <dt>ROM</dt>
+        <dd>Read-only memory. This was normally smaller in size than RAM and roughly corresponded to the hardware implementation of the operating system.</dd>
+    </dl>
+    </article>
+
+
+    <hr />
+    <p>Disclaimer: <em>All opinions in this page reflect the views of their author(s), not the organization.</em></p>      
+
+</body>
+</html>
+

exercises/04_css/01_formatting/html/hello-world.html

@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Document</title>
+</head>
+<body>
+
+</body>
+</html>
+
+<table>
+	<tr>
+		<td></td>
+	</tr>
+</table>
+
+<ul>
+	<li></li>
+	<li></li>
+	<li></li>
+	<li></li>
+	<li></li>
+</ul>

exercises/04_css/01_formatting/html/hello.html

@@ -0,0 +1,16 @@
+
+<!doctype html>
+
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<title>Let's see CSS at Work</title>
+		<meta name="description" content="The HTML5 Template">
+    <meta name="author" content="Joe Bloggs">
+    <link href="css/hello.css" type="text/css" rel="stylesheet" />
+	</head>
+	<body>
+    <h1>Hello CSS!</h1>
+    <p>Use this file to see how CSS can be used to change the appearance of a web page.</p>
+	</body>
+</html>

exercises/04_css/01_formatting/html/selectors.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Selectors</title>    
+    <link href="css/selectors.css" type="text/css" rel="stylesheet" />
+    <meta charset="utf-8" />
+</head>
+<body>
+    <h1 class="alert">Classes and identifiers.</h1>
+
+    <p>This is a regular paragraph.</p>
+
+    <p>This is a regular paragraph, too.</p>
+
+    <p class="alert">This paragraph belongs to a special group of paragraphs. It is a member of 'alert' class.</p>
+
+    <p id="unique">This paragraph should be uniquely formatted. It is assigned an identifier.</p>
+
+    <p class="alert">This paragraph is in 'alert' class, too.</p>
+
+</body>
+</html>

exercises/04_css/01_formatting/html/targets.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Selecting elements</title>
+    <link href="css/targetstyles.css" type="text/css" rel="stylesheet" />
+    <meta charset="utf-8" />
+</head>
+<body>
+
+    <h1>Element selection demo</h1>
+
+    <p>The sources of energy are:</p>
+    <ol>
+        <li>protein</li>
+        <li>carbohydrates</li>
+        <li>fat</li>
+    </ol>
+
+    <p>Sources of carbohydrates:</p>
+    <ul>
+        <li>Fruits and berries</li>
+        <li>Wheat and pasta</li>
+        <li>Sweet products
+            <ul>
+                <li>Candies<ul>
+                    <li>Jelly beans</li>
+                    <li>Irish toffee</li>
+                    <li>Fruit drops</li>
+
+                    </ul></li>
+
+                <li>Pastries</li>
+            </ul>
+        </li>
+
+    </ul>
+
+
+</body>
+</html>

exercises/04_css/01_formatting/index.js

@@ -8,7 +8,7 @@ const views = require('koa-views')
 app.use(require('koa-static')('public'))
 const port = 8080
 
-app.use(views(`${__dirname}/views`, { extension: 'html' }, {map: { handlebars: 'handlebars' }}))
+app.use(views(`${__dirname}/html`, { extension: 'html' }, {map: { handlebars: 'handlebars' }}))
 
 router.get('/', async ctx => await ctx.render('hello'))
 router.get('/test', async ctx => await ctx.render('csstest'))

exercises/06_code_quality/README.md

@@ -0,0 +1,8 @@
+# Assignment Template
+
+This repository contains the base files for the assignment. To make use of this carry out the following steps:
+
+1. Fork this repository but change its name (replace `xxx` with your university username):
+    1. If this is your original assignment, `xxx-coursework`.
+    2. If this is your resit assignment code, `xxx-resit`.
+2. Replace the contents of this file with the details of the topic you have been assigned.

exercises/06_code_quality/archive/auth.specx.js

@@ -0,0 +1,60 @@
+
+'use strict'
+
+const puppeteer = require('puppeteer')
+
+let page
+let browser
+
+const baseURL = 'http://localhost:8080'
+
+beforeAll( async() => {
+	const width = 800
+	const height = 600
+	browser = await puppeteer.launch({
+		headless: true,
+		slowMo: 40,
+		args: [`--window-size=${width},${height}`, '--disable-http2']
+	})
+	page = await browser.newPage()
+	await page.setViewport({ width, height })
+})
+
+afterAll( async() => await browser.close())
+
+describe('checking home screen is protected', () => {
+	test('home screen redirects to login if not logged in', async done => {
+		await page.waitFor(1000)
+		await page.goto('http://localhost:8080/logout')
+		await page.waitFor(1000)
+		//await page.goto('http://localhost:8080/', { waitUntil: 'domcontentloaded' })
+		const title = await page.title()
+		expect(title).toBe('Log In')
+		done()
+	})
+})
+
+describe('registering an account', () => {
+	test('home screen redirects to login if not logged in', async done => {
+		try {
+			await page.waitFor(1000)
+			await page.goto(`${baseURL}/register`, { waitUntil: 'domcontentloaded' })
+			await page.type('input[name=user]', 'jbloggs')
+			await page.type('input[name=pass]', 'p455w0rd')
+			const input = await page.$('input[name=avatar]')
+			await input.uploadFile('screenshots/person.png')
+			await page.screenshot({ path: 'screenshots/completedRegForm.png' })
+			await page.click('input[type=submit]')
+			await page.waitFor(1000)
+			await page.screenshot({ path: 'screenshots/accountCreated.png' })
+			const title = await page.title()
+			expect(title).toBe('Log In')
+			const text = await page.evaluate(() => document.body.textContent)
+			expect(text).toContain('you need to log in')
+		} catch(err) {
+			//done.fail(new Error(err.message))
+		} finally {
+			done()
+		}
+	})
+})