From 26cb7229ceac564babe2429943549e49ed08d5e5 Mon Sep 17 00:00:00 2001 From: Ashley Felton Date: Mon, 23 Dec 2024 13:02:13 +0800 Subject: [PATCH 1/6] Part 1 --- 01-Fundamentals-Part-1/starter/index.html | 23 ++++++++++++----------- 01-Fundamentals-Part-1/starter/script.js | 5 +++++ 2 files changed, 17 insertions(+), 11 deletions(-) create mode 100644 01-Fundamentals-Part-1/starter/script.js diff --git a/01-Fundamentals-Part-1/starter/index.html b/01-Fundamentals-Part-1/starter/index.html index 59529c7923..882453381b 100755 --- a/01-Fundamentals-Part-1/starter/index.html +++ b/01-Fundamentals-Part-1/starter/index.html @@ -1,11 +1,11 @@ - - - - - JavaScript Fundamentals – Part 1 - - - -

JavaScript Fundamentals – Part 1

- + + + +

JavaScript Fundamentals – Part 1

+ + diff --git a/01-Fundamentals-Part-1/starter/script.js b/01-Fundamentals-Part-1/starter/script.js new file mode 100644 index 0000000000..72836369af --- /dev/null +++ b/01-Fundamentals-Part-1/starter/script.js @@ -0,0 +1,5 @@ +let js = "amazing"; +if (js === "amazing") { + alert("YO"); +} +const PI = 3.1415; From e38fcc470a1e51999369345710a9aee408a91eae Mon Sep 17 00:00:00 2001 From: Ashley Felton Date: Fri, 27 Dec 2024 11:40:48 +0800 Subject: [PATCH 2/6] Updates --- 02-Fundamentals-Part-2/starter/script.js | 80 ++++++++++++++++++++++++ 1 file changed, 80 insertions(+) diff --git a/02-Fundamentals-Part-2/starter/script.js b/02-Fundamentals-Part-2/starter/script.js index e69de29bb2..a568f8c504 100755 --- a/02-Fundamentals-Part-2/starter/script.js +++ b/02-Fundamentals-Part-2/starter/script.js @@ -0,0 +1,80 @@ +"use strict"; + +// Reserved word, won't work with strict mode. +// const private = 123; + +let hasDriversLicense = false; +const passTest = true; + +if (passTest) { + hasDriversLicense = true; +} + +if (hasDriversLicense) { + console.log("I can drive"); +} + +// Function declaration: +function fruitProcessor(apples, oranges) { + const applePieces = cutFruitPieces(apples); + const orangePieces = cutFruitPieces(oranges); + return `Juice with ${applePieces} apple pieces and ${orangePieces} orange pieces`; +} + +function cutFruitPieces(fruit) { + return fruit * 4; +} + +let juice = fruitProcessor(2, 1); +console.log(juice); + +// Function expression +const calcAge1 = function (birthYear) { + year = new Date().getFullYear(); + return year - birthYear; +}; + +// Arrow function expression +const calcAge2 = (birthYear) => new Date().getFullYear() - birthYear; + +const calcAverage = (a, b, c) => (a + b + c) / 3; + +// Arrays + +const people = ["Michael", "Peter", "Steven"]; +const numbers = new Array(1, 2, 3, 4, 5); +/* Useful array functions: + * each + * length + * push + * pop + * unshift + * shift + * indexOf + * forEach + * includes (checks with strict equality) + */ + +const ash = { + firstName: "Ashley", + surname: "Felton", + birthYear: "1978", + // Object methods need to use a function expression: + calcAge: function () { + return new Date().getFullYear() - this.birthYear; + }, +}; +// Bracket notation: +console.log(ash["firstName"]); +// Dot notation +console.log(ash.surname); + +// for loop: +for (let step = 0; step < 10; step++) { + console.log(`Step ${step}`); +} + +// Looping an array by generating an iterator: +for (let i of people.values()) { + console.log(i); +} From f79ec6aa5789f1ab8d5d82181715d478ce46271c Mon Sep 17 00:00:00 2001 From: Ashley Felton Date: Fri, 27 Dec 2024 11:47:43 +0800 Subject: [PATCH 3/6] Placeholder image --- 04-HTML-CSS/final/index.html | 16 +++++----------- 1 file changed, 5 insertions(+), 11 deletions(-) diff --git a/04-HTML-CSS/final/index.html b/04-HTML-CSS/final/index.html index da7d3f055b..64123ab9df 100644 --- a/04-HTML-CSS/final/index.html +++ b/04-HTML-CSS/final/index.html @@ -1,4 +1,4 @@ - + @@ -11,21 +11,15 @@

