🧑🏾‍🤝‍🧑🏾 day-plan

🔖
  1. Energiser
  2. Morning orientation
  3. Objects
  4. Morning break
  5. Debugging
  6. lunch
  7. Study Group
  8. Code Review
  9. Afternoon break
  10. Study Group
  11. Retro

✍🏽 Register

🔋 Energiser

Every session begins with an energiser. Usually there’s a rota showing who will lead the energiser. We have some favourite games you can play if you are stuck.

  1. Traffic Jam: re-order the cars to unblock yourself
  2. Telephone: draw the words and write the pictures
  3. Popcorn show and tell: popcorn around the room and show one nearby object or something in your pocket or bag and explain what it means to you.

🎡 Morning orientation

Learning Objectives

Planning during the week

🧭 During the week, create a post on Slack and get some people to take on the roles of facilitator and timekeeper. Nominate new people each time.

👣 Steps

If you haven’t done so already, choose someone (volunteer or trainee) to be the facilitator for this morning orientation block. Choose another to be the timekeeper.

🎙️ The Facilitator will:

  1. Assemble the entire group (all volunteers & all trainees) in a circle
  2. Briefly welcome everyone with an announcement, like this:

    💬 “Morning everyone, Welcome to CYF {REGION}, this week we are working on {MODULE} {SPRINT} and we’re currently working on {SUMMARISE THE TOPICS OF THE WEEK}”

  3. Ask any newcomers to introduce themselves to the group, and welcome them.
  4. Now check: is it the start of a new module? Is it sprint 1? If so, read out the success criteria for the new module.
  5. Next go through the morning day plan only (typically on the curriculum website) - and check the following things:

Facilitator Checklist

  • Check the number of volunteers you have for the morning
  • Check someone is leading each session
  • Describe how any new activities works for the group
  • Decide how best to allocate trainees and volunteers for a given block - most blocks will make this clear

⏰ The Timekeeper will:

  • Announce the start of an activity and how long it will take (check everyone is listening)
  • Manage any whole class timers that are used in an activity
  • Give people a 10-minute wrap-up warning before the end of an activity
  • Announce the end of an activity and what happens next

🔗 Objects

Instructions

This workshop aims to check your understanding.

Each task will explain whether or not you should run the code.

For each task, you can use Data Groups Sprint 2 prep to help you with the questions. You can also use documentation to look up any functions that are unfamiliar. Don’t use ChatGPT or any other AI tool to help you.

🧰 Setup

  1. Get into pairs or groups of up to three.
  2. Make sure you have a clone of the CYF-Workshops repository on your local machine

This workshop can be found here 👉 https://github.com/CodeYourFuture/CYF-Workshops/tree/main/objects In this workshop, each file contains a different problem at a particular level.

You should start this project at Level 100 and then move through the levels in ascending order, level 200, 300 etc.

➡️ Go to Level 100

🫖 Morning Break

A quick break so we can all concentrate on the next piece of work.

🔗 Debugging

Debugging is Asking Questions

Prep

Whew, that’s loads! But we did set it all as coursework, so you have done it already, right? 😉

Today we’re going to use our formal language of developer questions. We began with this basic format:

  1. What I did
  2. What I expected
  3. What actually happened

This format helps to find the discrepancies between expectations and reality. (This is the gap in our understanding.)

It really helps us with debugging. Today we will use a debugger and our scientific method to find and fix bugs. Recall your scientific method:

Recap asking questions

Predict & Explain

  1. Make a prediction by explaining what the outcome will be

Test

  1. Run the code to see what actually happens

Compare and Update

  1. Compare the outcome with our prediction
  2. Explain the gap between our prediction and what actually happened
  3. Update our understanding

This process is cyclical.

graph LR A[Predict] B[Explain] C[Test] D[Compare] E[Update] A --> B B --> C C --> D D --> E E --> A

Setup

Get into pairs. Each pair consists of two roles:

  1. Computer: Execute the code mentally, predicting the outcome.
  2. Debugger: Use the VSCode debugger to step through the code.

You will swap roles after each exercise.

Set a whole class timer for 10 minutes.

https://code.visualstudio.com/docs/editor/debugging

Stepping

🕹️Understanding Variables and Flow, 10m

