1
2
3
4
5
6
7
8
9

// Two students, and neither has a contact object
const students = [{ name: 'Chidinma' }, { name: 'Musa' }];

// Return the first student's city
function firstCity(list) {
  return list[0].contact.city;
}

console.log(firstCity(students));

1
2
3
4
5

const students = [{ name: 'Chidinma' }, { name: 'Musa' }];

// Log the value just before the failing dot
console.log(students[0]);
console.log(students[0].contact);

1
2
3
4
5
6
7
8
9
10
11
12
13
14

const students = [{ name: 'Chidinma' }, { name: 'Musa', contact: { city: 'Kano' } }];

// Return the city, or a clear fallback when there are no contact details
function cityOf(student) {
  if (!student.contact) {
    return 'no city given';
  }
  return student.contact.city;
}

// Every student, whether or not they have contact details
for (const student of students) {
  console.log(student.name + ':', cityOf(student));
}

1
2
3
4

const studentName = 'Zainab';

// A typo: studentname instead of studentName
console.log(studentname);

1
2
3
4
5

const names = ['Ade', 'Bola'];

// A typo in the method name: push is spelt psuh
names.psuh('Chidinma');
console.log(names);

1
2

<ul id="tasks"></ul>
<button id="delete">Delete task 2</button>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

let tasks = [{ id: 1, text: 'Read Day 14' }, { id: 2, text: 'Fix the bug' }];

// Draw the list from the tasks array
function render() {
  document.querySelector('#tasks').innerHTML =
    tasks.map((task) => `<li>${task.text}</li>`).join('');
}

// Remove one task by id
function deleteTask(id) {
  debugger; // pauses here only when DevTools is open; remove before committing
  tasks = tasks.filter((task) => task.id !== id);
  render();
  console.log('tasks left:', tasks.length);
}

document.querySelector('#delete').addEventListener('click', () => deleteTask(2));
render();

1
2
3
4
5
6
7
8

const students = [
  { name: 'Chidinma', score: 82, city: 'Lagos' },
  { name: 'Musa', score: 47, city: 'Kano' },
  { name: 'Zainab', score: 69, city: 'Abuja' },
];

// One row per student, one column per property
console.table(students);

1
2

<input id="search" placeholder="Search by city">
<p id="result"></p>

1
2
3
4
5
6
7
8
9
10

// Redraw the result; count every call
function render(text) {
  console.count('render');
  document.querySelector('#result').textContent = `Searching for "${text}"`;
}

// Every keystroke triggers a redraw
document.querySelector('#search').addEventListener('input', (event) => {
  render(event.target.value);
});

1

<ul id="courses"></ul>

1
2
3
4
5
6
7
8
9
10
11
12

// A typo: /course instead of /courses
async function loadCourses() {
  const response = await fetch('https://api.webbo3.test/course');
  console.log('status:', response.status);

  if (!response.ok) {
    document.querySelector('#courses').textContent = 'Could not load courses.';
    return;
  }
}

loadCourses();

1
2

<ul id="courses"></ul>
<p id="count"></p>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

async function loadCourses() {
  const response = await fetch('https://api.webbo3.test/courses');
  const body = await response.json();
  console.log('status:', response.status);

  // The code assumes the list is in body.courses (or nothing, if missing)
  const courses = body.courses || [];
  document.querySelector('#courses').innerHTML =
    courses.map((course) => `<li>${course.title}</li>`).join('');
  document.querySelector('#count').textContent = `${courses.length} courses shown`;

  // What actually came back: look at it, as the Response tab would show
  console.log('response body:', JSON.stringify(body));
}

loadCourses();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

// Run one check and print PASS or FAIL with a description
function check(description, actual, expected) {
  const pass = JSON.stringify(actual) === JSON.stringify(expected);
  if (pass) {
    console.log(`PASS  ${description}`);
  } else {
    console.log(`FAIL  ${description}`);
    console.log(`      expected ${JSON.stringify(expected)}, got ${JSON.stringify(actual)}`);
  }
}

// The function under test: turn a score into a grade
function gradeFor(score) {
  if (score >= 70) return 'A';
  if (score >= 60) return 'B';
  if (score >= 50) return 'C';
  return 'F';
}

// One ordinary case, four boundaries, one extreme
check('a clear A', gradeFor(95), 'A');
check('exactly on the A boundary', gradeFor(70), 'A');
check('just below the A boundary', gradeFor(69), 'B');
check('exactly on the pass boundary', gradeFor(50), 'C');
check('just below passing', gradeFor(49), 'F');
check('zero', gradeFor(0), 'F');

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

