Cape Town | 26-ITP-Sept | Lamla Kamana | Sprint 2 | JavaScript Fundamentals Coursework

Sprint-2/1-key-exercises/1-count.js

@@ -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

Sprint-2/1-key-exercises/2-initials.js

@@ -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);

Sprint-2/1-key-exercises/3-paths.js

@@ -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

Sprint-2/1-key-exercises/4-random.js

@@ -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.
+
+

Sprint-2/2-mandatory-errors/0.js

@@ -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*/

Sprint-2/2-mandatory-errors/1.js

@@ -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`.

Sprint-2/2-mandatory-errors/2.js

@@ -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.

Sprint-2/2-mandatory-errors/3.js

@@ -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);

Sprint-2/2-mandatory-errors/4.js

@@ -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.

Sprint-2/3-mandatory-interpret/1-percentage-change.js

@@ -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;
@@ -20,3 +20,28 @@ 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". This happened because there was a missing comma between
+//    the two arguments inside .replaceAll("," "") — JavaScript needs a comma
+//    separating each argument in a function call. Without it, JavaScript
+//    couldn't tell where one argument ended and the next began, so it
+//    reported a missing ), even though the real issue was the missing comma.
+//
+// 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.

Sprint-2/3-mandatory-interpret/2-time-format.js

@@ -6,8 +6,8 @@ const totalMinutes = (movieLength - remainingSeconds) / 60;
 const remainingMinutes = totalMinutes % 60;
 const totalHours = (totalMinutes - remainingMinutes) / 60;
 
-const result = `${totalHours}:${remainingMinutes}:${remainingSeconds}`;
-console.log(result);
+const formattedMovieLength = `${totalHours}:${remainingMinutes}:${remainingSeconds}`;
+console.log(formattedMovieLength);
 
 // For the piece of code above, read the code and then answer the following questions
 
@@ -21,5 +21,49 @@ console.log(result);
 // d) Interpret line 4, what does the expression assigned to totalMinutes mean?
 
 // e) What do you think the variable result represents? Can you think of a better name for this variable?
-
+// ANSWER: It represents the movie length written as a time string in
+//         hours:minutes:seconds format. For 8784 seconds it gives "2:26:24".
+//
+// Better name: formattedMovieLength
+//         It says what the value is (the movie length) and that it is
+//         formatted as a time, which is clearer than "result".
 // 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.
+// ─────────────────────────────────────────────────────────────

Sprint-2/3-mandatory-interpret/3-to-pounds.js

@@ -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).
+// ─────────────────────────────────────────────────────────────

Sprint-2/4-stretch-explore/chrome.md

@@ -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".

Sprint-2/4-stretch-explore/objects.md

@@ -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."