bjg · mark-barrett · Sep 20, 2018 · Oct 1, 2018 · Oct 11, 2018 · Oct 11, 2018
diff --git a/worksheets/1-basic-html-css-dom-api/calculator-skin/index.html b/worksheets/1-basic-html-css-dom-api/calculator-skin/index.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>Calculator Skin</title>
+
+		<link rel="stylesheet" type="text/css" href="main.css">
+	</head>
+	<body>
+		<div class="top">
+			<h2>Calcultor Skin <small>By Mark Barrett</small></h2>
+		</div>
+		<div class="calculator">
+			<div class="screen">
+				<h1 class="screen-text">0</h1>
+			</div>
+			<div class="buttons">
+				<div class="button">
+					<h3>(</h3>
+				</div>
+				<div class="button">
+					<h3>)</h3>
+				</div>
+				<div class="button">
+					<h3>&plusmn;</h3>
+				</div>
+				<div class="button">
+					<h3>&divide;</h3>
+				</div>
+				<div class="button">
+					<h3>7</h3>
+				</div>
+				<div class="button">
+					<h3>8</h3>
+				</div>
+				<div class="button">
+					<h3>9</h3>
+				</div>
+				<div class="button">
+					<h3>X</h3>
+				</div>
+				<div class="button">
+					<h3>4</h3>
+				</div>
+				<div class="button">
+					<h3>5</h3>
+				</div>
+				<div class="button">
+					<h3>6</h3>
+				</div>
+				<div class="button">
+					<h3>-</h3>
+				</div>
+				<div class="button">
+					<h3>1</h3>
+				</div>
+				<div class="button">
+					<h3>2</h3>
+				</div>
+				<div class="button">
+					<h3>3</h3>
+				</div>
+				<div class="button">
+					<h3>+</h3>
+				</div>
+				<div class="button">
+					<h3>0</h3>
+				</div>
+				<div class="button">
+					<h3>.</h3>
+				</div>
+				<div class="button">
+					<h3>C</h3>
+				</div>
+				<div class="button">
+					<h3>=</h3>
+				</div>
+			</div>
+		</div>
+	</body>
+</html>
diff --git a/worksheets/1-basic-html-css-dom-api/calculator-skin/main.css b/worksheets/1-basic-html-css-dom-api/calculator-skin/main.css
@@ -0,0 +1,58 @@
+/* Import custom font from Google */
+@import url('https://fonts.googleapis.com/css?family=Montserrat');
+
+body {
+	font-family: Montserrat;
+}
+
+.top {
+	background-color: #4BCC76;
+	margin: -10px;
+	color: #FFFFFF;
+	padding: 2px;
+	padding-left: 20px;
+	margin-bottom: 10px;
+}
+
+.calculator {
+	margin-left: 25%;
+	margin-right: 25%;
+	background-color: #F7F7F7;
+	padding: 20px;
+	border-radius: 15px;
+	border-width: 1px;
+	border-style: solid;
+}
+
+.screen {
+	border-style: inset;
+	padding: 0px;
+	text-align: right;
+}
+
+.screen-text {
+	padding-top: 0px;
+	padding-right: 10px;
+	font-size: 50px;
+	color: #A9A9A9;
+	margin: 10px;
+}
+
+.buttons {
+	padding-top: 10px;
+	display: block;
+	overflow:hidden;
+	margin:0 auto;
+}
+
+.button {
+	width: 22%;
+	height: -1%;
+	text-align: center;
+	background: #C0C0C0;
+	margin: 5px;
+	padding-top: 5px;
+	float: left;
+	border-radius: 10px;
+	border-style: outset;
+}
diff --git a/worksheets/1-basic-html-css-dom-api/cellular-automaton/README b/worksheets/1-basic-html-css-dom-api/cellular-automaton/README
@@ -0,0 +1 @@
+https://jsbin.com/zepabom/edit?js
diff --git a/worksheets/1-basic-html-css-dom-api/cellular-automaton/cell-automation.html b/worksheets/1-basic-html-css-dom-api/cellular-automaton/cell-automation.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+  <title>JS Bin</title>
+</head>
+
+<script>
+function load() {
+  document.body.innerHTML += '<h1>Cellular Automaton <small>By Mark Barrett</small></h1>'
+
+  document.body.setAttribute('style', 'font-family: arial;');
+
+  // Create the main cellsContainer div
+  var cellsContainer = document.createElement('div');
+  cellsContainer.setAttribute('id', "cellsContainer");
+
+  // Append it to the main body
+  document.body.appendChild(cellsContainer);
+
+  var rows = 50;
+  var cols = 101;
+
+  var num = 0;
+
+  for(var j=0; j<rows; j++) {
+
+    var row = document.createElement('div');
+
+    row.setAttribute('id', 'row'+j);
+    row.setAttribute('style', 'width: 808px;');
+
+    for(var i=0; i<cols; i++) {
+
+    	var state = false;
+
+    	// If we are on the first row ignore, else set the values of the surrounding cells
+    	if(j != 0) {
+
+    		// If its the first column then the end cell is the value
+    		if(i == 0) {
+    			var topLeftCell = document.getElementById('cell'+(j-1)+(cols-1));
+    		} else if(i == (cols-1)) {
+    			var topRightCell = document.getElementById('cell'+(j-1)+0);
+    		} else {
+    			var topLeftCell = document.getElementById('cell'+(j-1)+(i-1));
+    			var topRightCell = document.getElementById('cell'+(j-1)+(i+1));
+    		}
+
+    		// Get the middle cell which is always just above
+    		var topMiddleCell = document.getElementById('cell'+(j-1)+i);
+
+    		// Now that we have all of those cells lets do somechecks to figure out if it should be active or not
+    		if(topLeftCell.style.backgroundColor == 'green' && topMiddleCell.style.backgroundColor == 'green'
+    			|| topLeftCell.style.backgroundColor == 'white' && topMiddleCell.style.backgroundColor == 'white') {
+    			state = false;
+    		} else if(topLeftCell.style.backgroundColor == 'green' && topMiddleCell.style.backgroundColor == 'white'
+    			|| topLeftCell.style.backgroundColor == 'white' && topMiddleCell.style.backgroundColor == 'green') {
+    			state = true;
+    		}
+
+    		var singleCell = document.createElement('div');
+    		singleCell.setAttribute('id', 'cell'+j+''+i);
+    		singleCell.setAttribute('style', 'float: left; height: 8px; width: 8px; '+ (state ? 'background-color: green;' : 'background-color: white;'));
+    		row.appendChild(singleCell);
+    	} else {
+
+    		var state = Math.random() >= 0.5;
+
+    		var singleCell = document.createElement('div');
+    		singleCell.setAttribute('id', 'cell'+j+''+i);
+    		singleCell.setAttribute('style', 'float: left; height: 8px; width: 8px; '+ (state ? 'background-color: green;' : 'background-color: white;'));
+    		row.appendChild(singleCell);
+    	}
+    }
+
+    cellsContainer.appendChild(row);
+  }
+}
+window.onload = load;
+</script>
+
+<body>
+
+  <div id="main">
+  </div>
+
+</body>
+</html>
diff --git a/worksheets/1-basic-html-css-dom-api/simple-layout/index.html b/worksheets/1-basic-html-css-dom-api/simple-layout/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Simple Layout</title>
+
+  <link rel="stylesheet" type="text/css" href="main.css">
+</head>
+  <body>
+  	<header>
+	    <h1>
+	        Title
+	    </h1>
+  	</header>
+  	<section id="content">
+	    <header>
+	      Article title
+	    </header>
+	    <section>
+	      <p>Article para1 ...</p>
+	    </section>
+  	</section>
+	<aside id="sidebar">
+		<header>
+	      Aside
+	    </header>
+	    <ul>
+	      <li>
+	        Item 1
+	      </li>
+	      <li>
+	        Item 2
+	      </li>
+	    </ul>
+	</aside>
+	<footer>
+	    <address>
+	      Kevin St, Dublin 8
+	    </address>
+	</footer>
+  </body>
+</html>
diff --git a/worksheets/1-basic-html-css-dom-api/simple-layout/main.css b/worksheets/1-basic-html-css-dom-api/simple-layout/main.css
@@ -0,0 +1,42 @@
+/* Import custom font from Google */
+@import url('https://fonts.googleapis.com/css?family=Montserrat');
+
+body {
+	background-color: #F7F7F7;
+	font-family: Montserrat;
+}
+
+/* Apply common values to both at the same time */
+#content, #sidebar {
+	border-color: black;
+	border-style: solid;
+	border-width: 1px;
+	padding: 5px;
+	display: block;
+}
+
+#content {
+	width: 73%;
+	float: left;
+}
+
+#sidebar {
+	width: 23%;
+	float: right;
+}
+
+header {
+	font-style: italic;
+}
+
+footer {
+	padding-top: 90px;
+}
+
+li {
+	list-style: none;
+}
+
+h1 {
+	font-style: strong;
+}
diff --git a/worksheets/2-lab/api/api.js b/worksheets/2-lab/api/api.js
@@ -0,0 +1,69 @@
+function api() {
+	// 1 & 2. List of user objects with Username, City and Zipcode in each.
+	httpRequest('GET', 'http://jsonplaceholder.typicode.com/users').then((data) => {
+		// Loop through users
+		data.map((user, index) => {
+			console.log('User: '+index);
+			console.log('Username: '+user['username']);
+			console.log('City: '+user['address']['city']);
+			console.log('Zipcode: '+user['address']['zipcode']);
+			console.log('');
+		});
+
+		// After we have printed it, filter the data set so only zip codes that have 2 and 5 as the first char are left
+		const resultZips = data.filter(user => user['address']['zipcode'].charAt(0) == '2' || user['address']['zipcode'].charAt(0) == '5');
+
+		console.log('Num of users with zipcode starting with 2 or 5: '+resultZips.length);
+	});
+
+	// 3. List all posts with titles having more than 6 characters
+	httpRequest('GET', 'http://jsonplaceholder.typicode.com/posts').then((data) => {
+
+		// Filter the data set
+		data.filter(data => data['title'].split(' ').length > 6).map((data) => {
+			console.log(data);
+
+			// Frequency map
+			console.log(getFrequencyMap(data['body']));
+		});
+	});
+}
+
+function getFrequencyMap(string) {
+	// Take in a string and convert it to a JSON object with each word and the occurance of each one
+	var words = string.replace(/[.]/g, '').split(/\s/);
+
+	var frequencyMap = {};
+
+	// Map the values
+	words.map((word) => {
+		// If the word is not in the frequency map, add it and set the value to 0
+		if(!frequencyMap[word]) {
+			frequencyMap[word] = 0;
+		}
+		// then increment the count of that word
+		frequencyMap[word] += 1;
+	});
+
+	return frequencyMap;
+}
+
+
+function httpRequest(type, url) {
+	// Async promise
+	return new Promise((resolve, reject) => {
+		const xhttp = new XMLHttpRequest();
+		xhttp.open(type, url);
+
+		// If resolved
+		xhttp.onload = () => resolve(JSON.parse(xhttp.responseText));
+
+		// If rejected
+		xhttp.onerror = () => reject(xhttp.statusText);
+
+		// Send
+		xhttp.send();
+	});
+}
+
+window.onload = api;