JavaScript is fun, but so is HTML & CSS!

- You can learn JavaScript without HTML and CSS, but for DOM manipulation - it's useful to have some basic ideas of HTML & CSS. You can learn more - about it + You can learn JavaScript without HTML and CSS, but for DOM manipulation it's useful to have some basic ideas of HTML & CSS. You can + learn more about it on Udemy.

Another heading

-

- Just another paragraph -

+

Just another paragraph

- +

Your name here

From 8669f3ae032b16e2dd75a4f0195bb25c66461caa Mon Sep 17 00:00:00 2001 From: Ashley Felton Date: Fri, 27 Dec 2024 13:41:14 +0800 Subject: [PATCH 4/6] Guess My Number project --- 05-Guess-My-Number/starter/.prettierrc | 6 ++- 05-Guess-My-Number/starter/index.html | 4 +- 05-Guess-My-Number/starter/script.js | 64 +++++++++++++++++++++++++- 3 files changed, 70 insertions(+), 4 deletions(-) diff --git a/05-Guess-My-Number/starter/.prettierrc b/05-Guess-My-Number/starter/.prettierrc index b4f8e6a6a1..52a1ad4603 100644 --- a/05-Guess-My-Number/starter/.prettierrc +++ b/05-Guess-My-Number/starter/.prettierrc @@ -1,4 +1,8 @@ { - "singleQuote": true, + "tabWidth": 2, + "useTabs": false, + "semi": true, + "trailingComma": "es5", + "singleQuote": false, "arrowParens": "avoid" } diff --git a/05-Guess-My-Number/starter/index.html b/05-Guess-My-Number/starter/index.html index b25c17540a..25768b3b96 100644 --- a/05-Guess-My-Number/starter/index.html +++ b/05-Guess-My-Number/starter/index.html @@ -1,4 +1,4 @@ - + @@ -11,7 +11,7 @@

Guess My Number!

(Between 1 and 20)

