diff --git a/Form-Controls/README.md b/Form-Controls/README.md index c356f8844..b871f08fb 100644 --- a/Form-Controls/README.md +++ b/Form-Controls/README.md @@ -4,12 +4,12 @@ -- [ ] Interpret requirements and check against a list of criteria -- [ ] Write a valid form -- [ ] Test with Devtools +- [x] Interpret requirements and check against a list of criteria +- [x] Write a valid form +- [X] Test with Devtools - [ ] Refactor using Devtools -- [ ] Use version control by committing often and pushing regularly to GitHub -- [ ] Develop the habit of writing clean, well-structured, and error-free code +- [x] Use version control by committing often and pushing regularly to GitHub +- [x] Develop the habit of writing clean, well-structured, and error-free code ## Task @@ -39,18 +39,18 @@ Do not write a form action for this project. Let's write out our testable criteria. Check each one off as you complete it. -- [ ] I have only used HTML and CSS. +- [x] I have only used HTML and CSS. - [ ] I have not used any JavaScript. ### HTML -- [ ] My form is semantic HTML. -- [ ] All inputs have associated labels. -- [ ] My Lighthouse Accessibility score is 100. -- [ ] I require a valid name. -- [ ] I require a valid email. -- [ ] I require one colour from a defined set of 3 colours. -- [ ] I require one size from a defined set of 6 sizes. +- [x] My form is semantic HTML. +- [x] All inputs have associated labels. +- [X] My Lighthouse Accessibility score is 100. +- [x] I require a valid name. +- [x] I require a valid email. +- [x] I require one colour from a defined set of 3 colours. +- [x] I require one size from a defined set of 6 sizes. ### Developers must adhere to professional standards. @@ -59,10 +59,10 @@ Let's write out our testable criteria. Check each one off as you complete it. These practices reflect the level of quality expected in professional work. They ensure your code is reliable, maintainable, and presents a polished, credible experience to users. -- [ ] My HTML code has no errors or warnings when validated using https://validator.w3.org/ -- [ ] My code is consistently formatted -- [ ] My page content is free of typos and grammatical mistakes -- [ ] I commit often and push regularly to GitHub +- [X] My HTML code has no errors or warnings when validated using https://validator.w3.org/ +- [X] My code is consistently formatted +- [X] My page content is free of typos and grammatical mistakes +- [X] I commit often and push regularly to GitHub ## Resources - [MDN: Form controls](https://developer.mozilla.org/en-US/docs/Learn/Forms) diff --git a/Form-Controls/index.html b/Form-Controls/index.html index 74b591ffc..b6aa0d76b 100644 --- a/Form-Controls/index.html +++ b/Form-Controls/index.html @@ -1,4 +1,4 @@ - + @@ -13,15 +13,50 @@

Product Pick

