Main

1-slides.html

@@ -10,10 +10,6 @@
 		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/reveal.min.css" integrity="sha512-ITH3NSfntO7uI5n+BnxGNXpzDUoOsmAXuG37UDONLxNYIdc0EBBOOQ1xyc+t9ag9ETSuBXFApx+Rod0uURfDYw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/theme/night.min.css" integrity="sha512-bfCyfT+5Js2CKjpiF7yCtTcNlNTtcdAIHV8DfGLCQuTfTEHTU9uEvhQ/Ty4zv3IRtkFQu8DKeM2MHGka+K/cxA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 
-
-		<!-- Interactive code samples via Klipse -->
-		<!-- <link rel="stylesheet" type="text/css" href="https://storage.googleapis.com/app.klipse.tech/css/codemirror.css"> -->
-
 		<!-- Theme used for syntax highlighted code -->
 		<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/night-owl.min.css" integrity="sha512-i5X6Fdn/ZqvGSqPrdMa3FgcpXM/Nr6YccSKFYT93zljl/HZDEpvBbE5Pxp91eiWGccZLrL/LDQJd7fjTRYsVaA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> -->
 		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/a11y-dark.min.css" integrity="sha512-Vj6gPCk8EZlqnoveEyuGyYaWZ1+jyjMPg8g4shwyyNlRQl6d3L9At02ZHQr5K6s5duZl/+YKMnM3/8pDhoUphg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
@@ -187,9 +183,9 @@
 
 					--
 
