diff --git a/Sprint-2/1-key-exercises/1-count.js b/Sprint-2/1-key-exercises/1-count.js index 117bcb2b6..7323f68ed 100644 --- a/Sprint-2/1-key-exercises/1-count.js +++ b/Sprint-2/1-key-exercises/1-count.js @@ -1,6 +1,7 @@ -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 +let count = 0; + +count = count + 1; +//Line 1 is variable declaration, creating the count variable with an initial value of 0 +//Line 3 takes the current value of count (0), adds 1 to it (0 + 1 = 1), and uses the assignment operator (=) to reassign and store this new value (1) back into the count variable. +// 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 diff --git a/Sprint-2/1-key-exercises/2-initials.js b/Sprint-2/1-key-exercises/2-initials.js index 964c9563c..b42b68be7 100644 --- a/Sprint-2/1-key-exercises/2-initials.js +++ b/Sprint-2/1-key-exercises/2-initials.js @@ -1,10 +1,12 @@ -const firstName = "Creola"; -const middleName = "Katherine"; -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 = ``; - -// https://www.google.com/search?q=get+first+character+of+string+mdn +const firstName = "Creola"; +const middleName = "Katherine"; +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 = firstName[0] + middleName[0] + lastName[0]; + +console.log(initials); + +// https://www.google.com/search?q=get+first+character+of+string+mdn diff --git a/Sprint-2/1-key-exercises/3-paths.js b/Sprint-2/1-key-exercises/3-paths.js index ab90ebb28..af1de47a8 100644 --- a/Sprint-2/1-key-exercises/3-paths.js +++ b/Sprint-2/1-key-exercises/3-paths.js @@ -1,23 +1,26 @@ -// The diagram below shows the different names for parts of a file path on a Unix operating system - -// ┌─────────────────────┬────────────┐ -// │ dir │ base │ -// ├──────┬ ├──────┬─────┤ -// │ root │ │ name │ ext │ -// " / home/user/dir / file .txt " -// └──────┴──────────────┴──────┴─────┘ - -// (All spaces in the "" line should be ignored. They are purely for formatting.) - -const filePath = "/Users/mitch/cyf/Module-JS1/week-1/interpret/file.txt"; -const lastSlashIndex = filePath.lastIndexOf("/"); -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 -// Create a variable to store the ext part of the variable - -const dir = ; -const ext = ; - +// The diagram below shows the different names for parts of a file path on a Unix operating system + +// ┌─────────────────────┬────────────┐ +// │ dir │ base │ +// ├──────┬ ├──────┬─────┤ +// │ root │ │ name │ ext │ +// " / home/user/dir / file .txt " +// └──────┴──────────────┴──────┴─────┘ + +// (All spaces in the "" line should be ignored. They are purely for formatting.) + +const filePath = "/Users/mitch/cyf/Module-JS1/week-1/interpret/file.txt"; +const lastSlashIndex = filePath.lastIndexOf("/"); +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 +// Create a variable to store the ext part of the variable + +const dir = filePath.slice(0, lastSlashIndex); +const ext = filePath.slice(filePath.lastIndexOf(".")); + +console.log(dir); +console.log(ext); + // https://www.google.com/search?q=slice+mdn \ No newline at end of file diff --git a/Sprint-2/1-key-exercises/4-random.js b/Sprint-2/1-key-exercises/4-random.js index 292f83aab..b0e5933f6 100644 --- a/Sprint-2/1-key-exercises/4-random.js +++ b/Sprint-2/1-key-exercises/4-random.js @@ -1,9 +1,14 @@ -const minimum = 1; -const maximum = 100; - -const num = Math.floor(Math.random() * (maximum - minimum + 1)) + minimum; - -// 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 +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 +// Breakdown of the expression +// 1. Math.random() this generates a decimal number from 0 up to , but not including 1 +//num represents a random number between minimum and maximum \ No newline at end of file diff --git a/Sprint-2/2-mandatory-errors/0.js b/Sprint-2/2-mandatory-errors/0.js index cf6c5039f..7c1ace807 100644 --- a/Sprint-2/2-mandatory-errors/0.js +++ b/Sprint-2/2-mandatory-errors/0.js @@ -1,2 +1,4 @@ -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? \ No newline at end of file +//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? + + //answer: by adding the 2 forward slashes before every line \ No newline at end of file diff --git a/Sprint-2/2-mandatory-errors/1.js b/Sprint-2/2-mandatory-errors/1.js index 7a43cbea7..ad09ad1ef 100644 --- a/Sprint-2/2-mandatory-errors/1.js +++ b/Sprint-2/2-mandatory-errors/1.js @@ -1,4 +1,6 @@ -// trying to create an age variable and then reassign the value by 1 - -const age = 33; -age = age + 1; +// trying to create an age variable and then reassign the value by 1 + +const age = 33; +age = age + 1; + +console.log(age); diff --git a/Sprint-2/2-mandatory-errors/2.js b/Sprint-2/2-mandatory-errors/2.js index e09b89831..e26fcdc27 100644 --- a/Sprint-2/2-mandatory-errors/2.js +++ b/Sprint-2/2-mandatory-errors/2.js @@ -1,5 +1,8 @@ -// 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"; +// Currently trying to print the string "I was born in Bolton" but it isn't working... +// what's the error ? + +const cityOfBirth = "Bolton"; +console.log(`I was born in ${cityOfBirth}`); + +//reason is the console.log was entered before the text + diff --git a/Sprint-2/2-mandatory-errors/3.js b/Sprint-2/2-mandatory-errors/3.js index ec101884d..4ed86ec56 100644 --- a/Sprint-2/2-mandatory-errors/3.js +++ b/Sprint-2/2-mandatory-errors/3.js @@ -1,9 +1,10 @@ -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 +const cardNumber = "4533787178994213"; +const last4Digits = 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 diff --git a/Sprint-2/2-mandatory-errors/4.js b/Sprint-2/2-mandatory-errors/4.js index 5f86c730b..1d13773e8 100644 --- a/Sprint-2/2-mandatory-errors/4.js +++ b/Sprint-2/2-mandatory-errors/4.js @@ -1,2 +1,5 @@ -const 12HourClockTime = "8:53pm"; -const 24hourClockTime = "20:53"; +const twelveHourClockTime = "8:53pm"; +const twentyFourHourClockTime = "20:53"; + +console.log(twelveHourClockTime); +console.log(twentyFourHourClockTime); \ No newline at end of file diff --git a/Sprint-2/3-mandatory-interpret/1-percentage-change.js b/Sprint-2/3-mandatory-interpret/1-percentage-change.js index e24ecb8e1..169d7f69b 100644 --- a/Sprint-2/3-mandatory-interpret/1-percentage-change.js +++ b/Sprint-2/3-mandatory-interpret/1-percentage-change.js @@ -1,22 +1,30 @@ -let carPrice = "10,000"; -let priceAfterOneYear = "8,543"; - -carPrice = Number(carPrice.replaceAll(",", "")); -priceAfterOneYear = Number(priceAfterOneYear.replaceAll("," "")); - -const priceDifference = carPrice - priceAfterOneYear; -const percentageChange = (priceDifference / carPrice) * 100; - -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 - -// 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? - -// c) Identify all the lines that are variable reassignment statements - -// 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? +let carPrice = "10,000"; +let priceAfterOneYear = "8,543"; + +carPrice = Number(carPrice.replaceAll(",", "")); +priceAfterOneYear = Number(priceAfterOneYear.replaceAll("," "")); + +const priceDifference = carPrice - priceAfterOneYear; +const percentageChange = (priceDifference / carPrice) * 100; + +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 + //answer: we have 5 function calls across 3 lines: + //line 4 + //line 5 + //line 10 + +// 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? + //answer: on line 5, there is an error caused by a missing comma replaceAll("," ""));. Can be fixed by changing it to priceAfterOneYear = Number(priceAfterOneYear.replaceAll(",", "")); + +// c) Identify all the lines that are variable reassignment statements + //answer: lines 4 and 5 + +// d) Identify all the lines that are variable declarations + //answer: line 1, 2, 7 and 8 + +// e) Describe what the expression Number(carPrice.replaceAll(",","")) is doing - what is the purpose of this expression? + //answer: .ReplaceAll(",", "") this will remove every comma from the price string and number will convert that clean string into a numeric value so mathematical calculations can be performed. \ No newline at end of file diff --git a/Sprint-2/3-mandatory-interpret/2-time-format.js b/Sprint-2/3-mandatory-interpret/2-time-format.js index 47d239558..a6175ebef 100644 --- a/Sprint-2/3-mandatory-interpret/2-time-format.js +++ b/Sprint-2/3-mandatory-interpret/2-time-format.js @@ -1,25 +1,31 @@ -const movieLength = 8784; // length of movie in seconds - -const remainingSeconds = movieLength % 60; -const totalMinutes = (movieLength - remainingSeconds) / 60; - -const remainingMinutes = totalMinutes % 60; -const totalHours = (totalMinutes - remainingMinutes) / 60; - -const result = `${totalHours}:${remainingMinutes}:${remainingSeconds}`; -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? - -// b) How many function calls are there? - -// c) Using documentation, explain what the expression movieLength % 60 represents -// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators - -// 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? - -// f) Try experimenting with different values of movieLength. Will this code work for all values of movieLength? Explain your answer +const movieLength = 8784; // length of movie in seconds + +const remainingSeconds = movieLength % 60; +const totalMinutes = (movieLength - remainingSeconds) / 60; + +const remainingMinutes = totalMinutes % 60; +const totalHours = (totalMinutes - remainingMinutes) / 60; + +const result = `${totalHours}:${remainingMinutes}:${remainingSeconds}`; +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? + //answer: we have 6 variable declarations + +// b) How many function calls are there? + //answer: there is 1 function call: line 10 + +// c) Using documentation, explain what the expression movieLength % 60 represents +// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators + //answer:% is a remainder operator, it calculates left over seconds when movie length is divided into full minutes + +// d) Interpret line 4, what does the expression assigned to totalMinutes mean? +//answer:it subtracts the left over seconds from the total movie length to get a multiple of 60, then divides by 60 to convert that duration into whole minutes. + +// e) What do you think the variable result represents? Can you think of a better name for this variable? + //answer: formattedMovieLength, it represents the movieLength format as a time string + +// f) Try experimenting with different values of movieLength. Will this code work for all values of movieLength? Explain your answer + //answer: yes it can work but only for positive numbers representing total seconds, if the movieLength is negative it will give off an output of an invalid time value \ No newline at end of file diff --git a/Sprint-2/3-mandatory-interpret/3-to-pounds.js b/Sprint-2/3-mandatory-interpret/3-to-pounds.js index 60c9ace69..418ec67e7 100644 --- a/Sprint-2/3-mandatory-interpret/3-to-pounds.js +++ b/Sprint-2/3-mandatory-interpret/3-to-pounds.js @@ -1,27 +1,37 @@ -const penceString = "399p"; - -const penceStringWithoutTrailingP = penceString.substring( - 0, - penceString.length - 1 -); - -const paddedPenceNumberString = penceStringWithoutTrailingP.padStart(3, "0"); -const pounds = paddedPenceNumberString.substring( - 0, - paddedPenceNumberString.length - 2 -); - -const pence = paddedPenceNumberString - .substring(paddedPenceNumberString.length - 2) - .padEnd(2, "0"); - -console.log(`£${pounds}.${pence}`); - -// This program takes a string representing a price in 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"; + +const penceStringWithoutTrailingP = penceString.substring( + 0, + penceString.length - 1 +); + +const paddedPenceNumberString = penceStringWithoutTrailingP.padStart(3, "0"); +const pounds = paddedPenceNumberString.substring( + 0, + paddedPenceNumberString.length - 2 +); + +const pence = paddedPenceNumberString + .substring(paddedPenceNumberString.length - 2) + .padEnd(2, "0"); + +console.log(`£${pounds}.${pence}`); + +// This program takes a string representing a price in 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": initializes a string variable with the value "399p" representing the price in pence including the trailing letter 'p' + +// 2. const penceStringWithoutTrailingP = penceString.substring(0, penceString.length - 1): Extract the numeric portion of the penceString by taking characters from index 0 up to the last character removing the 'p'because 399p is not a valid number for math. + +// 3. const paddedPenceNumberString = penceStringWithoutTrailingP . padStart(3, "0"): it ensures the penceString is at least 3 digits long by adding leading zeros if necessary ensuring there will always be 2 digits for pence and 1 for pound. + +// 4. const pounds = paddedPenceNumberString.substring(0, paddedPenceNumberString.length - 2): Extracts the pounds portion of the price by taking all digits except the last 2 + +// 5. const pence = paddedPenceNumberString.substring(paddedPenceNumberString.length - 2) padEnd(2, "0") it extracts the last 2 digits representing pence ensuring it is padded to 2 digits + +// 6. line 18 = formats and prints the final price string with the pound symbol, amount, period and pence amount i.e "£3.99" \ No newline at end of file diff --git a/Sprint-2/4-stretch-explore/chrome.md b/Sprint-2/4-stretch-explore/chrome.md index 962580b82..5de5e6331 100644 --- a/Sprint-2/4-stretch-explore/chrome.md +++ b/Sprint-2/4-stretch-explore/chrome.md @@ -1,15 +1,21 @@ -Open a new window in Chrome, right click an empty space on the page, select **Inspect** from the dropdown, then locate the **Console** tab. - -Voila! You now have access to the [Chrome V8 Engine](https://www.cloudflare.com/en-gb/learning/serverless/glossary/what-is-chrome-v8/). -Just like the Node REPL, you can input JavaScript code into the Console tab and the V8 engine will execute it. - -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? - -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`? +Open a new window in Chrome, right click an empty space on the page, select **Inspect** from the dropdown, then locate the **Console** tab. + +Voila! You now have access to the [Chrome V8 Engine](https://www.cloudflare.com/en-gb/learning/serverless/glossary/what-is-chrome-v8/). +Just like the Node REPL, you can input JavaScript code into the Console tab and the V8 engine will execute it. + +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? + + answer: it displays a pop-up dialog box in the browser window containing the message "Hello World!" and an ok button that pauses the page execution until the user dismisses it + +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: it pops up a box asking a question with a text field where you can type in your answer, plus an OK and cancel buttons. + +What is the return value of `prompt`? + + answer: it returns the text typed by the user as a string in the text input field when they click ok. diff --git a/Sprint-2/4-stretch-explore/objects.md b/Sprint-2/4-stretch-explore/objects.md index 0216dee56..05672ff8b 100644 --- a/Sprint-2/4-stretch-explore/objects.md +++ b/Sprint-2/4-stretch-explore/objects.md @@ -1,16 +1,27 @@ -## Objects - -In this activity, we'll explore some additional concepts that you'll encounter in more depth later on in the course. - -Open the Chrome devtools Console, type in `console.log` and then hit enter - -What output do you get? - -Now enter just `console` in the Console, what output do you get back? - -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? +## Objects + +In this activity, we'll explore some additional concepts that you'll encounter in more depth later on in the course. + +Open the Chrome devtools Console, type in `console.log` and then hit enter + +What output do you get? + + answer: the output gives the function definition, i.e ƒ log() { [native code] } + +Now enter just `console` in the Console, what output do you get back? + + answer: it returns the console object with all its methods i.e (log,warn,error,assert,etc) + +Try also entering `typeof console` + + answer: it outputs "object" + +Answer the following questions: + +What does `console` store? + + answer: it is a built-in global object that stores methods used to output messages, errors and warnings to the browser console + +What does the syntax `console.log` or `console.assert` mean? In particular, what does the `.` mean? + + answer: the "." is a property accessor used to access a property or a method in an object. so console.log mean go into the object and grab the log diff --git a/Sprint-2/README.md b/Sprint-2/README.md index a47afc540..52fb6198f 100644 --- a/Sprint-2/README.md +++ b/Sprint-2/README.md @@ -1,35 +1,35 @@ -# 🧭 Guide to Sprint 2 exercises - -> https://curriculum.codeyourfuture.io/itp/javascript-fundamentals/sprints/2/prep/ - -> [!TIP] -> You should always do the prep work _before_ attempting the coursework. -> The prep shows you _how_ to do the coursework. -> There is often a step by step video you can code along with too. -> Do the prep. - -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. - -https://developer.mozilla.org/en-US/docs/Web/JavaScript - -## 2 Errors - -In this section, you'll need to go to each file in `errors` directory and run the file with node to check what the error is. Your task is to interpret the error message and explain why it occurs. The [errors documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors) will help you figure out the solution. - -## 3 Interpret - -In these tasks, you have to interpret a slightly larger program with some syntax / operators / functions that may be unfamiliar. - -You must use documentation to make sense of anything unfamiliar - learning how to look things up this way is a fundamental part of being a developer! - -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 - -## 4 Explore - Stretch 💪 - -This stretch activity will get you to start exploring new concepts and environments by yourself. It will do so by prompting you to reflect on some questions. +# 🧭 Guide to Sprint 2 exercises + +> https://curriculum.codeyourfuture.io/itp/javascript-fundamentals/sprints/2/prep/ + +> [!TIP] +> You should always do the prep work _before_ attempting the coursework. +> The prep shows you _how_ to do the coursework. +> There is often a step by step video you can code along with too. +> Do the prep. + +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. + +https://developer.mozilla.org/en-US/docs/Web/JavaScript + +## 2 Errors + +In this section, you'll need to go to each file in `errors` directory and run the file with node to check what the error is. Your task is to interpret the error message and explain why it occurs. The [errors documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors) will help you figure out the solution. + +## 3 Interpret + +In these tasks, you have to interpret a slightly larger program with some syntax / operators / functions that may be unfamiliar. + +You must use documentation to make sense of anything unfamiliar - learning how to look things up this way is a fundamental part of being a developer! + +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 + +## 4 Explore - Stretch 💪 + +This stretch activity will get you to start exploring new concepts and environments by yourself. It will do so by prompting you to reflect on some questions.