London | 26-ITP-Sep | Sakiya Mayow | Sprint 2 | JavaScript-Fundamentals

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

@@ -3,4 +3,8 @@ let count = 0;
 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 1 is a declaration and Line 3 is a statement that changes the value of the variable 'count' by adding 1 to its current value.
+//The variable is changing from 0 to 1 after line 3 is executed after we used 'let' to declare the variable 'count' and then we used the = operator to assign the new value.

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

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

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

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

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

@@ -3,7 +3,26 @@ 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 whole number between the value of 'minimum' (1) and 'maximum' (100)
+//By creating a constant variable called 'num' and assigning it the value of the expression, we can generate a random number within the mentioned range.
+
+//When running the program we have to understand how the expression works:
+
+//we have to work out the parentheses first, maximum - minimum + 1, which is equal to 100 - 1 + 1 = 100.
+//so: Math.floor(Math.random() *100) + 1
+// Math.floor is used 1 time and it happens before + minimum. Math.floor is used because when used Math.random() it produces a decimal number between 0 and 1.
+//The code needs a whole number because we are trying to get a number between 1 and 100, this is where Math.floor comes () comes in and removes the decimal part.
+//JavaScript works out  the expression inside Math.floor () first before + minimum.
+//Math.random() produces a pseudo-random decimal number that is greater than or equal to 0 but less than 1.
+
+//Next, we need to multiply the result from Math.random() by 100. This may give us the result of a decimal between 0 and 100.
+//Next step is to use Math.floor() wich then rounds down the decimal number to the nearest whole integer. This then means that the result will be a whole number between 0 and 99.
+//But we want 1-100, so we add 1 to the result of Math.floor() this then changes the range to be inclusive of 1 and 100.
+//Therefore, the final result of num will be a random whole number between 1 and 100, inclusive.

Sprint-2/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?
+//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 can add 2 forward slashes , by typing two forward slashes ( // ) at the beginning of the line, we can turn both lines into a comment. This then means that the computer will completely ignore that line and not run it.

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

@@ -1,4 +1,11 @@
 // 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);
+
+//const means that the variable age is a constant and cannot be reassigned. When we try to reassign the value of age by adding 1 to it, we get an error.
+//This is because we cannot change the value of a constant variable once we have created it.
+//// The error is a TypeError: Assignment to constant variable.
+
+//If we want to change the value of age, we need to use let instead of consts when declaring the variable. this then allows us to reassign the value of age by adding 1 to it.

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

@@ -1,5 +1,15 @@
 // 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}`);
+// The error is a ReferenceError: Cannot access 'cityOfBirth' before initialization
+
+//console.log(`I was born in ${cityOfBirth}`);
+//const cityOfBirth = "Bolton";
+
+//The reason there is an error is because we are using the wrong order, we are telling Javascript to print the value of cityOfBirth before creating a variable.
+//So we need to create the variable first, this is because Javascript runs code from top to bottom, so a variable that is declared with const needs to be declared before using it.
+
+//right way
+
 const cityOfBirth = "Bolton";
+console.log(`I was born in ${cityOfBirth}`);

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

@@ -1,9 +1,24 @@
 const cardNumber = 4533787178994213;
