docs: 1 december -section 3 (func expression and parameters)

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.
+*/

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

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)

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

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}!`
+}

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

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

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.
+*/

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;
+}

function-expression-and-parms/rest-params/challange-rest/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html>
+
+	<head>
+		<title>Gift Labels</title>
+		<link rel="stylesheet" href="index.css">
+		<link rel="preconnect" href="https://fonts.googleapis.com">
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+		<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
+	</head>
+
+	<body>
+		<div id="labels-container" class="labels-container"></div>
+		<script src="index.js"></script>
+	</body>
+
+</html>

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.
+*/
+  // `<div class="label-card">
+  //     <p>Dear **NAME** </p>
+  //     <p>${text}</p>
+  //     <p>Best wishes,</p>
+  //     <p>${sender}</p>
+  // </div>`
+  return recipients.map(recipient =>
+    `<div class="label-card">
+        <p>Dear ${recipient.name},</p>
+        <p>${text}</p>
+        <p>Best wishes,</p>
+        <p>${sender}</p>
+      </div>
+    `).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" }
+);

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

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;
+}

super-challange/real-estate/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html>
+
+	<head>
+		<title>Houses for Sale</title>
+		<link rel="stylesheet" href="index.css">
+		<link rel="preconnect" href="https://fonts.googleapis.com">
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+		<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">
+	</head>
+
+	<body>
+		<section class="container" id="container"></section>
+		<script type="module" src="index.js"></script>
+	</body>
+
+</html>

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 `<section class="card">
+            <img src="./images/${image}">
+            <div class="card-right">
+                <h2>${propertyLocation}</h2>
+                <h3>£ ${priceGBP.toLocaleString()}</h3>
+                <p>${comment}</p>
+                <h3>${totalSizeM2} m&sup2;</h3>
+            </div>
+        </section>
+        `
+    }).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.
+
+<section class="card">
+    <img src="/images/IMAGE">
+    <div class="card-right">
+        <h2>PROPERTY LOCATION</h2>
+        <h3>PRICE GBP</h3>
+        <p>COMMENT</p>
+        <h3>TOTAL SIZE IN SQUARE METRES m&sup2;</h3>
+    </div>
+</section>
+*/

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