Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
0527d28
Add name field with required and pattern validation
lamlakamana-oss Sep 9, 2026
db804ea
Add email field with required validation
lamlakamana-oss Sep 9, 2026
b3a5762
Add clour field with radio buttons
lamlakamana-oss Sep 9, 2026
c9f584d
Add with dropdown validation
lamlakamana-oss Sep 9, 2026
612d7a1
Fix doctype and improve touch target sizing
lamlakamana-oss Sep 9, 2026
ba0cad3
Move CSS to external stylesheet per review feedback
lamlakamana-oss Sep 16, 2026
3bba3ba
Fix indentation in Form-Controls/index.html
lamlakamana-oss Sep 16, 2026
95a2e5b
Completed exercises 1 and 2 in Sprint 2
lamlakamana-oss Sep 21, 2026
70cfb4a
Complete exercise 3 in Sprint 2
lamlakamana-oss Sep 21, 2026
dd4f83e
Complete exercise 4 in Sprint 2
lamlakamana-oss Sep 21, 2026
3986f03
Fix 0.js by wrapping instruction lines in a comment
lamlakamana-oss Sep 21, 2026
e4c6e45
Fix 1.js: use let instead of const to allow reassignment
lamlakamana-oss Sep 21, 2026
19c93a0
Fix 2.js: declare cityOfBirth before usage, add explanation
lamlakamana-oss Sep 21, 2026
5c39a47
Fix 3.js: convert cardNumber to string so slice works, add explanation
lamlakamana-oss Sep 21, 2026
0707b11
Fix 4.js: rename variables to not start with a digit, add explanation
lamlakamana-oss Sep 21, 2026
fa5c077
Add interpretation answers for 1-percentage-change.js
lamlakamana-oss Sep 21, 2026
411575d
Add interpretation answers for 2-time-format.js
lamlakamana-oss Sep 21, 2026
4eab121
Add interpretation breakdown for 3-to-pounds.js
lamlakamana-oss Sep 21, 2026
8e06726
Add answers for chrome.md stretch exercise
lamlakamana-oss Sep 21, 2026
e99d5ac
Add answers for objects.md stretch exercise
lamlakamana-oss Sep 21, 2026
540d4d6
Remove Form-Controls changes not part of Sprint 2
lamlakamana-oss Sep 21, 2026
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions Sprint-2/1-key-exercises/1-count.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
let count = 0;

count = count + 1;

// Line 3 is using the assignment operator (=) to update the value of `count`.
// It takes the current value of `count` (0), adds 1 to it, and assigns the new value (1) back to `count`.
// This effectively increases the value of `count` by 1.
// Line 1 is a variable declaration, creating the count variable with an initial value of 0
// Describe what line 3 is doing, in particular focus on what = is doing
3 changes: 2 additions & 1 deletion Sprint-2/1-key-exercises/2-initials.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ const lastName = "Johnson";
// Declare a variable called initials that stores the first character of each string.
// This should produce the string "CKJ", but you must not write the characters C, K, or J in the code of your solution.

const initials = ``;
const initials = firstName[0] + middleName[0] + lastName[0];

// https://www.google.com/search?q=get+first+character+of+string+mdn
console.log(initials);
8 changes: 5 additions & 3 deletions Sprint-2/1-key-exercises/3-paths.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,9 @@ console.log(`The base part of ${filePath} is ${base}`);
// Create a variable to store the dir part of the filePath variable
// Create a variable to store the ext part of the variable

const dir = ;
const ext = ;

const dir = filePath.slice(0, lastSlashIndex);
const dotIndex = filePath.lastIndexOf(".");
const ext = filePath.slice(dotIndex + 1);
console.log(`The dir part is ${dir}`);
console.log(`The ext part is ${ext}`);
// https://www.google.com/search?q=slice+mdn
13 changes: 12 additions & 1 deletion Sprint-2/1-key-exercises/4-random.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,19 @@ const minimum = 1;
const maximum = 100;

const num = Math.floor(Math.random() * (maximum - minimum + 1)) + minimum;

