Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
40 commits
Select commit Hold shift + click to select a range
ced2c8b
Created animal website and index.html
chefmatthaus-hub Sep 12, 2026
dfe221f
Part 1 - Creating the repository
chefmatthaus-hub Sep 12, 2026
20df3e3
Added colour options for shirts
chefmatthaus-hub Sep 12, 2026
5817f0b
Changed Footer Name
chefmatthaus-hub Sep 12, 2026
857487a
Added shirt size options
chefmatthaus-hub Sep 12, 2026
66bd2de
Added Customer Details Field
chefmatthaus-hub Sep 12, 2026
8bc3b93
changed shirt color label "for"
chefmatthaus-hub Sep 12, 2026
adf2ba2
Added a submit button
chefmatthaus-hub Sep 13, 2026
1979160
added a <p> for the button
chefmatthaus-hub Sep 13, 2026
b6c78a5
Neatened my line of code added a few <p> and <div>
chefmatthaus-hub Sep 13, 2026
cf2d074
Added my first .css
chefmatthaus-hub Sep 13, 2026
3c9fa22
Added .css to button
chefmatthaus-hub Sep 13, 2026
04a9d41
Added .css to select
chefmatthaus-hub Sep 13, 2026
daa9c1f
Removed shirt size label
chefmatthaus-hub Sep 13, 2026
c1fc3d4
added additional hover .css to select
chefmatthaus-hub Sep 13, 2026
4e8e014
added .css to input
chefmatthaus-hub Sep 13, 2026
0300b47
corrected email address field type to from "text" to "email"
chefmatthaus-hub Sep 13, 2026
1543377
added select option to option field
chefmatthaus-hub Sep 13, 2026
bb8c532
added .css to field set
chefmatthaus-hub Sep 13, 2026
f873d15
added "aria-label" to select field
chefmatthaus-hub Sep 13, 2026
eb8a31f
Delete animal-website/index.html
chefmatthaus-hub Sep 13, 2026
15d2158
Delete git-collaboration/animal-website/index.html
chefmatthaus-hub Sep 13, 2026
a9d224e
Worked on 1-count.js exxplained what the = operator does and how it c…
chefmatthaus-hub Sep 15, 2026
379adb3
Add index.css for styling form controls
chefmatthaus-hub Sep 15, 2026
f3df854
Completed 3-paths.js
chefmatthaus-hub Sep 15, 2026
aff145b
completed 3-paths.js
chefmatthaus-hub Sep 15, 2026
877bec1
completed 4-random.js tested the console.log output
chefmatthaus-hub Sep 15, 2026
569b188
completed 0.js by commenting out the 2 lines
chefmatthaus-hub Sep 15, 2026
80746e7
changed 'const' variable to 'let' variable and ran console.log to te…
chefmatthaus-hub Sep 15, 2026
56ac4cd
completed 2.js by swapping lines 6 and 5 so that const decleration i…
chefmatthaus-hub Sep 15, 2026
79b5ec2
changed const cardNumber from numeric to string
chefmatthaus-hub Sep 15, 2026
68c38be
changed const name to start with a letter and not a number
chefmatthaus-hub Sep 15, 2026
3df39c3
fix: correct syntax error in replaceAll function call for priceAfterO…
chefmatthaus-hub Sep 15, 2026
2f89dbe
completed 2-time-format.js
chefmatthaus-hub Sep 15, 2026
544f99d
explained the steps of the programs output
chefmatthaus-hub Sep 16, 2026
eadc040
Tried alerts and prompts on Chrome V8 Engine
chefmatthaus-hub Sep 16, 2026
598a6ec
completed objects.md
chefmatthaus-hub Sep 16, 2026
13b9006
Reset Form-Controls to match main
chefmatthaus-hub Sep 16, 2026
15a0c9b
Reset Form-Controls to upstream main
chefmatthaus-hub Sep 16, 2026
9fe7705
Delete Form-Controls/index.css
chefmatthaus-hub Sep 16, 2026
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions Sprint-2/1-key-exercises/1-count.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,6 @@ 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
console.log(count);
// Line 3 is updating the value of the variable count by adding 1 to its current value. The = operator is used to assign the new value (which is the result of count + 1) back to the variable count. This means that after line 3 executes, count will hold a value that is one greater than it did before.

