London | 26-Sep-ITP| Frumentius Tesfay | Sprint 2 | Coursework

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

@@ -4,3 +4,6 @@ count = count + 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
+
+// Line 3: Adds 1 to count and assigns the result back to count.
+// The = operator assigns the new value to count.

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];
+console.log(initials);
 
 // https://www.google.com/search?q=get+first+character+of+string+mdn

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

@@ -17,7 +17,7 @@ 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 ext = filePath.slice(filePath.lastIndexOf("."));
 
-// https://www.google.com/search?q=slice+mdn
+// https://www.google.com/search?q=slice+mdn

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

@@ -2,8 +2,14 @@ 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
+
+// Math.floor() rounds down to a whole number instead of rounding up
+// Math.random() gives a random decimal
+
+//num represents a random whole number 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 problem?

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

@@ -1,4 +1,9 @@
 // trying to create an age variable and then reassign the value by 1
 
-const age = 33;
+let age = 33;
 age = age + 1;
+console.log(age);
+
+// Error: TypeError
+// Why: Assignment to constant variable.
+// Fix: Changed const to let, which allows the variable to be reassigned.

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

@@ -1,5 +1,9 @@
 // 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:
+// Why: Cannot access 'cityOfBirth' before initialization
+// Fix: Declare the const before using it

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

@@ -1,9 +1,18 @@
 const cardNumber = 4533787178994213;
-const last4Digits = cardNumber.slice(-4);
+const last4Digits = String(cardNumber).slice(-4);
+console.log(last4Digits);
 
 // 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: TypeError
+// Why: cardNumber is a number, but slice() is a string method.
+
+// Actual error: TypeError: cardNumber.slice is not a function
+// The prediction was correct.
+
+// Fix: convert cardNumber to a string before using slice.

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

@@ -1,2 +1,6 @@
-const 12HourClockTime = "8:53pm";
-const 24hourClockTime = "20:53";
+const Hour12ClockTime = "8:53pm";
+const hour24ClockTime = "20:53";
+console.log(Hour12ClockTime + " " + hour24ClockTime);
+
+// Error: SyntaxError: Invalid or unexpected token
+// Why: A JavaScript variable name cannot start with a number.

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;
@@ -13,10 +13,32 @@ console.log(`The percentage change is ${percentageChange}`);
 
 // a) How many function calls are there in this file? Write down all the lines where a function call is made
 
+// 5 function calls
+// carPrice = Number(carPrice.replaceAll(",", ""));
+// priceAfterOneYear = Number(priceAfterOneYear.replaceAll(",", ""));
+// console.log(`The percentage change is ${percentageChange}`);
+
 // b) Run the code and identify the line where the error is coming from - why is this error occurring? How can you fix this problem?
 
+// Error: SyntaxError: missing ) after argument list
+// The error comes from:
+// priceAfterOneYear = Number(priceAfterOneYear.replaceAll("," ""));
+// Why: The comma between the two arguments of replaceAll() is missing.
+// Fix: Add the missing comma:
+// priceAfterOneYear = Number(priceAfterOneYear.replaceAll(",", ""));
+
 // c) Identify all the lines that are variable reassignment statements
 
+// carPrice = Number(carPrice.replaceAll(",", ""));
+// priceAfterOneYear = Number(priceAfterOneYear.replaceAll(",", ""));
+
 // d) Identify all the lines that are variable declarations
 
+// let carPrice = "10,000";
+// let priceAfterOneYear = "8,543";
+// const priceDifference = carPrice - priceAfterOneYear;
+// const percentageChange = (priceDifference / carPrice) * 100;
+
 // e) Describe what the expression Number(carPrice.replaceAll(",","")) is doing - what is the purpose of this expression?
+
+// It removes the comma from the string and converts the resulting string into a number.

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

@@ -1,4 +1,4 @@
-const movieLength = 8784; // length of movie in seconds
+const movieLength = 59; // length of movie in seconds
 
 const remainingSeconds = movieLength % 60;
 const totalMinutes = (movieLength - remainingSeconds) / 60;
@@ -12,14 +12,26 @@ console.log(result);
 // For the piece of code above, read the code and then answer the following questions
 
 // a) How many variable declarations are there in this program?
+// a) 6 variable declarations
 
 // b) How many function calls are there?
+// b) 1 function call
 
 // c) Using documentation, explain what the expression movieLength % 60 represents
 // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators
 
