Skip to content

Commit 66f49c3

Browse files
joemulljoemull
authored
Merge pull request #94 from Birkbeck2/debugging-live-coding
Debugging live coding
2 parents c27eea9 + a3c072f commit 66f49c3

File tree

4 files changed

+198
-0
lines changed

4 files changed

+198
-0
lines changed

‎lectures/debugging-live-coding.md‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,76 @@ Here's an example using `setInterval()` to create trails:
2929

3030
<<< @/public/sandbox/VDWP6_JSAnimation/rain.js{js}
3131

32+
## Debugging with console.log
3233

34+
For all debugging, you need two things:
3335

36+
- :world_map: a map of the path taken through the program
3437

38+
- :flashlight: a torch to shine a light where JavaScript went astray
39+
40+
For the map, you can use your knowledge of the order in which the program
41+
runs. If you’re not sure, start at the very beginning and work it out bit
42+
by bit.
43+
44+
For the torch, you have several options:
45+
46+
- Error messages (syntax, runtime, logical) provided in the console when
47+
the program runs
48+
49+
- `console.log` statements placed at possible wrong turns
50+
51+
- The `debugger` statement and related tools in editors and browsers
52+
53+
Here’s a buggy program to practice on:
54+
55+
<<< @/public/sandbox/js-debugging/index.html#script{html}
56+
57+
<<< @/public/sandbox/js-debugging/index.html#form{html}
58+
59+
<<< @/public/sandbox/js-debugging/app.js{js}
60+
61+
62+
## Installing an NPM package
63+
64+
[Example
65+
repository](https://github.com/Birkbeck2/sandbox-npm-install){target="_blank"}
66+
67+
To add a package like [chalk](https://www.npmjs.com/package/chalk) to your
68+
project, run this at the command line:
69+
70+
```bash
71+
npm install chalk
72+
```
73+
74+
This will automatically create or update the `package.json` file with the
75+
appropriate line in the `dependencies` array:
76+
77+
```json
78+
{
79+
"type": "module",
80+
"dependencies": {
81+
"chalk": "^5.3.0"
82+
}
83+
}
84+
```
85+
86+
::: tip
87+
You may need to add `"type": "module",` manually.
88+
:::
89+
90+
Then import the package according to its documentation in your JavaScript:
91+
92+
```js
93+
import chalk from 'chalk'
94+
95+
console.log(chalk.green('Green!'))
96+
```
97+
98+
## Telling Git to ignore source code from NPM packages
99+
100+
In your `.gitignore` file:
101+
102+
```
103+
node_modules
104+
```

‎public/sandbox/js-debugging/app.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
// app.js
2+
3+
let form = document.querySelector('#form')
4+
5+
function changeColor(event) [
6+
event,preventDefault()
7+
let colorSelect = form.querySelector('#color')
8+
let color = colorSelect.value
9+
for square = document.querySelector('.square')
10+
square.className = `square ${color}`
11+
}
12+
13+
changeForm.addEventListener('submit', changeColor)

‎public/sandbox/js-debugging/index.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html lang="en-GB">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Sandbox: Using JavaScript on forms, improved with select</title>
8+
<link rel="stylesheet" href="styles.css">
9+
<!-- #region script -->
10+
<script src="main.js" defer></script>
11+
<!-- #endregion script -->
12+
</head>
13+
<body>
14+
<main class="container">
15+
<a href="index.html"><h1>Sandbox: Using JavaScript on forms, improved with select</h1></a>
16+
<!-- #region form -->
17+
<form action="" id="background-color-form" method="post">
18+
<div>
19+
<label for="color">mustard, red, or blue?</label>
20+
</div>
21+
<div>
22+
<select id="color" name="color">
23+
<option value="mustard">Mustard</option>
24+
<option value="red">Red</option>
25+
<option value="blue">Blue</option>
26+
</select>
27+
<button type="submit">Submit</button>
28+
</div>
29+
</form>
30+
<!-- #endregion form -->
31+
<section class="flex-container">
32+
<div class="shape square mustard"></div>
33+
</section>
34+
</main>
35+
</body>
36+
</html>

‎public/sandbox/js-debugging/styles.css‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
/* Body and container */
2+
body {
3+
background: #202124;
4+
font-family: sans-serif;
5+
margin: auto;
6+
max-width: 800px;
7+
}
8+
9+
.container {
10+
color: #fdfeff;
11+
text-align: center;
12+
margin: 1rem;
13+
}
14+
15+
/* Heading */
16+
h1 {
17+
color: #fdfeff;
18+
}
19+
a {
20+
text-decoration: none;
21+
}
22+
23+
/* Form */
24+
form {
25+
margin-top: 1rem;
26+
}
27+
select,
28+
button {
29+
padding: 0.5rem;
30+
font-size: 1.1rem;
31+
}
32+
33+
/* Shape gallery */
34+
.flex-container {
35+
display: flex;
36+
flex-direction: column;
37+
gap: 4rem;
38+
flex-wrap: wrap;
39+
justify-content: center;
40+
align-items: center;
41+
margin-top: 4rem;
42+
}
43+
@media screen and (min-width: 600px) {
44+
.flex-container {
45+
flex-direction: row;
46+
}
47+
}
48+
49+
.shape {
50+
height: 5rem;
51+
width: 5rem;
52+
transition: all 0.4s;
53+
}
54+
55+
/* Colors */
56+
/* Credit the Open Library of Humanities */
57+
58+
.mustard {
59+
background: #c08031;
60+
}
61+
.red {
62+
background: #e94c33;
63+
}
64+
.blue {
65+
background: #1579a0;
66+
}
67+
68+
/* Form */
69+
form {
70+
margin-top: 1rem;
71+
}
72+
form label,
73+
form input,
74+
form select,
75+
form button {
76+
font-size: 1.1rem;
77+
margin: 1rem;
78+
}
79+

0 commit comments

Comments
 (0)