Manchester | 26-ITP-May | Yee Man Tsang | Sprint 1 | Coursework

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

@@ -4,3 +4,5 @@ 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 is a statement. Here we reassign the value of count from 0 to 1 by adding value one to it

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

@@ -5,7 +5,8 @@ let 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.
 
-let initials = ``;
+let initials = firstName.charAt(0)+middleName.charAt(0)+lastName.charAt(0);
+console.log(initials);
 
 // https://www.google.com/search?q=get+first+character+of+string+mdn
 

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

@@ -15,9 +15,21 @@ const base = filePath.slice(lastSlashIndex + 1);
 console.log(`The base part of ${filePath} is ${base}`);
 
 // Create a variable to store the dir part of the filePath variable
+function dirString(){
+    const dirName = filePath.slice(1,lastSlashIndex);
+    return dirName;
+}
+
 // Create a variable to store the ext part of the variable
+function extString(){
+    const lastDotIndex = filePath.lastIndexOf(".");
+    const extName = filePath.slice(lastDotIndex);
+    return extName;
+}
 
-const dir = ;
-const ext = ;
+const dir = dirString(filePath);
+const ext = extString(filePath);
+console.log(dir);
+console.log(ext);
 
 // https://www.google.com/search?q=slice+mdn

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

@@ -1,9 +1,18 @@
 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
+
+//In the declaration of num, we can break it down to below:
+
+//1. A randon number, which is with decimals between 0 and 1, is created by method Math.random()
+//2. The random number in step 1 is multipled by 100. That makes an number with decimals.
+//3. The method Math.floor grounded the number in step 2 down to a whole number between 0 - 99.
+//4. The number from step 3 is added 1, so it makes a whole number between 1-100.
+
+//I think the overall javascript code here is to make a random whole number between 1-100.

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

@@ -1,2 +1,6 @@
 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?
+We don't want the computer to run these 2 lines - how can we solve this problem?
+
+//This file has error indicate 'SyntaxError: Unexpected identifier' and some syntax broke the whole file.
+//I can tell that the first 2 lines in this file is not code but some written line which should be commented.
+//So I tried commenting the lines and the error disappeared.

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

@@ -2,3 +2,8 @@
 
 const age = 33;
 age = age + 1;
+
+//TypeError: Assignment to constant variable.
+//This error is caused by the wrong reassignment of variable 'age'. It is a constant that cannot be reassigned.
+//So the error prompted when the second line code try to reassign the variable value.
+//In this case, I would use let age instead of const age to assign age and set its value.

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

@@ -3,3 +3,7 @@
 
 console.log(`I was born in ${cityOfBirth}`);
 const cityOfBirth = "Bolton";
+
+//ReferenceError: Cannot access 'cityOfBirth' before initialization.
+//This error indicates that the variable 'cityOfBirth' cannot be accessed.
+//It is caused by the wrong order of code. We need to move the declaration of 'cityOfBirth' before the fourth line which calls the variable.

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

@@ -7,3 +7,9 @@ const last4Digits = cardNumber.slice(-4);
 // 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
+
+//Before running the code, I see .slice() method is applied in this javascript but then I can see this method is used on a number.
+//So I expected an error to tell me this method is applied on wrong elements.
+//When I run it, "TypeError: cardNumber.slice is not a function" which is different to my expectation.
+//I googled it and found this type of error can be triggered by typo or wrong object application and in this case I think it is because the number is wrongly applied.
+//I tried to fix it by adding " " double quotation mark on the number to make it a string and print the last4Digits. I got the last 4 digits successfully.

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

@@ -12,11 +12,17 @@ console.log(`The percentage change is ${percentageChange}`);
 // Read the code and then answer the questions below
 
 // a) How many function calls are there in this file? Write down all the lines where a function call is made
+// There is 5 function calls in line 4, 5 and 10. Number() and console.log() both are the function.
+// And XXX.replaceAll(",", "") is another function call. So in total there are 5 function calls in this code.
 
 // 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?
+// It shows "SyntaxError: missing ) after argument list" point at the end of line 5. I can see there is a missing comma in method .replaceAll() comparing to line method structure. By adding the comma after the ",", the error is solved.
 
 // c) Identify all the lines that are variable reassignment statements
