Merge branch 'master' of https://github.coventry.ac.uk/web/dynamic-we…

…bsites

05 The DOM.md

@@ -0,0 +1,97 @@
+
+# The Document Object Model
+
+In all the previous labs you have been writing JavaScript code to run on the server however the language was originally written to run in the web browser! In this lab you will be exploring how the JavaScript labguage can be used to directly interact with the HTML content in the web browser.
+
+## 1 The DOM
+
+xxx
+
+### 1.1 Getting a Refrerence to a DOM Element
+
+One of the first tasks you will face when working with the DOM is getting a reference to the correct DOM object. There are two approaches.
+
+#### 1.1.1 Direct Reference
+
+The simplest way is to use a _CSS Selector_ to get a reference to the element or elements you want to manipulate.
+
+1. The `document.querySelector()` function takes a string parameter which is the _CSS Selector_ that can identify the DOM objects you want to reference. For example `document.querySelector('h1')` returns a reference to the top-level heading on the page. If there are more than one element matching the CSS selector it returns the first match.
+2. If you want to get a reference to multiple elements such as all the list items you should use the `document.querySelectorAll()` function which returns an array of all the matching DOM objects. For example `document.querySelectorAll('li')` returns an array of all the items in all lists on the page.
+
+#### 1.1.2 The Event Object
+
+When an event handler is _fired_, the function called is passed a single parameter , often labelled as `e` which is an object representing the _event_. This contains a property called `target` which stores the DOM of the element that triggered the event itself. So, for example, if you clicked on an item in a list to trigger the event, the `target` would contain a reference to the `li` element. This is useful when you want to use the same event handler to handle events triggered by multiple elements such as items in a list.
+
+For example both lines of code below get a reference to the first table cell on the first row.
+
+```javascript
+document.querySelectorAll('tr')[0].childNodes[0].innerHTML
+document.querySelector('table').rows[0].childNodes[0].innerHTML
+```
+
+### 1.2 Traversing the DOM
+
+When you are working with the DOM you will frequently need to access the parent DOM element or perhaps the child one. This is called _traversing the DOM_ and there are a number of important properties and functions you will need to use:
+
+1. To access the _parent_ node (such as the `ol` node when you select a `li` node) you use the `parentElement` property.
+2. To access a _child_ node (for example the `li` node if you are referencing the `ol` node) you will need to make use of the `childNodes` array. For example to access the third item in the list you would use the expression `.childNodes[2]`. If there is only a single child node you can use the `firstChild` property instead.
+3. Once you have a reference to the desired DOM node you will often want to access the text inside it. This can be accessed using the `innerHTML` property.
+
+By chaining these together you can navigate both up and down the DOM tree to locate the DOM object you want, for example the following returns the contents of the first cell of the table row regardless of which cell in the row was clicked.
+
+```javascript
+e.target.parentElement.firstChild.innerHTML
+```
+
+### 1.1 Test Your Understanding
+
+1. When the user tries to delete an item, use the `confirm()` function to ask if they are sure. This returns true if the user agrees.
+    1. Display the name of the item being deleted in the confirmation dialog using one of the three ways to access the table DOM.
+2. When the confirm dialog closes, bring the focus back to the input box.
+    1. If the user clicks on any of the cells the focus shound return to the input box.
+3. Use the `e.target.innerHTML` property to prevent the row being deleted unless the user clicks on the `delete` link.
+4. Add a second textbox called `qty`, this will hold the number of items being added.
+    1. When the item name is added and the enter key pressed focus should move to the qty field.
+    2. When a quantity is entered and the enter key pressed the data should be added to the table.
+5. Add a column between the item name and the delete link (making a total of 3 columns) to the table to display the quantity of each item.
+6. Prevent items being added if they are already in the list.
+7. When a duplicate item is added increase the qty of the item already in the list.
+
+## 2 Form Validation
+
+Handling form validation
+
+Revealing sections of the form
+
+Preventing form submission
+
+## 3 Making API Calls
+
+In this section you will learn how to retrieve data from an API, specifically we will be covering:
+
+1. How to make a GET call to a RESTful API.
+2. Building a dropdown list using dynamic data.
+3. Building a table using dynamic data.
+
+### 3.1 Test Your Understanding
+
+1. Modify the HTML page to add:
+    1. A second dropdown list with a name of `converted`. This should contain the same currency list as the `base` dropdown.
+    2. A textbox that only accepts numerical data, call this `amount`.
+2. Modify the event listener at the top of the script so that changes to either of the dropdown lists triggers the `getRates()` function.
+3. Currently the `getRates()` function checks to see that the `base` selection has been made before it generates the table of rates. Modify this function so that it only generates the table if:
+    1. The use makes a selection from the second dropdown.
+    2. The user has entered a numerical value in the `amount` box (don't forget to convert the amount entered into a number and add an `onkeyup` event handler!).
+4. If the user has done the above replace the table with a `<h2>` element that displays the conversion rate between the two selected currencies:
+    1. Use this example `https://api.exchangeratesapi.io/latest?base=GBP&symbols=USD` as a guide.
+5. Finally multiply this rate by the amount from the textbox and display the result instead.
+    1. Round the value down to the nearest whole number.
+    2. Display the currency code as well.
+
+## 4 Handling Data Persistence
+
+Using localstorage (and sqlite)?
+
+### 4.1 Test Your Understanding
+
+xxx

exercises/03_acceptance/todo/acceptance tests/ui.test.js

@@ -68,15 +68,15 @@ describe('todo list', () => {
 			const arr = Array.from(dom)
 			return arr.map(td => td.innerText)
 		})
-		const numRows = items.reduce( (acc, val) =>  (val === 'bread' ? acc += 1 : acc), 0)
+		const numRows = items.reduce( (acc, val) => val === 'bread' ? acc += 1 : acc, 0)
 
 		console.log(`numRows: ${numRows}`)
 
 		// returns the number of rows containing the given string
 		const items2 = await page.evaluate(() => Array
 			.from(document.querySelectorAll('table tr td:first-child'))
-			.map(td => td.innerHTML) 
-			.reduce( (acc, val) =>  (val === 'bread' ? acc += 1 : acc), 0)
+			.map(td => td.innerHTML)
+			.reduce( (acc, val) => val === 'bread' ? acc += 1 : acc, 0)
 		)
 
 		expect(items.length).toBe(1)

exercises/03_acceptance/todo/test.sh

@@ -8,6 +8,5 @@ rm -rf *.db
 # [ ! -d "node_modules" ] && echo "INSTALLING MODULES" && npm install
 node index.js&
 node_modules/.bin/jest --runInBand --detectOpenHandles acceptance\ tests/*
-kill %1
 read -p "Press enter to continue"
-
+kill %1

exercises/05_client/api_client/index.html

@@ -0,0 +1,23 @@
+
+<!doctype html>
+
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+
+  <title>Currency Converter</title>
+  <meta name="description" content="Currency Converter">
+  <meta name="author" content="Mark J Tyers">
+  <link rel="stylesheet" href="style.css">
+  <script src="script.js"></script>
+</head>
+<body>
+    <h1>Currency Converter</h1>
+    <h2></h2>
+    Base currency: 
+    <select name="base">
+        <option value="">--CHOOSE--</option>
+    </select>
+    <table></table>
+</body>
+</html>

exercises/05_client/api_client/script.js

@@ -0,0 +1,65 @@
+
+'use strict'
+
+const baseURL = 'https://api.exchangeratesapi.io/latest'
+
+document.addEventListener('DOMContentLoaded', async() => {
+	console.log('page loaded')
+	await createDropdown()
+	document.querySelector('select[name="base"]').onchange = getRates
+})
+
+// populates the currency dropdown with a list of currency codes.
+async function createDropdown() {
+	const data = await makeRequest(`${baseURL}`)
+	data.rates.EUR = 1.0
+	const select = document.querySelector('select[name="base"]')
+	Object.keys(data.rates).sort().forEach( val => {
+		const node = document.createElement('option')
+		node.appendChild(document.createTextNode(val))
+		select.appendChild(node)
+	})
+}
+
+// retrieves the value from the dropdown options list
+async function getRates() {
+	const e = document.querySelector('select[name="base"]')
+	const base = e.options[e.selectedIndex].value
+	const table = document.querySelector('table')
+	table.innerHTML = ''
+	if(base) {
+		document.querySelector('h2').innerHTML = `Base Currency: ${base}`
+		const data = await makeRequest(`${baseURL}?base=${base}`)
+		buildTable(data.rates)
+	}
+}
+
+// creates a new html table with the data from the parameter
+function buildTable(rates) {
+	const table = document.querySelector('table')
+	Object.keys(rates).sort().forEach( val => {
+		if(rates[val] !== 1) {
+			const row = table.insertRow(-1)
+			row.insertCell(0).innerHTML = val
+			row.insertCell(1).innerHTML = rates[val]
+		}
+	})
+}
+
+// this function converts the standard XMLHTTPRequest to a promise
+const makeRequest = (url, method = 'GET') => new Promise( (resolve, reject) => {
+	const ok = 2
+	const percent = 100
+	const xhr = new XMLHttpRequest()
+	xhr.open(method, url)
+	xhr.onload = function() {
+		if ( Math.floor(this.status/percent) !== ok) { // if response code does not start with 2
+			return reject({status: this.status, statusText: xhr.statusText })
+		}
+		return resolve(JSON.parse(xhr.response))
+	}
+	xhr.onerror = function() {
+		return reject({ status: this.status, statusText: xhr.statusText })
+	}
+	xhr.send()
+})

exercises/05_client/api_client/style.css

@@ -0,0 +1,11 @@
+
+body {
+    font-family: verdana;
+}
+
+tr {
+    background-color: #fff;
+}
+tr:hover {
+    background-color: #f3f8aa;
+}

exercises/05_client/todo/index.html

@@ -0,0 +1,23 @@
+
+<!doctype html>
+
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+
+  <title>ToDo List</title>
+  <meta name="description" content="ToDo List">
+  <meta name="author" content="Mark J Tyers">
+  <link rel="stylesheet" href="style.css">
+  <script src="script.js"></script>
+</head>
+<body>
+	<h1>ToDo List</h1>
+	<form onkeydown="return event.key != 'Enter';">
+      <input name="item" type="text" autofocus />
+      <input type="submit" value="add" />
+      <table></table>
+			<ol></ol>
+	</form>
+</body>
+</html>

exercises/05_client/todo/script.js

@@ -0,0 +1,53 @@
+
+'use strict'
+
+let tableVisible = false
+
+const itemCol = 0
+const qtyCol = 1
+const actCol = 2
+
+document.addEventListener('DOMContentLoaded', () => {
+	console.log('page loaded')
+	document.querySelector('input[name="item"]').focus()
+	document.querySelectorAll('input').forEach( elem => elem.onkeyup = addText )
+	document.querySelector('form').onsubmit = addItem
+	document.querySelector('table').onclick = deleteRow
+})
+
+function addText(e) {
+	const enterKey = 13
+	console.log('keyup')
+	console.log(e.target.name)
+	if(e.which === enterKey) addItem(e)
+}
+
+function addItem() {
+	console.log('addItem')
+	const itemField = document.querySelector('input[name="item"]')
+	const item = itemField.value
+	itemField.value = ''
+	itemField.focus()
+	if(item.length) addNode(item)
+	return false // prevents the form from submitting
+
+}
+
+function clearInput() {
+	document.querySelector('input[name="item"]').value = ''
+	document.querySelector('input[name="item"]').focus()
+}
+
+function addNode(item, qty) {
+	const table = document.querySelector('table')
+	const row = table.insertRow(-1)
+	row.insertCell(0).innerHTML = item
+	row.insertCell(1).innerHTML = '<a href="#">delete</a>'
+	clearInput()
+}
+
+function deleteRow(e) {
+	console.log('delete row')
+	const index = e.target.parentElement.rowIndex
+	document.querySelector('table').deleteRow(index)
+}

exercises/05_client/todo/style.css

@@ -0,0 +1,15 @@
+
+body {
+    font-family: verdana;
+}
+
+table {
+    margin: 20px;
+    border-spacing: 0;
+}
+
+td {
+    border: 1px solid grey;
+    margin: 0;
+    padding: 5px;
+}

exercises/10_mqtt/chat/Messages.js

@@ -8,12 +8,21 @@ module.exports = class Messages {
 		return this
 	}
 	extractData() {
-
+		// TODO
 	}
 	add() {
-
+		// TODO
+	}
+	get html() {
+		// TODO
+	}
+	get count() {
+		// TODO
+	}
+	get all() {
+		// TODO
 	}
-	getAll() {
-
+	get clear() {
+		// TODO
 	}
 }

exercises/solutions/05_client/api_client/index.html

@@ -0,0 +1,30 @@
+
+<!doctype html>
+
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+
+  <title>Currency Converter</title>
+  <meta name="description" content="Currency Converter">
+  <meta name="author" content="Mark J Tyers">
+  <link rel="stylesheet" href="style.css">
+  <script src="script.js"></script>
+</head>
+<body>
+    <h1>Currency Converter</h1>
+    <h2></h2>
+    Base currency: 
+    <select name="base">
+        <option value="">--CHOOSE--</option>
+    </select>
+    Converted to currency: 
+    <select name="converted">
+        <option value="">--CHOOSE--</option>
+    </select>
+    Amount:
+    <input type="number" name="amount" />
+    <h2 id="result"></h2>
+    <table></table>
+</body>
+</html>