Merge pull request #94 from Birkbeck2/debugging-live-coding

Debugging live coding
Birkbeck2 · Mar 9, 2024 · 66f49c3 · 66f49c3
2 parents c27eea9 + a3c072f
commit 66f49c3
Show file tree

Hide file tree

Showing 4 changed files with 198 additions and 0 deletions.
diff --git a/lectures/debugging-live-coding.md b/lectures/debugging-live-coding.md
@@ -29,6 +29,76 @@ Here's an example using `setInterval()` to create trails:
 
 <<< @/public/sandbox/VDWP6_JSAnimation/rain.js{js}
 
+## Debugging with console.log
 
+For all debugging, you need two things:
 
+- :world_map: a map of the path taken through the program
 
+- :flashlight: a torch to shine a light where JavaScript went astray
+
+For the map, you can use your knowledge of the order in which the program
+runs. If you’re not sure, start at the very beginning and work it out bit
+by bit.
+
+For the torch, you have several options:
+
+- Error messages (syntax, runtime, logical) provided in the console when
+  the program runs
+
+- `console.log` statements placed at possible wrong turns
+
+- The `debugger` statement and related tools in editors and browsers
+
+Here’s a buggy program to practice on:
+
+<<< @/public/sandbox/js-debugging/index.html#script{html}
+
+<<< @/public/sandbox/js-debugging/index.html#form{html}
+
+<<< @/public/sandbox/js-debugging/app.js{js}
+
+
+## Installing an NPM package
+
+[Example
+repository](https://github.com/Birkbeck2/sandbox-npm-install){target="_blank"}
+
+To add a package like [chalk](https://www.npmjs.com/package/chalk) to your
+project, run this at the command line:
+
+```bash
+npm install chalk
+```
+
+This will automatically create or update the `package.json` file with the
+appropriate line in the `dependencies` array:
+
+```json
+{
+  "type": "module",
+  "dependencies": {
+    "chalk": "^5.3.0"
+  }
+}
+```
+
+::: tip
+You may need to add `"type": "module",` manually.
+:::
+
+Then import the package according to its documentation in your JavaScript:
+
+```js
+import chalk from 'chalk'
+
+console.log(chalk.green('Green!'))
+```
+
+## Telling Git to ignore source code from NPM packages
+
+In your `.gitignore` file:
+
+```
+node_modules
+```
diff --git a/public/sandbox/js-debugging/app.js b/public/sandbox/js-debugging/app.js
@@ -0,0 +1,13 @@
+// app.js
+
+let form = document.querySelector('#form')
+
+function changeColor(event) [
+  event,preventDefault()
+  let colorSelect = form.querySelector('#color')
+  let color = colorSelect.value
+  for square = document.querySelector('.square')
+  square.className = `square ${color}`
+}
+
+changeForm.addEventListener('submit', changeColor)
diff --git a/public/sandbox/js-debugging/index.html b/public/sandbox/js-debugging/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sandbox: Using JavaScript on forms, improved with select</title>
+    <link rel="stylesheet" href="styles.css">
+    <!-- #region script -->
+    <script src="main.js" defer></script>
+    <!-- #endregion script -->
+  </head>
+  <body>
+    <main class="container">
+      <a href="index.html"><h1>Sandbox: Using JavaScript on forms, improved with select</h1></a>
+      <!-- #region form -->
+      <form action="" id="background-color-form" method="post">
+        <div>
+          <label for="color">mustard, red, or blue?</label>
+        </div>
+        <div>
+          <select id="color" name="color">
+            <option value="mustard">Mustard</option>
+            <option value="red">Red</option>
+            <option value="blue">Blue</option>
+          </select>
+          <button type="submit">Submit</button>
+        </div>
+      </form>
+      <!-- #endregion form -->
+      <section class="flex-container">
+        <div class="shape square mustard"></div>
+      </section>
+    </main>
+  </body>
+</html>
diff --git a/public/sandbox/js-debugging/styles.css b/public/sandbox/js-debugging/styles.css
@@ -0,0 +1,79 @@
+/* Body and container */
+body {
+  background: #202124;
+  font-family: sans-serif;
+  margin: auto;
+  max-width: 800px;
+}
+
+.container {
+  color: #fdfeff;
+  text-align: center;
+  margin: 1rem;
+}
+
+/* Heading */
+h1 {
+  color: #fdfeff;
+}
+a {
+  text-decoration: none;
+}
+
+/* Form */
+form {
+  margin-top: 1rem;
+}
+select,
+button {
+  padding: 0.5rem;
+  font-size: 1.1rem;
+}
+
+/* Shape gallery */
+.flex-container {
+  display: flex;
+  flex-direction: column;
+  gap: 4rem;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  margin-top: 4rem;
+}
+@media screen and (min-width: 600px) {
+  .flex-container {
+    flex-direction: row;
+  }
+}
+
+.shape {
+  height: 5rem;
+  width: 5rem;
+  transition: all 0.4s;
+}
+
+/* Colors */
+/* Credit the Open Library of Humanities */
+
+.mustard {
+  background: #c08031;
+}
+.red {
+  background: #e94c33;
+}
+.blue {
+  background: #1579a0;
+}
+
+/* Form */
+form {
+  margin-top: 1rem;
+}
+form label,
+form input,
+form select,
+form button {
+  font-size: 1.1rem;
+  margin: 1rem;
+}
+