+// Line 4 and 5 are variable reassignment statements.
 
 // d) Identify all the lines that are variable declarations
+// Line 1, 2, 7 and 8 are variable declarations.
 
 // e) Describe what the expression Number(carPrice.replaceAll(",","")) is doing - what is the purpose of this expression?
+// This expression is removing the comma within the value contains in the variable being called.

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

@@ -12,14 +12,21 @@ 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?
+// There are 6 variable declarations.
 
 // b) How many function calls are there?
+// Only one, console.log() is the 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
+// % is a remainder operation which in this expression trying to calculate the remaining seconds to be shown in the Hour:Minute:Second format.
 
 // d) Interpret line 4, what does the expression assigned to totalMinutes mean?
+// Line 4 is calculating the quotient of the calculation (8784-remainder) divided by 60 to find the movie length in minute. That will be later used to find the display minute in the Hour:Minute:Second format.
 
 // e) What do you think the variable result represents? Can you think of a better name for this variable?
+// I think the original movie length is in second and this code is to calculate the display of movie length in the Hour:Minute:Second format like what what we see in a normal movie information. I would suggest using durationFormatted as the variable name as it could explain to others clearly what it contains.
 
 // f) Try experimenting with different values of movieLength. Will this code work for all values of movieLength? Explain your answer
+//When testing the output with different values of movie length, the output seems right. No matter a 0 value, small or large value, it can display the the Hour:Minute:Second format well. 
+// One thing I have comment on is the display format is not in two digit in each holder of Hour:Minute:Second format. So there is a case 1:5:5 can be displayed which doesn't look user friendly for audience.

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

@@ -1,4 +1,4 @@
-const penceString = "399p";
+const penceString = "1399p";
 
 const penceStringWithoutTrailingP = penceString.substring(
   0,
@@ -25,3 +25,14 @@ console.log(`£${pounds}.${pence}`);
 
 // To begin, we can start with
 // 1. const penceString = "399p": initialises a string variable with the value "399p"
+
+// This program start with a string represents pence which is calculated and displayed in £X.XX in format.
+// Line 3-6 is to remove the character p at the end of the string and store the remaining string in a variable penceStringWithoutTrailingP.
+
+// Line 8-12 is to make sure the string taken in from the previous step has at least 3 characters. If it isn't, fill the start with '0' until it is 3 characters long.
+// Then use this at least 3 characters length string to remove the last 2 characters and store the string as the string of pound.
+
+// Line 14-19 is to make sure the string which is at least 3 characters long to get the last two characters and make sure it is 2 characters long. If it isn't, fill the end with '0' until it 2 characters long. And it is stored as pence.
+
+// Line 18 displayed the string all together to show £x.xx in format.
+// I tested the string works for longer string like 399999p.

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

@@ -10,9 +10,18 @@ Let's try an example.
 In the Chrome console,
 invoke the function `alert` with an input string of `"Hello world!"`;
 
+Answer: A modal window pop up showing Hello World! on it.
+
 What effect does calling the `alert` function have?
 
+Answer: When the modal window pop up, user would see message "Hello World!" and has to click OK on the window.
+
 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?
+
+Answer: A modal window pop up showing a question 'What is your name?' on it and a input field in shown under it for user to insert the name.
+
 What is the return value of `prompt`?
+
+Answer: 'Undefined' is shown in the return value.

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

@@ -6,11 +6,22 @@ Open the Chrome devtools Console, type in `console.log` and then hit enter
 
 What output do you get?
 
+Answer: 'ƒ log() { [native code] }' is shown.
+
 Now enter just `console` in the Console, what output do you get back?
 
+Answer: I got 'console {debug: ƒ, error: ƒ, info: ƒ, log: ƒ, warn: ƒ, …}'.
+
 Try also entering `typeof console`
 
+Answer: 'object'.
+
 Answer the following questions:
 
 What does `console` store?
+
+Answer: 'Console' stores the varaiables we declared temporarily until we refresh the page.
+
 What does the syntax `console.log` or `console.assert` mean? In particular, what does the `.` mean?
+
+Both of it has the syntax XXX.XXX at the front is the object and after dot is the method called. So now I know console is the built-in browser object. The dot is the Member Access Operator which make connection or indication between the object and method.