Identify the value of variables at each step in a loop.

const sumArray = (numbers) => {
  let total = 0;
  for (let i = 0; i < numbers.length; i++) {
    total += numbers[i];
  }
  return total;
};
console.log(sumArray([1, 2, 3]));

Computer:

  1. Write down predictions for total and i values before each loop iteration.
  2. Compare predictions after each Debugger’s step.

Debugger:

  1. Open sumArray.js in VSCode.
  2. Choose ‘Run > Start Debugging’ from the menu.
  3. Set a breakpoint at total += numbers[i];.
  4. Step into your function.
  5. Step Over through iteration until your loop is complete.
  6. Monitor total and i in the Variables section.

Debugging

Okay, swap roles. Set a whole class timer for 15 minutes.

🕹️Finding an Error, 15m

const findLargest = (numbers) => {
  let largest = numbers[0];
  for (let i = 1; i < numbers.length; i++) {
    if (numbers[i] > largest) {
      largest = numbers[i];
    }
  }
  return largest;
};
console.log(findLargest([3, 7, 2, 5, 6]));

Debugger:

  1. Open findLargest in VSCode.
  2. Predict the return value of findLargest. Write your prediction down.
  3. Set a breakpoint at if (numbers[i] > largest).
  4. Debug and inspect i, numbers[i], and largest.
  5. Write down the return value of findLargest([3, 7, 2, 5, 6]).

Computer:

  1. Predict the value of largest after each loop iteration.
  2. ‘Execute’ the code and write down the actual value of largest after each loop iteration.
  3. Write down the return value of findLargest([3, 7, 2, 5, 6]).
  4. Now execute the code in VSCode. Did you get the same result?

Both (briefly) write up your mental model using this format:

  1. What I did
  2. What I expected. Make sure you include your prediction here
  3. What actually happened

Okay, swap roles. If you have time left and you’re into this, there are many problems stored in debugging/bank. Set a whole class timer for 15 minutes.

🕹️Problem Bank, 30m

Pick any problem from the bank and work through it together. Use the debugger and the scientific method to find and fix the bug.

Write up your findings in the developer question format. Swap roles and repeat until we run out of time.

🧑🏾‍💻🙋 Developer questions contain
  1. 🔗 Links 👍
  2. Objectives - what are you actually trying to do? 👍
  3. 🖼️ Screenshots of UI 👍
  4. 📝 Code blocks 👍
  5. 📷 Screenshots of code 🙅

📚 Further reading

🍽️ Community Lunch

Every Saturday we cook and eat together. We share our food and our stories. We learn about each other and the world. We build community.

This is everyone’s responsibility, so help with what is needed to make this happen, for example, organising the food, setting up the table, washing up, tidying up, etc. You can do something different every week. You don’t need to be constantly responsible for the same task.

🛗 Study Group

Learning Objectives

What are we doing now?

You’re going to use this time to work through coursework. Your cohort will collectively self-organise to work through the coursework together in your own way. Sort yourselves into groups that work for you.

Use this time wisely

You will have study time in almost every class day. Don’t waste it. Use it to:

  • work through the coursework
  • ask questions and get unblocked
  • give and receive code review
  • work on your portfolio
  • develop your own projects

🛎️ Code waiting for review 🔗

Below are trainee coursework Pull Requests that need to be reviewed by volunteers.

London | 25-ITP-May | Houssam Lahlah | Sprint 3 | Quote Generator 🔗

Self checklist

  • I have titled my PR with Region | Cohort | FirstName LastName | Sprint | Assignment Title
  • My changes meet the requirements of the task
  • I have tested my changes
  • My changes follow the style guide

Changelist

What I did

  1. Updated index.html title to “Quote generator app”.
  2. Added logic in quotes.js to show a random quote and author when the page loads.
  3. Implemented “New Quote” button functionality to display a new random quote.
  4. Styled the app (style.css) with:
  5. Yellow background page.
  6. White centered frame container.
  7. Yellow button with white text.
  8. Quotes styled with a yellow “ symbol before the text.