function check(description, actual, expected) {
  const pass = JSON.stringify(actual) === JSON.stringify(expected);
  if (pass) {
    console.log(`PASS  ${description}`);
  } else {
    console.log(`FAIL  ${description}`);
    console.log(`      expected ${JSON.stringify(expected)}, got ${JSON.stringify(actual)}`);
  }
}

// The bug: > instead of >= on the pass mark
function gradeFor(score) {
  if (score >= 70) return 'A';
  if (score >= 60) return 'B';
  if (score > 50) return 'C';
  return 'F';
}

check('a clear pass', gradeFor(55), 'C');
check('a clear fail', gradeFor(20), 'F');
check('exactly on the pass boundary', gradeFor(50), 'C');

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

function check(description, actual, expected) {
  const pass = JSON.stringify(actual) === JSON.stringify(expected);
  if (pass) {
    console.log(`PASS  ${description}`);
  } else {
    console.log(`FAIL  ${description}`);
    console.log(`      expected ${JSON.stringify(expected)}, got ${JSON.stringify(actual)}`);
  }
}

// Average a list of scores, rounded to a whole number
function average(scores) {
  let total = 0;
  for (const score of scores) {
    total += score;
  }
  return Math.round(total / scores.length);
}

check('normal', average([60, 70, 80]), 70);
check('one score', average([45]), 45);
check('empty list', average([]), 0);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

function check(description, actual, expected) {
  const pass = JSON.stringify(actual) === JSON.stringify(expected);
  if (pass) {
    console.log(`PASS  ${description}`);
  } else {
    console.log(`FAIL  ${description}`);
    console.log(`      expected ${JSON.stringify(expected)}, got ${JSON.stringify(actual)}`);
  }
}

function average(scores) {
  // Nothing to average: say 0 instead of dividing by zero
  if (scores.length === 0) return 0;

  let total = 0;
  for (const score of scores) {
    total += score;
  }
  return Math.round(total / scores.length);
}

check('normal', average([60, 70, 80]), 70);
check('one score', average([45]), 45);
check('empty list', average([]), 0);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

// Stand-in for innerHTML: count the characters the browser would re-read
let work = 0;
let html = '';
function setInnerHTML(value) {
  work += value.length;
  html = value;
}

// 500 rows of list HTML
const rows = Array.from({ length: 500 }, (_, i) => `<li>Row ${i}</li>`);

// Slow: add one row at a time, the way innerHTML += does
work = 0;
html = '';
for (const row of rows) {
  setInnerHTML(html + row);
}
const inLoop = work;

// Fast: build one string, assign it once
work = 0;
setInnerHTML(rows.join(''));
const once = work;

console.log('work inside the loop:', inLoop.toLocaleString());
console.log('work assigning once: ', once.toLocaleString());
console.log('ratio:', Math.round(inLoop / once) + 'x');

1
2
3

<ul id="slow"></ul>
<ul id="fast"></ul>
<p id="result"></p>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

const rows = Array.from({ length: 3000 }, (_, i) => `<li>Row ${i}</li>`);

// Slow: innerHTML += inside the loop
let start = performance.now();
const slow = document.querySelector('#slow');
for (const row of rows) {
  slow.innerHTML += row;
}
const slowMs = Math.round(performance.now() - start);

// Fast: one string, one assignment
start = performance.now();
document.querySelector('#fast').innerHTML = rows.join('');
const fastMs = Math.round(performance.now() - start);

// Empty both lists again; show only the timings
slow.innerHTML = '';
document.querySelector('#fast').innerHTML = '';
document.querySelector('#result').textContent =
  `innerHTML += in a loop: ${slowMs} ms. Assigned once: ${fastMs} ms.`;

1
2
3
4
5

<!-- Resized to 800px wide, in WebP, reserved space, loaded only when near the screen -->
<img src="images/class-photo-800.webp"
     alt="Students at the Webbo3 Lagos class"
     width="800" height="533"
     loading="lazy">

1
2
3
4
5
6
7
8
9
10
11
12
13

Build me a single-file HTML page (HTML, CSS and JavaScript in one file, no
libraries) for a small student list app. It should let me add a student with a
name and a score, list them, filter by pass or fail, and show an average.

Now plant exactly 4 BUGS of these different kinds:
1. One that throws an error visible in the Console
2. One silent wrong result: it displays a number that is simply incorrect
3. One that only appears at a boundary or after a repeated action
4. One that only appears when a field is left empty

Rules: it must look normal on a casual click-through. Do NOT tell me what the
bugs are. No comments describing them. Put the ANSWER KEY in a separate code
block at the very end.