console.log(num);
// In this exercise, you will need to work out what num represents?
// Try breaking down the expression and using documentation to explain what it means
// It will help to think about the order in which expressions are evaluated
// Try logging the value of num and running the program several times to build an idea of what the program is doing
//
//`num` represents a random integer between 1 and 100 (inclusive).
//
// Breakdown of the expression (from inside out):
// 1. Math.random() returns a decimal between 0 (inclusive) and 1 (exclusive).
// 2. (maximum - minimum + 1) = (100 - 1 + 1) = 100, the size of the range.
// 3. Multiplying them gives a decimal between 0 and 100 (not including 100).
// 4. Math.floor() rounds it down to a whole number between 0 and 99.
// 5. Adding `minimum` (1) shifts the range so the result is between 1 and 100.


4 changes: 2 additions & 2 deletions Sprint-2/2-mandatory-errors/0.js
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
This is just an instruction for the first activity - but it is just for human consumption
We don't want the computer to run these 2 lines - how can we solve this problem?
/*This is just an instruction for the first activity - but it is just for human consumption
We don't want the computer to run these 2 lines - how can we solve this*/
8 changes: 7 additions & 1 deletion Sprint-2/2-mandatory-errors/1.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,10 @@
// trying to create an age variable and then reassign the value by 1

const age = 33;
let age = 33;
age = age + 1;

// Error: TypeError: Assignment to constant variable. (at 1.js:4:5)
// Cause: On line 4, the code is trying to change the value of `age`. However,
// `age` was created using `const`, which means its value cannot be
// changed after it has been assigned.
// Fix: If the value of a variable needs to change later, use `let` instead of `const`.
8 changes: 7 additions & 1 deletion Sprint-2/2-mandatory-errors/2.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
// Currently trying to print the string "I was born in Bolton" but it isn't working...
// what's the error ?

console.log(`I was born in ${cityOfBirth}`);
const cityOfBirth = "Bolton";
console.log(`I was born in ${cityOfBirth}`);

// Error:** `ReferenceError: Cannot access 'cityOfBirth' before initialization (at 2.js:4:30)`

// Cause:** Line 4 is trying to use `cityOfBirth` before the variable has been created. The variable is only declared on line 5, and JavaScript processes the code from top to bottom.

// Fix:** Declare and assign `cityOfBirth` before using it in the code.
20 changes: 13 additions & 7 deletions Sprint-2/2-mandatory-errors/3.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,15 @@
const cardNumber = 4533787178994213;
const cardNumber = "4533787178994213";
const last4Digits = cardNumber.slice(-4);

// The last4Digits variable should store the last 4 digits of cardNumber
// However, the code isn't working
// Before running the code, make and explain a prediction about why the code won't work
// Then run the code and see what error it gives.
// Consider: Why does it give this error? Is this what I predicted? If not, what's different?
// Then try updating the expression last4Digits is assigned to, in order to get the correct value
// PREDICTION: This code will result in a TypeError because cardNumber is a number,
// and numbers don't have a .slice() method (it only exists on strings).
//
// ACTUAL ERROR: TypeError: cardNumber.slice is not a function (at 3.js:2:32)
// Was my prediction correct? YES — it was indeed a TypeError caused by calling
// a string method on a number.
//
// Fix: Make cardNumber a string by wrapping it in quotes: "4533787178994213".
// (Card numbers should be strings in real life — they can have leading zeros
// and are too large for the Number type.)

console.log(last4Digits);
12 changes: 10 additions & 2 deletions Sprint-2/2-mandatory-errors/4.js
Original file line number Diff line number Diff line change
@@ -1,2 +1,10 @@
const 12HourClockTime = "8:53pm";
const 24hourClockTime = "20:53";
const twelveHourClockTime = "8:53pm";
const twentyFourHourClockTime = "20:53";

