diff --git a/function-expression-and-parms/arrow-function/challange.js b/function-expression-and-parms/arrow-function/challange.js
new file mode 100644
index 0000000..39b4ad3
--- /dev/null
+++ b/function-expression-and-parms/arrow-function/challange.js
@@ -0,0 +1,19 @@
+// const speedWarning = speed => `You are going at ${speed} mph!`
+
+const speedWarning = (speedLimit, speed) => {
+ if (speed > speedLimit) {
+ return `You are going at ${speed} mph!`
+ }
+}
+
+console.log(speedWarning(30, 40))
+
+
+/*
+Challenge
+1. Refactor this function so it only warns drivers
+ who are going over the speed limit.
+2. The function now needs to take in two parameters.
+ The first is the speed limit, the second is the
+ driver's actual speed.
+*/
\ No newline at end of file
diff --git a/function-expression-and-parms/arrow-function/index.js b/function-expression-and-parms/arrow-function/index.js
new file mode 100644
index 0000000..34f14f3
--- /dev/null
+++ b/function-expression-and-parms/arrow-function/index.js
@@ -0,0 +1,38 @@
+// const getSpendAlert = function(amount){
+// return `Warning! You just spent £${amount}!`
+// }
+
+const getSpendAlert = (amount) => {
+ return `Warning! You just spent £${amount}!`
+}
+
+// one paramaeter can omit parentheses
+// const getSpendAlert = amount => {
+// return `Warning! You just spent £${amount}!`
+// }
+
+console.log(getSpendAlert(150))
+
+
+// const getSpendAlert = () => {
+// return `Warning! You just spent some money!`
+// }
+
+// console.log(getSpendAlert())
+
+
+// const getSpendAlert = (name, amount) => {
+// return `Warning! Hey ${name}! You just spent ${amount}!`
+// }
+
+// console.log(getSpendAlert('Tom', 100))
+
+
+
+// const getSpendAlert = amount => {
+// if (amount > 50) {
+// return `Warning! You just spent £${amount}!`
+// }
+// }
+
+// console.log(getSpendAlert(100))
\ No newline at end of file
diff --git a/function-expression-and-parms/callback-function/index.js b/function-expression-and-parms/callback-function/index.js
new file mode 100644
index 0000000..1d15433
--- /dev/null
+++ b/function-expression-and-parms/callback-function/index.js
@@ -0,0 +1,15 @@
+/* Quiz: list some times that we have passed functions as arguments to other functions.
+1. Array methods: map, forEach, reduce
+2. setTimeout and setInterval
+3. Event Listeners
+*/
+
+function notifyUser(notificationFn){
+ notificationFn()
+}
+
+const emailNotification = () => console.log('Email sent')
+const smsNotification = () => console.log('SMS sent')
+
+notifyUser(emailNotification)
+notifyUser(smsNotification)
\ No newline at end of file
diff --git a/function-expression-and-parms/default-params/index.js b/function-expression-and-parms/default-params/index.js
new file mode 100644
index 0000000..c24a8eb
--- /dev/null
+++ b/function-expression-and-parms/default-params/index.js
@@ -0,0 +1,11 @@
+import { itemsBoughtArr } from "/itemsBoughtArr.js";
+
+function calculateTotalCost(itemsBoughtArr, discount = 10) {
+ const total = itemsBoughtArr.reduce(
+ (total, currentItem) => total + currentItem.priceUSD,
+ 0
+ );
+ return total - discount;
+}
+
+console.log(calculateTotalCost(itemsBoughtArr, 20));
diff --git a/function-expression-and-parms/function-expression/index.js b/function-expression-and-parms/function-expression/index.js
new file mode 100644
index 0000000..b36bb14
--- /dev/null
+++ b/function-expression-and-parms/function-expression/index.js
@@ -0,0 +1,9 @@
+// function getSpendAlert(amount) {
+// return `Warning! You just spent £${amount}!`
+// }
+
+console.log(getSpendAlert(150))
+
+const getSpendAlert = function(amount){
+ return `Warning! You just spent £${amount}!`
+}
diff --git a/function-expression-and-parms/inline-arrow-function/challange-1/index.js b/function-expression-and-parms/inline-arrow-function/challange-1/index.js
new file mode 100644
index 0000000..765ef0c
--- /dev/null
+++ b/function-expression-and-parms/inline-arrow-function/challange-1/index.js
@@ -0,0 +1,13 @@
+import { itemsBoughtArr } from './itemsBoughtarr.js'
+
+function calculateTotalCost(itemsBoughtArr){
+/*
+Challenge:
+1. Use the reduce method to calculate the total
+ cost of items which have been bought.
+*/
+ const total = itemsBoughtArr.reduce((accumulator, item) => accumulator + item.priceUSD, 0)
+ return total
+}
+
+console.log(calculateTotalCost(itemsBoughtArr))
\ No newline at end of file
diff --git a/function-expression-and-parms/inline-arrow-function/challange-1/itemsBoughtArr.js b/function-expression-and-parms/inline-arrow-function/challange-1/itemsBoughtArr.js
new file mode 100644
index 0000000..64d1a89
--- /dev/null
+++ b/function-expression-and-parms/inline-arrow-function/challange-1/itemsBoughtArr.js
@@ -0,0 +1,23 @@
+export const itemsBoughtArr = [
+ {
+ name: 'Electric Toothbrush Holder',
+ priceUSD: 40,
+ desc: 'A robotic arm that holds and moves your electric toothbrush for you, ensuring optimal brushing technique.'
+ },
+
+{
+ name: 'Invisible Milk',
+ priceUSD: 10,
+ desc: 'A carton of milk that turns completely transparent when poured into a glass, providing a magical and mysterious drinking experience.'
+ },
+{
+ name: 'Self-Chilling Soup Can',
+ priceUSD: 15,
+ desc: 'A can of soup that instantly chills itself when opened, so you can enjoy a refreshing cold soup on a hot summer day.'
+ },
+{
+ name: 'Glow-in-the-Dark Eggs',
+ priceUSD: 8,
+ desc: 'A carton of eggs that glow in the dark, making breakfast preparation an exciting and illuminating experience.'
+ }
+]
\ No newline at end of file
diff --git a/function-expression-and-parms/inline-arrow-function/index.js b/function-expression-and-parms/inline-arrow-function/index.js
new file mode 100644
index 0000000..440f2d9
--- /dev/null
+++ b/function-expression-and-parms/inline-arrow-function/index.js
@@ -0,0 +1,16 @@
+const distanceTraveledMiles = [267, 345, 234, 190, 299]
+
+// const distanceTraveledKm = distanceTraveledMiles.map(function(distance){
+// return Math.round(distance * 1.6)
+// })
+
+const distanceTraveledKm = distanceTraveledMiles.map(distance => Math.round(distance * 1.6))
+
+console.log(distanceTraveledKm)
+
+/*
+Challenge
+1. Refactor this .map method so the inline function is
+ an arrow function.
+2. Write the least amount of code possible.
+*/
\ No newline at end of file
diff --git a/function-expression-and-parms/rest-params/challange-rest/index.css b/function-expression-and-parms/rest-params/challange-rest/index.css
new file mode 100644
index 0000000..f2923a5
--- /dev/null
+++ b/function-expression-and-parms/rest-params/challange-rest/index.css
@@ -0,0 +1,25 @@
+html, body {
+ margin: 0;
+ padding: 0;
+ font-family: 'Poppins';
+}
+
+.labels-container {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+ padding: 8px;
+}
+
+p {
+ margin: 8px;
+ font-size: 20px;
+}
+
+.label-card {
+ border-radius: 5px;
+ width: 250px;
+ padding: 5px 10px;
+ color: white;
+ background-color: dodgerblue;
+}
\ No newline at end of file
diff --git a/function-expression-and-parms/rest-params/challange-rest/index.html b/function-expression-and-parms/rest-params/challange-rest/index.html
new file mode 100644
index 0000000..cf57a9b
--- /dev/null
+++ b/function-expression-and-parms/rest-params/challange-rest/index.html
@@ -0,0 +1,17 @@
+
+
+
+
+ Gift Labels
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/function-expression-and-parms/rest-params/challange-rest/index.js b/function-expression-and-parms/rest-params/challange-rest/index.js
new file mode 100644
index 0000000..47bb51d
--- /dev/null
+++ b/function-expression-and-parms/rest-params/challange-rest/index.js
@@ -0,0 +1,36 @@
+function getLabelsHtml(text, sender, ...recipients) {
+
+/*
+Challenge:
+1. Add parameters.
+2. Update the HTML template where you
+ see **NAME**.
+3. Return HTML template for each label.
+*/
+ // `
+ //
Dear **NAME**
+ //
${text}
+ //
Best wishes,
+ //
${sender}
+ //
`
+ return recipients.map(recipient =>
+ `
+
Dear ${recipient.name},
+
${text}
+
Best wishes,
+
${sender}
+
+ `).join('')
+}
+
+const text = "Thank you for all your hard work throughout the year! 🙏🎁";
+const sender = "Tom";
+
+document.getElementById("labels-container").innerHTML = getLabelsHtml(
+ text,
+ sender,
+ { name: "Sally" },
+ { name: "Mike" },
+ { name: "Rob" },
+ { name: "Harriet" }
+);
diff --git a/function-expression-and-parms/rest-params/index.js b/function-expression-and-parms/rest-params/index.js
new file mode 100644
index 0000000..abde7b2
--- /dev/null
+++ b/function-expression-and-parms/rest-params/index.js
@@ -0,0 +1,12 @@
+function setPermissionLevel(permissionLevel, ...names) {
+ names.forEach((name) =>
+ console.log(`${name} now has ${permissionLevel} level access.`)
+ );
+}
+
+setPermissionLevel("admin", "Dave", "Sally");
+
+setPermissionLevel("user", "Bill", "Jane", "Ann");
+
+// rest params collect all remaining arguments into an array
+// rest params must be the last parameter in the function definition
\ No newline at end of file
diff --git a/super-challange/real-estate/images/cottage.jpg b/super-challange/real-estate/images/cottage.jpg
new file mode 100644
index 0000000..2c464bc
Binary files /dev/null and b/super-challange/real-estate/images/cottage.jpg differ
diff --git a/super-challange/real-estate/images/desres.jpg b/super-challange/real-estate/images/desres.jpg
new file mode 100644
index 0000000..1d6e8aa
Binary files /dev/null and b/super-challange/real-estate/images/desres.jpg differ
diff --git a/super-challange/real-estate/images/hut.jpg b/super-challange/real-estate/images/hut.jpg
new file mode 100644
index 0000000..9f85456
Binary files /dev/null and b/super-challange/real-estate/images/hut.jpg differ
diff --git a/super-challange/real-estate/images/placeholder.jpg b/super-challange/real-estate/images/placeholder.jpg
new file mode 100644
index 0000000..6f38f7c
Binary files /dev/null and b/super-challange/real-estate/images/placeholder.jpg differ
diff --git a/super-challange/real-estate/images/shed.jpg b/super-challange/real-estate/images/shed.jpg
new file mode 100644
index 0000000..6890884
Binary files /dev/null and b/super-challange/real-estate/images/shed.jpg differ
diff --git a/super-challange/real-estate/index.css b/super-challange/real-estate/index.css
new file mode 100644
index 0000000..84f238a
--- /dev/null
+++ b/super-challange/real-estate/index.css
@@ -0,0 +1,51 @@
+body {
+ margin: 0;
+ color: #333;
+ font-family: "Poppins";
+}
+
+.container {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ padding: 20px;
+}
+
+.card {
+ display: flex;
+ min-width: 400px;
+ max-width: 450px;
+ box-shadow: 0px 0px 10px 1px #999;
+ margin: 0 20px 15px 20px;
+ border-radius: 5px;
+ max-height: 120px;
+}
+
+.card img {
+ border-top-left-radius: 5px;
+ border-bottom-left-radius: 5px;
+ height: 100%;
+}
+
+.card-right {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+ margin-left: 16px;
+ padding: 11px;
+}
+
+h2 {
+ font-size: 16px;
+ margin: 0 0 3px 0;
+}
+
+h3 {
+ font-size: 12px;
+ margin: 0 0 3px 0;
+}
+
+p {
+ font-size: 13px;
+ margin: 5px 0 5px 0;
+}
diff --git a/super-challange/real-estate/index.html b/super-challange/real-estate/index.html
new file mode 100644
index 0000000..53fe90c
--- /dev/null
+++ b/super-challange/real-estate/index.html
@@ -0,0 +1,17 @@
+
+
+
+
+ Houses for Sale
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/super-challange/real-estate/index.js b/super-challange/real-estate/index.js
new file mode 100644
index 0000000..8c40e71
--- /dev/null
+++ b/super-challange/real-estate/index.js
@@ -0,0 +1,55 @@
+import { propertyForSaleArr } from './properties/propertyForSaleArr.js'
+import { placeholderPropertyObj } from './properties/placeholderPropertyObj.js'
+
+function getPropertyHtml( propertiesArr = [placeholderPropertyObj] ) {
+ return propertiesArr.map(propertyObj => {
+ const { propertyLocation, priceGBP, roomsM2, comment, image } = propertyObj
+ const totalSizeM2 = roomsM2.reduce((total, roomSize) => total + roomSize, 0)
+
+ return `
+
+
+
${propertyLocation}
+
£ ${priceGBP.toLocaleString()}
+
${comment}
+
${totalSizeM2} m²
+
+
+ `
+ }).join('')
+}
+
+
+
+/***** Modify 👇 by adding an argument to the function call ONLY. *****/
+document.getElementById('container').innerHTML = getPropertyHtml(propertyForSaleArr)
+// or document.getElementById('container').innerHTML = getPropertyHtml()
+
+/*
+SUPER CHALLENGE 💪
+
+Render out a card for each of the properties in the propertyForSaleArr array (in the 'properties' folder). Each card should have an image, a property location, a price, a comment and the TOTAL property size in square metres (each object has an array with the size in square metres of the individual rooms).
+
+If no array of properties is passed to getPropertyHtml, the placeholder property stored in placeholderPropertyObj (in the 'properties' folder) should be rendered instead.
+
+This is the JS I want you to use to complete this challenge 👇
+- import/export
+- .map()
+- .join()
+- Object destructuring
+- .reduce()
+- Default parameters
+
+The HTML and CSS have been done for you.
+This is the HTML template 👇. Replace everything in UPPERCASE with property data.
+
+
+
+
+
PROPERTY LOCATION
+
PRICE GBP
+
COMMENT
+
TOTAL SIZE IN SQUARE METRES m²
+
+
+*/
\ No newline at end of file
diff --git a/super-challange/real-estate/properties/placeholderPropertyObj.js b/super-challange/real-estate/properties/placeholderPropertyObj.js
new file mode 100644
index 0000000..6fd7d3e
--- /dev/null
+++ b/super-challange/real-estate/properties/placeholderPropertyObj.js
@@ -0,0 +1,8 @@
+export const placeholderPropertyObj = {
+ propertyLocation: '1 Joe Bloggs street',
+ priceGBP: 100000,
+ roomsM2: [16, 12, 6, 11, 5],
+ comment: 'This is the description',
+ image: 'placeholder.jpg'
+}
+
diff --git a/super-challange/real-estate/properties/propertyForSaleArr.js b/super-challange/real-estate/properties/propertyForSaleArr.js
new file mode 100644
index 0000000..d6df65a
--- /dev/null
+++ b/super-challange/real-estate/properties/propertyForSaleArr.js
@@ -0,0 +1,32 @@
+export const propertyForSaleArr = [
+ {
+ propertyLocation: 'Kensington, London',
+ priceGBP: 890000,
+ roomsM2: [14, 18, 14, 10, 6],
+ comment: 'Highly desirable location in stunning scenery!',
+ image: 'cottage.jpg'
+ },
+ {
+ propertyLocation: 'Wirral, Liverpool',
+ priceGBP: 650000,
+ roomsM2: [18, 16, 15, 14, 17, 19, 9, 8],
+ comment: 'Astonishing view with a modern finish!',
+ image: 'desres.jpg'
+ },
+ {
+ propertyLocation: 'Beach, Brighton',
+ priceGBP: 420000,
+ roomsM2: [5],
+ comment: 'Beautiful interior and a spacious room.',
+ image: 'hut.jpg'
+ },
+ {
+ propertyLocation: 'Highlands, Scotland',
+ priceGBP: 550000,
+ roomsM2: [6, 12, 11, 5],
+ comment: 'Lots of potential, snug, a must see!',
+ image: 'shed.jpg'
+ },
+]
+
+