- +
?
diff --git a/05-Guess-My-Number/starter/script.js b/05-Guess-My-Number/starter/script.js index ad9a93a7c1..ddc79058ab 100644 --- a/05-Guess-My-Number/starter/script.js +++ b/05-Guess-My-Number/starter/script.js @@ -1 +1,63 @@ -'use strict'; +"use strict"; + +let secretNumber = Math.trunc(Math.random() * 20) + 1; +let score = 20; +let highscore = 0; + +// querySelector by class will return the first matching element: +let scoreElement = document.querySelector(".score"); +let numberElement = document.querySelector(".number"); +const checkButtonElement = document.querySelector(".check"); +const resetButtonElement = document.querySelector(".reset"); + +const displayMessage = function (message) { + document.querySelector(".message").textContent = message; +}; + +const wrongGuess = function (message) { + if (score > 0) { + displayMessage(message); + score--; + scoreElement.textContent = score; + } else { + displayMessage("You lost!"); + scoreElement = 0; + } +}; + +// Check button onClick event listener: +checkButtonElement.addEventListener("click", function () { + const guess = document.querySelector(".guess").value; + // console.log(guess, typeof guess); + + if (!guess) { + displayMessage("No number!"); + } else if (guess == secretNumber) { + // When the player wins: + displayMessage("Correct!"); + if (score > highscore) { + highscore = score; + document.querySelector(".highscore").textContent = score; + } + document.querySelector("body").style.backgroundColor = "#60b347"; + numberElement.textContent = secretNumber; + numberElement.style.width = "30rem"; + checkButtonElement.disabled = true; + } else if (guess > secretNumber) { + wrongGuess("Too high!"); + } else if (guess < secretNumber) { + wrongGuess("Too low!"); + } +}); + +resetButtonElement.addEventListener("click", function () { + // console.log("Resetting the game"); + secretNumber = Math.trunc(Math.random() * 20) + 1; + score = 20; + scoreElement.textContent = score; + displayMessage("Start guessing..."); + document.querySelector(".guess").value = ""; + document.querySelector("body").style.backgroundColor = "#222"; + numberElement.style.width = "15rem"; + checkButtonElement.disabled = false; +}); From cc5979b8f04f5a4f855ce6a42a8f16abf9bd4ded Mon Sep 17 00:00:00 2001 From: Ashley Felton Date: Wed, 8 Jan 2025 12:03:48 +0800 Subject: [PATCH 5/6] Pig game implementation. --- 07-Pig-Game/starter/.prettierrc | 1 + 07-Pig-Game/starter/favicon.ico | Bin 0 -> 318 bytes 07-Pig-Game/starter/index.html | 6 +- 07-Pig-Game/starter/script.js | 115 ++++++++++++++++++++++++++++++++ 07-Pig-Game/starter/style.css | 4 ++ 5 files changed, 123 insertions(+), 3 deletions(-) create mode 100644 07-Pig-Game/starter/favicon.ico diff --git a/07-Pig-Game/starter/.prettierrc b/07-Pig-Game/starter/.prettierrc index b4f8e6a6a1..9746b2d0c0 100644 --- a/07-Pig-Game/starter/.prettierrc +++ b/07-Pig-Game/starter/.prettierrc @@ -1,4 +1,5 @@ { + "printWidth": 140, "singleQuote": true, "arrowParens": "avoid" } diff --git a/07-Pig-Game/starter/favicon.ico b/07-Pig-Game/starter/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..60f48d3aaeebd7f045b44a095af79c1a8685f286 GIT binary patch literal 318 zcmZQzU<5(|0RbS%!l1#(z#zuJz@P!d0zj+)#2|4HXaJKC0wf0mckX;=C@VX{@c;jR zhJE{f!GwvTUC@D}AP|VSxHu{)3MpZuq4H3D49vzZF2)87=rp>qxcEdl5|1JP0AMB8 literal 0 HcmV?d00001 diff --git a/07-Pig-Game/starter/index.html b/07-Pig-Game/starter/index.html index f72c8f4e92..5a1696a1fb 100644 --- a/07-Pig-Game/starter/index.html +++ b/07-Pig-Game/starter/index.html @@ -1,4 +1,4 @@ - + @@ -11,7 +11,7 @@

Player 1

-

43

+

0

Current

0

@@ -19,7 +19,7 @@

Player 1

Player 2

-

24

+

0

Current

0