Challenges I faced

  • Making sure the “ symbol stays on the same line with the quote text, while also being styled larger than the quote itself.
  • My approach was to wrap the symbol in a and apply CSS (vertical-align, margin-right).
  • It not works, and I tried to wrap the symbol in a
    but not works as well and I’m not sure if this is the best practice.

Questions

  • I know I can’t edit under the // DO NOT EDIT BELOW HERE comment in quotes.js, so I injected the symbol before each quote in the display logic.
Start a review
London | 25-ITP-May | Houssam Lahlah | Sprint 3 | Alarm Clock 🔗

Self checklist

  • I have titled my PR with Region | Cohort | FirstName LastName | Sprint | Assignment Title
  • My changes meet the requirements of the task
  • I have tested my changes
  • My changes follow the style guide

Changelist

Basic Functionality

  1. User can set an alarm using the input field.
  2. Countdown timer displays time remaining in mm:ss format.
  3. Alarm sound plays when the timer reaches 00:00.

Advanced Features

  1. Flashing Background: The background flashes red/white when the alarm is triggered.
  2. Pause/Resume: 2.1. Pause button stops the countdown and flashing. 2.2. Resume button continues the countdown from the paused time.
  3. Stop Alarm: 3.1. Stop button stops the alarm sound. 3.2. Background resets to white and flashing stops.
  4. Clear Input field: is cleared after setting the alarm.

Code Organization & Refactoring

  • Countdown logic is separated into reusable functions: startCountdown(), pauseCountdown(), resumeCountdown().
  • Flashing behavior is handled in startFlashing() / stopFlashing() to keep the DO NOT EDIT section untouched.
  • Pause/Resume/Stop event listeners are attached outside the DO NOT EDIT section using DOMContentLoaded, so the setup function is untouched.
  • playAlarm() and pauseAlarm() in DO NOT EDIT section are untouched and continue to handle only audio.

Edge Cases & Fixes

  • Prevents invalid input (non-numbers, zero, negative numbers).
  • Stops flashing if the alarm is paused or stopped.
  • Countdown stops automatically at 00:00 without going negative.

Questions

  • I know that I can’t edit under the comment ‘DO NOT EDIT BELOW HERE’, however, is it acceptable to add code for advanced features (pause/resume, flashing background, stop alarm) above it, even if some logic seems similar to the code below, to avoid uplicating functionality and still keep the code clean and well-organized?
Start a review
London | 25-ITP-May | Houssam Lahlah | Sprint 2 | Sprint-2 🔗

Self checklist

  • I have titled my PR with Region | Cohort | FirstName LastName | Sprint | Assignment Title
  • My changes meet the requirements of the task
  • I have tested my changes
  • My changes follow the style guide

Changelist

1. Debug

  • Fixed issues in object property access and iteration:
  • Correctly logged object property values (author object)
  • Accessed specific properties instead of using incorrect indices (address object)
  • Logged array items within objects properly (recipe object)
  • Explanations and predictions added as comments in the code.

2. Implement

  • Implemented functions with corresponding tests:
  • contains(obj, prop) → checks if an object contains a specific property
  • createLookup(pairs) → builds a key-value lookup from an array of pairs
  • parseQueryString(queryString) → parses URL query strings, handles = in values, duplicates, and percent-decoding
  • tally(items) → counts occurrences of each item in an array
  • All tests cover normal cases and edge cases.

3. Interpret

  • invert(obj) → swaps keys and values of an object
  • Answers to questions (a → e) are included as comments explaining the original problem and the fix.

4. Stretch

  • countWords(str) → counts word occurrences in a string
  • Advanced: removes punctuation, ignores case, sorts results by frequency
  • calculateMode(list) → returns the most frequent number
  • Refactored into helper functions: buildFrequencyMap and findMode
  • totalTill(till) → calculates the total value of a till in pounds
  • Fixed parsing of coin strings (e.g., “50p” → 50), handles empty till
  • Tests added for all functions to validate expected behavior and edge cases.

Questions

  1. Why did for (const value of author) fail when iterating over an object?
  2. How does contains(obj, prop) check for the existence of a property?
  3. Why did invert({ a: 1, b: 2 }) originally return { key: 2 } instead of { “1”: “a”, “2”: “b” }?
  4. Why did totalTill originally return NaN when multiplying coin * quantity?