// Error: SyntaxError: Invalid or unexpected token
// Cause: I originally named the variables 12HourClockTime and 24hourClockTime,
// but JavaScript doesn't allow variable names to start with a number.
// They have to start with a letter, an underscore, or a dollar sign.
// The parser was reading 12 as a number and then got stuck on the "H".
// Fix: Renamed them to twelveHourClockTime and twentyFourHourClockTime so they
// start with letters instead of digits.
24 changes: 23 additions & 1 deletion Sprint-2/3-mandatory-interpret/1-percentage-change.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ let carPrice = "10,000";
let priceAfterOneYear = "8,543";

carPrice = Number(carPrice.replaceAll(",", ""));
priceAfterOneYear = Number(priceAfterOneYear.replaceAll("," ""));
priceAfterOneYear = Number(priceAfterOneYear.replaceAll(",", ""));

const priceDifference = carPrice - priceAfterOneYear;
const percentageChange = (priceDifference / carPrice) * 100;
Expand All @@ -20,3 +20,25 @@ console.log(`The percentage change is ${percentageChange}`);
// d) Identify all the lines that are variable declarations

// e) Describe what the expression Number(carPrice.replaceAll(",","")) is doing - what is the purpose of this expression?

// a) I found 5 places where the code "calls" a function (runs a built-in command):
// Line 4: Number(...) and carPrice.replaceAll(...)
// Line 5: Number(...) and priceAfterOneYear.replaceAll(...)
// Line 10: console.log(...)
//
// b) The error showed up on Line 5. It said "SyntaxError: missing ) after
// argument list". That just means I had one too many closing brackets ( ) )
// at the end of that line.
//
// c) There are 2 lines where a variable gets a new value (reassignment):
// Line 4: carPrice = ...
// Line 5: priceAfterOneYear = ...
//
// d) There are 4 lines where a new variable is created (declaration):
// Line 1, Line 2, Line 7, and Line 8.
//
// e) Number(carPrice.replaceAll(",", "")) does two things, step by step:
// First, replaceAll(",", "") takes out all the commas from the text, so
// "10,000" turns into "10000".
// Then, Number(...) changes that text into a real number (10000), so we
// can do maths with it instead of treating it like a word.
39 changes: 39 additions & 0 deletions Sprint-2/3-mandatory-interpret/2-time-format.js
Original file line number Diff line number Diff line change
Expand Up @@ -23,3 +23,42 @@ console.log(result);
// e) What do you think the variable result represents? Can you think of a better name for this variable?

// f) Try experimenting with different values of movieLength. Will this code work for all values of movieLength? Explain your answer

// ─────────────────────────────────────────────────────────────
// QUESTION a) How many variable declarations?
// ANSWER: 7
// Line 1 → movieLength
// Line 3 → remainingSeconds
// Line 4 → totalMinutes
// Line 6 → remainingMinutes
// Line 7 → totalHours
// Line 9 → result
// (console.log on Line 10 is a function call, not a declaration.)
//
// QUESTION b) How many function calls?
// ANSWER: 1 → console.log(result) on Line 10.
//
// QUESTION c) What does movieLength % 60 mean?
// ANSWER: % is the "remainder" operator. It tells you what's left over
// after dividing by 60. Since there are 60 seconds in a minute,
// the remainder is the seconds that don't fill a full minute.
// Example: 8784 % 60 = 24 (so 24 seconds left over).
//
// QUESTION d) What does Line 4 do?
// ANSWER: Subtracts the leftover seconds first, then divides by 60.
// Subtracting first avoids getting a decimal.
// (8784 - 24) / 60 = 146 total minutes.
//
// QUESTION e) What does `result` represent?
// ANSWER: The movie length written as hours:minutes:seconds — the same
// format YouTube and video players use. Useful for timers,
// countdowns, workout apps, etc.
//
// QUESTION f) Does it work with different values?
// ANSWER: Yes. Tested values:
// 60 → 0:1:0
// 59 → 0:0:59
// 3661 → 1:1:1
// 3600 → 1:0:0
// It works for any whole, positive number of seconds.
// ─────────────────────────────────────────────────────────────
34 changes: 34 additions & 0 deletions Sprint-2/3-mandatory-interpret/3-to-pounds.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,3 +25,37 @@ console.log(`£${pounds}.${pence}`);

// To begin, we can start with
// 1. const penceString = "399p": initialises a string variable with the value "399p"