diff --git a/07-Pig-Game/starter/script.js b/07-Pig-Game/starter/script.js index ad9a93a7c1..40b12a3c7c 100644 --- a/07-Pig-Game/starter/script.js +++ b/07-Pig-Game/starter/script.js @@ -1 +1,116 @@ 'use strict'; + +// Starting variables. +let scores = [0, 0]; +let currentRoundScore = 0; +let activePlayer = 0; +const winScore = 100; + +// DOM elements. +const score0El = document.getElementById('score--0'); +const score1El = document.getElementById('score--1'); +const current0El = document.getElementById('current--0'); +const current1El = document.getElementById('current--1'); +const diceEl = document.querySelector('.dice'); +const newGameBtn = document.querySelector('.btn--new'); +const rollDiceBtn = document.querySelector('.btn--roll'); +const holdBtn = document.querySelector('.btn--hold'); + +const showPlayerScores = function () { + score0El.innerText = scores[0]; + score1El.innerText = scores[1]; +}; + +const resetGame = function () { + console.log('Resetting game state'); + // Reset the game state. + scores = [0, 0]; + currentRoundScore = 0; + activePlayer = 0; + // Hide the dice element. + diceEl.classList.add('hidden'); + // Update the DOM: scores. + showPlayerScores(); + // Ensure buttons are visible. + rollDiceBtn.classList.remove('hidden'); + holdBtn.classList.remove('hidden'); + // Update the active & winner classes. + document.querySelector(`.player--${activePlayer}`).classList.add('player--active'); + document.querySelectorAll('.player').forEach(function (el) { + el.classList.remove('player--winner'); + }); +}; +// Run the function once to initialise the game on load. +resetGame(); +// Event listener for newGameBtn +newGameBtn.addEventListener('click', resetGame); + +const setDice = function (value) { + console.log(`Set the dice to ${value}`); + // Assume that value is an integer from 1-6 + const imgSrc = `dice-${value}.png`; + diceEl.setAttribute('src', imgSrc); + // Ensure that the dice is visible. + diceEl.classList.remove('hidden'); +}; + +const rollDice = function () { + const dieRoll = Math.trunc(Math.random() * 6) + 1; + console.log(`Rolled ${dieRoll}`); + setDice(dieRoll); + // Handle rolling 1s + if (dieRoll !== 1) { + currentRoundScore += dieRoll; + // Set the current round score + document.getElementById(`current--${activePlayer}`).textContent = currentRoundScore; + } else { + // Switch players + activePlayer = activePlayer === 0 ? 1 : 0; + console.log(`Rolled a 1, switching to player ${activePlayer + 1}`); + switchPlayer(); + } +}; +// Event listener for rollDiceBtn +rollDiceBtn.addEventListener('click', rollDice); + +const switchPlayer = function () { + current0El.textContent = 0; + current1El.textContent = 0; + currentRoundScore = 0; + + // Update the player total scores. + showPlayerScores(); + + // Switch the active player. + document.querySelectorAll('.player').forEach(function (el) { + el.classList.toggle('player--active'); + }); +}; + +const holdScore = function () { + // Rule: Can't hold on a current score of 0. + if (currentRoundScore === 0) { + return; + } + + console.log(`Holding score of ${currentRoundScore} for player ${activePlayer + 1}`); + // For the active player, increment their total score with the current. + scores[activePlayer] += currentRoundScore; + + // Handle winning condition. + if (scores[activePlayer] >= winScore) { + console.log(`Player ${activePlayer + 1} wins!`); + document.querySelector(`.player--${activePlayer}`).classList.add('player--winner'); + document.querySelector(`.player--${activePlayer}`).classList.remove('player--active'); + // Hide the dice and button elements. + diceEl.classList.add('hidden'); + rollDiceBtn.classList.add('hidden'); + holdBtn.classList.add('hidden'); + } else { + // Switch players + activePlayer = activePlayer === 0 ? 1 : 0; + console.log(`Switching to player ${activePlayer + 1}`); + switchPlayer(); + } +}; +holdBtn.addEventListener('click', holdScore); diff --git a/07-Pig-Game/starter/style.css b/07-Pig-Game/starter/style.css index dcf788f011..3d709a2cfa 100644 --- a/07-Pig-Game/starter/style.css +++ b/07-Pig-Game/starter/style.css @@ -165,3 +165,7 @@ main { font-weight: 700; color: #c7365f; } + +.hidden { + visibility: hidden; +} From 4dec61c630f07ee86b201c95c4754c586d14a684 Mon Sep 17 00:00:00 2001 From: Ashley Felton Date: Wed, 15 Jan 2025 15:55:12 +0800 Subject: [PATCH 6/6] Work --- .gitignore | 1 + 06-Modal/starter/.prettierrc | 4 - 06-Modal/starter/index.html | 2 +- 06-Modal/starter/script.js | 32 +++++ 08-Behind-the-Scenes/starter/script.js | 10 ++ .../starter/.prettierrc | 4 - .../starter/script.js | 133 +++++++++++++++--- 10-Functions/starter/.prettierrc | 4 - 10-Functions/starter/favicon.ico | Bin 0 -> 1150 bytes 10-Functions/starter/script.js | 122 ++++++++++++++++ .../starter/index.html | 4 +- .../starter/script.js | 11 ++ .../starter/shoppingCart.js | 12 ++ 13 files changed, 306 insertions(+), 33 deletions(-) create mode 100644 .gitignore delete mode 100644 06-Modal/starter/.prettierrc delete mode 100644 09-Data-Structures-Operators/starter/.prettierrc delete mode 100644 10-Functions/starter/.prettierrc create mode 100644 10-Functions/starter/favicon.ico create mode 100644 17-Modern-JS-Modules-Tooling/starter/shoppingCart.js diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000000..c2658d7d1b --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +node_modules/ diff --git a/06-Modal/starter/.prettierrc b/06-Modal/starter/.prettierrc deleted file mode 100644 index b4f8e6a6a1..0000000000 --- a/06-Modal/starter/.prettierrc +++ /dev/null @@ -1,4 +0,0 @@ -{ - "singleQuote": true, - "arrowParens": "avoid" -} diff --git a/06-Modal/starter/index.html b/06-Modal/starter/index.html index cb0458612b..3cc64f5df8 100644 --- a/06-Modal/starter/index.html +++ b/06-Modal/starter/index.html @@ -1,4 +1,4 @@ - + diff --git a/06-Modal/starter/script.js b/06-Modal/starter/script.js index ad9a93a7c1..65c04e0c49 100644 --- a/06-Modal/starter/script.js +++ b/06-Modal/starter/script.js @@ -1 +1,33 @@ 'use strict'; + +const modal = document.querySelector('.modal'); +const overlay = document.querySelector('.overlay'); +const btnsShowModal = document.querySelectorAll('.show-modal'); +const btnsCloseModal = document.querySelector('.close-modal'); + +const openModal = function () { + // console.log(`${btn.textContent} clicked`); + modal.classList.remove('hidden'); + overlay.classList.remove('hidden'); +}; +const closeModal = function () { + modal.classList.add('hidden'); + overlay.classList.add('hidden'); +}; + +// Attach a event listener for each of the buttons. +btnsShowModal.forEach(function (btn) { + btn.addEventListener('click', openModal); +}); + +// Attach an event listener to the close button and to the overlay. +btnsCloseModal.addEventListener('click', closeModal); +overlay.addEventListener('click', closeModal); + +// Keyboard event listener for closing the modal. +document.addEventListener('keydown', function (e) { + // console.log(evt.key); + if (e.key === 'Escape' && !modal.classList.contains('hidden')) { + closeModal(); + } +}); diff --git a/08-Behind-the-Scenes/starter/script.js b/08-Behind-the-Scenes/starter/script.js index ad9a93a7c1..45ee0f24b4 100644 --- a/08-Behind-the-Scenes/starter/script.js +++ b/08-Behind-the-Scenes/starter/script.js @@ -1 +1,11 @@ 'use strict'; + +function calcAge(birthYear) { + const age = new Date().getFullYear() - birthYear; + console.log(firstName); + return age; +} + +const firstName = 'Ashley'; +let age = calcAge(1978); +console.log(age); diff --git a/09-Data-Structures-Operators/starter/.prettierrc b/09-Data-Structures-Operators/starter/.prettierrc deleted file mode 100644 index b4f8e6a6a1..0000000000 --- a/09-Data-Structures-Operators/starter/.prettierrc +++ /dev/null @@ -1,4 +0,0 @@ -{ - "singleQuote": true, - "arrowParens": "avoid" -} diff --git a/09-Data-Structures-Operators/starter/script.js b/09-Data-Structures-Operators/starter/script.js index e2dcc670b6..06fe40fe93 100644 --- a/09-Data-Structures-Operators/starter/script.js +++ b/09-Data-Structures-Operators/starter/script.js @@ -4,28 +4,14 @@ const flights = '_Delayed_Departure;fao93766109;txl2133758440;11:25+_Arrival;bru0943384722;fao93766109;11:45+_Delayed_Arrival;hel7439299980;fao93766109;12:05+_Departure;fao93766109;lis2323639855;12:30'; -const italianFoods = new Set([ - 'pasta', - 'gnocchi', - 'tomatoes', - 'olive oil', - 'garlic', - 'basil', -]); - -const mexicanFoods = new Set([ - 'tortillas', - 'beans', - 'rice', - 'tomatoes', - 'avocado', - 'garlic', -]); +const italianFoods = new Set(['pasta', 'gnocchi', 'tomatoes', 'olive oil', 'garlic', 'basil']); + +const mexicanFoods = new Set(['tortillas', 'beans', 'rice', 'tomatoes', 'avocado', 'garlic']); // Data needed for first part of the section const restaurant = { name: 'Classico Italiano', - location: 'Via Angelo Tavanti 23, Firenze, Italy', + address: 'Via Angelo Tavanti 23, Firenze, Italy', categories: ['Italian', 'Pizzeria', 'Vegetarian', 'Organic'], starterMenu: ['Focaccia', 'Bruschetta', 'Garlic Bread', 'Caprese Salad'], mainMenu: ['Pizza', 'Pasta', 'Risotto'], @@ -44,4 +30,115 @@ const restaurant = { close: 24, }, }, + + order: function (starterIndex, mainIndex) { + return [this.starterMenu[starterIndex], this.mainMenu[mainIndex]]; + }, + + orderDelivery: function ({ starterIndex = 0, mainIndex = 0, time, address }) { + console.log( + `Order received: ${this.starterMenu[starterIndex]}, ${this.mainMenu[mainIndex]} will be delivered to ${address} at ${time}` + ); + }, +}; + +restaurant.orderDelivery({ + time: '22:30', + address: '1 Johnson St', + mainIndex: 1, + starterIndex: 2, +}); +restaurant.orderDelivery({ + time: '20:00', + address: '1 Johnson St', +}); + +////////////////////////////////////////////// +// Coding Challenge #1 +/* +We're building a football betting app (soccer for my American friends 😅)! + +Suppose we get data from a web service about a certain game (below). In this challenge we're gonna work with the data. So here are your tasks: + +1. Create one player array for each team (variables 'players1' and 'players2') +2. The first player in any player array is the goalkeeper and the others are field players. For Bayern Munich (team 1) create one variable ('gk') with the goalkeeper's name, +and one array ('fieldPlayers') with all the remaining 10 field players +3. Create an array 'allPlayers' containing all players of both teams (22 players) +4. During the game, Bayern Munich (team 1) used 3 substitute players. So create a new array ('players1Final') containing all the original team1 players plus 'Thiago', 'Coutinho' and 'Perisic' +5. Based on the game.odds object, create one variable for each odd (called 'team1', 'draw' and 'team2') +6. Write a function ('printGoals') that receives an arbitrary number of player names (NOT an array) and prints each of them to the console, along with the number of goals +that were scored in total (number of player names passed in) +7. The team with the lower odd is more likely to win. Print to the console which team is more likely to win, WITHOUT using an if/else statement or the ternary operator. + +TEST DATA FOR 6: Use players 'Davies', 'Muller', 'Lewandowski' and 'Kimmich'. Then, call the function again with players from game.scored +*/ + +const game = { + team1: 'Bayern Munich', + team2: 'Borrussia Dortmund', + players: [ + ['Neuer', 'Pavard', 'Martinez', 'Alaba', 'Davies', 'Kimmich', 'Goretzka', 'Coman', 'Muller', 'Gnarby', 'Lewandowski'], + ['Burki', 'Schulz', 'Hummels', 'Akanji', 'Hakimi', 'Weigl', 'Witsel', 'Hazard', 'Brandt', 'Sancho', 'Gotze'], + ], + score: '4:0', + scored: ['Lewandowski', 'Gnarby', 'Lewandowski', 'Hummels'], + date: 'Nov 9th, 2037', + odds: { + team1: 1.33, + x: 3.25, + team2: 6.5, + }, +}; + +const [players1, players2] = [...game.players]; +const [gk, ...fieldPlayers] = [...players1]; +const allPlayers = [...players1, ...players2]; +const players1Final = [...players1, 'Thiago', 'Coutinho', 'Perisic']; +const { team1, x: draw, team2 } = game.odds; +const printGoals = function (...players) { + for (const i of players) { + console.log(i); + } + console.log(players.length); }; +// printGoals('Davies', 'Muller', 'Lewandowski', 'Kimmich'); +printGoals(...game.scored); + +team1 < team2 && console.log('Team 1 has better odds'); +team2 < team1 && console.log('Team 2 has better odds'); + +/////////////////////////////////////// +// Coding Challenge #2 + +/* +Let's continue with our football betting app! + +1. Loop over the game.scored array and print each player name to the console, along with the goal number (Example: "Goal 1: Lewandowski") +2. Use a loop to calculate the average odd and log it to the console (We already studied how to calculate averages, you can go check if you don't remember) +3. Print the 3 odds to the console, but in a nice formatted way, exaclty like this: + Odd of victory Bayern Munich: 1.33 + Odd of draw: 3.25 + Odd of victory Borrussia Dortmund: 6.5 +Get the team names directly from the game object, don't hardcode them (except for "draw"). HINT: Note how the odds and the game objects have the same property names 😉 + +BONUS: Create an object called 'scorers' which contains the names of the players who scored as properties, and the number of goals as the value. In this game, it will look like this: + { + Gnarby: 1, + Hummels: 1, + Lewandowski: 2 + } +*/ +for (const [idx, name] of game.scored.entries()) console.log(`Goal ${idx + 1}: ${name}`); + +let avgOdds = 0; +const odds = Object.values(game.odds); +for (let i of odds) { + avgOdds += i; +} +avgOdds = avgOdds / odds.length; +console.log(avgOdds); + +for (let [team, odds] of Object.entries(game.odds)) { + team = game[team] ? `victory ${game[team]}` : 'draw'; + console.log(`Odds of ${team}: ${odds}`); +} diff --git a/10-Functions/starter/.prettierrc b/10-Functions/starter/.prettierrc deleted file mode 100644 index b4f8e6a6a1..0000000000 --- a/10-Functions/starter/.prettierrc +++ /dev/null @@ -1,4 +0,0 @@ -{ - "singleQuote": true, - "arrowParens": "avoid" -} diff --git a/10-Functions/starter/favicon.ico b/10-Functions/starter/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..b3f87b7df2204f95c6a77af63b6b2be3ba5dc956 GIT binary patch literal 1150 zcmZQzU<5(|0R|wcz>vYhz#zuJz@P!dKp~(AL>x#lFaYHSJLvFb_)jdx<`-;wqgJ&4 z2VrzMeEJh-6@t~{(hD*Rmwu2QhAE#>aMX%63^!oYkL*tN3D4keE(upAN`JdQGguGE zey|&%?qHhy9_}AlIH22)Y&XpPMpd)G{($KL(J*!B`ayhTbucqvG)#_I{Sftx@Nk6b zhtY)W2dRVE4Wh+6PQk+yEQiGanAylQ%#0R)c9gKdq8+yo(0-7=aVx+rW3l>c2}m}2 fd3!OrX5cdYKhQ-W{DBcWet<>%|9POE?+|?eTIU (name) => console.log(`${greeting} ${name}`); + +const greetHey = greet('Hey'); +const greetHello = greetArrow('Hello'); +greetHey('Ashley'); +greetHello('Ashley'); + +const jetstar = { + airline: 'Jetstar', + iataCode: 'JS', + bookings: [], + // book function + book(flightNum, name) { + const str = `${name} booked a seat on ${this.airline} flight ${this.iataCode}${flightNum}`; + this.bookings.push(str); + console.log(str); + }, +}; +jetstar.book('145', 'Ashley'); + +const qantas = { + airline: 'Qantas', + iataCode: 'QS', + bookings: [], +}; +// Copy the book method as a function. +const book = jetstar.book; + +// This will NOT work: +// book(169, 'Fiona') +// We need to use the call() method, where the first argument represents `this` +book.call(qantas, 169, 'Fiona'); + +// The apply method exists, but is less commonly used. +book.apply(qantas, [169, 'Leah']); +// We can just use the call method, then the spread operator to unpack the arguments. +// +// Bind method is used to create a new function which has its `this` keyword set to the provided value. +// function.bind(thisArg, arg1, arg2, ...) +const bookQantas = book.bind(qantas); +bookQantas(169, 'Jamie'); +// Bind allows additional arguments to be set: +const bookQantas169 = book.bind(qantas, 169); +bookQantas169('Steven'); + +// A partial application +const calcTax = (rate, value) => value + value * rate; +// Extend the partial application with a defined rate value. +const calcGST = calcTax.bind(null, 0.1); + +console.log(calcGST(150)); + +// IIFE pattern: +(function () { + console.log('This will not run again'); + const isPrivate = 42; +})(); +// Alternative Arrow function pattern: +(() => console.log('This is also not run again'))(); diff --git a/17-Modern-JS-Modules-Tooling/starter/index.html b/17-Modern-JS-Modules-Tooling/starter/index.html index d2853cb5ee..47ebf6253c 100644 --- a/17-Modern-JS-Modules-Tooling/starter/index.html +++ b/17-Modern-JS-Modules-Tooling/starter/index.html @@ -1,10 +1,10 @@ - + - + Modern JavaScript Development: Modules and Tooling