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' + }, +] + +