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

Form-Controls/README.md

@@ -4,12 +4,12 @@
 
 <!--{{<objectives>}}>-->
 
-- [ ] 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
 <!--{{<objectives>}}>-->
 
 ## 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)

Form-Controls/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
@@ -13,15 +13,50 @@ <h1>Product Pick</h1>
     </header>
     <main>
       <form>
-        <!-- write your html here-->
-        <!-- 
-          try writing out the requirements first as comments
-        this will also help you fill in your PR message later-->
+        <div>
+          <label for="fullname">Full name:</label>
+          <input
+            type="text"
+            id="fullname"
+            name="Fullname"
+            required
+            pattern=".*\S.*\S.*">
+          <br>
+        </div>
+
+        <div>
+          <label for="email">Email:</label>
+          <input type="email" name="email" id="email" required>
+        </div>
+
+        <div>
+          <label for="T-shirt-colour">Select one T-shirt colour:</label>
+          <select name="T-shirt-colour" id="T-shirt-colour" required>
+            <option value="">Choose one colour</option>
+            <option>Black</option>
+            <option>Navy blue</option>
+            <option>Grey</option>
+          </select>
+        </div>
+
+        <div>
+          <label for="T-shirt-Size">Select one size:</label>
+          <select name="T-shirt-Size" id="T-shirt-Size" required>
+            <option value="">Choose one size</option>
+            <option>XS</option>
+            <option>S</option>
+            <option>M</option>
+            <option>L</option>
+            <option>XL</option>
+            <option>XXL</option>
+          </select>
+        </div>
+
+        <button type="Submit">Submit</button>
       </form>
     </main>
     <footer>
-      <!-- change to your name-->
-      <p>By HOMEWORK SOLUTION</p>
+      <p>By Sakiya Mayow</p>
     </footer>
   </body>
 </html>

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"));

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));

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));

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)}`);

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)}`);

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

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

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"));

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"));