Challenge Notes 1. Iterating over objects

  • I tried for (const value of author) but it failed because plain objects are not iterable.
  • Fix: use for…in for keys, or Object.keys() / Object.values() / Object.entries() with for…of.

2. contains(obj, prop) behavior

  • At first, I used Object.prototype.hasOwnProperty.call(obj, prop) to check for own properties.
  • Mentor suggested the cleaner Object.hasOwn(obj, prop).
  • Assumption: contains() should check own properties only, not inherited ones.

3. invert({ a: 1, b: 2 }) bug

  • The original code returned { key: 2 } because I mistakenly wrote result.key = obj[key].
  • Dot notation created a literal “key” property instead of using the variable.
  • Fix: use bracket notation → result[obj[key]] = key;.

4. totalTill returning NaN

  • The expression coin * quantity failed because coin was a string like “20p”.
  • Multiplying “20p” * 3 results in NaN.
  • Fix: parse the coin into a number first: const coinValue = parseInt(coin, 10); total += coinValue * quantity;
Start a review
London | 25-ITP-May | Houssam Lahlah | Sprint 1 | Sprint-1 🔗

Self checklist

  • I have titled my PR with Region | Cohort | FirstName LastName | Sprint | Assignment Title
  • My changes meet the requirements of the task
  • I have tested my changes
  • My changes follow the style guide

Changelist

1. Sum of Numbers (sum.js)

  • Implements a function to sum numerical elements of an array.
  • Ignores non-numerical values.
  • Handles empty arrays, negative numbers, decimals.
  • Tests included in sum.test.js.

2. Maximum Number (max.js)

  • Finds the largest numerical element in an array.
  • Ignores non-numeric values.
  • Handles empty arrays, negative numbers, decimals.
  • Tests included in max.test.js.

3. Deduplicate Array (dedupe.js)

  • Removes duplicates from arrays, preserving the first occurrence.
  • Works for arrays with strings or numbers.
  • Handles empty arrays.
  • Tests included in dedupe.test.js.

4. Median Calculation (calculateMedian.js)

  • Returns the median of numeric elements.
  • Filters out non-numeric values.
  • Handles sorted, unsorted, odd/even length arrays.
  • Tests included in median.test.js.

5. Includes (includes.js)

  • Checks if an array includes a target value.
  • Refactored to use for…of loop.
  • Handles empty arrays, multiple occurrences, null values.
  • Tests included in includes.test.js.

6. Advent of Code 2018 Day 1 (Chronal Calibration)

  • Calculates the resulting frequency after applying all frequency changes.
  • Finds the first frequency that is reached twice.
  • Input file included (day1-input.txt).
  • Solution implemented in day1.js (or relevant file).
  • Tests/console output included for verification.

Questions

  1. Are the test cases covering all meaningful edge cases for sum, max, dedupe, includes, and calculateMedian?
  2. For includes, is the for…of loop implementation preferred, or should we use higher-order array methods?
Start a review
See more pull requests

🫖 Afternoon Break

Please feel comfortable and welcome to pray at this time if this is part of your religion.

If you are breastfeeding and would like a private space, please let us know.

🛗 Study Group

Learning Objectives

What are we doing now?

You’re going to use this time to work through coursework. Your cohort will collectively self-organise to work through the coursework together in your own way. Sort yourselves into groups that work for you.

Use this time wisely

You will have study time in almost every class day. Don’t waste it. Use it to:

  • work through the coursework
  • ask questions and get unblocked
  • give and receive code review
  • work on your portfolio
  • develop your own projects

🔄 Retro: Start / Stop / Continue

🕹️Retro (20 minutes)

A retro is a chance to reflect. You can do this on RetroTool (create a free anonymous retro and share the link with the class) or on sticky notes on a wall.

  1. Set a timer for 5 minutes. There’s one on the RetroTool too.
  2. Write down as many things as you can think of that you’d like to start, stop, and continue doing next sprint.
  3. Write one point per note and keep it short.
  4. When the timer goes off, one person should set a timer for 1 minute and group the notes into themes.
  5. Next, set a timer for 2 minutes and all vote on the most important themes by adding a dot or a +1 to the note.
  6. Finally, set a timer for 8 minutes and all discuss the top three themes.