-const last4Digits = cardNumber.slice(-4);
+const last4Digits = String(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
+
+console.log(last4Digits);
+
+//I think that Javascript will give an error because .slice() is normally used with strings, and cardNumber is currently a number.
+//const cardNumber = 4533787178994213; does not have any quotation marks, so Javascript will treat it as a number.
+
+//When run with console.log(last4Digits); we get --> TypeError : cardNumber.slice is not a function
+
+//.slice is a method used with strings and we need to make cardNumber into a string by adding String before cardNumber.
+
+//we can change the expression by making it into a string by doing --> const last4Digits = String(cardnumber).slice(-4);
+//String(cardNumber) changes the number into a string and .slice(-4) takes the last 4 characters and stores it in last4Digits.
+//const cardNumber = 4533787178994213 , const last4Digits = cardNumber.slice(-4); change that to --> const last4Digits = String(cardNumber).slice(-4);
+//I added String before cardNumber to change the original cardNumber into a string, so we can use the slice() method.
+//Now cardNumber is a string, then we can re run the code with console.log(last4Digits); to get the correct code.

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

@@ -1,2 +1,10 @@
-const 12HourClockTime = "8:53pm";
-const 24hourClockTime = "20:53";
+const Hour12ClockTime = "8:53pm";
+
+console.log(Hour12ClockTime);
+
+const hour24ClockTime = "20:53";
+
+console.log(hour24ClockTime);
+
+//Variable names cannot start with a number as Javascript doesn't allow it, it can contain a number inside the variable but not at the beginning.
+// The error is a SyntaxError: Invalid or unexpected token

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;
@@ -12,11 +12,19 @@ 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 are 5 function calls, two function calls on line 4 = Number(...) and replaceAll(...) two more on line 5 = Number(...) and replaceAll(...) and finally on line 10 = console.log(...)
 
 // 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?
 
+//>SyntaxError: missing a comma to separate the arguments, the error is on line 5
+
 // c) Identify all the lines that are variable reassignment statements
+//>carPrice = Number(carPrice.replaceAll(",", "")); and priceAfterOneYear = Number(priceAfterOneYear.replaceAll(",", ""));
 
 // d) Identify all the lines that are variable declarations
+//>There are 4 variable declarations- 1) let carPrice = "10,000"; 2) let priceAfterOneYear = "8,543";
+//3) const priceDifference = carPrice-priceAfterOneYear; 4) const percentageChange = (priceDifferenc/carPrice)* 100;
 
 // e) Describe what the expression Number(carPrice.replaceAll(",","")) is doing - what is the purpose of this expression?
+//>Number(carPrice.replaceAll(",", "")); is a string and the expression removes the comma from "10,000" and converts "10000" from a string into the number 10000.

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

@@ -1,4 +1,4 @@
-const movieLength = 8784; // length of movie in seconds
+const movieLength = 90.5; // length of movie in seconds
 
 const remainingSeconds = movieLength % 60;
 const totalMinutes = (movieLength - remainingSeconds) / 60;
@@ -12,14 +12,31 @@ 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?
+//>6 variable Declarations, every const creates a new variable.
 
 // b) How many function calls are there?
+//>1 function calls is console.log() as it is a function being called and told to do the job
 
 // c) Using documentation, explain what the expression movieLength % 60 represents
 // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators
 
+//>movieLength % 60 means finding the remainder after dividing movieLength by 60. movieLength = 8784 so we need to do: 8784/60 = 146.4 and the nearest whole integer is 146.
+//So there are 146 complete groups of 60. we then multiply; 146 x 60= 8760 --> 8784 - 8760 = 24 so 8784 % 60 = 24 and therefore remainingSeconds becomes 24.
+//8784/60 = 146.4. and 8784 % 60 = 24 as this is the remainder.
+
 // d) Interpret line 4, what does the expression assigned to totalMinutes mean?
+//>const totalMinutes = (movieLength - remainingSeconds) / 60 ---> if we break it down -> movieLength = 8784 remainingSeconds = 24
+//we then subtract remainingSeconds from movieLength= 8784 -24 = 8670. we then have to divide it by 60 which gives us 8760 / 60 = 146. we divide because there is 60 seconds in one minute, and right now we are converting seconds into minutes.
 
 // e) What do you think the variable result represents? Can you think of a better name for this variable?
+//>The result variable will show us he complete results from our calculations of = totalHours:remainingMinutes:remainingSeconds.
+//result = 2:26:24
+// A better name for result variable would be const movietime = `${totalHours}:${remainingMinutes}:${remainingSeconds}`;
+//console.log(result);
 
 // f) Try experimenting with different values of movieLength. Will this code work for all values of movieLength? Explain your answer
+//>I tested differnet codes: 7965 and I got the result 2:12:45 and i also tried : 2654 and got 0:44:14.
+
+//> suggestions to run code - 59 gives us 0:0:59 > less than 60 seconds
+//-90 gives us 0:-1:-30 - not valid as the code works properly for non-negative whole numbers
+//90.5 gives us 0:1:30.5 > this tells us 60 goes into 90.5 once and 30.5 is the remainder

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
@@ -21,7 +21,20 @@ console.log(`£${pounds}.${pence}`);
 // The program then builds up a string representing the price in pounds
 
 // You need to do a step-by-step breakdown of each line in this program
+
 // Try and describe the purpose / rationale behind each step
 
 // To begin, we can start with
 // 1. const penceString = "399p": initialises a string variable with the value "399p"
+//const penceString = "399p"; creates a variable. This string represents a price in pence.
+//We then count the variable penceString using index starting from 0 and ending at 3.
+//.length tells us how many characters there are in a string which in this case its 4.
+//Because we know penceString = 4 we have to then subtract 4-1=3.---> we have penceString.length-1 which then becomes 4 - 1 = 3.
+//we are doing this so we can remove the final character.
+//penceString.substring(0, 3) will give us "399"
+//padStart() adds characters to the beginning of a string until it reaches a certain length, we asked for a length of 3.
+//The final two characters represents pence and we are trying to get poundsright now.Because we have "399" and the last two digits represents pence and the character before that represents pounds.
+//we are subtracting 2 because when using substringwe remove the part that belongs to pence, 3 | 99
+//padEnd count at the position of the last two digits and take everything after that so we can get the right value for pence.
+//here we are making sure that pence has 2 characters- this generally means that if the string does not add to 2 characters, add 0 to the end until its 2 characters Long
+//console.log displays something in the console as the backticks create a template literal inside it we put our variables.

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

@@ -9,7 +9,16 @@ In the Chrome console, invoke the function `alert` with one argument, the string
 
 What effect does calling the `alert` function have?
 
+//alert is a function name and we are storing Hello world! as the argument. alert then alerts the screen with a banner with chrome url that says "Hello world!"
+
 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`.
 
+//when using prompt and input the argument "what is your name?" and press enter we get a text box where it asks for your name(because of the variable) and a cancel and ok button. you input the question, the function is what prompt() gives back and that is the return value.
+
 What effect does calling the `prompt` function have?
+
+//the prompt function displays a pop-up input box asking "what is your name?" prompt asks a question and users give an input and the prompt then returns that input.
+
 What is the return value of `prompt`?
+
+//we need to create a variable first ' const myName = prompt ("what is your name?"); that stores the returned value in the variable.

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

@@ -6,11 +6,27 @@ Open the Chrome devtools Console, type in `console.log` and then hit enter
 
 What output do you get?
 
+//it showed the log function rather than calling it f log() { [natice code]}
+
 Now enter just `console` in the Console, what output do you get back?
 
+//the console objects and properties/functions ie, {debug:f, error:f, info:f, log:f, warn:f,...}
+
 Try also entering `typeof console`
 
+//we get 'object' why?--> because console is an object
+
 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 is an object that contains properties/functions used to interact with chrome/browser developer console.
+
+What does the syntax `console.log` or `console.assert` mean?
+
+//console.log = access the log property inside the console object.
+console.assert = access the assert property inside the console object.
+
+In particular, what does the `.` mean?
+
+//The dot . is called the property accessor operator used to access an object's property. It also tells Javascript to go inside this object and get a particular property.