diff --git a/Sprint-1/1-key-exercises/1-count.js b/Sprint-1/1-key-exercises/1-count.js index 117bcb2b6e..ec43c6e979 100644 --- a/Sprint-1/1-key-exercises/1-count.js +++ b/Sprint-1/1-key-exercises/1-count.js @@ -1,6 +1,9 @@ -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 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 + + +// In line 3 JS takes the current value of count which is 0, adds 1 to it and then stores the result back into count variable on the left. \ No newline at end of file diff --git a/Sprint-1/1-key-exercises/2-initials.js b/Sprint-1/1-key-exercises/2-initials.js index 47561f6175..e3381c866d 100644 --- a/Sprint-1/1-key-exercises/2-initials.js +++ b/Sprint-1/1-key-exercises/2-initials.js @@ -1,11 +1,12 @@ -let firstName = "Creola"; -let middleName = "Katherine"; -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 = ``; - -// https://www.google.com/search?q=get+first+character+of+string+mdn - +let firstName = "Creola"; +let middleName = "Katherine"; +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 = `${firstName.charAt(0)} ${middleName.charAt(0)} ${lastName.charAt(0)}`; + +// https://www.google.com/search?q=get+first+character+of+string+mdn + +console.log(initials); diff --git a/Sprint-1/1-key-exercises/3-paths.js b/Sprint-1/1-key-exercises/3-paths.js index ab90ebb28e..b1d327d816 100644 --- a/Sprint-1/1-key-exercises/3-paths.js +++ b/Sprint-1/1-key-exercises/3-paths.js @@ -1,23 +1,24 @@ -// 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 = base.slice(base.lastIndexOf(".") + 1); + + // https://www.google.com/search?q=slice+mdn \ No newline at end of file diff --git a/Sprint-1/1-key-exercises/4-random.js b/Sprint-1/1-key-exercises/4-random.js index 292f83aabb..eb6b9dfef7 100644 --- a/Sprint-1/1-key-exercises/4-random.js +++ b/Sprint-1/1-key-exercises/4-random.js @@ -1,9 +1,25 @@ -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; + +// 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 this exercise, num is a variable that stores the random whole number generated by the expression so it can be used later in the program. + +1. Math.randon() picks a random decimal number + +2. maximum - minimum + 1; finds how many numbers are in the range + +3. Math.floor() rounds the decimal down + +4. +minimum adds the minimum value + + +*/ \ No newline at end of file diff --git a/Sprint-1/2-mandatory-errors/0.js b/Sprint-1/2-mandatory-errors/0.js index cf6c5039f7..2b96fc9b0b 100644 --- a/Sprint-1/2-mandatory-errors/0.js +++ b/Sprint-1/2-mandatory-errors/0.js @@ -1,2 +1,5 @@ -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? + + */ diff --git a/Sprint-1/2-mandatory-errors/1.js b/Sprint-1/2-mandatory-errors/1.js index 7a43cbea76..7dc4e64688 100644 --- a/Sprint-1/2-mandatory-errors/1.js +++ b/Sprint-1/2-mandatory-errors/1.js @@ -1,4 +1,5 @@ -// 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 + +let age = 33; +age = age + 1; + diff --git a/Sprint-1/2-mandatory-errors/2.js b/Sprint-1/2-mandatory-errors/2.js index e09b89831d..09007751d4 100644 --- a/Sprint-1/2-mandatory-errors/2.js +++ b/Sprint-1/2-mandatory-errors/2.js @@ -1,5 +1,6 @@ -// 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}`); diff --git a/Sprint-1/2-mandatory-errors/3.js b/Sprint-1/2-mandatory-errors/3.js index ec101884db..0bf10b7b75 100644 --- a/Sprint-1/2-mandatory-errors/3.js +++ b/Sprint-1/2-mandatory-errors/3.js @@ -1,9 +1,13 @@ -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.toString().slice(-4); + +console.log(last4Digits); + +// This code will not work as written because cardNumber is a number, and numbers do not have a .slice() method. + +// 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-1/2-mandatory-errors/4.js b/Sprint-1/2-mandatory-errors/4.js index 5f86c730bc..be51aaa753 100644 --- a/Sprint-1/2-mandatory-errors/4.js +++ b/Sprint-1/2-mandatory-errors/4.js @@ -1,2 +1,2 @@ -const 12HourClockTime = "8:53pm"; -const 24hourClockTime = "20:53"; +const _12HourClockTime = "8:53pm"; +const _24hourClockTime = "20:53"; diff --git a/Sprint-1/3-mandatory-interpret/1-percentage-change.js b/Sprint-1/3-mandatory-interpret/1-percentage-change.js index e24ecb8e18..cdedb2a2a9 100644 --- a/Sprint-1/3-mandatory-interpret/1-percentage-change.js +++ b/Sprint-1/3-mandatory-interpret/1-percentage-change.js @@ -1,22 +1,60 @@ -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 + +// 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? + +/* + +a) How many function calls are there? + +There are 5 function calls. + +1. carPrice.replaceAll(",", "") +2. Number(......) +3. priceAfterOneYear.replaceAll(",", "") +4. Number(......) +5. console.log(.....) + +b) Why is the error occurring? + +Because of the missing comma in the function call ReplaceAll() on line 5 + +c) Variable reassignments + +1. carPrice = Number(carPrice.replaceAll(",", "")); +2. priceAfterOneYear = Number(priceAfterOneYear.replaceAll(",", "")); + +d) all the variable declarations + +1. let carPrice = "10,000"; +2. let priceAfterOneYear = "8,543"; +3. const priceDifference = carPrice - priceAfterOneYear; +4. const percentageChange = (priceDifference / carPrice) * 100; + + +e)What is the expression doing? + +The replaceAll() removes commas from the string and Number() function call converts the string to a number. + +The expression removes the commas from the price string and converts the result into a number so it can be used in mathematical calculations. + + +*/ \ No newline at end of file diff --git a/Sprint-1/3-mandatory-interpret/2-time-format.js b/Sprint-1/3-mandatory-interpret/2-time-format.js index 47d2395587..d2db7c3a49 100644 --- a/Sprint-1/3-mandatory-interpret/2-time-format.js +++ b/Sprint-1/3-mandatory-interpret/2-time-format.js @@ -1,25 +1,63 @@ -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? + +// 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 + +/* + +a)variables declarations + +1. There are 6 variable declarations + +b) Function calls + +There is only 1 function call + +console.log(result); + +c)Using documentation, explain what the expression movieLength % 60 represents + +According to the JavaScript documentation, the remainder (%) operator returns the remainder left over after one number is divided by another. + +So movieLength % 60 means Divide movieLength by 60 and return the remainder. + +d) Interpret line 4. What does the expression assigned to totalMinutes mean? + +It means remove the leftover seconds from the total movie length, then divide by 60 to calculate the total number of whole minutes. + + +e) What do you think the variable result represents? Can you think of a better name? + +It stores the movie length formatted as hours:minutes:seconds + +A better variable name could be formattedTime + + +f) Try experimenting with different values of movieLength. + +It works correctly for positive whole numbers (integers) representing seconds. However, there are some cases where it doesn't produce ideal results like: + +const movieLength = -100; + +*/ \ No newline at end of file diff --git a/Sprint-1/3-mandatory-interpret/3-to-pounds.js b/Sprint-1/3-mandatory-interpret/3-to-pounds.js index 60c9ace69a..4a783aaea6 100644 --- a/Sprint-1/3-mandatory-interpret/3-to-pounds.js +++ b/Sprint-1/3-mandatory-interpret/3-to-pounds.js @@ -1,27 +1,78 @@ -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 = "380p"; + +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" + +/* + +Step 1: +we create a variable called penceString and store the text "339p". + +Step 2: + +a) . (dot) lets us use something that belongs to the string. +b) length is a property that tells us how many characters are in the string. There are 4 characters so returns 4. +c) penceString.length - 1 which means 4 - 1 = 3 We want to remove the last character ("p"), so we stop before it. +d) penceString.substring(0, 3) substring(start, end) start = where to begin end = where to stop (not including that position) So: substring(0, 3) + +Start at character 0 and stop before character 3. Why? We don't want the "p" anymore because we only need the number. + +Step 3: +const paddedPenceNumberString = penceStringWithoutTrailingP.padStart(3, "0"); + +It means If this string is shorter than length, add the character to the beginning until it reaches that length. Our value already has 3 characters so nothing changes. + +Step 4: + +const pounds = paddedPenceNumberString.substring( + 0, + paddedPenceNumberString.length - 2); + +a) paddedPenceNumberString.length returns 3 then 3 - 2 is 1. + +Why? because the last 2 digits are always the pence and everything before them is the pounds. + +Step 5: + +const pence = paddedPenceNumberString + .substring(paddedPenceNumberString.length - 2) + .padEnd(2, "0"); + + a) substring(length - 2) the length is 3 so substring(1) means Start at index 1 and keep going to the end. + + b) .padEnd(2, "0") which means if the string is shorter than 2 characters, add "0" to the end. + + +Step 6: + + console.log(`£${pounds}.${pence}`); + +Inside it is a template literal, which uses backticks (`): and `£${pounds}.${pence}` means insert the value of this variable here. + +If pounds = "3" pence = "99" then javascript prints 3.99 + + +*/ \ No newline at end of file diff --git a/Sprint-1/4-stretch-explore/chrome.md b/Sprint-1/4-stretch-explore/chrome.md index e7dd5feafe..8cdb0a6d2e 100644 --- a/Sprint-1/4-stretch-explore/chrome.md +++ b/Sprint-1/4-stretch-explore/chrome.md @@ -1,18 +1,18 @@ -Open a new window in Chrome, - -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 an input string of `"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, + +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 an input string of `"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`? diff --git a/Sprint-1/4-stretch-explore/objects.md b/Sprint-1/4-stretch-explore/objects.md index 0216dee56a..421809e5fe 100644 --- a/Sprint-1/4-stretch-explore/objects.md +++ b/Sprint-1/4-stretch-explore/objects.md @@ -1,16 +1,16 @@ -## 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? + +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? diff --git a/Sprint-1/readme.md b/Sprint-1/readme.md index 62d24c9580..7227cdeb1f 100644 --- a/Sprint-1/readme.md +++ b/Sprint-1/readme.md @@ -1,35 +1,35 @@ -# 🧭 Guide to Week 1 exercises - -> https://programming.codeyourfuture.io/structuring-data/sprints/1/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 Week 1 exercises + +> https://programming.codeyourfuture.io/structuring-data/sprints/1/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.