+					- **The browser's JS `console`**
 					- Local text file in editor, e.g. TextEdit, [VS Code](https://code.visualstudio.com/)
 					- Online playground e.g. [CodePen](https://codepen.io), [CodeSandbox](https://codesandbox.io)
-					- **The browser's JS `console`**
 
 
 
@@ -240,65 +236,79 @@
 
 					--
 
-					### `document`
+					```js
+					document
+					```
 
 					<p class="fragment">the entire HTML document</p>
 
 					--
 
-					### `document.title`
+					```js
+					document.title
+					```
 
 					<p class="fragment">the page (document) title</p>
 
 					--
 
-					### `document.body`
+					```js
+					document.body
+					```
 
 					<p class="fragment">the <code>body</code> element</p>
 
 					--
 
-					### `document.body.children`
+					```js
+					document.body.children
+					```
 
 					<p class="fragment">all the elements within the <code>body</code></p>
 
 
 
 					--
 
-					#### `document.getElementById("board")`
+					```js
+					document.getElementById("board")
+					```
 
-					<h4 class="fragment" data-fragment-index="2"> <code>document.querySelector("#board")</code></h4>
+					<div class="fragment" data-fragment-index="2"><pre class="js hljs"><code>document.querySelector("#board")</code></pre></div>
 
 					<p class="fragment" data-fragment-index="1">the (first) element with <code>id="board"</code></p>
 
 					--
 
-					#### `document.getElementsByTagName("h1")`
+					```js
+					document.getElementsByTagName("h1")
+					```
 
-					<h4 class="fragment" data-fragment-index="2"> <code>document.querySelectorAll("h1")</code></h4>
+					<div class="fragment" data-fragment-index="2"><pre class="js hljs"> <code>document.querySelectorAll("h1")</code></pre></div>
 
 					<p class="fragment" data-fragment-index="1">all the <code>h1</code> elements</p>
 
 					--
 
-					#### `document.getElementsByClassName("player")`
+					```js
+					document.getElementsByClassName("player")
+					```
 
-					<h4 class="fragment" data-fragment-index="2"> <code>document.querySelectorAll(<span class="fragment">".player"</span>)</code></h4>
+					<div class="fragment" data-fragment-index="2"><pre class="js hljs"><code>document.querySelectorAll(".player")</code></pre></div>
 
 					<p class="fragment" data-fragment-index="1">all the elements with <code>class="player"</code> </p>
 
 					--
 
-					<h4 class="r-fit-text"><code>document.getElementsByClassName("player").length</code></h4>
+					<pre class="r-fit-text js hljs"><code>document.getElementsByClassName("player").length</code></pre>
 
-					<h4 class="r-fit-text" > <code>document.querySelectorAll(".player").length</code></h4>
+					<pre class="r-fit-text js hljs"> <code>document.querySelectorAll(".player").length</code></pre>
 
 					<p class="fragment" >the number of elements with <code>class="player"</code> </p>
 
 					--
 
-					<code class="r-fit-text">document.getElementById("p1-name").textContent</code>
+					<pre class="r-fit-text js hljs"><code>document.getElementById("p1-name").textContent</code></pre>
 
 					<p class="fragment">the text inside the element with <code>id="p1-name"</code></p>
 
@@ -335,21 +345,23 @@ <h4 class="r-fit-text" > <code>document.querySelectorAll(".player").length</code
 
 					--
 
-					#### `document.title = "My Page"`
+					```js
+					document.title = "My Page"
+					```
 
 					<p class="fragment">change the page title</p>
 					<p class="fragment" style="font-style:italic;">note the double-quotes</p>
 
 					--
 
-					<code class="r-fit-text">document.getElementById("p1-name").textContent = "Sofia"</code>
+					<pre class="r-fit-text js hljs"><code>document.getElementById("p1-name").textContent = "Sofia"</code></pre>
 
 					<p class="fragment">replace the text of the <code>#p1-name</code> element</p>
 
 
 					--
 
-					<code class="r-fit-text">document.getElementById("p1-name").append(" & friends")</code>
+					<pre class="r-fit-text js hljs"><code>document.getElementById("p1-name").append(" & friends")</code></pre>
 
 					<p class="fragment">add to the end of the element's current text</p>
 
@@ -429,8 +441,14 @@ <h4 class="r-fit-text" > <code>document.querySelectorAll(".player").length</code
 					--
 
 					Try it!
-					- `typeof "42"`
-					- `typeof 42`
+
+					```js
+					typeof "42"
+					```
+
+					```js
+					typeof 42
+					```
 
 					--
 
@@ -520,7 +538,7 @@ <h4 class="r-fit-text" > <code>document.querySelectorAll(".player").length</code
 					- `false`
 					- `"true"`
 					- `document.title`
-					- `document.getElementById("board").children.length`
+					- `"some string".length`
 					- `null`
 
 					(guess first, then use `typeof` to check!)
@@ -807,7 +825,7 @@ <h4 class="fragment">characters</h4>
 
 					Variables let us **remember** values 
 
-					```
+					```js
 					let remember = "Sept. 21";
 					```
 
@@ -820,7 +838,7 @@ <h4 class="fragment">characters</h4>
 
 					<img src="https://memeguy.com/photos/images/mrw-i-open-my-credit-card-statement-109160.gif" alt="Gif from 'The Office' of Michael Scott yelling 'I declare... bankruptcy!'" />
 
-					```
+					```js
 					let bankruptcy;
 					```
 
@@ -830,7 +848,7 @@ <h4 class="fragment">characters</h4>
 
 					### Assigning a variable
 
-					```
+					```js
 					let myDeclaredVariable;
 					myDeclaredVariable = "so value, much wow";
 					```
@@ -839,7 +857,7 @@ <h4 class="fragment">characters</h4>
 
 					### Declaring & assigning at once
 
-					```
+					```js
 					let myAssignedVariable = "such efficient, amaze";
 					```
 
@@ -851,7 +869,7 @@ <h4 class="fragment">characters</h4>
 
 					aka a variable that can't be changed
 
-					```
+					```js
 					const myUnchangeableVariable = "Never gonna give you up";
 					```
 
@@ -914,7 +932,7 @@ <h4 class="fragment">characters</h4>
 
 					What happens when this code runs? 
 
-					```
+					```js
 					let answerToLife = ((4 + 1) * 2 * 4) + 2;
 					```
 
@@ -994,7 +1012,7 @@ <h4 class="fragment">characters</h4>
 
 					Arrays let us keep multiple values together in a single collection
 
-					```
+					```js
 					let synonyms = ["plethora", "array", "cornucopia"];
 					```
 
@@ -1060,11 +1078,15 @@ <h4 class="fragment">characters</h4>
 
 					What do you think each of these does? (Try it!)
 
-					`["c", "a", "d", "b"].sort()`
+					```js
+					["c", "a", "d", "b"].sort()
+					```
 
-					<code class="r-fit-text">["lions", "tigers", "bears oh my!"].join(" & ")</code>
+					<pre class="r-fit-text js hljs"><code>["lions", "tigers", "bears oh my!"].join(" & ")</code></pre>
 
-					`[1, 2, 3].concat([4, 5, 6])`
+					```js
+					[1, 2, 3].concat([4, 5, 6])
+					```
 
 					--
 
@@ -1090,11 +1112,13 @@ <h4 class="fragment">characters</h4>
 					```js
 					let abcArray = ["a", "b", "c"];
 					abcArray[1] = "d";
+					abcArray;
 					```
 
 					```js
 					let abcString = "abc";
 					abcString[1] = "d";
+					abcString;
 					```
 
 					--
@@ -1112,11 +1136,13 @@ <h4 class="fragment">characters</h4>
 					```js
 					let numbers1 = [1, 2, 3];
 					let result1 = numbers1.push(4);
+					numbers1;
 					```
 
 					```js
 					let numbers2 = [1, 2, 3];
 					let result2 = numbers2.concat([4]);
+					numbers2;
 					```
 
 					--
@@ -1143,7 +1169,7 @@ <h4 class="fragment">characters</h4>
 					```js
 					const constVariable = "original value";
 					constVariable = "new Value";
-
+					```
 
 					--
 
@@ -1200,17 +1226,27 @@ <h4 class="fragment">characters</h4>
 
 					### Getting property values
 
-					`js.name`
+					```js
+					js.name
+					```
+
+
+					```js
+					js.isAwesome
+					```
 
-					`js.isAwesome`
 
 					--
 
 					### Using property values
 
-					`js.name.startsWith("Java")`
+					```js
+					js.name.startsWith("Java")
+					```
 
-					`let age = 2022 - js.birthYear;`
+					```js
+					let age = 2022 - js.birthYear;
+					```
 
 					--
 
@@ -1225,7 +1261,7 @@ <h4 class="fragment">characters</h4>
 					indecisive.snack = "chips";
 					```
 
-					---
+					--
 
 					### Exercise
 
@@ -1244,7 +1280,7 @@ <h4 class="fragment">characters</h4>
 					};
 					```
 
-					---
+					--
 
 					### Nested objects
 
@@ -1359,6 +1395,7 @@ <h4 class="fragment">characters</h4>
 					console.log(hello.length);
 					const yello = hello.toUpperCase();
 					```
+
 					[✨MDN✨ JS > Standard built-in objects > String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String)
 
 					--
@@ -1420,14 +1457,7 @@ <h4 class="fragment">characters</h4>
 				plugins: [ RevealMarkdown, RevealHighlight, RevealNotes, CopyCode ]
 			});
 
-
-
-			// // Set selector for Klipse interactive snippets
-			// window.klipse_settings = {
-			// 	selector_eval_js: '.eval-js', // css selector for the html elements you want to klipsify
-			// };
 		</script>
-		<!-- <script src="https://storage.googleapis.com/app.klipse.tech/plugin_prod/js/klipse_plugin.min.js"></script> -->
 
 	</body>
 </html>

1-tictactoe.html

@@ -14,16 +14,17 @@
             margin: 1em auto;
         }
         #board {
-            max-width: 40%;
-            margin: 0px auto;
+            max-width: 50%;
+            margin: 1em auto;
             display:grid; 
             grid-template-columns: 1fr 1fr 1fr; 
             grid-template-rows: 1fr 1fr 1fr;
             grid-gap: 1rem;
             background-color: teal;
         }
         .square {
-            padding-top: 100%;
+            min-height: 1.3em;
+            text-align: center;
             background-color: white;
             font-size: 5rem;
             font-family: monospace;