// ─────────────────────────────────────────────────────────────
// STEP-BY-STEP BREAKDOWN:
//
// Line 1: const penceString = "399p";
// Makes a variable that holds the price as text, with a "p" at the end
// to show it's in pence.
//
// Lines 3-6: const penceStringWithoutTrailingP = penceString.substring(0, penceString.length - 1);
// Cuts off the "p" at the end. It takes the text from the start up to
// (but not including) the last letter. Now we have "399".
//
// Line 8: const paddedPenceNumberString = penceStringWithoutTrailingP.padStart(3, "0");
// Makes sure the text is at least 3 characters long. If it's shorter, it
// adds "0" at the front. "399" is already 3 characters, so nothing changes.
//
// Lines 9-12: const pounds = paddedPenceNumberString.substring(0, paddedPenceNumberString.length - 2);
// Takes everything except the last 2 characters. That's the pounds part.
// For "399", this gives us "3".
//
// Lines 14-16: const pence = paddedPenceNumberString
// .substring(paddedPenceNumberString.length - 2)
// .padEnd(2, "0");
// Takes the last 2 characters (that's the pence part). Then it makes sure
// there are 2 characters by adding "0" at the end if needed. For "399",
// this gives us "99".
//
// Line 18: console.log(`£${pounds}.${pence}`);
// Prints the final price. The result is "£3.99".
//
// Why do we add extra "0"s (padding)?
// So the price always looks right. Without it, a price like "5p" would
// show up as "£0.5" (wrong) instead of "£0.05" (right).
// ─────────────────────────────────────────────────────────────
19 changes: 19 additions & 0 deletions Sprint-2/4-stretch-explore/chrome.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,3 +13,22 @@ Now try invoking the function `prompt` with a string input of `"What is your nam

What effect does calling the `prompt` function have?
What is the return value of `prompt`?

### Answers

**Line 10 — What does calling `alert` do?**

When you call `alert`, a small popup box appears on the screen with the
message you gave it. Nothing else on the page works until you click OK.

**Lines 14-15 — What does calling `prompt` do? What is its return
value?**

When you call `prompt`, a small popup box appears with a question and
a
text box. The user can type an answer and click OK. Whatever they
typed
comes back to your code as text (a string).

If the user clicks Cancel instead, they get nothing back — you get a
special value called `null`, which just means "no value".
41 changes: 41 additions & 0 deletions Sprint-2/4-stretch-explore/objects.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,3 +14,44 @@ Answer the following questions:

What does `console` store?
What does the syntax `console.log` or `console.assert` mean? In particular, what does the `.` mean?

### Answers

**Q: What output do you get when you type `console.log` and press Enter?**

When I typed `console.log` in the console, I got back `ƒ log() { [native code] }`.
The `ƒ` symbol means it's a function. The `[native code]` part means the
function is built into Chrome — it wasn't written by a human in this file.

**Q: Now enter just `console` — what output do you get?**

I got a big list of things inside `console`. Things like `log`, `warn`,
`error`, `assert`, and many more. That's because `console` is a container
that holds lots of useful tools.

**Q: Try also entering `typeof console`.**

I typed `typeof console` and got back `"object"`. `typeof` is a way of
asking "what kind of thing is this?". The answer tells me that `console`
is an object.

**Q: What does `console` store?**

`console` stores a bunch of useful tools (called "functions") that help
me print things and check my code. Examples: `log`, `warn`, `error`,
`assert`, and many more.

**Q: What does the syntax `console.log` or `console.assert` mean? In particular, what does the `.` mean?**

The dot `.` means "look inside". So `console.log` means:
"Look inside the `console` object and find the `log` thing inside it."
And `console.assert` means: "Look inside `console` and find `assert`."

The dot is like opening a box and grabbing one specific thing out of it.

**Example to show it clearly:**

Imagine a toolbox called `console`. Inside the toolbox are tools:
`log`, `warn`, `error`, `assert`. The dot `.` is how you pick one tool
out of the toolbox. So `console.log` means "from the console toolbox,
grab the log tool."