- - +
+ + +
+
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
diff --git a/Sprint-3/1-key-errors/0.js b/Sprint-3/1-key-errors/0.js index 653d6f5a0..c5fa3de85 100644 --- a/Sprint-3/1-key-errors/0.js +++ b/Sprint-3/1-key-errors/0.js @@ -1,13 +1,30 @@ // Predict and explain first... // =============> write your prediction here +// fixing errors in the code to get the right result // call the function capitalise with a string input +//console.log(capitalise("hello")); + // interpret the error message and figure out why an error is occurring +// str has already been declared in function as a parameter, so we need to change str in let declaration and change names of the identifier in let declaration. -function capitalise(str) { - let str = `${str[0].toUpperCase()}${str.slice(1)}`; - return str; -} +// function capitalise(str) { +// let str = `${str[0].toUpperCase()}${str.slice(1)}`; +// return str; +// } // =============> write your explanation here + +//The function is to capitalise a word or sentence to a uppercase. +// when i tested the code it didn't work and i received a Syntexerror message which said that the identifier `str`has already been declared +//it was declared in the function and repeatedly twice and tried to create a variable with let when this is already a parameter. +// + // =============> write your new code here + +function capitalise(str) { + let string = `${str[0].toUpperCase()}${str.slice(1)}`; + return string; +} + +console.log(capitalise("hello")); diff --git a/Sprint-3/1-key-errors/1.js b/Sprint-3/1-key-errors/1.js index f2d56151f..003505d44 100644 --- a/Sprint-3/1-key-errors/1.js +++ b/Sprint-3/1-key-errors/1.js @@ -2,19 +2,33 @@ // Why will an error occur when this program runs? // =============> write your prediction here +// similar problem, the identifier has already been declared in function. // Try playing computer with the example to work out what is going on -function convertToPercentage(decimalNumber) { - const decimalNumber = 0.5; - const percentage = `${decimalNumber * 100}%`; +// function convertToPercentage(decimalNumber) { +// const decimalNumber = 0.5; +// const percentage = `${decimalNumber * 100}%`; - return percentage; -} +// return percentage; +// } -console.log(decimalNumber); +// console.log(decimalNumber); // =============> write your explanation here +// similar problem, the identifier 'decimalNumber" has already been declared in function and is a parameter. +// we can then remove const decimalNumber, then function can also receive different numbers. +// const percentage = `${decimalNumber * 100} %`;----> this calculates decimalNumber in which case it is 0.5 and multiply it by 100 which = 50 and then we add the % at the end which equals to 50% +// another error is the console.log that exists outside the function and is tryng to log something that exists inside the function. +// we want to print the result of the function we can ---> console.log(convertToPercentage(0.5)); // Finally, correct the code to fix the problem // =============> write your new code here + +function convertToPercentage(decimalNumber) { + const percentage = `${decimalNumber * 100}%`; + + return percentage; +} + +console.log(convertToPercentage(0.5)); diff --git a/Sprint-3/1-key-errors/2.js b/Sprint-3/1-key-errors/2.js index aad57f7cf..0394cc6dc 100644 --- a/Sprint-3/1-key-errors/2.js +++ b/Sprint-3/1-key-errors/2.js @@ -1,20 +1,29 @@ - // Predict and explain first BEFORE you run any code... - +// i am guessing this function wants us to find the square root of 3 and whatever value we get we have to multiply it // this function should square any number but instead we're going to get an error // =============> write your prediction of the error here -function square(3) { - return num * num; -} +// function square(3) { +// return num * num; +// } // =============> write the error message here +// function square(3) { +// ^ + +// SyntaxError: Unexpected number + // =============> explain this error message here +// we input a number as the parameter name, if we give the parameter a name it acts as a placeholder for the number we wish to give the function. +// we then write our number in console.log so it can send a message back to function what number we would want to square. // Finally, correct the code to fix the problem // =============> write your new code here - +function square(num) { + return num * num; +} +console.log(square(3)); diff --git a/Sprint-3/2-mandatory-debug/0.js b/Sprint-3/2-mandatory-debug/0.js index b27511b41..a5130f50f 100644 --- a/Sprint-3/2-mandatory-debug/0.js +++ b/Sprint-3/2-mandatory-debug/0.js @@ -1,14 +1,24 @@ // Predict and explain first... +// the function will multiply the values stored in the parameter. within the function scope the console.log, logs the answer but it does not return one. // =============> write your prediction here -function multiply(a, b) { - console.log(a * b); -} +// function multiply(a, b) { +// console.log(a * b); +// } -console.log(`The result of multiplying 10 and 32 is ${multiply(10, 32)}`); +// console.log(`The result of multiplying 10 and 32 is ${multiply(10, 32)}`); // =============> write your explanation here +//first step creates a function called multiply with two parameters +//Then we would have to call the function, and still within the function scope we have to write return so we can get the result back. +//console.log then runs the code to put the result in the right place + // Finally, correct the code to fix the problem // =============> write your new code here + +function multiply(a, b) { + return a * b; +} +console.log(`The result of multiplyig 10 and 32 is ${multiply(10, 32)}`); diff --git a/Sprint-3/2-mandatory-debug/1.js b/Sprint-3/2-mandatory-debug/1.js index 37cedfbcf..cb2b774a7 100644 --- a/Sprint-3/2-mandatory-debug/1.js +++ b/Sprint-3/2-mandatory-debug/1.js @@ -1,13 +1,22 @@ // Predict and explain first... + +//the function will add the values stored in the parameter. + // =============> write your prediction here -function sum(a, b) { - return; - a + b; -} +// function sum(a, b) { +// return; +// a + b; +// } -console.log(`The sum of 10 and 32 is ${sum(10, 32)}`); +// console.log(`The sum of 10 and 32 is ${sum(10, 32)}`); // =============> write your explanation here +//created a function called sum with two parameters, and from adequate research i have learned that the return and the values have to be on the same line otherwise it tells JavaScript to stop the function at return before reaching a + b. // Finally, correct the code to fix the problem // =============> write your new code here + +function sum(a, b) { + return a + b; +} +console.log(`The sum of 10 and 32 is ${sum(10, 32)}`); diff --git a/Sprint-3/2-mandatory-debug/2.js b/Sprint-3/2-mandatory-debug/2.js index 57d3f5dc3..3dc514290 100644 --- a/Sprint-3/2-mandatory-debug/2.js +++ b/Sprint-3/2-mandatory-debug/2.js @@ -1,24 +1,49 @@ // Predict and explain first... +// we want to get the last digit of the number value 103 // Predict the output of the following code: +//I think it will give us the wrong answer due to not specifying the actual result of what we want which is the lastDigit. + // =============> Write your prediction here -const num = 103; +// const num = 103; -function getLastDigit() { - return num.toString().slice(-1); -} +// function getLastDigit() { +// return num.toString().slice(-1); +// } -console.log(`The last digit of 42 is ${getLastDigit(42)}`); -console.log(`The last digit of 105 is ${getLastDigit(105)}`); -console.log(`The last digit of 806 is ${getLastDigit(806)}`); +// console.log(`The last digit of 42 is ${getLastDigit(42)}`); +// console.log(`The last digit of 105 is ${getLastDigit(105)}`); +// console.log(`The last digit of 806 is ${getLastDigit(806)}`); // Now run the code and compare the output to your prediction + +//This is the answer that i received , which is different from my initial thought. +//The last digit of 42 is 3 +//The last digit of 105 is 3 +//The last digit of 806 is 3 + // =============> write the output here // Explain why the output is the way it is +//the output is the same for all three due to the function always using the value 103. + // =============> write your explanation here +// By creating a constant to the value of 103 the number will always calculate the const. and this is, is not what the function wants us to do, so we would have to remove it. +//function -getLastDigit don't have a parameters which means that the other three values 42, 105, 806 will not be received by the function. +//this means we need to give the function a parameter. +//numToString changes the number into a string, this is so we can use the .slice() method. +//.slice(-1) will give us the last character. + // Finally, correct the code to fix the problem // =============> write your new code here +function getLastDigit(num) { + return num.toString().slice(-1); +} + +console.log(`The last digit of 42 is ${getLastDigit(42)}`); +console.log(`The last digit of 105 is ${getLastDigit(105)}`); +console.log(`The last digit of 806 is ${getLastDigit(806)}`); + // This program should tell the user the last digit of each number. // Explain why getLastDigit is not working properly - correct the problem diff --git a/Sprint-3/3-mandatory-implement/1-bmi.js b/Sprint-3/3-mandatory-implement/1-bmi.js index 58b1085f1..6c5937431 100644 --- a/Sprint-3/3-mandatory-implement/1-bmi.js +++ b/Sprint-3/3-mandatory-implement/1-bmi.js @@ -15,5 +15,7 @@ // It should return a string of their Body Mass Index to 1 decimal place function calculateBMI(weight, height) { - // return the BMI of someone based off their weight and height + return (weight / (height * height)).toFixed(1); } + +// return the BMI of someone based off their weight and height diff --git a/Sprint-3/3-mandatory-implement/2-cases.js b/Sprint-3/3-mandatory-implement/2-cases.js index 5b0ef77ad..9769c3dd3 100644 --- a/Sprint-3/3-mandatory-implement/2-cases.js +++ b/Sprint-3/3-mandatory-implement/2-cases.js @@ -14,3 +14,8 @@ // You will need to come up with an appropriate name for the function // Use the MDN string documentation to help you find a solution // This might help https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase + +function toUpperSnakeCase(str) { + return str.toUpperCase().replace(" ", "_"); +} +console.log(toUpperSnakeCase("hello there")); diff --git a/Sprint-3/3-mandatory-implement/3-to-pounds.js b/Sprint-3/3-mandatory-implement/3-to-pounds.js index 10754da73..623dbe3dc 100644 --- a/Sprint-3/3-mandatory-implement/3-to-pounds.js +++ b/Sprint-3/3-mandatory-implement/3-to-pounds.js @@ -4,3 +4,26 @@ // You will need to declare a function called toPounds with an appropriately named parameter. // You should call this function a number of times to check it works for different inputs + +function toPounds(penceString) { + 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"); + + return `£${pounds}.${pence}`; +} + +console.log(toPounds("399p")); +console.log(toPounds("99p")); +console.log(toPounds("10p")); diff --git a/Sprint-3/4-mandatory-interpret/time-format.js b/Sprint-3/4-mandatory-interpret/time-format.js index c0dd9c9a5..b5f00d993 100644 --- a/Sprint-3/4-mandatory-interpret/time-format.js +++ b/Sprint-3/4-mandatory-interpret/time-format.js @@ -15,6 +15,8 @@ function formatTimeDisplay(seconds) { return `${pad(totalHours)}:${pad(remainingMinutes)}:${pad(remainingSeconds)}`; } +console.log(formatTimeDisplay(61)); + // You will need to play computer with this example - use the Python Visualiser https://pythontutor.com/visualize.html#mode=edit // to help you answer these questions @@ -22,17 +24,23 @@ function formatTimeDisplay(seconds) { // a) When formatTimeDisplay is called how many times will pad be called? // =============> write your answer here +//> pad() was called 3 times---> pad(totalHours)---> pad(remainingMinutes)---> pad(remainingSeconds) // Call formatTimeDisplay with an input of 61, now answer the following: +// formatTimeDisplay(61); // b) What is the value assigned to num when pad is called for the first time? // =============> write your answer here +// pad(totalHours)--> totalHours= 0 --> Therefore num = 0 // c) What is the return value of pad when it is called for the first time? // =============> write your answer here +//the first pad() call returns the answer 00, this is because the value is 0, and functions adds a 0 to the beginning of the character to make it two characters long. // d) What is the value assigned to num when pad is called for the last time in this program? Explain your answer // =============> write your answer here +// 3 pad calls---> 1)-> pad(0), 2)-> pad(1), 3)-> pad(1)---> this shows the last call pad(remainingSeconds) = remainingSeconds= 1. when we call formatTimeDisplay(61); indicates that there are 61 seconds, after taking away 60 seconds which makes it 1 minute and the remainder is 1 second. // e) What is the return value of pad when it is called for the last time in this program? Explain your answer // =============> write your answer here +// when calling formatTimeDisplay(61); we already figured out the last pad() call is pad (remainingSeconds) and know that remainingSeconds is 1. Inside pad the number changes into a string "1" and the function then calculates and checks the length of the string but we wanted 2 characters/digits at least. Hence why the function adds 0 to the beginning which then gives us "01".