3 changes: 2 additions & 1 deletion Sprint-2/1-key-exercises/2-initials.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ 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 = `${firstName[0]}${middleName[0]}${lastName[0]}`;
console.log(initials); // Output: CKJ

// https://www.google.com/search?q=get+first+character+of+string+mdn
7 changes: 5 additions & 2 deletions Sprint-2/1-key-exercises/3-paths.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,10 @@ 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(1, lastSlashIndex);
const ext = filePath.slice(filePath.lastIndexOf("."));

console.log(`The dir part of ${filePath} is ${dir}`);
console.log(`The ext part of ${filePath} is ${ext}`);

// https://www.google.com/search?q=slice+mdn
15 changes: 15 additions & 0 deletions Sprint-2/1-key-exercises/4-random.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,22 @@ 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?

// Answer: num is represents a random integer inclusive between minimum and maximum

// 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
// Answers: const minimum = 1 (thats's the minimum number constent variable)
// const maxiumum = 100 (that's the maxiumum number constant variable)
// Math.random: generates a random decimal number between 0 and 1
// (maximum - minimum + 1) Calculates the range of possible numbers (100 - 1 + 1=100)
// Math.random() * (maximum - minimum + 1) scales a random decimal to range a between 0 and 99.99
// Math.floor: Rounds the decimal down to the nearest whole interger (0 to 99)
// + minimum: shifts the range up by 1, resulting in the whole number from 1 to 100


// Try logging the value of num and running the program several times to build an idea of what the program is doing
// ran a console.log and the num value returned randomly each time
7 changes: 6 additions & 1 deletion Sprint-2/2-mandatory-errors/0.js
Original file line number Diff line number Diff line change
@@ -1,2 +1,7 @@
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 don't want the computer to run these 2 lines - how can we solve this problem?

//By commenting it out

//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?
4 changes: 3 additions & 1 deletion Sprint-2/2-mandatory-errors/1.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
// 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);
4 changes: 3 additions & 1 deletion Sprint-2/2-mandatory-errors/2.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
// Currently trying to print the string "I was born in Bolton" but it isn't working...
// what's the error ?
// Answer: because javascript runs from top to bottom, by declaring the const after running console.log the function throws an error because the decleration is done ater console.log

console.log(`I was born in ${cityOfBirth}`);
const cityOfBirth = "Bolton";
console.log(`I was born in ${cityOfBirth}`);

6 changes: 5 additions & 1 deletion Sprint-2/2-mandatory-errors/3.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,13 @@
const cardNumber = 4533787178994213;
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
// The .slice() can't be called using numeric values only string values
// Then run the code and see what error it gives.
// This is just an instruction for the first activity - but it is just for human consumption
//TypeError: cardNumber.slice is not a function
// 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)
9 changes: 7 additions & 2 deletions Sprint-2/2-mandatory-errors/4.js
Original file line number Diff line number Diff line change
@@ -1,2 +1,7 @@
const 12HourClockTime = "8:53pm";
const 24hourClockTime = "20:53";
const clockTime12Hour = "8:53pm";
const clockTime24Hour = "20:53";

console.log(clockTime12Hour);
console.log(clockTime24Hour);

// variable names can't be declared when starting with numbers, only letters
7 changes: 6 additions & 1 deletion Sprint-2/3-mandatory-interpret/1-percentage-change.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -12,11 +12,16 @@ 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
// i) There are five function calls. lines 4,5 and 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?
// ii) The error is coming from line 5. There wasn't a , seperating what the replaceAll function should replace the initial "," with "" so that Javascript knows to remove the , in line 2.

// c) Identify all the lines that are variable reassignment statements
// iii) Lines 4 and 5 are variable reassignment statetments

// d) Identify all the lines that are variable declarations
// iv) Lines 1, 2, 7 and 8 are variable declarations.

// e) Describe what the expression Number(carPrice.replaceAll(",","")) is doing - what is the purpose of this expression?
// v) It is replacing the string value 10,000 with 10000 by removing the comma and converts the string into a number type so that mathematical operations can be performed on it.
10 changes: 8 additions & 2 deletions Sprint-2/3-mandatory-interpret/2-time-format.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,26 @@ const totalMinutes = (movieLength - remainingSeconds) / 60;
const remainingMinutes = totalMinutes % 60;
const totalHours = (totalMinutes - remainingMinutes) / 60;