+// c) % gives the remainder after division.
+// movieLength % 60 finds the remaining seconds after dividing the movie length by 60.
+
 // d) Interpret line 4, what does the expression assigned to totalMinutes mean?
+// d) totalMinutes is assigned the value 0 after subtracting the remaining seconds
+// from movieLength and dividing the result by 60
 
 // e) What do you think the variable result represents? Can you think of a better name for this variable?
+// e) It creates the movie's time format
+// Maybe a more descriptive movieTime or movieDuration
 
 // f) Try experimenting with different values of movieLength. Will this code work for all values of movieLength? Explain your answer
+// f) The code does not work correctly for all values of movieLength
+// It works correctly for non-negative whole numbers, but negative numbers and
+// decimal values can produce an invalid time format.

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

@@ -2,13 +2,13 @@ const penceString = "399p";
 
 const penceStringWithoutTrailingP = penceString.substring(
   0,
-  penceString.length - 1
+  penceString.length - 1,
 );
 
 const paddedPenceNumberString = penceStringWithoutTrailingP.padStart(3, "0");
 const pounds = paddedPenceNumberString.substring(
   0,
-  paddedPenceNumberString.length - 2
+  paddedPenceNumberString.length - 2,
 );
 
 const pence = paddedPenceNumberString
@@ -25,3 +25,21 @@ console.log(`£${pounds}.${pence}`);
 
 // To begin, we can start with
 // 1. const penceString = "399p": initialises a string variable with the value "399p"
+
+// 1. const penceString = "399p"
+// Initialises a string variable with the value "399p"
+
+// 2. penceString.substring(0, penceString.length - 1)
+// Removes the final "p", leaving "399"
+
+// 3. penceStringWithoutTrailingP.padStart(3, "0")
+// Makes the string 3 characters long by adding "0" at the beginning if needed.
+
+// 4. paddedPenceNumberString.substring(0, paddedPenceNumberString.length - 2)
+// Takes everything except the final two characters to get the pounds
+
+// 5. paddedPenceNumberString.substring(paddedPenceNumberString.length - 2).padEnd(2, "0")
+// Takes the final two characters to get the pence and adds "0" at the end if needed
+
+// 6. console.log(`£${pounds}.${pence}`)
+// Displays the price in pounds and pence, such as £3.99

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

@@ -8,8 +8,12 @@ Let's try an example.
 In the Chrome console, invoke the function `alert` with one argument, the string `"Hello world!"`;
 
 What effect does calling the `alert` function have?
+<!-- alert() displays a message in a popup -->
 
 Now try invoking the function `prompt` with a string input of `"What is your name?"` - store the return value of your call to `prompt` in an variable called `myName`.
 
 What effect does calling the `prompt` function have?
 What is the return value of `prompt`?
+
+<!-- prompt() displays a question/input box -->
+<!-- The return value of prompt() is the user's input as a string -->

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

@@ -5,12 +5,17 @@ In this activity, we'll explore some additional concepts that you'll encounter i
 Open the Chrome devtools Console, type in `console.log` and then hit enter
 
 What output do you get?
+<!-- ƒ log() { [native code] } -->
 
 Now enter just `console` in the Console, what output do you get back?
+<!-- console {debug: ƒ, error: ƒ, info: ƒ, log: ƒ, warn: ƒ, …} -->
 
 Try also entering `typeof console`
 
 Answer the following questions:
 
 What does `console` store?
 What does the syntax `console.log` or `console.assert` mean? In particular, what does the `.` mean?
+
+<!-- Console stores an object containing functions such as {debug: ƒ, error: ƒ, info: ƒ, log: ƒ, warn: ƒ, …} -->
+<!-- The '.' is used to access properties or functions inside an object -->

Sprint-2/README.md

@@ -12,7 +12,7 @@ This README will guide you through the different sections for this week.
 
 ## 1 Exercises
 
-In this section, you'll have a short program and task. Some of the syntax may be unfamiliar - in this case, you'll need to look things up in documentation. 
+In this section, you'll have a short program and task. Some of the syntax may be unfamiliar - in this case, you'll need to look things up in documentation.
 
 https://developer.mozilla.org/en-US/docs/Web/JavaScript
 
@@ -28,7 +28,7 @@ You must use documentation to make sense of anything unfamiliar - learning how t
 
 You can also use `console.log` to check the value of different variables in the code.
 
-https://developer.mozilla.org/en-US/docs/Web/JavaScript 
+https://developer.mozilla.org/en-US/docs/Web/JavaScript
 
 ## 4 Explore - Stretch 💪