const result = `${totalHours}:${remainingMinutes}:${remainingSeconds}`;
console.log(result);
const timeRemainingHHMMSS = `${totalHours}:${remainingMinutes}:${remainingSeconds}`;
console.log(timeRemainingHHMMSS);

// 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?
// i) There are 5 variable declerations. Lines 1, 3, 4, 6, 7 and 9

// b) How many function calls are there?
// ii) There is only one 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
// iii) the % is a remainder operator telling us how many remaining seconds are left in the variable decleration in line 1

// d) Interpret line 4, what does the expression assigned to totalMinutes mean?
// iv) line 4 is taking the movieLength 8784 - remainingSeconds 24 which leaves us with a whole value of 146 for the totalMinutes variable decleration.

// e) What do you think the variable result represents? Can you think of a better name for this variable?
// v) It represents the total time remaining in HH:MM:SS format, perhaps changing variable decleration to timeRemainingHHMMSS would be more descriptive in what we are trying to achieve?

// f) Try experimenting with different values of movieLength. Will this code work for all values of movieLength? Explain your answer
// vi) this code won't work for negative number values and non-numeric values, I noticed that single-digit values don't follow the HHMMSS it shows HMSS depending on the value input used such as movieLength = 52.
7 changes: 7 additions & 0 deletions Sprint-2/3-mandatory-interpret/3-to-pounds.js
Original file line number Diff line number Diff line change
@@ -1,20 +1,27 @@
//declaring a variable with the value of "399p"
const penceString = "399p";

//the .substring is removing the "p" from the value of penceString by taking the total length of the subString "4" - 1 = 3, by stripping the "p" leaving only 399
const penceStringWithoutTrailingP = penceString.substring(
0,
penceString.length - 1
);

// padStart is creating a pad for the output by giving it an extra "0" if the value is less than £1
const paddedPenceNumberString = penceStringWithoutTrailingP.padStart(3, "0");

//The .substring is removing the "99" from the value of .penceStringWithoutTrailingP by taking the total length of the .penceStringWithoutTrailingP "3" - 2 = 1 by stripping the "99" leaving only the 3
const pounds = paddedPenceNumberString.substring(
0,
paddedPenceNumberString.length - 2
);

// the .substring is doing the same as the "pound" variable declared in now line 14, by grabbing the last 2 characters "99" except it is ending the pad as safeguard to always ensure that two digits remain
const pence = paddedPenceNumberString
.substring(paddedPenceNumberString.length - 2)
.padEnd(2, "0");

// console.log is using template literals to combine the currency symbol, pound string decimal point and pence string. Giving us an output of £3.99
console.log(`£${pounds}.${pence}`);

// This program takes a string representing a price in pence
Expand Down
6 changes: 6 additions & 0 deletions Sprint-2/4-stretch-explore/chrome.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,14 @@ 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?
// This created a pop-up saying 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`.
// I did const myName = prompt("What is your name?")
//console.log(myName)

What effect does calling the `prompt` function have?
// Displayed a pop-up text box that I could enter Matthaus, which Javascript stored in the myName variable

What is the return value of `prompt`?
Matthaus
6 changes: 6 additions & 0 deletions Sprint-2/4-stretch-explore/objects.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,18 @@ In this activity, we'll explore some additional concepts that you'll encounter i
Open the Chrome devtools Console, type in `console.log` and then hit enter

What output do you get?
Answer: function log() { (native code) }

Now enter just `console` in the Console, what output do you get back?
Answer: Output is 'console {debug: function, error: function, info: function, log: function, warn: function, ...} with a drop down list of all functions'

Try also entering `typeof console`
Answer: output is 'object'

Answer the following questions:

What does `console` store?
Answer: this stores all the functions that the console has.

What does the syntax `console.log` or `console.assert` mean? In particular, what does the `.` mean?
Answer: 'console' is an object and 'log/assert' is properties of log. the `.` is going to look-up which property is stored in the object
Loading