[ { "path": "01-Fundamentals-Part-1/final/index.html", "content": "\n\n \n \n \n \n JavaScript Fundamentals – Part 1\n \n \n \n

JavaScript Fundamentals – Part 1

\n\n \n \n\n" }, { "path": "01-Fundamentals-Part-1/final/script.js", "content": "/*\n////////////////////////////////////\n// Linking a JavaScript File\nlet js = \"amazing\";\nconsole.log(40 + 8 + 23 - 10);\n\n////////////////////////////////////\n// Values and Variables\nconsole.log(\"Jonas\");\nconsole.log(23);\n\nlet firstName = \"Matilda\";\n\nconsole.log(firstName);\nconsole.log(firstName);\nconsole.log(firstName);\n\n// Variable name conventions\nlet jonas_matilda = \"JM\";\nlet $function = 27;\n\nlet person = \"jonas\";\nlet PI = 3.1415;\n\nlet myFirstJob = \"Coder\";\nlet myCurrentJob = \"Teacher\";\n\nlet job1 = \"programmer\";\nlet job2 = \"teacher\";\n\nconsole.log(myFirstJob);\n\n////////////////////////////////////\n// Data Types\nlet javascriptIsFun = true;\nconsole.log(javascriptIsFun);\n\n// console.log(typeof true);\nconsole.log(typeof javascriptIsFun);\n// console.log(typeof 23);\n// console.log(typeof 'Jonas');\n\njavascriptIsFun = 'YES!';\nconsole.log(typeof javascriptIsFun);\n\nlet year;\nconsole.log(year);\nconsole.log(typeof year);\n\nyear = 1991;\nconsole.log(typeof year);\n\nconsole.log(typeof null);\n\n////////////////////////////////////\n// let, const and var\nlet age = 30;\nage = 31;\n\nconst birthYear = 1991;\n// birthYear = 1990;\n// const job;\n\nvar job = 'programmer';\njob = 'teacher'\n\nlastName = 'Schmedtmann';\nconsole.log(lastName);\n\n////////////////////////////////////\n// Basic Operators\n// Math operators\nconst now = 2037;\nconst ageJonas = now - 1991;\nconst ageSarah = now - 2018;\nconsole.log(ageJonas, ageSarah);\n\nconsole.log(ageJonas * 2, ageJonas / 10, 2 ** 3);\n// 2 ** 3 means 2 to the power of 3 = 2 * 2 * 2\n\nconst firstName = 'Jonas';\nconst lastName = 'Schmedtmann';\nconsole.log(firstName + ' ' + lastName);\n\n// Assignment operators\nlet x = 10 + 5; // 15\nx += 10; // x = x + 10 = 25\nx *= 4; // x = x * 4 = 100\nx++; // x = x + 1\nx--;\nx--;\nconsole.log(x);\n\n// Comparison operators\nconsole.log(ageJonas > ageSarah); // >, <, >=, <=\nconsole.log(ageSarah >= 18);\n\nconst isFullAge = ageSarah >= 18;\n\nconsole.log(now - 1991 > now - 2018);\n\n////////////////////////////////////\n// Operator Precedence\nconst now = 2037;\nconst ageJonas = now - 1991;\nconst ageSarah = now - 2018;\n\nconsole.log(now - 1991 > now - 2018);\n\nlet x, y;\nx = y = 25 - 10 - 5; // x = y = 10, x = 10\nconsole.log(x, y);\n\nconst averageAge = (ageJonas + ageSarah) / 2;\nconsole.log(ageJonas, ageSarah, averageAge);\n*/\n\n////////////////////////////////////\n// Coding Challenge #1\n\n/*\nMark and John are trying to compare their BMI (Body Mass Index), which is calculated using the formula: BMI = mass / height ** 2 = mass / (height * height). (mass in kg and height in meter).\n\n1. Store Mark's and John's mass and height in variables\n2. Calculate both their BMIs using the formula (you can even implement both versions)\n3. Create a boolean variable 'markHigherBMI' containing information about whether Mark has a higher BMI than John.\n\nTEST DATA 1: Marks weights 78 kg and is 1.69 m tall. John weights 92 kg and is 1.95 m tall.\nTEST DATA 2: Marks weights 95 kg and is 1.88 m tall. John weights 85 kg and is 1.76 m tall.\n\nGOOD LUCK 😀\n*/\n\n// const massMark = 78;\n// const heightMark = 1.69;\n// const massJohn = 92;\n// const heightJohn = 1.95;\n\n/*\nconst massMark = 95;\nconst heightMark = 1.88;\nconst massJohn = 85;\nconst heightJohn = 1.76;\n\nconst BMIMark = massMark / heightMark ** 2;\nconst BMIJohn = massJohn / (heightJohn * heightJohn);\nconst markHigherBMI = BMIMark > BMIJohn;\n\nconsole.log(BMIMark, BMIJohn, markHigherBMI);\n\n////////////////////////////////////\n// Strings and Template Literals\nconst firstName = 'Jonas';\nconst job = 'teacher';\nconst birthYear = 1991;\nconst year = 2037;\n\nconst jonas = \"I'm \" + firstName + ', a ' + (year - birthYear) + ' year old ' + job + '!';\nconsole.log(jonas);\n\nconst jonasNew = `I'm ${firstName}, a ${year - birthYear} year old ${job}!`;\nconsole.log(jonasNew);\n\nconsole.log(`Just a regular string...`);\n\nconsole.log('String with \\n\\\nmultiple \\n\\\nlines');\n\nconsole.log(`String\nmultiple\nlines`);\n\n\n////////////////////////////////////\n// Taking Decisions: if / else Statements\nconst age = 15;\n\nif (age >= 18) {\n console.log('Sarah can start driving license 🚗');\n} else {\n const yearsLeft = 18 - age;\n console.log(`Sarah is too young. Wait another ${yearsLeft} years :)`);\n}\n\nconst birthYear = 2012;\n\nlet century;\nif (birthYear <= 2000) {\n century = 20;\n} else {\n century = 21;\n}\nconsole.log(century);\n*/\n\n////////////////////////////////////\n// Coding Challenge #2\n\n/*\nUse the BMI example from Challenge #1, and the code you already wrote, and improve it:\n\n1. Print a nice output to the console, saying who has the higher BMI. The message can be either \"Mark's BMI is higher than John's!\" or \"John's BMI is higher than Mark's!\"\n2. Use a template literal to include the BMI values in the outputs. Example: \"Mark's BMI (28.3) is higher than John's (23.9)!\"\n\nHINT: Use an if/else statement 😉\n\nGOOD LUCK 😀\n*/\n\n/*\nconst massMark = 78;\nconst heightMark = 1.69;\nconst massJohn = 92;\nconst heightJohn = 1.95;\n\n// const massMark = 95;\n// const heightMark = 1.88;\n// const massJohn = 85;\n// const heightJohn = 1.76;\n\nconst BMIMark = massMark / heightMark ** 2;\nconst BMIJohn = massJohn / (heightJohn * heightJohn);\nconsole.log(BMIMark, BMIJohn);\n\nif (BMIMark > BMIJohn) {\n console.log(`Mark's BMI (${BMIMark}) is higher than John's (${BMIJohn})!`)\n} else {\n console.log(`John's BMI (${BMIJohn}) is higher than Marks's (${BMIMark})!`)\n}\n\n////////////////////////////////////\n// Type Conversion and Coercion\n\n// type conversion\nconst inputYear = '1991';\nconsole.log(Number(inputYear), inputYear);\nconsole.log(Number(inputYear) + 18);\n\nconsole.log(Number('Jonas'));\nconsole.log(typeof NaN);\n\nconsole.log(String(23), 23);\n\n// type coercion\nconsole.log('I am ' + 23 + ' years old');\nconsole.log('23' - '10' - 3);\nconsole.log('23' / '2');\n\nlet n = '1' + 1; // '11'\nn = n - 1;\nconsole.log(n);\n\n////////////////////////////////////\n// Truthy and Falsy Values\n\n// 5 falsy values: 0, '', undefined, null, NaN\nconsole.log(Boolean(0));\nconsole.log(Boolean(undefined));\nconsole.log(Boolean('Jonas'));\nconsole.log(Boolean({}));\nconsole.log(Boolean(''));\n\nconst money = 100;\nif (money) {\n console.log(\"Don't spend it all ;)\");\n} else {\n console.log('You should get a job!');\n}\n\nlet height = 0;\nif (height) {\n console.log('YAY! Height is defined');\n} else {\n console.log('Height is UNDEFINED');\n}\n\n////////////////////////////////////\n// Equality Operators: == vs. ===\nconst age = '18';\nif (age === 18) console.log('You just became an adult :D (strict)');\n\nif (age == 18) console.log('You just became an adult :D (loose)');\n\nconst favourite = Number(prompt(\"What's your favourite number?\"));\nconsole.log(favourite);\nconsole.log(typeof favourite);\n\nif (favourite === 23) { // 22 === 23 -> FALSE\n console.log('Cool! 23 is an amzaing number!')\n} else if (favourite === 7) {\n console.log('7 is also a cool number')\n} else if (favourite === 9) {\n console.log('9 is also a cool number')\n} else {\n console.log('Number is not 23 or 7 or 9')\n}\n\nif (favourite !== 23) console.log('Why not 23?');\n\n////////////////////////////////////\n// Logical Operators\nconst hasDriversLicense = true; // A\nconst hasGoodVision = true; // B\n\nconsole.log(hasDriversLicense && hasGoodVision);\nconsole.log(hasDriversLicense || hasGoodVision);\nconsole.log(!hasDriversLicense);\n\n// if (hasDriversLicense && hasGoodVision) {\n// console.log('Sarah is able to drive!');\n// } else {\n// console.log('Someone else should drive...');\n// }\n\nconst isTired = false; // C\nconsole.log(hasDriversLicense && hasGoodVision && isTired);\n\nif (hasDriversLicense && hasGoodVision && !isTired) {\n console.log('Sarah is able to drive!');\n} else {\n console.log('Someone else should drive...');\n}\n*/\n\n////////////////////////////////////\n// Coding Challenge #3\n\n/*\nThere are two gymnastics teams, Dolphins and Koalas. They compete against each other 3 times. The winner with the highest average score wins the a trophy!\n\n1. Calculate the average score for each team, using the test data below\n2. Compare the team's average scores to determine the winner of the competition, and print it to the console. Don't forget that there can be a draw, so test for that as well (draw means they have the same average score).\n\n3. BONUS 1: Include a requirement for a minimum score of 100. With this rule, a team only wins if it has a higher score than the other team, and the same time a score of at least 100 points. HINT: Use a logical operator to test for minimum score, as well as multiple else-if blocks 😉\n4. BONUS 2: Minimum score also applies to a draw! So a draw only happens when both teams have the same score and both have a score greater or equal 100 points. Otherwise, no team wins the trophy.\n\nTEST DATA: Dolphins score 96, 108 and 89. Koalas score 88, 91 and 110\nTEST DATA BONUS 1: Dolphins score 97, 112 and 101. Koalas score 109, 95 and 123\nTEST DATA BONUS 2: Dolphins score 97, 112 and 101. Koalas score 109, 95 and 106\n\nGOOD LUCK 😀\n*/\n\n/*\n// const scoreDolphins = (96 + 108 + 89) / 3;\n// const scoreKoalas = (88 + 91 + 110) / 3;\n// console.log(scoreDolphins, scoreKoalas);\n\n// if (scoreDolphins > scoreKoalas) {\n// console.log('Dolphins win the trophy 🏆');\n// } else if (scoreKoalas > scoreDolphins) {\n// console.log('Koalas win the trophy 🏆');\n// } else if (scoreDolphins === scoreKoalas) {\n// console.log('Both win the trophy!');\n// }\n\n// BONUS 1\nconst scoreDolphins = (97 + 112 + 80) / 3;\nconst scoreKoalas = (109 + 95 + 50) / 3;\nconsole.log(scoreDolphins, scoreKoalas);\n\nif (scoreDolphins > scoreKoalas && scoreDolphins >= 100) {\n console.log('Dolphins win the trophy 🏆');\n} else if (scoreKoalas > scoreDolphins && scoreKoalas >= 100) {\n console.log('Koalas win the trophy 🏆');\n} else if (scoreDolphins === scoreKoalas && scoreDolphins >= 100 && scoreKoalas >= 100) {\n console.log('Both win the trophy!');\n} else {\n console.log('No one wins the trophy 😭');\n}\n\n////////////////////////////////////\n// The switch Statement\nconst day = 'friday';\n\nswitch (day) {\n case 'monday': // day === 'monday'\n console.log('Plan course structure');\n console.log('Go to coding meetup');\n break;\n case 'tuesday':\n console.log('Prepare theory videos');\n break;\n case 'wednesday':\n case 'thursday':\n console.log('Write code examples');\n break;\n case 'friday':\n console.log('Record videos');\n break;\n case 'saturday':\n case 'sunday':\n console.log('Enjoy the weekend :D');\n break;\n default:\n console.log('Not a valid day!');\n}\n\nif (day === 'monday') {\n console.log('Plan course structure');\n console.log('Go to coding meetup');\n} else if (day === 'tuesday') {\n console.log('Prepare theory videos');\n} else if (day === 'wednesday' || day === 'thursday') {\n console.log('Write code examples');\n} else if (day === 'friday') {\n console.log('Record videos');\n} else if (day === 'saturday' || day === 'sunday') {\n console.log('Enjoy the weekend :D');\n} else {\n console.log('Not a valid day!');\n}\n\n////////////////////////////////////\n// Statements and Expressions\n3 + 4\n1991\ntrue && false && !false\n\nif (23 > 10) {\n const str = '23 is bigger';\n}\n\nconst me = 'Jonas';\nconsole.log(`I'm ${2037 - 1991} years old ${me}`);\n\n////////////////////////////////////\n// The Conditional (Ternary) Operator\nconst age = 23;\n// age >= 18 ? console.log('I like to drink wine 🍷') : console.log('I like to drink water 💧');\n\nconst drink = age >= 18 ? 'wine 🍷' : 'water 💧';\nconsole.log(drink);\n\nlet drink2;\nif (age >= 18) {\n drink2 = 'wine 🍷';\n} else {\n drink2 = 'water 💧';\n}\nconsole.log(drink2);\n\nconsole.log(`I like to drink ${age >= 18 ? 'wine 🍷' : 'water 💧'}`);\n*/\n\n////////////////////////////////////\n// Coding Challenge #4\n\n/*\nSteven wants to build a very simple tip calculator for whenever he goes eating in a resturant. In his country, it's usual to tip 15% if the bill value is between 50 and 300. If the value is different, the tip is 20%.\n\n1. Your task is to caluclate the tip, depending on the bill value. Create a variable called 'tip' for this. It's not allowed to use an if/else statement 😅 (If it's easier for you, you can start with an if/else statement, and then try to convert it to a ternary operator!)\n2. Print a string to the console containing the bill value, the tip, and the final value (bill + tip). Example: 'The bill was 275, the tip was 41.25, and the total value 316.25'\n\nTEST DATA: Test for bill values 275, 40 and 430\n\nHINT: To calculate 20% of a value, simply multiply it by 20/100 = 0.2\nHINT: Value X is between 50 and 300, if it's >= 50 && <= 300 😉\n\nGOOD LUCK 😀\n*/\n\n/*\nconst bill = 430;\nconst tip = bill <= 300 && bill >= 50 ? bill * 0.15 : bill * 0.2;\nconsole.log(`The bill was ${bill}, the tip was ${tip}, and the total value ${bill + tip}`);\n*/\n" }, { "path": "01-Fundamentals-Part-1/starter/index.html", "content": "\n\n \n \n \n \n JavaScript Fundamentals – Part 1\n \n \n \n

JavaScript Fundamentals – Part 1

\n \n\n" }, { "path": "02-Fundamentals-Part-2/final/index.html", "content": "\n\n \n \n \n \n JavaScript Fundamentals – Part 2\n \n \n \n

JavaScript Fundamentals – Part 2

\n \n \n\n" }, { "path": "02-Fundamentals-Part-2/final/script.js", "content": "'use strict';\n\n/*\n///////////////////////////////////////\n// Activating Strict Mode\nlet hasDriversLicense = false;\nconst passTest = true;\n\nif (passTest) hasDriversLicense = true;\nif (hasDriversLicense) console.log('I can drive :D');\n\n// const interface = 'Audio';\n// const private = 534;\n\n\n///////////////////////////////////////\n// Functions\nfunction logger() {\n console.log('My name is Jonas');\n}\n\n// calling / running / invoking function\nlogger();\nlogger();\nlogger();\n\nfunction fruitProcessor(apples, oranges) {\n const juice = `Juice with ${apples} apples and ${oranges} oranges.`;\n return juice;\n}\n\nconst appleJuice = fruitProcessor(5, 0);\nconsole.log(appleJuice);\n\nconst appleOrangeJuice = fruitProcessor(2, 4);\nconsole.log(appleOrangeJuice);\n\nconst num = Number('23');\n\n\n///////////////////////////////////////\n// Function Declarations vs. Expressions\n\n// Function declaration\nfunction calcAge1(birthYeah) {\n return 2037 - birthYeah;\n}\nconst age1 = calcAge1(1991);\n\n// Function expression\nconst calcAge2 = function (birthYeah) {\n return 2037 - birthYeah;\n}\nconst age2 = calcAge2(1991);\n\nconsole.log(age1, age2);\n\n\n///////////////////////////////////////\n// Arrow functions\n\nconst calcAge3 = birthYeah => 2037 - birthYeah;\nconst age3 = calcAge3(1991);\nconsole.log(age3);\n\nconst yearsUntilRetirement = (birthYeah, firstName) => {\n const age = 2037 - birthYeah;\n const retirement = 65 - age;\n // return retirement;\n return `${firstName} retires in ${retirement} years`;\n}\n\nconsole.log(yearsUntilRetirement(1991, 'Jonas')); console.log(yearsUntilRetirement(1980, 'Bob'));\n\n\n///////////////////////////////////////\n// Functions Calling Other Functions\nfunction cutFruitPieces(fruit) {\n return fruit * 4;\n}\n\nfunction fruitProcessor(apples, oranges) {\n const applePieces = cutFruitPieces(apples);\n const orangePieces = cutFruitPieces(oranges);\n\n const juice = `Juice with ${applePieces} piece of apple and ${orangePieces} pieces of orange.`;\n return juice;\n}\nconsole.log(fruitProcessor(2, 3));\n\n\n///////////////////////////////////////\n// Reviewing Functions\nconst calcAge = function (birthYeah) {\n return 2037 - birthYeah;\n}\n\nconst yearsUntilRetirement = function (birthYeah, firstName) {\n const age = calcAge(birthYeah);\n const retirement = 65 - age;\n\n if (retirement > 0) {\n console.log(`${firstName} retires in ${retirement} years`);\n return retirement;\n } else {\n console.log(`${firstName} has already retired 🎉`);\n return -1;\n }\n}\n\nconsole.log(yearsUntilRetirement(1991, 'Jonas'));\nconsole.log(yearsUntilRetirement(1950, 'Mike'));\n*/\n\n///////////////////////////////////////\n// Coding Challenge #1\n\n/*\nBack to the two gymnastics teams, the Dolphins and the Koalas! There is a new gymnastics discipline, which works differently.\nEach team competes 3 times, and then the average of the 3 scores is calculated (so one average score per team).\nA team ONLY wins if it has at least DOUBLE the average score of the other team. Otherwise, no team wins!\n\n1. Create an arrow function 'calcAverage' to calculate the average of 3 scores\n2. Use the function to calculate the average for both teams\n3. Create a function 'checkWinner' that takes the average score of each team as parameters ('avgDolhins' and 'avgKoalas'), and then logs the winner to the console, together with the victory points, according to the rule above. Example: \"Koalas win (30 vs. 13)\".\n4. Use the 'checkWinner' function to determine the winner for both DATA 1 and DATA 2.\n5. Ignore draws this time.\n\nTEST DATA 1: Dolphins score 44, 23 and 71. Koalas score 65, 54 and 49\nTEST DATA 2: Dolphins score 85, 54 and 41. Koalas score 23, 34 and 27\n\nHINT: To calculate average of 3 values, add them all together and divide by 3\nHINT: To check if number A is at least double number B, check for A >= 2 * B. Apply this to the team's average scores 😉\n\nGOOD LUCK 😀\n*/\n\n/*\nconst calcAverage = (a, b, c) => (a + b + c) / 3;\nconsole.log(calcAverage(3, 4, 5));\n\n// Test 1\nlet scoreDolphins = calcAverage(44, 23, 71);\nlet scoreKoalas = calcAverage(65, 54, 49);\nconsole.log(scoreDolphins, scoreKoalas);\n\nconst checkWinner = function (avgDolphins, avgKoalas) {\n if (avgDolphins >= 2 * avgKoalas) {\n console.log(`Dolphins win 🏆 (${avgDolphins} vs. ${avgKoalas})`);\n } else if (avgKoalas >= 2 * avgDolphins) {\n console.log(`Koalas win 🏆 (${avgKoalas} vs. ${avgDolphins})`);\n } else {\n console.log('No team wins...');\n }\n}\ncheckWinner(scoreDolphins, scoreKoalas);\n\ncheckWinner(576, 111);\n\n// Test 2\nscoreDolphins = calcAverage(85, 54, 41);\nscoreKoalas = calcAverage(23, 34, 27);\nconsole.log(scoreDolphins, scoreKoalas);\ncheckWinner(scoreDolphins, scoreKoalas);\n\n\n///////////////////////////////////////\n// Introduction to Arrays\nconst friend1 = 'Michael';\nconst friend2 = 'Steven';\nconst friend3 = 'Peter';\n\nconst friends = ['Michael', 'Steven', 'Peter'];\nconsole.log(friends);\n\nconst y = new Array(1991, 1984, 2008, 2020);\n\nconsole.log(friends[0]);\nconsole.log(friends[2]);\n\nconsole.log(friends.length);\nconsole.log(friends[friends.length - 1]);\n\nfriends[2] = 'Jay';\nconsole.log(friends);\n// friends = ['Bob', 'Alice']\n\nconst firstName = 'Jonas';\nconst jonas = [firstName, 'Schmedtmann', 2037 - 1991, 'teacher', friends];\nconsole.log(jonas);\nconsole.log(jonas.length);\n\n// Exercise\nconst calcAge = function (birthYeah) {\n return 2037 - birthYeah;\n}\nconst years = [1990, 1967, 2002, 2010, 2018];\n\nconst age1 = calcAge(years[0]);\nconst age2 = calcAge(years[1]);\nconst age3 = calcAge(years[years.length - 1]);\nconsole.log(age1, age2, age3);\n\nconst ages = [calcAge(years[0]), calcAge(years[1]), calcAge(years[years.length - 1])];\nconsole.log(ages);\n\n\n///////////////////////////////////////\n// Basic Array Operations (Methods)\nconst friends = ['Michael', 'Steven', 'Peter'];\n\n// Add elements\nconst newLength = friends.push('Jay');\nconsole.log(friends);\nconsole.log(newLength);\n\nfriends.unshift('John');\nconsole.log(friends);\n\n// Remove elements\nfriends.pop(); // Last\nconst popped = friends.pop();\nconsole.log(popped);\nconsole.log(friends);\n\nfriends.shift(); // First\nconsole.log(friends);\n\nconsole.log(friends.indexOf('Steven'));\nconsole.log(friends.indexOf('Bob'));\n\nfriends.push(23);\nconsole.log(friends.includes('Steven'));\nconsole.log(friends.includes('Bob'));\nconsole.log(friends.includes(23));\n\nif (friends.includes('Steven')) {\n console.log('You have a friend called Steven');\n}\n*/\n\n///////////////////////////////////////\n// Coding Challenge #2\n\n/*\nSteven is still building his tip calculator, using the same rules as before: Tip 15% of the bill if the bill value is between 50 and 300, and if the value is different, the tip is 20%.\n\n1. Write a function 'calcTip' that takes any bill value as an input and returns the corresponding tip, calculated based on the rules above (you can check out the code from first tip calculator challenge if you need to). Use the function type you like the most. Test the function using a bill value of 100.\n2. And now let's use arrays! So create an array 'bills' containing the test data below.\n3. Create an array 'tips' containing the tip value for each bill, calculated from the function you created before.\n4. BONUS: Create an array 'total' containing the total values, so the bill + tip.\n\nTEST DATA: 125, 555 and 44\n\nHINT: Remember that an array needs a value in each position, and that value can actually be the returned value of a function! So you can just call a function as array values (so don't store the tip values in separate variables first, but right in the new array) 😉\n\nGOOD LUCK 😀\n*/\n\n/*\nconst calcTip = function (bill) {\n return bill >= 50 && bill <= 300 ? bill * 0.15 : bill * 0.2;\n}\n// const calcTip = bill => bill >= 50 && bill <= 300 ? bill * 0.15 : bill * 0.2;\n\nconst bills = [125, 555, 44];\nconst tips = [calcTip(bills[0]), calcTip(bills[1]), calcTip(bills[2])];\nconst totals = [bills[0] + tips[0], bills[1] + tips[1], bills[2] + tips[2]];\n\nconsole.log(bills, tips, totals);\n\n\n///////////////////////////////////////\n// Introduction to Objects\nconst jonasArray = [\n 'Jonas',\n 'Schmedtmann',\n 2037 - 1991,\n 'teacher',\n ['Michael', 'Peter', 'Steven']\n];\n\nconst jonas = {\n firstName: 'Jonas',\n lastName: 'Schmedtmann',\n age: 2037 - 1991,\n job: 'teacher',\n friends: ['Michael', 'Peter', 'Steven']\n};\n\n\n///////////////////////////////////////\n// Dot vs. Bracket Notation\nconst jonas = {\n firstName: 'Jonas',\n lastName: 'Schmedtmann',\n age: 2037 - 1991,\n job: 'teacher',\n friends: ['Michael', 'Peter', 'Steven']\n};\nconsole.log(jonas);\n\nconsole.log(jonas.lastName);\nconsole.log(jonas['lastName']);\n\nconst nameKey = 'Name';\nconsole.log(jonas['first' + nameKey]);\nconsole.log(jonas['last' + nameKey]);\n\n// console.log(jonas.'last' + nameKey)\n\nconst interestedIn = prompt('What do you want to know about Jonas? Choose between firstName, lastName, age, job, and friends');\n\nif (jonas[interestedIn]) {\n console.log(jonas[interestedIn]);\n} else {\n console.log('Wrong request! Choose between firstName, lastName, age, job, and friends');\n}\n\njonas.location = 'Portugal';\njonas['twitter'] = '@jonasschmedtman';\nconsole.log(jonas);\n\n// Challenge\n// \"Jonas has 3 friends, and his best friend is called Michael\"\nconsole.log(`${jonas.firstName} has ${jonas.friends.length} friends, and his best friend is called ${jonas.friends[0]}`);\n\n\n///////////////////////////////////////\n// Object Methods\n\nconst jonas = {\n firstName: 'Jonas',\n lastName: 'Schmedtmann',\n birthYeah: 1991,\n job: 'teacher',\n friends: ['Michael', 'Peter', 'Steven'],\n hasDriversLicense: true,\n\n // calcAge: function (birthYeah) {\n // return 2037 - birthYeah;\n // }\n\n // calcAge: function () {\n // // console.log(this);\n // return 2037 - this.birthYeah;\n // }\n\n calcAge: function () {\n this.age = 2037 - this.birthYeah;\n return this.age;\n },\n\n getSummary: function () {\n return `${this.firstName} is a ${this.calcAge()}-year old ${jonas.job}, and he has ${this.hasDriversLicense ? 'a' : 'no'} driver's license.`\n }\n};\n\nconsole.log(jonas.calcAge());\n\nconsole.log(jonas.age);\nconsole.log(jonas.age);\nconsole.log(jonas.age);\n\n// Challenge\n// \"Jonas is a 46-year old teacher, and he has a driver's license\"\nconsole.log(jonas.getSummary());\n*/\n\n///////////////////////////////////////\n// Coding Challenge #3\n\n/*\nLet's go back to Mark and John comparing their BMIs! This time, let's use objects to implement the calculations! Remember: BMI = mass / height ** 2 = mass / (height * height). (mass in kg and height in meter)\n\n1. For each of them, create an object with properties for their full name, mass, and height (Mark Miller and John Smith)\n2. Create a 'calcBMI' method on each object to calculate the BMI (the same method on both objects). Store the BMI value to a property, and also return it from the method.\n3. Log to the console who has the higher BMI, together with the full name and the respective BMI. Example: \"John Smith's BMI (28.3) is higher than Mark Miller's (23.9)!\"\n\nTEST DATA: Marks weights 78 kg and is 1.69 m tall. John weights 92 kg and is 1.95 m tall.\n\nGOOD LUCK 😀\n*/\n\n/*\nconst mark = {\n fullName: 'Mark Miller',\n mass: 78,\n height: 1.69,\n calcBMI: function () {\n this.bmi = this.mass / this.height ** 2;\n return this.bmi;\n }\n};\n\nconst john = {\n fullName: 'John Smith',\n mass: 92,\n height: 1.95,\n calcBMI: function () {\n this.bmi = this.mass / this.height ** 2;\n return this.bmi;\n }\n};\n\nmark.calcBMI();\njohn.calcBMI();\n\nconsole.log(mark.bmi, john.bmi);\n\n// \"John Smith's BMI (28.3) is higher than Mark Miller's (23.9)!\"\n\nif (mark.bmi > john.bmi) {\n console.log(`${mark.fullName}'s BMI (${mark.bmi}) is higher than ${john.fullName}'s BMI (${john.bmi})`)\n} else if (john.bmi > mark.bmi) {\n console.log(`${john.fullName}'s BMI (${john.bmi}) is higher than ${mark.fullName}'s BMI (${mark.bmi})`)\n}\n\n\n///////////////////////////////////////\n// Iteration: The for Loop\n\n// console.log('Lifting weights repetition 1 🏋️‍♀️');\n// console.log('Lifting weights repetition 2 🏋️‍♀️');\n// console.log('Lifting weights repetition 3 🏋️‍♀️');\n// console.log('Lifting weights repetition 4 🏋️‍♀️');\n// console.log('Lifting weights repetition 5 🏋️‍♀️');\n// console.log('Lifting weights repetition 6 🏋️‍♀️');\n// console.log('Lifting weights repetition 7 🏋️‍♀️');\n// console.log('Lifting weights repetition 8 🏋️‍♀️');\n// console.log('Lifting weights repetition 9 🏋️‍♀️');\n// console.log('Lifting weights repetition 10 🏋️‍♀️');\n\n// for loop keeps running while condition is TRUE\nfor (let rep = 1; rep <= 30; rep++) {\n console.log(`Lifting weights repetition ${rep} 🏋️‍♀️`);\n}\n\n\n///////////////////////////////////////\n// Looping Arrays, Breaking and Continuing\nconst jonas = [\n 'Jonas',\n 'Schmedtmann',\n 2037 - 1991,\n 'teacher',\n ['Michael', 'Peter', 'Steven'],\n true\n];\nconst types = [];\n\n// console.log(jonas[0])\n// console.log(jonas[1])\n// ...\n// console.log(jonas[4])\n// jonas[5] does NOT exist\n\nfor (let i = 0; i < jonas.length; i++) {\n // Reading from jonas array\n console.log(jonas[i], typeof jonas[i]);\n\n // Filling types array\n // types[i] = typeof jonas[i];\n types.push(typeof jonas[i]);\n}\n\nconsole.log(types);\n\nconst years = [1991, 2007, 1969, 2020];\nconst ages = [];\n\nfor (let i = 0; i < years.length; i++) {\n ages.push(2037 - years[i]);\n}\nconsole.log(ages);\n\n// continue and break\nconsole.log('--- ONLY STRINGS ---')\nfor (let i = 0; i < jonas.length; i++) {\n if (typeof jonas[i] !== 'string') continue;\n\n console.log(jonas[i], typeof jonas[i]);\n}\n\nconsole.log('--- BREAK WITH NUMBER ---')\nfor (let i = 0; i < jonas.length; i++) {\n if (typeof jonas[i] === 'number') break;\n\n console.log(jonas[i], typeof jonas[i]);\n}\n\n\n///////////////////////////////////////\n// Looping Backwards and Loops in Loops\nconst jonas = [\n 'Jonas',\n 'Schmedtmann',\n 2037 - 1991,\n 'teacher',\n ['Michael', 'Peter', 'Steven'],\n true\n];\n\n// 0, 1, ..., 4\n// 4, 3, ..., 0\n\nfor (let i = jonas.length - 1; i >= 0; i--) {\n console.log(i, jonas[i]);\n}\n\nfor (let exercise = 1; exercise < 4; exercise++) {\n console.log(`-------- Starting exercise ${exercise}`);\n\n for (let rep = 1; rep < 6; rep++) {\n console.log(`Exercise ${exercise}: Lifting weight repetition ${rep} 🏋️‍♀️`);\n }\n}\n\n\n///////////////////////////////////////\n// The while Loop\nfor (let rep = 1; rep <= 10; rep++) {\n console.log(`Lifting weights repetition ${rep} 🏋️‍♀️`);\n}\n\nlet rep = 1;\nwhile (rep <= 10) {\n // console.log(`WHILE: Lifting weights repetition ${rep} 🏋️‍♀️`);\n rep++;\n}\n\nlet dice = Math.trunc(Math.random() * 6) + 1;\n\nwhile (dice !== 6) {\n console.log(`You rolled a ${dice}`);\n dice = Math.trunc(Math.random() * 6) + 1;\n if (dice === 6) console.log('Loop is about to end...');\n}\n*/\n\n///////////////////////////////////////\n// Coding Challenge #4\n\n/*\nLet's improve Steven's tip calculator even more, this time using loops!\n\n1. Create an array 'bills' containing all 10 test bill values\n2. Create empty arrays for the tips and the totals ('tips' and 'totals')\n3. Use the 'calcTip' function we wrote before (no need to repeat) to calculate tips and total values (bill + tip) for every bill value in the bills array. Use a for loop to perform the 10 calculations!\n\nTEST DATA: 22, 295, 176, 440, 37, 105, 10, 1100, 86 and 52\n\nHINT: Call calcTip in the loop and use the push method to add values to the tips and totals arrays 😉\n\n4. BONUS: Write a function 'calcAverage' which takes an array called 'arr' as an argument. This function calculates the average of all numbers in the given array. This is a DIFFICULT challenge (we haven't done this before)! Here is how to solve it:\n 4.1. First, you will need to add up all values in the array. To do the addition, start by creating a variable 'sum' that starts at 0. Then loop over the array using a for loop. In each iteration, add the current value to the 'sum' variable. This way, by the end of the loop, you have all values added together\n 4.2. To calculate the average, divide the sum you calculated before by the length of the array (because that's the number of elements)\n 4.3. Call the function with the 'totals' array\n\nGOOD LUCK 😀\n*/\n\n/*\nconst calcTip = function (bill) {\n return bill >= 50 && bill <= 300 ? bill * 0.15 : bill * 0.2;\n}\nconst bills = [22, 295, 176, 440, 37, 105, 10, 1100, 86, 52];\nconst tips = [];\nconst totals = [];\n\nfor (let i = 0; i < bills.length; i++) {\n const tip = calcTip(bills[i]);\n tips.push(tip);\n totals.push(tip + bills[i]);\n}\nconsole.log(bills, tips, totals);\n\nconst calcAverage = function (arr) {\n let sum = 0;\n for (let i = 0; i < arr.length; i++) {\n // sum = sum + arr[i];\n sum += arr[i];\n }\n return sum / arr.length;\n}\nconsole.log(calcAverage([2, 3, 7]));\nconsole.log(calcAverage(totals));\nconsole.log(calcAverage(tips));\n*/\n" }, { "path": "02-Fundamentals-Part-2/starter/index.html", "content": "\n\n \n \n \n \n JavaScript Fundamentals – Part 2\n \n \n \n

JavaScript Fundamentals – Part 2

\n \n \n\n" }, { "path": "02-Fundamentals-Part-2/starter/script.js", "content": "" }, { "path": "03-Developer-Skills/final/.prettierrc", "content": "{\n \"singleQuote\": true,\n \"arrowParens\": \"avoid\"\n}\n" }, { "path": "03-Developer-Skills/final/index.html", "content": "\n\n \n \n \n \n Developer Skills & Editor Setup\n \n \n \n

Developer Skills & Editor Setup

\n \n \n\n" }, { "path": "03-Developer-Skills/final/script.js", "content": "// Remember, we're gonna use strict mode in all scripts now!\n'use strict';\n\n/*\n///////////////////////////////////////\n// Using Google, StackOverflow and MDN\n\n// PROBLEM 1:\n// We work for a company building a smart home thermometer. Our most recent task is this: \"Given an array of temperatures of one day, calculate the temperature amplitude. Keep in mind that sometimes there might be a sensor error.\"\n\nconst temperatures = [3, -2, -6, -1, 'error', 9, 13, 17, 15, 14, 9, 5];\n\n// 1) Understanding the problem\n// - What is temp amplitude? Answer: difference between highest and lowest temp\n// - How to compute max and min temperatures?\n// - What's a sensor error? And what do do?\n\n// 2) Breaking up into sub-problems\n// - How to ignore errors?\n// - Find max value in temp array\n// - Find min value in temp array\n// - Subtract min from max (amplitude) and return it\n\nconst calcTempAmplitude = function (temps) {\n let max = temps[0];\n let min = temps[0];\n\n for (let i = 0; i < temps.length; i++) {\n const curTemp = temps[i];\n if (typeof curTemp !== 'number') continue;\n\n if (curTemp > max) max = curTemp;\n if (curTemp < min) min = curTemp;\n }\n console.log(max, min);\n return max - min;\n};\nconst amplitude = calcTempAmplitude(temperatures);\nconsole.log(amplitude);\n\n// PROBLEM 2:\n// Function should now receive 2 arrays of temps\n\n// 1) Understanding the problem\n// - With 2 arrays, should we implement functionality twice? NO! Just merge two arrays\n\n// 2) Breaking up into sub-problems\n// - Merge 2 arrays\n\nconst calcTempAmplitudeNew = function (t1, t2) {\n const temps = t1.concat(t2);\n console.log(temps);\n\n let max = temps[0];\n let min = temps[0];\n\n for (let i = 0; i < temps.length; i++) {\n const curTemp = temps[i];\n if (typeof curTemp !== 'number') continue;\n\n if (curTemp > max) max = curTemp;\n if (curTemp < min) min = curTemp;\n }\n console.log(max, min);\n return max - min;\n};\nconst amplitudeNew = calcTempAmplitudeNew([3, 5, 1], [9, 0, 5]);\nconsole.log(amplitudeNew);\n\n\n///////////////////////////////////////\n// Debugging with the Console and Breakpoints\nconst measureKelvin = function () {\n const measurement = {\n type: 'temp',\n unit: 'celsius',\n\n // C) FIX\n // value: Number(prompt('Degrees celsius:')),\n value: 10,\n };\n\n // B) FIND\n console.table(measurement);\n\n // console.log(measurement.value);\n // console.warn(measurement.value);\n // console.error(measurement.value);\n\n const kelvin = measurement.value + 273;\n return kelvin;\n};\n// A) IDENTIFY\nconsole.log(measureKelvin());\n\n// Using a debugger\nconst calcTempAmplitudeBug = function (t1, t2) {\n const temps = t1.concat(t2);\n console.log(temps);\n\n let max = 0;\n let min = 0;\n\n for (let i = 0; i < temps.length; i++) {\n const curTemp = temps[i];\n if (typeof curTemp !== 'number') continue;\n\n if (curTemp > max) max = curTemp;\n if (curTemp < min) min = curTemp;\n }\n console.log(max, min);\n return max - min;\n};\nconst amplitudeBug = calcTempAmplitudeBug([3, 5, 1], [9, 4, 5]);\n// A) IDENTIFY\nconsole.log(amplitudeBug);\n*/\n\n///////////////////////////////////////\n// Coding Challenge #1\n\n/*\nGiven an array of forecasted maximum temperatures, the thermometer displays a string with these temperatures.\n\nExample: [17, 21, 23] will print \"... 17ºC in 1 days ... 21ºC in 2 days ... 23ºC in 3 days ...\"\n\nCreate a function 'printForecast' which takes in an array 'arr' and logs a string like the above to the console.\n\nUse the problem-solving framework: Understand the problem and break it up into sub-problems!\n\nTEST DATA 1: [17, 21, 23]\nTEST DATA 2: [12, 5, -5, 0, 4]\n*/\n\n/*\n// 1) Understanding the problem\n// - Array transformed to string, separated by ...\n// - What is the X days? Answer: index + 1\n\n// 2) Breaking up into sub-problems\n// - Transform array into string\n// - Transform each element to string with ºC\n// - Strings needs to contain day (index + 1)\n// - Add ... between elements and start and end of string\n// - Log string to console\n\nconst data1 = [17, 21, 23];\nconst data2 = [12, 5, -5, 0, 4];\n\nconsole.log(`... ${data1[0]}ºC ... ${data1[1]}ºC ... ${data1[2]}ºC ...`);\n\nconst printForecast = function (arr) {\n let str = '';\n for (let i = 0; i < arr.length; i++) {\n str += `${arr[i]}ºC in ${i + 1} days ... `;\n }\n console.log('...' + str);\n};\nprintForecast(data1);\n*/\n\n///////////////////////////////////////\n// Coding Challenge #2 With AI\n\n/*\nLet's say you're building a time tracking application for freelancers. At some point in building this app, you need a function that receives daily work hours for a certain week, and returns:\n1. Total hours worked\n2. Average daily hours\n3. The day with the most hours worked\n4. Number of days worked\n5. Whether the week was full-time (worked 35 hours or more)\n\nTEST DATA: [7.5, 8, 6.5, 0, 8.5, 4, 0]\n*/\n\n/*\n// Written by ChatGPT\nfunction analyzeWorkWeek(dailyHours) {\n const daysOfWeek = [\n 'Monday',\n 'Tuesday',\n 'Wednesday',\n 'Thursday',\n 'Friday',\n 'Saturday',\n 'Sunday',\n ];\n\n // Validate that the input array has exactly 7 elements\n if (!Array.isArray(dailyHours) || dailyHours.length !== 7) {\n throw new Error('Input must be an array of exactly 7 daily work hours.');\n }\n\n // Calculate total hours worked\n const totalHours = dailyHours.reduce((sum, hours) => sum + hours, 0);\n\n // Calculate average daily hours, rounded to one decimal place\n const averageHours = Math.round((totalHours / dailyHours.length) * 10) / 10;\n\n // Find the day with the most hours worked\n const maxHours = Math.max(...dailyHours);\n const maxDayIndex = dailyHours.indexOf(maxHours);\n const maxDay = daysOfWeek[maxDayIndex]; // Convert index to day name\n\n // Count the number of days worked\n const daysWorked = dailyHours.filter(hours => hours > 0).length;\n\n // Check if the week was full-time (35 hours or more)\n const isFullTime = totalHours >= 35;\n\n // Return the result object\n return {\n totalHours,\n averageHours,\n maxDay, // The name of the day with the most hours\n daysWorked,\n isFullTime,\n };\n}\n\nconst weeklyHours = [7.5, 8, 6.5, 0, 8.5, 5, 0];\nconst analysis = analyzeWorkWeek(weeklyHours);\nconsole.log(analysis);\n\nconst weeklyHours2 = [7.5, 8, 6.5, 0, 8.5];\nconst analysis2 = analyzeWorkWeek(weeklyHours2);\nconsole.log(analysis2);\n*/\n" }, { "path": "03-Developer-Skills/starter/index.html", "content": "\n\n \n \n \n \n Developer Skills & Editor Setup\n \n \n \n

Developer Skills & Editor Setup

\n \n \n\n" }, { "path": "03-Developer-Skills/starter/script.js", "content": "// Remember, we're gonna use strict mode in all scripts now!\n'use strict';\n\n" }, { "path": "04-HTML-CSS/final/index.html", "content": "\n\n \n \n \n\n \n\n Learning HTML & CSS\n \n \n

JavaScript is fun, but so is HTML & CSS!

\n

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

\n\n

Another heading

\n

\n Just another paragraph\n

\n\n \n\n
\n

Your name here

\n

Please fill in this form :)

\n\n \n \n
\n \n\n" }, { "path": "04-HTML-CSS/final/style.css", "content": "* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n background-color: rgb(255, 247, 201);\n font-family: Arial;\n font-size: 20px;\n padding: 50px;\n}\n\nh1 {\n font-size: 35px;\n margin-bottom: 25px;\n}\n\nh2 {\n margin-bottom: 20px;\n text-align: center;\n}\n\np {\n margin-bottom: 20px;\n}\n\n.first {\n color: red;\n}\n\n#your-name {\n background-color: rgb(255, 220, 105);\n border: 5px solid #444;\n width: 400px;\n padding: 25px;\n margin-top: 30px;\n}\n\ninput,\nbutton {\n padding: 10px;\n font-size: 16px;\n}\n\na {\n background-color: yellowgreen;\n}\n\n#course-image {\n width: 300px;\n}\n\n#your-name h2 {\n color: olivedrab;\n}\n" }, { "path": "05-Guess-My-Number/final/.prettierrc", "content": "{\n \"singleQuote\": true,\n \"arrowParens\": \"avoid\"\n}\n" }, { "path": "05-Guess-My-Number/final/index.html", "content": "\n\n \n \n \n \n \n Guess My Number!\n \n \n
\n

Guess My Number!

\n

(Between 1 and 20)

\n \n
?
\n
\n
\n
\n \n \n
\n
\n

Start guessing...

\n

💯 Score: 20

\n

\n 🥇 Highscore: 0\n

\n
\n
\n \n \n\n" }, { "path": "05-Guess-My-Number/final/script.js", "content": "'use strict';\n\n/*\nconsole.log(document.querySelector('.message').textContent);\ndocument.querySelector('.message').textContent = '🎉 Correct Number!';\n\ndocument.querySelector('.number').textContent = 13;\ndocument.querySelector('.score').textContent = 10;\n\ndocument.querySelector('.guess').value = 23;\nconsole.log(document.querySelector('.guess').value);\n*/\n\nlet secretNumber = Math.trunc(Math.random() * 20) + 1;\nlet score = 20;\nlet highscore = 0;\n\nconst displayMessage = function (message) {\n document.querySelector('.message').textContent = message;\n};\n\ndocument.querySelector('.check').addEventListener('click', function () {\n const guess = Number(document.querySelector('.guess').value);\n console.log(guess, typeof guess);\n\n // When there is no input\n if (!guess) {\n // document.querySelector('.message').textContent = '⛔️ No number!';\n displayMessage('⛔️ No number!');\n\n // When player wins\n } else if (guess === secretNumber) {\n // document.querySelector('.message').textContent = '🎉 Correct Number!';\n displayMessage('🎉 Correct Number!');\n document.querySelector('.number').textContent = secretNumber;\n\n document.querySelector('body').style.backgroundColor = '#60b347';\n document.querySelector('.number').style.width = '30rem';\n\n if (score > highscore) {\n highscore = score;\n document.querySelector('.highscore').textContent = highscore;\n }\n\n // When guess is wrong\n } else if (guess !== secretNumber) {\n if (score > 1) {\n // document.querySelector('.message').textContent =\n // guess > secretNumber ? '📈 Too high!' : '📉 Too low!';\n displayMessage(guess > secretNumber ? '📈 Too high!' : '📉 Too low!');\n score--;\n document.querySelector('.score').textContent = score;\n } else {\n // document.querySelector('.message').textContent = '💥 You lost the game!';\n displayMessage('💥 You lost the game!');\n document.querySelector('.score').textContent = 0;\n }\n }\n\n // // When guess is too high\n // } else if (guess > secretNumber) {\n // if (score > 1) {\n // document.querySelector('.message').textContent = '📈 Too high!';\n // score--;\n // document.querySelector('.score').textContent = score;\n // } else {\n // document.querySelector('.message').textContent = '💥 You lost the game!';\n // document.querySelector('.score').textContent = 0;\n // }\n\n // // When guess is too low\n // } else if (guess < secretNumber) {\n // if (score > 1) {\n // document.querySelector('.message').textContent = '📉 Too low!';\n // score--;\n // document.querySelector('.score').textContent = score;\n // } else {\n // document.querySelector('.message').textContent = '💥 You lost the game!';\n // document.querySelector('.score').textContent = 0;\n // }\n // }\n});\n\ndocument.querySelector('.again').addEventListener('click', function () {\n score = 20;\n secretNumber = Math.trunc(Math.random() * 20) + 1;\n\n // document.querySelector('.message').textContent = 'Start guessing...';\n displayMessage('Start guessing...');\n document.querySelector('.score').textContent = score;\n document.querySelector('.number').textContent = '?';\n document.querySelector('.guess').value = '';\n\n document.querySelector('body').style.backgroundColor = '#222';\n document.querySelector('.number').style.width = '15rem';\n});\n\n///////////////////////////////////////\n// Coding Challenge #1\n\n/* \nImplement a game rest functionality, so that the player can make a new guess! Here is how:\n\n1. Select the element with the 'again' class and attach a click event handler\n2. In the handler function, restore initial values of the score and secretNumber variables\n3. Restore the initial conditions of the message, number, score and guess input field\n4. Also restore the original background color (#222) and number width (15rem)\n\nGOOD LUCK 😀\n*/\n" }, { "path": "05-Guess-My-Number/final/style.css", "content": "@import url('https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap');\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: inherit;\n}\n\nhtml {\n font-size: 62.5%;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Press Start 2P', sans-serif;\n color: #eee;\n background-color: #222;\n /* background-color: #60b347; */\n}\n\n/* LAYOUT */\nheader {\n position: relative;\n height: 35vh;\n border-bottom: 7px solid #eee;\n}\n\nmain {\n height: 65vh;\n color: #eee;\n display: flex;\n align-items: center;\n justify-content: space-around;\n}\n\n.left {\n width: 52rem;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.right {\n width: 52rem;\n font-size: 2rem;\n}\n\n/* ELEMENTS STYLE */\nh1 {\n font-size: 4rem;\n text-align: center;\n position: absolute;\n width: 100%;\n top: 52%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.number {\n background: #eee;\n color: #333;\n font-size: 6rem;\n width: 15rem;\n padding: 3rem 0rem;\n text-align: center;\n position: absolute;\n bottom: 0;\n left: 50%;\n transform: translate(-50%, 50%);\n}\n\n.between {\n font-size: 1.4rem;\n position: absolute;\n top: 2rem;\n right: 2rem;\n}\n\n.again {\n position: absolute;\n top: 2rem;\n left: 2rem;\n}\n\n.guess {\n background: none;\n border: 4px solid #eee;\n font-family: inherit;\n color: inherit;\n font-size: 5rem;\n padding: 2.5rem;\n width: 25rem;\n text-align: center;\n display: block;\n margin-bottom: 3rem;\n}\n\n.btn {\n border: none;\n background-color: #eee;\n color: #222;\n font-size: 2rem;\n font-family: inherit;\n padding: 2rem 3rem;\n cursor: pointer;\n}\n\n.btn:hover {\n background-color: #ccc;\n}\n\n.message {\n margin-bottom: 8rem;\n height: 3rem;\n}\n\n.label-score {\n margin-bottom: 2rem;\n}\n" }, { "path": "05-Guess-My-Number/starter/.prettierrc", "content": "{\n \"singleQuote\": true,\n \"arrowParens\": \"avoid\"\n}\n" }, { "path": "05-Guess-My-Number/starter/index.html", "content": "\n\n \n \n \n \n \n Guess My Number!\n \n \n
\n

Guess My Number!

\n

(Between 1 and 20)

\n \n
?
\n
\n
\n
\n \n \n
\n
\n

Start guessing...

\n

💯 Score: 20

\n

\n 🥇 Highscore: 0\n

\n
\n
\n \n \n\n" }, { "path": "05-Guess-My-Number/starter/script.js", "content": "'use strict';\n" }, { "path": "05-Guess-My-Number/starter/style.css", "content": "@import url('https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap');\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: inherit;\n}\n\nhtml {\n font-size: 62.5%;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Press Start 2P', sans-serif;\n color: #eee;\n background-color: #222;\n /* background-color: #60b347; */\n}\n\n/* LAYOUT */\nheader {\n position: relative;\n height: 35vh;\n border-bottom: 7px solid #eee;\n}\n\nmain {\n height: 65vh;\n color: #eee;\n display: flex;\n align-items: center;\n justify-content: space-around;\n}\n\n.left {\n width: 52rem;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.right {\n width: 52rem;\n font-size: 2rem;\n}\n\n/* ELEMENTS STYLE */\nh1 {\n font-size: 4rem;\n text-align: center;\n position: absolute;\n width: 100%;\n top: 52%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.number {\n background: #eee;\n color: #333;\n font-size: 6rem;\n width: 15rem;\n padding: 3rem 0rem;\n text-align: center;\n position: absolute;\n bottom: 0;\n left: 50%;\n transform: translate(-50%, 50%);\n}\n\n.between {\n font-size: 1.4rem;\n position: absolute;\n top: 2rem;\n right: 2rem;\n}\n\n.again {\n position: absolute;\n top: 2rem;\n left: 2rem;\n}\n\n.guess {\n background: none;\n border: 4px solid #eee;\n font-family: inherit;\n color: inherit;\n font-size: 5rem;\n padding: 2.5rem;\n width: 25rem;\n text-align: center;\n display: block;\n margin-bottom: 3rem;\n}\n\n.btn {\n border: none;\n background-color: #eee;\n color: #222;\n font-size: 2rem;\n font-family: inherit;\n padding: 2rem 3rem;\n cursor: pointer;\n}\n\n.btn:hover {\n background-color: #ccc;\n}\n\n.message {\n margin-bottom: 8rem;\n height: 3rem;\n}\n\n.label-score {\n margin-bottom: 2rem;\n}\n" }, { "path": "06-Modal/final/.prettierrc", "content": "{\n \"singleQuote\": true,\n \"arrowParens\": \"avoid\"\n}\n" }, { "path": "06-Modal/final/index.html", "content": "\n\n \n \n \n \n \n Modal window\n \n \n \n \n \n\n
\n \n

I'm a modal window 😍

\n

\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim\n veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea\n commodo consequat. Duis aute irure dolor in reprehenderit in voluptate\n velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n occaecat cupidatat non proident, sunt in culpa qui officia deserunt\n mollit anim id est laborum.\n

\n
\n
\n\n \n \n\n" }, { "path": "06-Modal/final/script.js", "content": "'use strict';\n\nconst modal = document.querySelector('.modal');\nconst overlay = document.querySelector('.overlay');\nconst btnCloseModal = document.querySelector('.close-modal');\nconst btnsOpenModal = document.querySelectorAll('.show-modal');\n\nconst openModal = function () {\n modal.classList.remove('hidden');\n overlay.classList.remove('hidden');\n};\n\nconst closeModal = function () {\n modal.classList.add('hidden');\n overlay.classList.add('hidden');\n};\n\nfor (let i = 0; i < btnsOpenModal.length; i++)\n btnsOpenModal[i].addEventListener('click', openModal);\n\nbtnCloseModal.addEventListener('click', closeModal);\noverlay.addEventListener('click', closeModal);\n\ndocument.addEventListener('keydown', function (e) {\n // console.log(e.key);\n\n if (e.key === 'Escape' && !modal.classList.contains('hidden')) {\n closeModal();\n }\n});\n" }, { "path": "06-Modal/final/style.css", "content": "* {\n margin: 0;\n padding: 0;\n box-sizing: inherit;\n}\n\nhtml {\n font-size: 62.5%;\n box-sizing: border-box;\n}\n\nbody {\n font-family: sans-serif;\n color: #333;\n line-height: 1.5;\n height: 100vh;\n position: relative;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n background: linear-gradient(to top left, #28b487, #7dd56f);\n}\n\n.show-modal {\n font-size: 2rem;\n font-weight: 600;\n padding: 1.75rem 3.5rem;\n margin: 5rem 2rem;\n border: none;\n background-color: #fff;\n color: #444;\n border-radius: 10rem;\n cursor: pointer;\n}\n\n.close-modal {\n position: absolute;\n top: 1.2rem;\n right: 2rem;\n font-size: 5rem;\n color: #333;\n cursor: pointer;\n border: none;\n background: none;\n}\n\nh1 {\n font-size: 2.5rem;\n margin-bottom: 2rem;\n}\n\np {\n font-size: 1.8rem;\n}\n\n/* -------------------------- */\n/* CLASSES TO MAKE MODAL WORK */\n.hidden {\n display: none;\n}\n\n.modal {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 70%;\n\n background-color: white;\n padding: 6rem;\n border-radius: 5px;\n box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3);\n z-index: 10;\n}\n\n.overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.6);\n backdrop-filter: blur(3px);\n z-index: 5;\n}\n" }, { "path": "06-Modal/starter/.prettierrc", "content": "{\n \"singleQuote\": true,\n \"arrowParens\": \"avoid\"\n}\n" }, { "path": "06-Modal/starter/index.html", "content": "\n\n \n \n \n \n \n Modal window\n \n \n \n \n \n\n
\n \n

I'm a modal window 😍

\n

\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim\n veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea\n commodo consequat. Duis aute irure dolor in reprehenderit in voluptate\n velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint\n occaecat cupidatat non proident, sunt in culpa qui officia deserunt\n mollit anim id est laborum.\n

\n
\n
\n\n \n \n\n" }, { "path": "06-Modal/starter/script.js", "content": "'use strict';\n" }, { "path": "06-Modal/starter/style.css", "content": "* {\n margin: 0;\n padding: 0;\n box-sizing: inherit;\n}\n\nhtml {\n font-size: 62.5%;\n box-sizing: border-box;\n}\n\nbody {\n font-family: sans-serif;\n color: #333;\n line-height: 1.5;\n height: 100vh;\n position: relative;\n display: flex;\n align-items: flex-start;\n justify-content: center;\n background: linear-gradient(to top left, #28b487, #7dd56f);\n}\n\n.show-modal {\n font-size: 2rem;\n font-weight: 600;\n padding: 1.75rem 3.5rem;\n margin: 5rem 2rem;\n border: none;\n background-color: #fff;\n color: #444;\n border-radius: 10rem;\n cursor: pointer;\n}\n\n.close-modal {\n position: absolute;\n top: 1.2rem;\n right: 2rem;\n font-size: 5rem;\n color: #333;\n cursor: pointer;\n border: none;\n background: none;\n}\n\nh1 {\n font-size: 2.5rem;\n margin-bottom: 2rem;\n}\n\np {\n font-size: 1.8rem;\n}\n\n/* -------------------------- */\n/* CLASSES TO MAKE MODAL WORK */\n.hidden {\n display: none;\n}\n\n.modal {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 70%;\n\n background-color: white;\n padding: 6rem;\n border-radius: 5px;\n box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3);\n z-index: 10;\n}\n\n.overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.6);\n backdrop-filter: blur(3px);\n z-index: 5;\n}\n" }, { "path": "07-Pig-Game/final/.prettierrc", "content": "{\n \"singleQuote\": true,\n \"arrowParens\": \"avoid\"\n}\n" }, { "path": "07-Pig-Game/final/index.html", "content": "\n\n \n \n \n \n \n Pig Game\n \n \n
\n
\n

Player 1

\n

43

\n
\n

Current

\n

0

\n
\n
\n
\n

Player 2

\n

24

\n
\n

Current

\n

0

\n
\n
\n\n \"Playing\n \n \n \n
\n \n \n\n" }, { "path": "07-Pig-Game/final/script.js", "content": "'use strict';\n\n// Selecting elements\nconst player0El = document.querySelector('.player--0');\nconst player1El = document.querySelector('.player--1');\nconst score0El = document.querySelector('#score--0');\nconst score1El = document.getElementById('score--1');\nconst current0El = document.getElementById('current--0');\nconst current1El = document.getElementById('current--1');\n\nconst diceEl = document.querySelector('.dice');\nconst btnNew = document.querySelector('.btn--new');\nconst btnRoll = document.querySelector('.btn--roll');\nconst btnHold = document.querySelector('.btn--hold');\n\nlet scores, currentScore, activePlayer, playing;\n\n// Starting conditions\nconst init = function () {\n scores = [0, 0];\n currentScore = 0;\n activePlayer = 0;\n playing = true;\n\n score0El.textContent = 0;\n score1El.textContent = 0;\n current0El.textContent = 0;\n current1El.textContent = 0;\n\n diceEl.classList.add('hidden');\n player0El.classList.remove('player--winner');\n player1El.classList.remove('player--winner');\n player0El.classList.add('player--active');\n player1El.classList.remove('player--active');\n};\ninit();\n\nconst switchPlayer = function () {\n document.getElementById(`current--${activePlayer}`).textContent = 0;\n currentScore = 0;\n activePlayer = activePlayer === 0 ? 1 : 0;\n player0El.classList.toggle('player--active');\n player1El.classList.toggle('player--active');\n};\n\n// Rolling dice functionality\nbtnRoll.addEventListener('click', function () {\n if (playing) {\n // 1. Generating a random dice roll\n const dice = Math.trunc(Math.random() * 6) + 1;\n\n // 2. Display dice\n diceEl.classList.remove('hidden');\n diceEl.src = `dice-${dice}.png`;\n\n // 3. Check for rolled 1\n if (dice !== 1) {\n // Add dice to current score\n currentScore += dice;\n document.getElementById(\n `current--${activePlayer}`\n ).textContent = currentScore;\n } else {\n // Switch to next player\n switchPlayer();\n }\n }\n});\n\nbtnHold.addEventListener('click', function () {\n if (playing) {\n // 1. Add current score to active player's score\n scores[activePlayer] += currentScore;\n // scores[1] = scores[1] + currentScore\n\n document.getElementById(`score--${activePlayer}`).textContent =\n scores[activePlayer];\n\n // 2. Check if player's score is >= 100\n if (scores[activePlayer] >= 100) {\n // Finish the game\n playing = false;\n diceEl.classList.add('hidden');\n\n document\n .querySelector(`.player--${activePlayer}`)\n .classList.add('player--winner');\n document\n .querySelector(`.player--${activePlayer}`)\n .classList.remove('player--active');\n } else {\n // Switch to the next player\n switchPlayer();\n }\n }\n});\n\nbtnNew.addEventListener('click', init);\n" }, { "path": "07-Pig-Game/final/style.css", "content": "@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: inherit;\n}\n\nhtml {\n font-size: 62.5%;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Nunito', sans-serif;\n font-weight: 400;\n height: 100vh;\n color: #333;\n background-image: linear-gradient(to top left, #753682 0%, #bf2e34 100%);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/* LAYOUT */\nmain {\n position: relative;\n width: 100rem;\n height: 60rem;\n background-color: rgba(255, 255, 255, 0.35);\n backdrop-filter: blur(200px);\n filter: blur();\n box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.25);\n border-radius: 9px;\n overflow: hidden;\n display: flex;\n}\n\n.player {\n flex: 50%;\n padding: 9rem;\n display: flex;\n flex-direction: column;\n align-items: center;\n transition: all 0.75s;\n}\n\n/* ELEMENTS */\n.name {\n position: relative;\n font-size: 4rem;\n text-transform: uppercase;\n letter-spacing: 1px;\n word-spacing: 2px;\n font-weight: 300;\n margin-bottom: 1rem;\n}\n\n.score {\n font-size: 8rem;\n font-weight: 300;\n color: #c7365f;\n margin-bottom: auto;\n}\n\n.player--active {\n background-color: rgba(255, 255, 255, 0.4);\n}\n.player--active .name {\n font-weight: 700;\n}\n.player--active .score {\n font-weight: 400;\n}\n\n.player--active .current {\n opacity: 1;\n}\n\n.current {\n background-color: #c7365f;\n opacity: 0.8;\n border-radius: 9px;\n color: #fff;\n width: 65%;\n padding: 2rem;\n text-align: center;\n transition: all 0.75s;\n}\n\n.current-label {\n text-transform: uppercase;\n margin-bottom: 1rem;\n font-size: 1.7rem;\n color: #ddd;\n}\n\n.current-score {\n font-size: 3.5rem;\n}\n\n/* ABSOLUTE POSITIONED ELEMENTS */\n.btn {\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n color: #444;\n background: none;\n border: none;\n font-family: inherit;\n font-size: 1.8rem;\n text-transform: uppercase;\n cursor: pointer;\n font-weight: 400;\n transition: all 0.2s;\n\n background-color: white;\n background-color: rgba(255, 255, 255, 0.6);\n backdrop-filter: blur(10px);\n\n padding: 0.7rem 2.5rem;\n border-radius: 50rem;\n box-shadow: 0 1.75rem 3.5rem rgba(0, 0, 0, 0.1);\n}\n\n.btn::first-letter {\n font-size: 2.4rem;\n display: inline-block;\n margin-right: 0.7rem;\n}\n\n.btn--new {\n top: 4rem;\n}\n.btn--roll {\n top: 39.3rem;\n}\n.btn--hold {\n top: 46.1rem;\n}\n\n.btn:active {\n transform: translate(-50%, 3px);\n box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15);\n}\n\n.btn:focus {\n outline: none;\n}\n\n.dice {\n position: absolute;\n left: 50%;\n top: 16.5rem;\n transform: translateX(-50%);\n height: 10rem;\n box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.2);\n}\n\n.player--winner {\n background-color: #2f2f2f;\n}\n\n.player--winner .name {\n font-weight: 700;\n color: #c7365f;\n}\n\n.hidden {\n display: none;\n}\n" }, { "path": "07-Pig-Game/starter/.prettierrc", "content": "{\n \"singleQuote\": true,\n \"arrowParens\": \"avoid\"\n}\n" }, { "path": "07-Pig-Game/starter/index.html", "content": "\n\n \n \n \n \n \n Pig Game\n \n \n
\n
\n

Player 1

\n

43

\n
\n

Current

\n

0

\n
\n
\n
\n

Player 2

\n

24

\n
\n

Current

\n

0

\n
\n
\n\n \"Playing\n \n \n \n
\n \n \n\n" }, { "path": "07-Pig-Game/starter/script.js", "content": "'use strict';\n" }, { "path": "07-Pig-Game/starter/style.css", "content": "@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: inherit;\n}\n\nhtml {\n font-size: 62.5%;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Nunito', sans-serif;\n font-weight: 400;\n height: 100vh;\n color: #333;\n background-image: linear-gradient(to top left, #753682 0%, #bf2e34 100%);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/* LAYOUT */\nmain {\n position: relative;\n width: 100rem;\n height: 60rem;\n background-color: rgba(255, 255, 255, 0.35);\n backdrop-filter: blur(200px);\n filter: blur();\n box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.25);\n border-radius: 9px;\n overflow: hidden;\n display: flex;\n}\n\n.player {\n flex: 50%;\n padding: 9rem;\n display: flex;\n flex-direction: column;\n align-items: center;\n transition: all 0.75s;\n}\n\n/* ELEMENTS */\n.name {\n position: relative;\n font-size: 4rem;\n text-transform: uppercase;\n letter-spacing: 1px;\n word-spacing: 2px;\n font-weight: 300;\n margin-bottom: 1rem;\n}\n\n.score {\n font-size: 8rem;\n font-weight: 300;\n color: #c7365f;\n margin-bottom: auto;\n}\n\n.player--active {\n background-color: rgba(255, 255, 255, 0.4);\n}\n.player--active .name {\n font-weight: 700;\n}\n.player--active .score {\n font-weight: 400;\n}\n\n.player--active .current {\n opacity: 1;\n}\n\n.current {\n background-color: #c7365f;\n opacity: 0.8;\n border-radius: 9px;\n color: #fff;\n width: 65%;\n padding: 2rem;\n text-align: center;\n transition: all 0.75s;\n}\n\n.current-label {\n text-transform: uppercase;\n margin-bottom: 1rem;\n font-size: 1.7rem;\n color: #ddd;\n}\n\n.current-score {\n font-size: 3.5rem;\n}\n\n/* ABSOLUTE POSITIONED ELEMENTS */\n.btn {\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n color: #444;\n background: none;\n border: none;\n font-family: inherit;\n font-size: 1.8rem;\n text-transform: uppercase;\n cursor: pointer;\n font-weight: 400;\n transition: all 0.2s;\n\n background-color: white;\n background-color: rgba(255, 255, 255, 0.6);\n backdrop-filter: blur(10px);\n\n padding: 0.7rem 2.5rem;\n border-radius: 50rem;\n box-shadow: 0 1.75rem 3.5rem rgba(0, 0, 0, 0.1);\n}\n\n.btn::first-letter {\n font-size: 2.4rem;\n display: inline-block;\n margin-right: 0.7rem;\n}\n\n.btn--new {\n top: 4rem;\n}\n.btn--roll {\n top: 39.3rem;\n}\n.btn--hold {\n top: 46.1rem;\n}\n\n.btn:active {\n transform: translate(-50%, 3px);\n box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15);\n}\n\n.btn:focus {\n outline: none;\n}\n\n.dice {\n position: absolute;\n left: 50%;\n top: 16.5rem;\n transform: translateX(-50%);\n height: 10rem;\n box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.2);\n}\n\n.player--winner {\n background-color: #2f2f2f;\n}\n\n.player--winner .name {\n font-weight: 700;\n color: #c7365f;\n}\n" }, { "path": "08-Behind-the-Scenes/final/.prettierrc", "content": "{\n \"singleQuote\": true,\n \"arrowParens\": \"avoid\"\n}\n" }, { "path": "08-Behind-the-Scenes/final/index.html", "content": "\n\n \n \n \n \n How JavaScript Works Behind the Scenes\n \n \n \n

How JavaScript Works Behind the Scenes

\n \n \n\n" }, { "path": "08-Behind-the-Scenes/final/script.js", "content": "'use strict';\n\n///////////////////////////////////////\n// Scoping in Practice\n\n/*\nfunction calcAge(birthYear) {\n const age = 2037 - birthYear;\n\n function printAge() {\n let output = `${firstName}, you are ${age}, born in ${birthYear}`;\n console.log(output);\n\n if (birthYear >= 1981 && birthYear <= 1996) {\n var millenial = true;\n // Creating NEW variable with same name as outer scope's variable\n const firstName = 'Steven';\n\n // Reasssigning outer scope's variable\n output = 'NEW OUTPUT!';\n\n const str = `Oh, and you're a millenial, ${firstName}`;\n console.log(str);\n\n function add(a, b) {\n return a + b;\n }\n }\n // console.log(str);\n console.log(millenial);\n // console.log(add(2, 3));\n console.log(output);\n }\n printAge();\n\n return age;\n}\n\nconst firstName = 'Jonas';\ncalcAge(1991);\n// console.log(age);\n// printAge();\n\n\n///////////////////////////////////////\n// Hoisting and TDZ in Practice\n\n// Variables\nconsole.log(me);\n// console.log(job);\n// console.log(year);\n\nvar me = 'Jonas';\nlet job = 'teacher';\nconst year = 1991;\n\n// Functions\nconsole.log(addDecl(2, 3));\n// console.log(addExpr(2, 3));\nconsole.log(addArrow);\n// console.log(addArrow(2, 3));\n\nfunction addDecl(a, b) {\n return a + b;\n}\n\nconst addExpr = function (a, b) {\n return a + b;\n};\n\nvar addArrow = (a, b) => a + b;\n\n// Example\nconsole.log(undefined);\nif (!numProducts) deleteShoppingCart();\n\nvar numProducts = 10;\n\nfunction deleteShoppingCart() {\n console.log('All products deleted!');\n}\n\nvar x = 1;\nlet y = 2;\nconst z = 3;\n\nconsole.log(x === window.x);\nconsole.log(y === window.y);\nconsole.log(z === window.z);\n\n\n///////////////////////////////////////\n// The this Keyword in Practice\nconsole.log(this);\n\nconst calcAge = function (birthYear) {\n console.log(2037 - birthYear);\n console.log(this);\n};\ncalcAge(1991);\n\nconst calcAgeArrow = birthYear => {\n console.log(2037 - birthYear);\n console.log(this);\n};\ncalcAgeArrow(1980);\n\nconst jonas = {\n year: 1991,\n calcAge: function () {\n console.log(this);\n console.log(2037 - this.year);\n },\n};\njonas.calcAge();\n\nconst matilda = {\n year: 2017,\n};\n\nmatilda.calcAge = jonas.calcAge;\nmatilda.calcAge();\n\nconst f = jonas.calcAge;\nf();\n\n\n///////////////////////////////////////\n// Regular Functions vs. Arrow Functions\n// var firstName = 'Matilda';\n\nconst jonas = {\n firstName: 'Jonas',\n year: 1991,\n calcAge: function () {\n // console.log(this);\n console.log(2037 - this.year);\n\n // Solution 1\n // const self = this; // self or that\n // const isMillenial = function () {\n // console.log(self);\n // console.log(self.year >= 1981 && self.year <= 1996);\n // };\n\n // Solution 2\n const isMillenial = () => {\n console.log(this);\n console.log(this.year >= 1981 && this.year <= 1996);\n };\n isMillenial();\n },\n\n greet: () => {\n console.log(this);\n console.log(`Hey ${this.firstName}`);\n },\n};\njonas.greet();\njonas.calcAge();\n\n// arguments keyword\nconst addExpr = function (a, b) {\n console.log(arguments);\n return a + b;\n};\naddExpr(2, 5);\naddExpr(2, 5, 8, 12);\n\nvar addArrow = (a, b) => {\n console.log(arguments);\n return a + b;\n};\naddArrow(2, 5, 8);\n\n\n///////////////////////////////////////\n// Object References in Practice (Shallow vs. Deep Copies)\n\nconst jessica1 = {\n firstName: 'Jessica',\n lastName: 'Williams',\n age: 27,\n};\n\nfunction marryPerson(originalPerson, newLastName) {\n originalPerson.lastName = newLastName;\n return originalPerson;\n}\n\nconst marriedJessica = marryPerson(jessica1, 'Davis');\n\n// const marriedJessica = jessica1;\n// marriedJessica.lastName = 'Davis';\n\nconsole.log('Before:', jessica1);\nconsole.log('After:', marriedJessica);\n\nconst jessica = {\n firstName: 'Jessica',\n lastName: 'Williams',\n age: 27,\n familiy: ['Alice', 'Bob'],\n};\n\n// Shallow copy\nconst jessicaCopy = { ...jessica };\njessicaCopy.lastName = 'Davis';\n\n// jessicaCopy.familiy.push('Mary');\n// jessicaCopy.familiy.push('John');\n\n// console.log('Before:', jessica);\n// console.log('After:', jessicaCopy);\n\n// Deep copy/clone\nconst jessicaClone = structuredClone(jessica);\njessicaClone.familiy.push('Mary');\njessicaClone.familiy.push('John');\n\nconsole.log('Original:', jessica);\nconsole.log('Clone:', jessicaClone);\n*/\n" }, { "path": "08-Behind-the-Scenes/starter/.prettierrc", "content": "{\n \"singleQuote\": true,\n \"arrowParens\": \"avoid\"\n}\n" }, { "path": "08-Behind-the-Scenes/starter/index.html", "content": "\n\n \n \n \n \n How JavaScript Works Behind the Scenes\n \n \n \n

How JavaScript Works Behind the Scenes

\n \n \n\n" }, { "path": "08-Behind-the-Scenes/starter/script.js", "content": "'use strict';\n" }, { "path": "09-Data-Structures-Operators/final/.prettierrc", "content": "{\n \"singleQuote\": true,\n \"arrowParens\": \"avoid\"\n}\n" }, { "path": "09-Data-Structures-Operators/final/index.html", "content": "\n\n \n \n \n \n Data Structures and Modern Operators\n \n \n \n

Data Structures and Modern Operators

\n \n \n\n" }, { "path": "09-Data-Structures-Operators/final/script.js", "content": "'use strict';\n\nconst weekdays = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];\nconst openingHours = {\n [weekdays[3]]: {\n open: 12,\n close: 22,\n },\n [weekdays[4]]: {\n open: 11,\n close: 23,\n },\n [weekdays[5]]: {\n open: 0, // Open 24 hours\n close: 24,\n },\n};\n\nconst restaurant = {\n name: 'Classico Italiano',\n location: 'Via Angelo Tavanti 23, Firenze, Italy',\n categories: ['Italian', 'Pizzeria', 'Vegetarian', 'Organic'],\n starterMenu: ['Focaccia', 'Bruschetta', 'Garlic Bread', 'Caprese Salad'],\n mainMenu: ['Pizza', 'Pasta', 'Risotto'],\n\n // ES6 enhanced object literals\n openingHours,\n\n order(starterIndex, mainIndex) {\n return [this.starterMenu[starterIndex], this.mainMenu[mainIndex]];\n },\n\n orderDelivery({ starterIndex = 1, mainIndex = 0, time = '20:00', address }) {\n console.log(\n `Order received! ${this.starterMenu[starterIndex]} and ${this.mainMenu[mainIndex]} will be delivered to ${address} at ${time}`\n );\n },\n\n orderPasta(ing1, ing2, ing3) {\n console.log(\n `Here is your declicious pasta with ${ing1}, ${ing2} and ${ing3}`\n );\n },\n\n orderPizza(mainIngredient, ...otherIngredients) {\n console.log(mainIngredient);\n console.log(otherIngredients);\n },\n};\n\n/*\n///////////////////////////////////////\n// String Methods Practice\n\nconst flights =\n '_Delayed_Departure;fao93766109;txl2133758440;11:25+_Arrival;bru0943384722;fao93766109;11:45+_Delayed_Arrival;hel7439299980;fao93766109;12:05+_Departure;fao93766109;lis2323639855;12:30';\n\n// 🔴 Delayed Departure from FAO to TXL (11h25)\n// Arrival from BRU to FAO (11h45)\n// 🔴 Delayed Arrival from HEL to FAO (12h05)\n// Departure from FAO to LIS (12h30)\n\nconst getCode = str => str.slice(0, 3).toUpperCase();\n\nfor (const flight of flights.split('+')) {\n const [type, from, to, time] = flight.split(';');\n const output = `${type.startsWith('_Delayed') ? '🔴' : ''}${type.replaceAll(\n '_',\n ' '\n )} ${getCode(from)} ${getCode(to)} (${time.replace(':', 'h')})`.padStart(36);\n console.log(output);\n}\n\n///////////////////////////////////////\n// Coding Challenge #4\n\n\nWrite a program that receives a list of variable names written in underscore_case and convert them to camelCase.\n\nThe input will come from a textarea inserted into the DOM (see code below), and conversion will happen when the button is pressed.\n\nTHIS TEST DATA (pasted to textarea)\nunderscore_case\n first_name\nSome_Variable \n calculate_AGE\ndelayed_departure\n\nSHOULD PRODUCE THIS OUTPUT (5 separate console.log outputs)\nunderscoreCase ✅\nfirstName ✅✅\nsomeVariable ✅✅✅\ncalculateAge ✅✅✅✅\ndelayedDeparture ✅✅✅✅✅\n\nHINT 1: Remember which character defines a new line in the textarea 😉\nHINT 2: The solution only needs to work for a variable made out of 2 words, like a_b\nHINT 3: Start without worrying about the ✅. Tackle that only after you have the variable name conversion working 😉\nHINT 4: This challenge is difficult on purpose, so start watching the solution in case you're stuck. Then pause and continue!\n\nAfterwards, test with your own test data!\n\nGOOD LUCK 😀\n*/\n\n/*\ndocument.body.append(document.createElement('textarea'));\ndocument.body.append(document.createElement('button'));\n\ndocument.querySelector('button').addEventListener('click', function () {\n const text = document.querySelector('textarea').value;\n const rows = text.split('\\n');\n\n for (const [i, row] of rows.entries()) {\n const [first, second] = row.toLowerCase().trim().split('_');\n\n const output = `${first}${second.replace(\n second[0],\n second[0].toUpperCase()\n )}`;\n console.log(`${output.padEnd(20)}${'✅'.repeat(i + 1)}`);\n }\n});\n*/\n\n/*\n///////////////////////////////////////\n// Working With Strings - Part 3\n\n// Split and join\nconsole.log('a+very+nice+string'.split('+'));\nconsole.log('Jonas Schmedtmann'.split(' '));\n\nconst [firstName, lastName] = 'Jonas Schmedtmann'.split(' ');\n\nconst newName = ['Mr.', firstName, lastName.toUpperCase()].join(' ');\nconsole.log(newName);\n\nconst capitalizeName = function (name) {\n const names = name.split(' ');\n const namesUpper = [];\n\n for (const n of names) {\n // namesUpper.push(n[0].toUpperCase() + n.slice(1));\n namesUpper.push(n.replace(n[0], n[0].toUpperCase()));\n }\n console.log(namesUpper.join(' '));\n};\n\ncapitalizeName('jessica ann smith davis');\ncapitalizeName('jonas schmedtmann');\n\n// Padding\nconst message = 'Go to gate 23!';\nconsole.log(message.padStart(20, '+').padEnd(30, '+'));\nconsole.log('Jonas'.padStart(20, '+').padEnd(30, '+'));\n\nconst maskCreditCard = function (number) {\n const str = number + '';\n const last = str.slice(-4);\n return last.padStart(str.length, '*');\n};\n\nconsole.log(maskCreditCard(64637836));\nconsole.log(maskCreditCard(43378463864647384));\nconsole.log(maskCreditCard('334859493847755774747'));\n\n// Repeat\nconst message2 = 'Bad waether... All Departues Delayed... ';\nconsole.log(message2.repeat(5));\n\nconst planesInLine = function (n) {\n console.log(`There are ${n} planes in line ${'🛩'.repeat(n)}`);\n};\nplanesInLine(5);\nplanesInLine(3);\nplanesInLine(12);\n\n\n///////////////////////////////////////\n// Working With Strings - Part 2\n\nconst airline = 'TAP Air Portugal';\n\nconsole.log(airline.toLowerCase());\nconsole.log(airline.toUpperCase());\n\n// Fix capitalization in name\nconst passenger = 'jOnAS'; // Jonas\nconst passengerLower = passenger.toLowerCase();\nconst passengerCorrect =\n passengerLower[0].toUpperCase() + passengerLower.slice(1);\nconsole.log(passengerCorrect);\n\n// Comparing emails\nconst email = 'hello@jonas.io';\nconst loginEmail = ' Hello@Jonas.Io \\n';\n\n// const lowerEmail = loginEmail.toLowerCase();\n// const trimmedEmail = lowerEmail.trim();\nconst normalizedEmail = loginEmail.toLowerCase().trim();\nconsole.log(normalizedEmail);\nconsole.log(email === normalizedEmail);\n\n// replacing\nconst priceGB = '288,97£';\nconst priceUS = priceGB.replace('£', '$').replace(',', '.');\nconsole.log(priceUS);\n\nconst announcement =\n 'All passengers come to boarding door 23. Boarding door 23!';\n\nconsole.log(announcement.replace('door', 'gate'));\nconsole.log(announcement.replaceAll('door', 'gate'));\n\n// Alternative solution to replaceAll with regular expression\nconsole.log(announcement.replace(/door/g, 'gate'));\n\n// Booleans\nconst plane = 'Airbus A320neo';\nconsole.log(plane.includes('A320'));\nconsole.log(plane.includes('Boeing'));\nconsole.log(plane.startsWith('Airb'));\n\nif (plane.startsWith('Airbus') && plane.endsWith('neo')) {\n console.log('Part of the NEW ARirbus family');\n}\n\n// Practice exercise\nconst checkBaggage = function (items) {\n const baggage = items.toLowerCase();\n\n if (baggage.includes('knife') || baggage.includes('gun')) {\n console.log('You are NOT allowed on board');\n } else {\n console.log('Welcome aboard!');\n }\n};\n\ncheckBaggage('I have a laptop, some Food and a pocket Knife');\ncheckBaggage('Socks and camera');\ncheckBaggage('Got some snacks and a gun for protection');\n\n\n///////////////////////////////////////\n// Working With Strings - Part 1\nconst airline = 'TAP Air Portugal';\nconst plane = 'A320';\n\nconsole.log(plane[0]);\nconsole.log(plane[1]);\nconsole.log(plane[2]);\nconsole.log('B737'[0]);\n\nconsole.log(airline.length);\nconsole.log('B737'.length);\n\nconsole.log(airline.indexOf('r'));\nconsole.log(airline.lastIndexOf('r'));\nconsole.log(airline.indexOf('portugal'));\n\nconsole.log(airline.slice(4));\nconsole.log(airline.slice(4, 7));\n\nconsole.log(airline.slice(0, airline.indexOf(' ')));\nconsole.log(airline.slice(airline.lastIndexOf(' ') + 1));\n\nconsole.log(airline.slice(-2));\nconsole.log(airline.slice(1, -1));\n\nconst checkMiddleSeat = function (seat) {\n // B and E are middle seats\n const s = seat.slice(-1);\n if (s === 'B' || s === 'E') console.log('You got the middle seat 😬');\n else console.log('You got lucky 😎');\n};\n\ncheckMiddleSeat('11B');\ncheckMiddleSeat('23C');\ncheckMiddleSeat('3E');\n\nconsole.log(new String('jonas'));\nconsole.log(typeof new String('jonas'));\n\nconsole.log(typeof new String('jonas').slice(1));\n*/\n\n///////////////////////////////////////\n// Coding Challenge #3\n\n/* \nLet's continue with our football betting app! This time, we have a map with a log of the events that happened during the game. The values are the events themselves, and the keys are the minutes in which each event happened (a football game has 90 minutes plus some extra time).\n\n1. Create an array 'events' of the different game events that happened (no duplicates)\n2. After the game has finished, is was found that the yellow card from minute 64 was unfair. So remove this event from the game events log.\n3. Print the following string to the console: \"An event happened, on average, every 9 minutes\" (keep in mind that a game has 90 minutes)\n4. Loop over the events and log them to the console, marking whether it's in the first half or second half (after 45 min) of the game, like this:\n [FIRST HALF] 17: ⚽️ GOAL\n\nGOOD LUCK 😀\n*/\n\nconst gameEvents = new Map([\n [17, '⚽️ GOAL'],\n [36, '🔁 Substitution'],\n [47, '⚽️ GOAL'],\n [61, '🔁 Substitution'],\n [64, '🔶 Yellow card'],\n [69, '🔴 Red card'],\n [70, '🔁 Substitution'],\n [72, '🔁 Substitution'],\n [76, '⚽️ GOAL'],\n [80, '⚽️ GOAL'],\n [92, '🔶 Yellow card'],\n]);\n\n/*\n// 1.\nconst events = [...new Set(gameEvents.values())];\nconsole.log(events);\n\n// 2.\ngameEvents.delete(64);\n\n// 3.\nconsole.log(\n `An event happened, on average, every ${90 / gameEvents.size} minutes`\n);\nconst time = [...gameEvents.keys()].pop();\nconsole.log(time);\nconsole.log(\n `An event happened, on average, every ${time / gameEvents.size} minutes`\n);\n\n// 4.\nfor (const [min, event] of gameEvents) {\n const half = min <= 45 ? 'FIRST' : 'SECOND';\n console.log(`[${half} HALF] ${min}: ${event}`);\n}\n*/\n\n/*\n///////////////////////////////////////\n// Maps: Iteration\nconst question = new Map([\n ['question', 'What is the best programming language in the world?'],\n [1, 'C'],\n [2, 'Java'],\n [3, 'JavaScript'],\n ['correct', 3],\n [true, 'Correct 🎉'],\n [false, 'Try again!'],\n]);\nconsole.log(question);\n\n// Convert object to map\nconsole.log(Object.entries(openingHours));\nconst hoursMap = new Map(Object.entries(openingHours));\nconsole.log(hoursMap);\n\n// Quiz app\nconsole.log(question.get('question'));\nfor (const [key, value] of question) {\n if (typeof key === 'number') console.log(`Answer ${key}: ${value}`);\n}\n// const answer = Number(prompt('Your answer'));\nconst answer = 3;\nconsole.log(answer);\n\nconsole.log(question.get(question.get('correct') === answer));\n\n// Convert map to array\nconsole.log([...question]);\n// console.log(question.entries());\nconsole.log([...question.keys()]);\nconsole.log([...question.values()]);\n\n\n///////////////////////////////////////\n// Maps: Fundamentals\nconst rest = new Map();\nrest.set('name', 'Classico Italiano');\nrest.set(1, 'Firenze, Italy');\nconsole.log(rest.set(2, 'Lisbon, Portugal'));\n\nrest\n .set('categories', ['Italian', 'Pizzeria', 'Vegetarian', 'Organic'])\n .set('open', 11)\n .set('close', 23)\n .set(true, 'We are open :D')\n .set(false, 'We are closed :(');\n\nconsole.log(rest.get('name'));\nconsole.log(rest.get(true));\nconsole.log(rest.get(1));\n\nconst time = 8;\nconsole.log(rest.get(time > rest.get('open') && time < rest.get('close')));\n\nconsole.log(rest.has('categories'));\nrest.delete(2);\n// rest.clear();\n\nconst arr = [1, 2];\nrest.set(arr, 'Test');\nrest.set(document.querySelector('h1'), 'Heading');\nconsole.log(rest);\nconsole.log(rest.size);\n\nconsole.log(rest.get(arr));\n\n\n///////////////////////////////////////\n// New Operations to Make Sets Useful!\n\nconst italianFoods = new Set([\n 'pasta',\n 'gnocchi',\n 'tomatoes',\n 'olive oil',\n 'garlic',\n 'basil',\n]);\n\nconst mexicanFoods = new Set([\n 'tortillas',\n 'beans',\n 'rice',\n 'tomatoes',\n 'avocado',\n 'garlic',\n]);\n\nconst commonFoods = italianFoods.intersection(mexicanFoods);\nconsole.log('Intersection:', commonFoods);\nconsole.log([...commonFoods]);\n\nconst italianMexicanFusion = italianFoods.union(mexicanFoods);\nconsole.log('Union:', italianMexicanFusion);\n\nconsole.log([...new Set([...italianFoods, ...mexicanFoods])]);\n\nconst uniqueItalianFoods = italianFoods.difference(mexicanFoods);\nconsole.log('Difference italian', uniqueItalianFoods);\n\nconst uniqueMexicanFoods = mexicanFoods.difference(italianFoods);\nconsole.log('Difference mexican', uniqueMexicanFoods);\n\nconst uniqueItalianAndMexicanFoods =\n italianFoods.symmetricDifference(mexicanFoods);\nconsole.log(uniqueItalianAndMexicanFoods);\n\nconsole.log(italianFoods.isDisjointFrom(mexicanFoods));\n\n\n///////////////////////////////////////\n// Sets\nconst ordersSet = new Set([\n 'Pasta',\n 'Pizza',\n 'Pizza',\n 'Risotto',\n 'Pasta',\n 'Pizza',\n]);\nconsole.log(ordersSet);\n\nconsole.log(new Set('Jonas'));\n\nconsole.log(ordersSet.size);\nconsole.log(ordersSet.has('Pizza'));\nconsole.log(ordersSet.has('Bread'));\nordersSet.add('Garlic Bread');\nordersSet.add('Garlic Bread');\nordersSet.delete('Risotto');\n// ordersSet.clear();\nconsole.log(ordersSet);\n\nfor (const order of ordersSet) console.log(order);\n\n// Example\nconst staff = ['Waiter', 'Chef', 'Waiter', 'Manager', 'Chef', 'Waiter'];\nconst staffUnique = [...new Set(staff)];\nconsole.log(staffUnique);\n\nconsole.log(\n new Set(['Waiter', 'Chef', 'Waiter', 'Manager', 'Chef', 'Waiter']).size\n);\n\nconsole.log(new Set('jonasschmedtmann').size);\n*/\n\n///////////////////////////////////////\n// Coding Challenge #2\n\n/* \nLet's continue with our football betting app!\n\n1. Loop over the game.scored array and print each player name to the console, along with the goal number (Example: \"Goal 1: Lewandowski\")\n2. 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)\n3. Print the 3 odds to the console, but in a nice formatted way, exaclty like this:\n Odd of victory Bayern Munich: 1.33\n Odd of draw: 3.25\n Odd of victory Borrussia Dortmund: 6.5\nGet 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 😉\n\nBONUS: 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:\n {\n Gnarby: 1,\n Hummels: 1,\n Lewandowski: 2\n }\n\nGOOD LUCK 😀\n*/\n\nconst game = {\n team1: 'Bayern Munich',\n team2: 'Borrussia Dortmund',\n players: [\n [\n 'Neuer',\n 'Pavard',\n 'Martinez',\n 'Alaba',\n 'Davies',\n 'Kimmich',\n 'Goretzka',\n 'Coman',\n 'Muller',\n 'Gnarby',\n 'Lewandowski',\n ],\n [\n 'Burki',\n 'Schulz',\n 'Hummels',\n 'Akanji',\n 'Hakimi',\n 'Weigl',\n 'Witsel',\n 'Hazard',\n 'Brandt',\n 'Sancho',\n 'Gotze',\n ],\n ],\n score: '4:0',\n scored: ['Lewandowski', 'Gnarby', 'Lewandowski', 'Hummels'],\n date: 'Nov 9th, 2037',\n odds: {\n team1: 1.33,\n x: 3.25,\n team2: 6.5,\n },\n};\n\n/*\n// 1.\nfor (const [i, player] of game.scored.entries())\n console.log(`Goal ${i + 1}: ${player}`);\n\n// 2.\nconst odds = Object.values(game.odds);\nlet average = 0;\nfor (const odd of odds) average += odd;\naverage /= odds.length;\nconsole.log(average);\n\n// 3.\nfor (const [team, odd] of Object.entries(game.odds)) {\n const teamStr = team === 'x' ? 'draw' : `victory ${game[team]}`;\n console.log(`Odd of ${teamStr} ${odd}`);\n}\n\n// Odd of victory Bayern Munich: 1.33\n// Odd of draw: 3.25\n// Odd of victory Borrussia Dortmund: 6.5\n\n// BONUS\n// So the solution is to loop over the array, and add the array elements as object properties, and then increase the count as we encounter a new occurence of a certain element\nconst scorers = {};\nfor (const player of game.scored) {\n scorers[player] ? scorers[player]++ : (scorers[player] = 1);\n}\n*/\n\n/*\n///////////////////////////////////////\n// Looping Objects: Object Keys, Values, and Entries\n\n// Property NAMES\nconst properties = Object.keys(openingHours);\nconsole.log(properties);\n\nlet openStr = `We are open on ${properties.length} days: `;\nfor (const day of properties) {\n openStr += `${day}, `;\n}\nconsole.log(openStr);\n\n// Property VALUES\nconst values = Object.values(openingHours);\nconsole.log(values);\n\n// Entire object\nconst entries = Object.entries(openingHours);\n// console.log(entries);\n\n// [key, value]\nfor (const [day, { open, close }] of entries) {\n console.log(`On ${day} we open at ${open} and close at ${close}`);\n}\n\n\n///////////////////////////////////////\n// Optional Chaining\nif (restaurant.openingHours && restaurant.openingHours.mon)\n console.log(restaurant.openingHours.mon.open);\n\n// console.log(restaurant.openingHours.mon.open);\n\n// WITH optional chaining\nconsole.log(restaurant.openingHours.mon?.open);\nconsole.log(restaurant.openingHours?.mon?.open);\n\n// Example\nconst days = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];\n\nfor (const day of days) {\n const open = restaurant.openingHours[day]?.open ?? 'closed';\n console.log(`On ${day}, we open at ${open}`);\n}\n\n// Methods\nconsole.log(restaurant.order?.(0, 1) ?? 'Method does not exist');\nconsole.log(restaurant.orderRisotto?.(0, 1) ?? 'Method does not exist');\n\n// Arrays\nconst users = [{ name: 'Jonas', email: 'hello@jonas.io' }];\n// const users = [];\n\nconsole.log(users[0]?.name ?? 'User array empty');\n\nif (users.length > 0) console.log(users[0].name);\nelse console.log('user array empty');\n\n\n///////////////////////////////////////\n// The for-of Loop\nconst menu = [...restaurant.starterMenu, ...restaurant.mainMenu];\n\nfor (const item of menu) console.log(item);\n\nfor (const [i, el] of menu.entries()) {\n console.log(`${i + 1}: ${el}`);\n}\n\n// console.log([...menu.entries()]);\n*/\n\n///////////////////////////////////////\n// Coding Challenge #1\n\n/* \nWe're building a football betting app (soccer for my American friends 😅)!\n\nSuppose 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:\n\n1. Create one player array for each team (variables 'players1' and 'players2')\n2. 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\n3. Create an array 'allPlayers' containing all players of both teams (22 players)\n4. 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'\n5. Based on the game.odds object, create one variable for each odd (called 'team1', 'draw' and 'team2')\n6. 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)\n7. 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.\n\nTEST DATA FOR 6: Use players 'Davies', 'Muller', 'Lewandowski' and 'Kimmich'. Then, call the function again with players from game.scored\n\nGOOD LUCK 😀\n*/\n\n/*\n// 1.\nconst [players1, players2] = game.players;\nconsole.log(players1, players2);\n\n// 2.\nconst [gk, ...fieldPlayers] = players1;\nconsole.log(gk, fieldPlayers);\n\n// 3.\nconst allPlayers = [...players1, ...players2];\nconsole.log(allPlayers);\n\n// 4.\nconst players1Final = [...players1, 'Thiago', 'Coutinho', 'Periscic'];\n\n// 5.\nconst {\n odds: { team1, x: draw, team2 },\n} = game;\nconsole.log(team1, draw, team2);\n\n// 6.\nconst printGoals = function (...players) {\n console.log(players);\n console.log(`${players.length} goals were scored`);\n};\n\n// printGoals('Davies', 'Muller', 'Lewandowski', 'Kimmich');\n// printGoals('Davies', 'Muller');\nprintGoals(...game.scored);\n\n// 7.\nteam1 < team2 && console.log('Team 1 is more likely to win');\nteam1 > team2 && console.log('Team 2 is more likely to win');\n\n\n///////////////////////////////////////\n// Logical Assignment Operators\nconst rest1 = {\n name: 'Capri',\n // numGuests: 20,\n numGuests: 0,\n};\n\nconst rest2 = {\n name: 'La Piazza',\n owner: 'Giovanni Rossi',\n};\n\n// OR assignment operator\n// rest1.numGuests = rest1.numGuests || 10;\n// rest2.numGuests = rest2.numGuests || 10;\n// rest1.numGuests ||= 10;\n// rest2.numGuests ||= 10;\n\n// nullish assignment operator (null or undefined)\nrest1.numGuests ??= 10;\nrest2.numGuests ??= 10;\n\n// AND assignment operator\n// rest1.owner = rest1.owner && '';\n// rest2.owner = rest2.owner && '';\nrest1.owner &&= '';\nrest2.owner &&= '';\n\nconsole.log(rest1);\nconsole.log(rest2);\n\n\n///////////////////////////////////////\n// The Nullish Coalescing Operator\nrestaurant.numGuests = 0;\nconst guests = restaurant.numGuests || 10;\nconsole.log(guests);\n\n// Nullish: null and undefined (NOT 0 or '')\nconst guestCorrect = restaurant.numGuests ?? 10;\nconsole.log(guestCorrect);\n\n\n///////////////////////////////////////\n// Short Circuiting (&& and ||)\n\nconsole.log('---- OR ----');\n// Use ANY data type, return ANY data type, short-circuiting\nconsole.log(3 || 'Jonas');\nconsole.log('' || 'Jonas');\nconsole.log(true || 0);\nconsole.log(undefined || null);\n\nconsole.log(undefined || 0 || '' || 'Hello' || 23 || null);\n\nrestaurant.numGuests = 0;\nconst guests1 = restaurant.numGuests ? restaurant.numGuests : 10;\nconsole.log(guests1);\n\nconst guests2 = restaurant.numGuests || 10;\nconsole.log(guests2);\n\nconsole.log('---- AND ----');\nconsole.log(0 && 'Jonas');\nconsole.log(7 && 'Jonas');\n\nconsole.log('Hello' && 23 && null && 'jonas');\n\n// Practical example\nif (restaurant.orderPizza) {\n restaurant.orderPizza('mushrooms', 'spinach');\n}\n\nrestaurant.orderPizza && restaurant.orderPizza('mushrooms', 'spinach');\n\n\n///////////////////////////////////////\n// Rest Pattern and Parameters\n// 1) Destructuring\n\n// SPREAD, because on RIGHT side of =\nconst arr = [1, 2, ...[3, 4]];\n\n// REST, because on LEFT side of =\nconst [a, b, ...others] = [1, 2, 3, 4, 5];\nconsole.log(a, b, others);\n\nconst [pizza, , risotto, ...otherFood] = [\n ...restaurant.mainMenu,\n ...restaurant.starterMenu,\n];\nconsole.log(pizza, risotto, otherFood);\n\n// Objects\nconst { sat, ...weekdays } = restaurant.openingHours;\nconsole.log(weekdays);\n\n// 2) Functions\nconst add = function (...numbers) {\n let sum = 0;\n for (let i = 0; i < numbers.length; i++) sum += numbers[i];\n console.log(sum);\n};\n\nadd(2, 3);\nadd(5, 3, 7, 2);\nadd(8, 2, 5, 3, 2, 1, 4);\n\nconst x = [23, 5, 7];\nadd(...x);\n\nrestaurant.orderPizza('mushrooms', 'onion', 'olives', 'spinach');\nrestaurant.orderPizza('mushrooms');\n\n\n///////////////////////////////////////\n// The Spread Operator (...)\n\nconst arr = [7, 8, 9];\nconst badNewArr = [1, 2, arr[0], arr[1], arr[2]];\nconsole.log(badNewArr);\n\nconst newArr = [1, 2, ...arr];\nconsole.log(newArr);\n\nconsole.log(...newArr);\nconsole.log(1, 2, 7, 8, 9);\n\nconst newMenu = [...restaurant.mainMenu, 'Gnocci'];\nconsole.log(newMenu);\n\n// Copy array\nconst mainMenuCopy = [...restaurant.mainMenu];\n\n// Join 2 arrays\nconst menu = [...restaurant.starterMenu, ...restaurant.mainMenu];\nconsole.log(menu);\n\n// Iterables: arrays, strings, maps, sets. NOT objects\nconst str = 'Jonas';\nconst letters = [...str, ' ', 'S.'];\nconsole.log(letters);\nconsole.log(...str);\n// console.log(`${...str} Schmedtmann`);\n\n// Real-world example\nconst ingredients = [\n // prompt(\"Let's make pasta! Ingredient 1?\"),\n // prompt('Ingredient 2?'),\n // prompt('Ingredient 3'),\n];\nconsole.log(ingredients);\n\nrestaurant.orderPasta(ingredients[0], ingredients[1], ingredients[2]);\nrestaurant.orderPasta(...ingredients);\n\n// Objects\nconst newRestaurant = { foundedIn: 1998, ...restaurant, founder: 'Guiseppe' };\nconsole.log(newRestaurant);\n\nconst restaurantCopy = { ...restaurant };\nrestaurantCopy.name = 'Ristorante Roma';\nconsole.log(restaurantCopy.name);\nconsole.log(restaurant.name);\n\n\n///////////////////////////////////////\n// Destructuring Objects\nrestaurant.orderDelivery({\n time: '22:30',\n address: 'Via del Sole, 21',\n mainIndex: 2,\n starterIndex: 2,\n});\n\nrestaurant.orderDelivery({\n address: 'Via del Sole, 21',\n starterIndex: 1,\n});\n\nconst { name, openingHours, categories } = restaurant;\nconsole.log(name, openingHours, categories);\n\nconst {\n name: restaurantName,\n openingHours: hours,\n categories: tags,\n} = restaurant;\nconsole.log(restaurantName, hours, tags);\n\n// Default values\nconst { menu = [], starterMenu: starters = [] } = restaurant;\nconsole.log(menu, starters);\n\n// Mutating variables\nlet a = 111;\nlet b = 999;\nconst obj = { a: 23, b: 7, c: 14 };\n({ a, b } = obj);\nconsole.log(a, b);\n\n// Nested objects\nconst {\n fri: { open: o, close: c },\n} = openingHours;\nconsole.log(o, c);\n\n\n///////////////////////////////////////\n// Destructuring Arrays\nconst arr = [2, 3, 4];\nconst a = arr[0];\nconst b = arr[1];\nconst c = arr[2];\n\nconst [x, y, z] = arr;\nconsole.log(x, y, z);\nconsole.log(arr);\n\nlet [main, , secondary] = restaurant.categories;\nconsole.log(main, secondary);\n\n// Switching variables\n// const temp = main;\n// main = secondary;\n// secondary = temp;\n// console.log(main, secondary);\n\n[main, secondary] = [secondary, main];\nconsole.log(main, secondary);\n\n// Receive 2 return values from a function\nconst [starter, mainCourse] = restaurant.order(2, 0);\nconsole.log(starter, mainCourse);\n\n// Nested destructuring\nconst nested = [2, 4, [5, 6]];\n// const [i, , j] = nested;\nconst [i, , [j, k]] = nested;\nconsole.log(i, j, k);\n\n// Default values\nconst [p = 1, q = 1, r = 1] = [8, 9];\nconsole.log(p, q, r);\n*/\n" }, { "path": "09-Data-Structures-Operators/starter/.prettierrc", "content": "{\n \"singleQuote\": true,\n \"arrowParens\": \"avoid\"\n}\n" }, { "path": "09-Data-Structures-Operators/starter/index.html", "content": "\n\n \n \n \n \n Data Structures and Modern Operators\n \n \n \n

Data Structures and Modern Operators

\n \n \n\n" }, { "path": "09-Data-Structures-Operators/starter/script.js", "content": "'use strict';\n\n// Data needed for a later exercise\nconst flights =\n '_Delayed_Departure;fao93766109;txl2133758440;11:25+_Arrival;bru0943384722;fao93766109;11:45+_Delayed_Arrival;hel7439299980;fao93766109;12:05+_Departure;fao93766109;lis2323639855;12:30';\n\nconst italianFoods = new Set([\n 'pasta',\n 'gnocchi',\n 'tomatoes',\n 'olive oil',\n 'garlic',\n 'basil',\n]);\n\nconst mexicanFoods = new Set([\n 'tortillas',\n 'beans',\n 'rice',\n 'tomatoes',\n 'avocado',\n 'garlic',\n]);\n\n// Data needed for first part of the section\nconst restaurant = {\n name: 'Classico Italiano',\n location: 'Via Angelo Tavanti 23, Firenze, Italy',\n categories: ['Italian', 'Pizzeria', 'Vegetarian', 'Organic'],\n starterMenu: ['Focaccia', 'Bruschetta', 'Garlic Bread', 'Caprese Salad'],\n mainMenu: ['Pizza', 'Pasta', 'Risotto'],\n\n openingHours: {\n thu: {\n open: 12,\n close: 22,\n },\n fri: {\n open: 11,\n close: 23,\n },\n sat: {\n open: 0, // Open 24 hours\n close: 24,\n },\n },\n};\n" }, { "path": "10-Functions/final/.prettierrc", "content": "{\n \"singleQuote\": true,\n \"arrowParens\": \"avoid\"\n}\n" }, { "path": "10-Functions/final/index.html", "content": "\n\n \n \n \n \n A Closer Look at Functions\n \n \n \n

A Closer Look at Functions

\n \n \n \n \n\n" }, { "path": "10-Functions/final/script.js", "content": "'use strict';\n\n/*\n///////////////////////////////////////\n// Default Parameters\nconst bookings = [];\n\nconst createBooking = function (\n flightNum,\n numPassengers = 1,\n price = 199 * numPassengers\n) {\n // ES5\n // numPassengers = numPassengers || 1;\n // price = price || 199;\n\n const booking = {\n flightNum,\n numPassengers,\n price,\n };\n console.log(booking);\n bookings.push(booking);\n};\n\ncreateBooking('LH123');\ncreateBooking('LH123', 2, 800);\ncreateBooking('LH123', 2);\ncreateBooking('LH123', 5);\n\ncreateBooking('LH123', undefined, 1000);\n\n\n///////////////////////////////////////\n// How Passing Arguments Works: Values vs. Reference\nconst flight = 'LH234';\nconst jonas = {\n name: 'Jonas Schmedtmann',\n passport: 24739479284,\n};\n\nconst checkIn = function (flightNum, passenger) {\n flightNum = 'LH999';\n passenger.name = 'Mr. ' + passenger.name;\n\n if (passenger.passport === 24739479284) {\n alert('Checked in');\n } else {\n alert('Wrong passport!');\n }\n};\n\n// checkIn(flight, jonas);\n// console.log(flight);\n// console.log(jonas);\n\n// Is the same as doing...\n// const flightNum = flight;\n// const passenger = jonas;\n\nconst newPassport = function (person) {\n person.passport = Math.trunc(Math.random() * 100000000000);\n};\n\nnewPassport(jonas);\ncheckIn(flight, jonas);\n\n\n///////////////////////////////////////\n// Functions Accepting Callback Functions\nconst oneWord = function (str) {\n return str.replace(/ /g, '').toLowerCase();\n};\n\nconst upperFirstWord = function (str) {\n const [first, ...others] = str.split(' ');\n return [first.toUpperCase(), ...others].join(' ');\n};\n\n// Higher-order function\nconst transformer = function (str, fn) {\n console.log(`Original string: ${str}`);\n console.log(`Transformed string: ${fn(str)}`);\n\n console.log(`Transformed by: ${fn.name}`);\n};\n\ntransformer('JavaScript is the best!', upperFirstWord);\ntransformer('JavaScript is the best!', oneWord);\n\n// JS uses callbacks all the time\nconst high5 = function () {\n console.log('👋');\n};\ndocument.body.addEventListener('click', high5);\n['Jonas', 'Martha', 'Adam'].forEach(high5);\n\n\n///////////////////////////////////////\n// Functions Returning Functions\nconst greet = function (greeting) {\n return function (name) {\n console.log(`${greeting} ${name}`);\n };\n};\n\nconst greeterHey = greet('Hey');\ngreeterHey('Jonas');\ngreeterHey('Steven');\n\ngreet('Hello')('Jonas');\n\n// Challenge\nconst greetArr = greeting => name => console.log(`${greeting} ${name}`);\n\ngreetArr('Hi')('Jonas');\n\n\n///////////////////////////////////////\n// The call and apply Methods\nconst lufthansa = {\n airline: 'Lufthansa',\n iataCode: 'LH',\n bookings: [],\n // book: function() {}\n book(flightNum, name) {\n console.log(\n `${name} booked a seat on ${this.airline} flight ${this.iataCode}${flightNum}`\n );\n this.bookings.push({ flight: `${this.iataCode}${flightNum}`, name });\n },\n};\n\nlufthansa.book(239, 'Jonas Schmedtmann');\nlufthansa.book(635, 'John Smith');\n\nconst eurowings = {\n airline: 'Eurowings',\n iataCode: 'EW',\n bookings: [],\n};\n\nconst book = lufthansa.book;\n\n// Does NOT work\n// book(23, 'Sarah Williams');\n\n// Call method\nbook.call(eurowings, 23, 'Sarah Williams');\nconsole.log(eurowings);\n\nbook.call(lufthansa, 239, 'Mary Cooper');\nconsole.log(lufthansa);\n\nconst swiss = {\n airline: 'Swiss Air Lines',\n iataCode: 'LX',\n bookings: [],\n};\n\nbook.call(swiss, 583, 'Mary Cooper');\n\n// Apply method\nconst flightData = [583, 'George Cooper'];\nbook.apply(swiss, flightData);\nconsole.log(swiss);\n\nbook.call(swiss, ...flightData);\n\n///////////////////////////////////////\n// The bind Method\n// book.call(eurowings, 23, 'Sarah Williams');\n\nconst bookEW = book.bind(eurowings);\nconst bookLH = book.bind(lufthansa);\nconst bookLX = book.bind(swiss);\n\nbookEW(23, 'Steven Williams');\n\nconst bookEW23 = book.bind(eurowings, 23);\nbookEW23('Jonas Schmedtmann');\nbookEW23('Martha Cooper');\n\n// With Event Listeners\nlufthansa.planes = 300;\nlufthansa.buyPlane = function () {\n console.log(this);\n\n this.planes++;\n console.log(this.planes);\n};\n// lufthansa.buyPlane();\n\ndocument\n .querySelector('.buy')\n .addEventListener('click', lufthansa.buyPlane.bind(lufthansa));\n\n// Partial application\nconst addTax = (rate, value) => value + value * rate;\nconsole.log(addTax(0.1, 200));\n\nconst addVAT = addTax.bind(null, 0.23);\n// addVAT = value => value + value * 0.23;\n\nconsole.log(addVAT(100));\nconsole.log(addVAT(23));\n\nconst addTaxRate = function (rate) {\n return function (value) {\n return value + value * rate;\n };\n};\nconst addVAT2 = addTaxRate(0.23);\nconsole.log(addVAT2(100));\nconsole.log(addVAT2(23));\n*/\n\n///////////////////////////////////////\n// Coding Challenge #1\n\n/* \nLet's build a simple poll app!\n\nA poll has a question, an array of options from which people can choose, and an array with the number of replies for each option. This data is stored in the starter object below.\n\nHere are your tasks:\n\n1. Create a method called 'registerNewAnswer' on the 'poll' object. The method does 2 things:\n 1.1. Display a prompt window for the user to input the number of the selected option. The prompt should look like this:\n What is your favourite programming language?\n 0: JavaScript\n 1: Python\n 2: Rust\n 3: C++\n (Write option number)\n \n 1.2. Based on the input number, update the answers array. For example, if the option is 3, increase the value AT POSITION 3 of the array by 1. Make sure to check if the input is a number and if the number makes sense (e.g answer 52 wouldn't make sense, right?)\n2. Call this method whenever the user clicks the \"Answer poll\" button.\n3. Create a method 'displayResults' which displays the poll results. The method takes a string as an input (called 'type'), which can be either 'string' or 'array'. If type is 'array', simply display the results array as it is, using console.log(). This should be the default option. If type is 'string', display a string like \"Poll results are 13, 2, 4, 1\". \n4. Run the 'displayResults' method at the end of each 'registerNewAnswer' method call.\n\nHINT: Use many of the tools you learned about in this and the last section 😉\n\nBONUS: Use the 'displayResults' method to display the 2 arrays in the test data. Use both the 'array' and the 'string' option. Do NOT put the arrays in the poll object! So what shoud the this keyword look like in this situation?\n\nBONUS TEST DATA 1: [5, 2, 3]\nBONUS TEST DATA 2: [1, 5, 3, 9, 6, 1]\n\nGOOD LUCK 😀\n*/\n\n/*\nconst poll = {\n question: 'What is your favourite programming language?',\n options: ['0: JavaScript', '1: Python', '2: Rust', '3: C++'],\n // This generates [0, 0, 0, 0]. More in the next section 😃\n answers: new Array(4).fill(0),\n registerNewAnswer() {\n // Get answer\n const answer = Number(\n prompt(\n `${this.question}\\n${this.options.join('\\n')}\\n(Write option number)`\n )\n );\n console.log(answer);\n\n // Register answer\n typeof answer === 'number' &&\n answer < this.answers.length &&\n this.answers[answer]++;\n\n this.displayResults();\n this.displayResults('string');\n },\n\n displayResults(type = 'array') {\n if (type === 'array') {\n console.log(this.answers);\n } else if (type === 'string') {\n // Poll results are 13, 2, 4, 1\n console.log(`Poll results are ${this.answers.join(', ')}`);\n }\n },\n};\n\ndocument\n .querySelector('.poll')\n .addEventListener('click', poll.registerNewAnswer.bind(poll));\n\npoll.displayResults.call({ answers: [5, 2, 3] }, 'string');\npoll.displayResults.call({ answers: [1, 5, 3, 9, 6, 1] }, 'string');\npoll.displayResults.call({ answers: [1, 5, 3, 9, 6, 1] });\n\n// [5, 2, 3]\n// [1, 5, 3, 9, 6, 1]\n\n\n///////////////////////////////////////\n// Immediately Invoked Function Expressions (IIFE)\nconst runOnce = function () {\n console.log('This will never run again');\n};\nrunOnce();\n\n// IIFE\n(function () {\n console.log('This will never run again');\n const isPrivate = 23;\n})();\n\n// console.log(isPrivate);\n\n(() => console.log('This will ALSO never run again'))();\n\n{\n const isPrivate = 23;\n var notPrivate = 46;\n}\n// console.log(isPrivate);\nconsole.log(notPrivate);\n\n\n///////////////////////////////////////\n// Closures\nconst secureBooking = function () {\n let passengerCount = 0;\n\n return function () {\n passengerCount++;\n console.log(`${passengerCount} passengers`);\n };\n};\n\nconst booker = secureBooking();\n\nbooker();\nbooker();\nbooker();\n\nconsole.dir(booker);\n\n\n///////////////////////////////////////\n// More Closure Examples\n// Example 1\nlet f;\n\nconst g = function () {\n const a = 23;\n f = function () {\n console.log(a * 2);\n };\n};\n\nconst h = function () {\n const b = 777;\n f = function () {\n console.log(b * 2);\n };\n};\n\ng();\nf();\nconsole.dir(f);\n\n// Re-assigning f function\nh();\nf();\nconsole.dir(f);\n\n// Example 2\nconst boardPassengers = function (n, wait) {\n const perGroup = n / 3;\n\n setTimeout(function () {\n console.log(`We are now boarding all ${n} passengers`);\n console.log(`There are 3 groups, each with ${perGroup} passengers`);\n }, wait * 1000);\n\n console.log(`Will start boarding in ${wait} seconds`);\n};\n\nconst perGroup = 1000;\nboardPassengers(180, 3);\n*/\n\n///////////////////////////////////////\n// Coding Challenge #2\n\n/* \nThis is more of a thinking challenge than a coding challenge 🤓\n\nTake the IIFE below and at the end of the function, attach an event listener that changes the color of the selected h1 element ('header') to blue, each time the BODY element is clicked. Do NOT select the h1 element again!\n\nAnd now explain to YOURSELF (or someone around you) WHY this worked! Take all the time you need. Think about WHEN exactly the callback function is executed, and what that means for the variables involved in this example.\n\nGOOD LUCK 😀\n*/\n\n/*\n(function () {\n const header = document.querySelector('h1');\n header.style.color = 'red';\n\n document.querySelector('body').addEventListener('click', function () {\n header.style.color = 'blue';\n });\n})();\n*/\n\n" }, { "path": "10-Functions/starter/.prettierrc", "content": "{\n \"singleQuote\": true,\n \"arrowParens\": \"avoid\"\n}\n" }, { "path": "10-Functions/starter/index.html", "content": "\n\n \n \n \n \n A Closer Look at Functions\n \n \n \n

A Closer Look at Functions

\n \n \n \n \n\n" }, { "path": "10-Functions/starter/script.js", "content": "'use strict';\n" }, { "path": "11-Arrays-Bankist/final/.prettierrc", "content": "{\n \"singleQuote\": true,\n \"arrowParens\": \"avoid\"\n}\n" }, { "path": "11-Arrays-Bankist/final/index.html", "content": "\n\n \n \n \n \n \n\n \n\n \n Bankist\n \n \n \n \n\n
\n \n
\n
\n

Current balance

\n

\n As of 05/03/2037\n

\n
\n

0000€

\n
\n\n \n
\n
\n
2 deposit
\n
3 days ago
\n
4 000€
\n
\n
\n
\n 1 withdrawal\n
\n
24/01/2037
\n
-378€
\n
\n
\n\n \n
\n

In

\n

0000€

\n

Out

\n

0000€

\n

Interest

\n

0000€

\n \n
\n\n \n
\n

Transfer money

\n
\n \n \n \n \n \n
\n
\n\n \n
\n

Request loan

\n
\n \n \n \n
\n
\n\n \n
\n

Close account

\n
\n \n \n \n \n \n \n
\n\n \n

\n You will be logged out in 05:00\n

\n
\n\n \n\n \n \n\n" }, { "path": "11-Arrays-Bankist/final/script.js", "content": "'use strict';\n\n/////////////////////////////////////////////////\n/////////////////////////////////////////////////\n// BANKIST APP\n\n/////////////////////////////////////////////////\n// Data\nconst account1 = {\n owner: 'Jonas Schmedtmann',\n movements: [200, 450, -400, 3000, -650, -130, 70, 1300],\n interestRate: 1.2, // %\n pin: 1111,\n type: 'premium',\n};\n\nconst account2 = {\n owner: 'Jessica Davis',\n movements: [5000, 3400, -150, -790, -3210, -1000, 8500, -30],\n interestRate: 1.5,\n pin: 2222,\n type: 'standard',\n};\n\nconst account3 = {\n owner: 'Steven Thomas Williams',\n movements: [200, -200, 340, -300, -20, 50, 400, -460],\n interestRate: 0.7,\n pin: 3333,\n type: 'premium',\n};\n\nconst account4 = {\n owner: 'Sarah Smith',\n movements: [430, 1000, 700, 50, 90],\n interestRate: 1,\n pin: 4444,\n type: 'basic',\n};\n\nconst accounts = [account1, account2, account3, account4];\n\n/////////////////////////////////////////////////\n// Elements\nconst labelWelcome = document.querySelector('.welcome');\nconst labelDate = document.querySelector('.date');\nconst labelBalance = document.querySelector('.balance__value');\nconst labelSumIn = document.querySelector('.summary__value--in');\nconst labelSumOut = document.querySelector('.summary__value--out');\nconst labelSumInterest = document.querySelector('.summary__value--interest');\nconst labelTimer = document.querySelector('.timer');\n\nconst containerApp = document.querySelector('.app');\nconst containerMovements = document.querySelector('.movements');\n\nconst btnLogin = document.querySelector('.login__btn');\nconst btnTransfer = document.querySelector('.form__btn--transfer');\nconst btnLoan = document.querySelector('.form__btn--loan');\nconst btnClose = document.querySelector('.form__btn--close');\nconst btnSort = document.querySelector('.btn--sort');\n\nconst inputLoginUsername = document.querySelector('.login__input--user');\nconst inputLoginPin = document.querySelector('.login__input--pin');\nconst inputTransferTo = document.querySelector('.form__input--to');\nconst inputTransferAmount = document.querySelector('.form__input--amount');\nconst inputLoanAmount = document.querySelector('.form__input--loan-amount');\nconst inputCloseUsername = document.querySelector('.form__input--user');\nconst inputClosePin = document.querySelector('.form__input--pin');\n\n/////////////////////////////////////////////////\n// Functions\n\nconst displayMovements = function (movements, sort = false) {\n containerMovements.innerHTML = '';\n\n const movs = sort ? movements.slice().sort((a, b) => a - b) : movements;\n\n movs.forEach(function (mov, i) {\n const type = mov > 0 ? 'deposit' : 'withdrawal';\n\n const html = `\n
\n
${\n i + 1\n } ${type}
\n
${mov}€
\n
\n `;\n\n containerMovements.insertAdjacentHTML('afterbegin', html);\n });\n};\n\nconst calcDisplayBalance = function (acc) {\n acc.balance = acc.movements.reduce((acc, mov) => acc + mov, 0);\n labelBalance.textContent = `${acc.balance}€`;\n};\n\nconst calcDisplaySummary = function (acc) {\n const incomes = acc.movements\n .filter(mov => mov > 0)\n .reduce((acc, mov) => acc + mov, 0);\n labelSumIn.textContent = `${incomes}€`;\n\n const out = acc.movements\n .filter(mov => mov < 0)\n .reduce((acc, mov) => acc + mov, 0);\n labelSumOut.textContent = `${Math.abs(out)}€`;\n\n const interest = acc.movements\n .filter(mov => mov > 0)\n .map(deposit => (deposit * acc.interestRate) / 100)\n .filter((int, i, arr) => {\n // console.log(arr);\n return int >= 1;\n })\n .reduce((acc, int) => acc + int, 0);\n labelSumInterest.textContent = `${interest}€`;\n};\n\nconst createUsernames = function (accs) {\n accs.forEach(function (acc) {\n acc.username = acc.owner\n .toLowerCase()\n .split(' ')\n .map(name => name[0])\n .join('');\n });\n};\ncreateUsernames(accounts);\n\nconst updateUI = function (acc) {\n // Display movements\n displayMovements(acc.movements);\n\n // Display balance\n calcDisplayBalance(acc);\n\n // Display summary\n calcDisplaySummary(acc);\n};\n\n///////////////////////////////////////\n// Event handlers\nlet currentAccount;\n\nbtnLogin.addEventListener('click', function (e) {\n // Prevent form from submitting\n e.preventDefault();\n\n currentAccount = accounts.find(\n acc => acc.username === inputLoginUsername.value\n );\n console.log(currentAccount);\n\n if (currentAccount?.pin === Number(inputLoginPin.value)) {\n // Display UI and message\n labelWelcome.textContent = `Welcome back, ${\n currentAccount.owner.split(' ')[0]\n }`;\n containerApp.style.opacity = 1;\n\n // Clear input fields\n inputLoginUsername.value = inputLoginPin.value = '';\n inputLoginPin.blur();\n\n // Update UI\n updateUI(currentAccount);\n }\n});\n\nbtnTransfer.addEventListener('click', function (e) {\n e.preventDefault();\n const amount = Number(inputTransferAmount.value);\n const receiverAcc = accounts.find(\n acc => acc.username === inputTransferTo.value\n );\n inputTransferAmount.value = inputTransferTo.value = '';\n\n if (\n amount > 0 &&\n receiverAcc &&\n currentAccount.balance >= amount &&\n receiverAcc?.username !== currentAccount.username\n ) {\n // Doing the transfer\n currentAccount.movements.push(-amount);\n receiverAcc.movements.push(amount);\n\n // Update UI\n updateUI(currentAccount);\n }\n});\n\nbtnLoan.addEventListener('click', function (e) {\n e.preventDefault();\n\n const amount = Number(inputLoanAmount.value);\n\n if (amount > 0 && currentAccount.movements.some(mov => mov >= amount * 0.1)) {\n // Add movement\n currentAccount.movements.push(amount);\n\n // Update UI\n updateUI(currentAccount);\n }\n inputLoanAmount.value = '';\n});\n\nbtnClose.addEventListener('click', function (e) {\n e.preventDefault();\n\n if (\n inputCloseUsername.value === currentAccount.username &&\n Number(inputClosePin.value) === currentAccount.pin\n ) {\n const index = accounts.findIndex(\n acc => acc.username === currentAccount.username\n );\n console.log(index);\n // .indexOf(23)\n\n // Delete account\n accounts.splice(index, 1);\n\n // Hide UI\n containerApp.style.opacity = 0;\n }\n\n inputCloseUsername.value = inputClosePin.value = '';\n});\n\nlet sorted = false;\nbtnSort.addEventListener('click', function (e) {\n e.preventDefault();\n displayMovements(currentAccount.movements, !sorted);\n sorted = !sorted;\n});\n\n/////////////////////////////////////////////////\n/////////////////////////////////////////////////\n// LECTURES\n\nconst movements = [200, 450, -400, 3000, -650, -130, 70, 1300];\n\n/*\n/////////////////////////////////////////////////\n// Simple Array Methods\nlet arr = ['a', 'b', 'c', 'd', 'e'];\n\n// SLICE\nconsole.log(arr.slice(2));\nconsole.log(arr.slice(2, 4));\nconsole.log(arr.slice(-2));\nconsole.log(arr.slice(-1));\nconsole.log(arr.slice(1, -2));\nconsole.log(arr.slice());\nconsole.log([...arr]);\n\n// SPLICE\n// console.log(arr.splice(2));\narr.splice(-1);\nconsole.log(arr);\narr.splice(1, 2);\nconsole.log(arr);\n\n// REVERSE\narr = ['a', 'b', 'c', 'd', 'e'];\nconst arr2 = ['j', 'i', 'h', 'g', 'f'];\nconsole.log(arr2.reverse());\nconsole.log(arr2);\n\n// CONCAT\nconst letters = arr.concat(arr2);\nconsole.log(letters);\nconsole.log([...arr, ...arr2]);\n\n// JOIN\nconsole.log(letters.join(' - '));\n\n\n///////////////////////////////////////\n// The new at Method\nconst arr = [23, 11, 64];\nconsole.log(arr[0]);\nconsole.log(arr.at(0));\n\n// getting last array element\nconsole.log(arr[arr.length - 1]);\nconsole.log(arr.slice(-1)[0]);\nconsole.log(arr.at(-1));\n\nconsole.log('jonas'.at(0));\nconsole.log('jonas'.at(-1));\n\n\n///////////////////////////////////////\n// Looping Arrays: forEach\nconst movements = [200, 450, -400, 3000, -650, -130, 70, 1300];\n\n// for (const movement of movements) {\nfor (const [i, movement] of movements.entries()) {\n if (movement > 0) {\n console.log(`Movement ${i + 1}: You deposited ${movement}`);\n } else {\n console.log(`Movement ${i + 1}: You withdrew ${Math.abs(movement)}`);\n }\n}\n\nconsole.log('---- FOREACH ----');\nmovements.forEach(function (mov, i, arr) {\n if (mov > 0) {\n console.log(`Movement ${i + 1}: You deposited ${mov}`);\n } else {\n console.log(`Movement ${i + 1}: You withdrew ${Math.abs(mov)}`);\n }\n});\n// 0: function(200)\n// 1: function(450)\n// 2: function(400)\n// ...\n\n\n///////////////////////////////////////\n// forEach With Maps and Sets\n// Map\nconst currencies = new Map([\n ['USD', 'United States dollar'],\n ['EUR', 'Euro'],\n ['GBP', 'Pound sterling'],\n]);\n\ncurrencies.forEach(function (value, key, map) {\n console.log(`${key}: ${value}`);\n});\n\n// Set\nconst currenciesUnique = new Set(['USD', 'GBP', 'USD', 'EUR', 'EUR']);\nconsole.log(currenciesUnique);\ncurrenciesUnique.forEach(function (value, _, map) {\n console.log(`${value}: ${value}`);\n});\n*/\n\n///////////////////////////////////////\n// Coding Challenge #1\n\n/* \nJulia and Kate are doing a study on dogs. So each of them asked 5 dog owners about their dog's age, and stored the data into an array (one array for each). For now, they are just interested in knowing whether a dog is an adult or a puppy. A dog is an adult if it is at least 3 years old, and it's a puppy if it's less than 3 years old.\n\nCreate a function 'checkDogs', which accepts 2 arrays of dog's ages ('dogsJulia' and 'dogsKate'), and does the following things:\n\n1. Julia found out that the owners of the FIRST and the LAST TWO dogs actually have cats, not dogs! So create a shallow copy of Julia's array, and remove the cat ages from that copied array (because it's a bad practice to mutate function parameters)\n2. Create an array with both Julia's (corrected) and Kate's data\n3. For each remaining dog, log to the console whether it's an adult (\"Dog number 1 is an adult, and is 5 years old\") or a puppy (\"Dog number 2 is still a puppy 🐶\")\n4. Run the function for both test datasets\n\nHINT: Use tools from all lectures in this section so far 😉\n\nTEST DATA 1: Julia's data [3, 5, 2, 12, 7], Kate's data [4, 1, 15, 8, 3]\nTEST DATA 2: Julia's data [9, 16, 6, 8, 3], Kate's data [10, 5, 6, 1, 4]\n\nGOOD LUCK 😀\n*/\n\n/*\nconst checkDogs = function (dogsJulia, dogsKate) {\n const dogsJuliaCorrected = dogsJulia.slice();\n dogsJuliaCorrected.splice(0, 1);\n dogsJuliaCorrected.splice(-2);\n // dogsJulia.slice(1, 3);\n const dogs = dogsJuliaCorrected.concat(dogsKate);\n console.log(dogs);\n\n dogs.forEach(function (dog, i) {\n if (dog >= 3) {\n console.log(`Dog number ${i + 1} is an adult, and is ${dog} years old`);\n } else {\n console.log(`Dog number ${i + 1} is still a puppy 🐶`);\n }\n });\n};\n// checkDogs([3, 5, 2, 12, 7], [4, 1, 15, 8, 3]);\ncheckDogs([9, 16, 6, 8, 3], [10, 5, 6, 1, 4]);\n\n\n///////////////////////////////////////\n// The map Method\nconst eurToUsd = 1.1;\n\n// const movementsUSD = movements.map(function (mov) {\n// return mov * eurToUsd;\n// });\n\nconst movementsUSD = movements.map(mov => mov * eurToUsd);\n\nconsole.log(movements);\nconsole.log(movementsUSD);\n\nconst movementsUSDfor = [];\nfor (const mov of movements) movementsUSDfor.push(mov * eurToUsd);\nconsole.log(movementsUSDfor);\n\nconst movementsDescriptions = movements.map(\n (mov, i) =>\n `Movement ${i + 1}: You ${mov > 0 ? 'deposited' : 'withdrew'} ${Math.abs(\n mov\n )}`\n);\nconsole.log(movementsDescriptions);\n\n\n///////////////////////////////////////\n// The filter Method\nconst deposits = movements.filter(function (mov, i, arr) {\n return mov > 0;\n});\nconsole.log(movements);\nconsole.log(deposits);\n\nconst depositsFor = [];\nfor (const mov of movements) if (mov > 0) depositsFor.push(mov);\nconsole.log(depositsFor);\n\nconst withdrawals = movements.filter(mov => mov < 0);\nconsole.log(withdrawals);\n\n\n///////////////////////////////////////\n// The reduce Method\nconsole.log(movements);\n\n// accumulator -> SNOWBALL\n// const balance = movements.reduce(function (acc, cur, i, arr) {\n// console.log(`Iteration ${i}: ${acc}`);\n// return acc + cur;\n// }, 0);\nconst balance = movements.reduce((acc, cur) => acc + cur, 0);\nconsole.log(balance);\n\nlet balance2 = 0;\nfor (const mov of movements) balance2 += mov;\nconsole.log(balance2);\n\n// Maximum value\nconst max = movements.reduce((acc, mov) => {\n if (acc > mov) return acc;\n else return mov;\n}, movements[0]);\nconsole.log(max);\n*/\n\n///////////////////////////////////////\n// Coding Challenge #2\n\n/* \nLet's go back to Julia and Kate's study about dogs. This time, they want to convert dog ages to human ages and calculate the average age of the dogs in their study.\n\nCreate a function 'calcAverageHumanAge', which accepts an arrays of dog's ages ('ages'), and does the following things in order:\n\n1. Calculate the dog age in human years using the following formula: if the dog is <= 2 years old, humanAge = 2 * dogAge. If the dog is > 2 years old, humanAge = 16 + dogAge * 4.\n2. Exclude all dogs that are less than 18 human years old (which is the same as keeping dogs that are at least 18 years old)\n3. Calculate the average human age of all adult dogs (you should already know from other challenges how we calculate averages 😉)\n4. Run the function for both test datasets\n\nTEST DATA 1: [5, 2, 4, 1, 15, 8, 3]\nTEST DATA 2: [16, 6, 10, 5, 6, 1, 4]\n\nGOOD LUCK 😀\n*/\n\n/*\nconst calcAverageHumanAge = function (ages) {\n const humanAges = ages.map(age => (age <= 2 ? 2 * age : 16 + age * 4));\n const adults = humanAges.filter(age => age >= 18);\n console.log(humanAges);\n console.log(adults);\n\n // const average = adults.reduce((acc, age) => acc + age, 0) / adults.length;\n\n const average = adults.reduce(\n (acc, age, i, arr) => acc + age / arr.length,\n 0\n );\n\n // 2 3. (2+3)/2 = 2.5 === 2/2+3/2 = 2.5\n\n return average;\n};\nconst avg1 = calcAverageHumanAge([5, 2, 4, 1, 15, 8, 3]);\nconst avg2 = calcAverageHumanAge([16, 6, 10, 5, 6, 1, 4]);\nconsole.log(avg1, avg2);\n\n\n///////////////////////////////////////\n// The Magic of Chaining Methods\nconst eurToUsd = 1.1;\nconsole.log(movements);\n\n// PIPELINE\nconst totalDepositsUSD = movements\n .filter(mov => mov > 0)\n .map((mov, i, arr) => {\n // console.log(arr);\n return mov * eurToUsd;\n })\n // .map(mov => mov * eurToUsd)\n .reduce((acc, mov) => acc + mov, 0);\nconsole.log(totalDepositsUSD);\n*/\n\n///////////////////////////////////////\n// Coding Challenge #3\n\n/* \nRewrite the 'calcAverageHumanAge' function from the previous challenge, but this time as an arrow function, and using chaining!\n\nTEST DATA 1: [5, 2, 4, 1, 15, 8, 3]\nTEST DATA 2: [16, 6, 10, 5, 6, 1, 4]\n\nGOOD LUCK 😀\n*/\n\n/*\nconst calcAverageHumanAge = ages =>\n ages\n .map(age => (age <= 2 ? 2 * age : 16 + age * 4))\n .filter(age => age >= 18)\n .reduce((acc, age, i, arr) => acc + age / arr.length, 0);\n// adults.length\n\nconst avg1 = calcAverageHumanAge([5, 2, 4, 1, 15, 8, 3]);\nconst avg2 = calcAverageHumanAge([16, 6, 10, 5, 6, 1, 4]);\nconsole.log(avg1, avg2);\n\n\n///////////////////////////////////////\n// The find Method\nconst firstWithdrawal = movements.find(mov => mov < 0);\nconsole.log(movements);\nconsole.log(firstWithdrawal);\n\nconsole.log(accounts);\n\nconst account = accounts.find(acc => acc.owner === 'Jessica Davis');\nconsole.log(account);\n\n\n///////////////////////////////////////\n// The New findLast and findLastIndex Methods\n\nconsole.log(movements);\nconst lastWithdrawal = movements.findLast(mov => mov < 0);\nconsole.log(lastWithdrawal);\n\n// 'Your latest large movement was X movements ago'\n\nconst latestLargeMovementIndex = movements.findLastIndex(\n mov => Math.abs(mov) > 1000\n);\nconsole.log(latestLargeMovementIndex);\nconsole.log(\n `Your latest large movement was ${\n movements.length - latestLargeMovementIndex\n } movements ago`\n);\n\n\n///////////////////////////////////////\n// some and every\nconsole.log(movements);\n\n// EQUALITY\nconsole.log(movements.includes(-130));\n\n// SOME: CONDITION\nconsole.log(movements.some(mov => mov === -130));\n\nconst anyDeposits = movements.some(mov => mov > 0);\nconsole.log(anyDeposits);\n\n// EVERY\nconsole.log(movements.every(mov => mov > 0));\nconsole.log(account4.movements.every(mov => mov > 0));\n\n// Separate callback\nconst deposit = mov => mov > 0;\nconsole.log(movements.some(deposit));\nconsole.log(movements.every(deposit));\nconsole.log(movements.filter(deposit));\n\n\n///////////////////////////////////////\n// flat and flatMap\nconst arr = [[1, 2, 3], [4, 5, 6], 7, 8];\nconsole.log(arr.flat());\n\nconst arrDeep = [[[1, 2], 3], [4, [5, 6]], 7, 8];\nconsole.log(arrDeep.flat(2));\n\n// flat\nconst overalBalance = accounts\n .map(acc => acc.movements)\n .flat()\n .reduce((acc, mov) => acc + mov, 0);\nconsole.log(overalBalance);\n\n// flatMap\nconst overalBalance2 = accounts\n .flatMap(acc => acc.movements)\n .reduce((acc, mov) => acc + mov, 0);\nconsole.log(overalBalance2);\n*/\n\n///////////////////////////////////////\n// Coding Challenge #4\n\n/*\nThis time, Julia and Kate are studying the activity levels of different dog breeds.\n\nYOUR TASKS:\n1. Store the the average weight of a \"Husky\" in a variable \"huskyWeight\"\n2. Find the name of the only breed that likes both \"running\" and \"fetch\" (\"dogBothActivities\" variable)\n3. Create an array \"allActivities\" of all the activities of all the dog breeds\n4. Create an array \"uniqueActivities\" that contains only the unique activities (no activity repetitions). HINT: Use a technique with a special data structure that we studied a few sections ago.\n5. Many dog breeds like to swim. What other activities do these dogs like? Store all the OTHER activities these breeds like to do, in a unique array called \"swimmingAdjacent\".\n6. Do all the breeds have an average weight of 10kg or more? Log to the console whether \"true\" or \"false\".\n7. Are there any breeds that are \"active\"? \"Active\" means that the dog has 3 or more activities. Log to the console whether \"true\" or \"false\".\n\nBONUS: What's the average weight of the heaviest breed that likes to fetch? HINT: Use the \"Math.max\" method along with the ... operator.\n\nTEST DATA:\n*/\n\n/*\nconst breeds = [\n {\n breed: 'German Shepherd',\n averageWeight: 32,\n activities: ['fetch', 'swimming'],\n },\n {\n breed: 'Dalmatian',\n averageWeight: 24,\n activities: ['running', 'fetch', 'agility'],\n },\n {\n breed: 'Labrador',\n averageWeight: 28,\n activities: ['swimming', 'fetch'],\n },\n {\n breed: 'Beagle',\n averageWeight: 12,\n activities: ['digging', 'fetch'],\n },\n {\n breed: 'Husky',\n averageWeight: 26,\n activities: ['running', 'agility', 'swimming'],\n },\n {\n breed: 'Bulldog',\n averageWeight: 36,\n activities: ['sleeping'],\n },\n {\n breed: 'Poodle',\n averageWeight: 18,\n activities: ['agility', 'fetch'],\n },\n];\n\n// 1.\nconst huskyWeight = breeds.find(breed => breed.breed === 'Husky').averageWeight;\nconsole.log(huskyWeight);\n\n// 2.\nconst dogBothActivities = breeds.find(\n breed =>\n breed.activities.includes('fetch') && breed.activities.includes('running')\n).breed;\nconsole.log(dogBothActivities);\n\n// 3.\n// const allActivities = breeds.map(breed => breed.activities).flat();\nconst allActivities = breeds.flatMap(breed => breed.activities);\nconsole.log(allActivities);\n\n// 4.\nconst uniqueActivities = [...new Set(allActivities)];\nconsole.log(uniqueActivities);\n\n// 5.\nconst swimmingAdjacent = [\n ...new Set(\n breeds\n .filter(breed => breed.activities.includes('swimming'))\n .flatMap(breed => breed.activities)\n .filter(activity => activity !== 'swimming')\n ),\n];\nconsole.log(swimmingAdjacent);\n\n// 6.\nconsole.log(breeds.every(breed => breed.averageWeight > 10));\n\n// 7.\nconsole.log(breeds.some(breed => breed.activities.length >= 3));\n\n// BONUS\nconst fetchWeights = breeds\n .filter(breed => breed.activities.includes('fetch'))\n .map(breed => breed.averageWeight);\nconst heaviestFetchBreed = Math.max(...fetchWeights);\n\nconsole.log(fetchWeights);\nconsole.log(heaviestFetchBreed);\n\n\n///////////////////////////////////////\n// Sorting Arrays\n\n// Strings\nconst owners = ['Jonas', 'Zach', 'Adam', 'Martha'];\nconsole.log(owners.sort());\nconsole.log(owners);\n\n// Numbers\nconsole.log(movements);\n\n// return < 0, A, B (keep order)\n// return > 0, B, A (switch order)\n\n// Ascending\n// movements.sort((a, b) => {\n// if (a > b) return 1;\n// if (a < b) return -1;\n// });\nmovements.sort((a, b) => a - b);\nconsole.log(movements);\n\n// Descending\n// movements.sort((a, b) => {\n// if (a > b) return -1;\n// if (a < b) return 1;\n// });\nmovements.sort((a, b) => b - a);\nconsole.log(movements);\n\n\n///////////////////////////////////////\n// Array Grouping\n\nconsole.log(movements);\n\nconst groupedMovements = Object.groupBy(movements, movement =>\n movement > 0 ? 'deposits' : 'withdrawals'\n);\nconsole.log(groupedMovements);\n\nconst groupedByActivity = Object.groupBy(accounts, account => {\n const movementCount = account.movements.length;\n\n if (movementCount >= 8) return 'very active';\n if (movementCount >= 4) return 'active';\n if (movementCount >= 1) return 'moderate';\n return 'inactive';\n});\nconsole.log(groupedByActivity);\n\n// const groupedAccounts = Object.groupBy(accounts, account => account.type);\nconst groupedAccounts = Object.groupBy(accounts, ({ type }) => type);\nconsole.log(groupedAccounts);\n\n\n///////////////////////////////////////\n// More Ways of Creating and Filling Arrays\nconst arr = [1, 2, 3, 4, 5, 6, 7];\nconsole.log(new Array(1, 2, 3, 4, 5, 6, 7));\n\n// Empty arrays + fill method\nconst x = new Array(7);\nconsole.log(x);\n// console.log(x.map(() => 5));\nx.fill(1, 3, 5);\nx.fill(1);\nconsole.log(x);\n\narr.fill(23, 2, 6);\nconsole.log(arr);\n\n// Array.from\nconst y = Array.from({ length: 7 }, () => 1);\nconsole.log(y);\n\nconst z = Array.from({ length: 7 }, (_, i) => i + 1);\nconsole.log(z);\n\nlabelBalance.addEventListener('click', function () {\n const movementsUI = Array.from(\n document.querySelectorAll('.movements__value'),\n el => Number(el.textContent.replace('€', ''))\n );\n console.log(movementsUI);\n\n const movementsUI2 = [...document.querySelectorAll('.movements__value')];\n});\n\n\n///////////////////////////////////////\n// Non-Destructive Alternatives: toReversed, toSorted, toSpliced, with\n\nconsole.log(movements);\nconst reversedMov = movements.toReversed();\nconsole.log(reversedMov);\n\n// toSorted (sort), toSpliced (splice)\n\n// movements[1] = 2000;\nconst newMovements = movements.with(1, 2000);\nconsole.log(newMovements);\n\nconsole.log(movements);\n\n\n///////////////////////////////////////\n// Array Methods Practice\n\n// 1.\nconst bankDepositSum = accounts\n .flatMap(acc => acc.movements)\n .filter(mov => mov > 0)\n .reduce((sum, cur) => sum + cur, 0);\n\nconsole.log(bankDepositSum);\n\n// 2.\n// const numDeposits1000 = accounts\n// .flatMap(acc => acc.movements)\n// .filter(mov => mov >= 1000).length;\n\nconst numDeposits1000 = accounts\n .flatMap(acc => acc.movements)\n .reduce((count, cur) => (cur >= 1000 ? ++count : count), 0);\n\nconsole.log(numDeposits1000);\n\n// Prefixed ++ operator\nlet a = 10;\nconsole.log(++a);\nconsole.log(a);\n\n// 3.\nconst { deposits, withdrawals } = accounts\n .flatMap(acc => acc.movements)\n .reduce(\n (sums, cur) => {\n // cur > 0 ? (sums.deposits += cur) : (sums.withdrawals += cur);\n sums[cur > 0 ? 'deposits' : 'withdrawals'] += cur;\n return sums;\n },\n { deposits: 0, withdrawals: 0 },\n );\n\nconsole.log(deposits, withdrawals);\n\n// 4.\n// this is a nice title -> This Is a Nice Title\nconst convertTitleCase = function (title) {\n const capitalize = str => str[0].toUpperCase() + str.slice(1);\n\n const exceptions = ['a', 'an', 'and', 'the', 'but', 'or', 'on', 'in', 'with'];\n\n const titleCase = title\n .toLowerCase()\n .split(' ')\n .map(word => (exceptions.includes(word) ? word : capitalize(word)))\n .join(' ');\n\n return capitalize(titleCase);\n};\n\nconsole.log(convertTitleCase('this is a nice title'));\nconsole.log(convertTitleCase('this is a LONG title but not too long'));\nconsole.log(convertTitleCase('and here is another title with an EXAMPLE'));\n*/\n\n///////////////////////////////////////\n// Coding Challenge #5\n\n/* \nJulia and Kate are still studying dogs. This time they are want to figure out if the dogs in their are eating too much or too little food.\n\n- Formula for calculating recommended food portion: recommendedFood = weight ** 0.75 * 28. (The result is in grams of food, and the weight needs to be in kg)\n- Eating too much means the dog's current food portion is larger than the recommended portion, and eating too little is the opposite.\n- Eating an okay amount means the dog's current food portion is within a range 10% above and below the recommended portion (see hint).\n\nYOUR TASKS:\n1. Loop over the array containing dog objects, and for each dog, calculate the recommended food portion (recFood) and add it to the object as a new property. Do NOT create a new array, simply loop over the array (We never did this before, so think about how you can do this without creating a new array).\n2. Find Sarah's dog and log to the console whether it's eating too much or too little. HINT: Some dogs have multiple users, so you first need to find Sarah in the owners array, and so this one is a bit tricky (on purpose) 🤓\n3. Create an array containing all owners of dogs who eat too much (ownersTooMuch) and an array with all owners of dogs who eat too little (ownersTooLittle).\n4. Log a string to the console for each array created in 3., like this: \"Matilda and Alice and Bob's dogs eat too much!\" and \"Sarah and John and Michael's dogs eat too little!\"\n5. Log to the console whether there is ANY dog eating EXACTLY the amount of food that is recommended (just true or false)\n6. Log to the console whether ALL of the dogs are eating an OKAY amount of food (just true or false)\n7. Create an array containing the dogs that are eating an OKAY amount of food (try to reuse the condition used in 6.)\n8. Group the dogs into the following 3 groups: 'exact', 'too-much' and 'too-little', based on whether they are eating too much, too little or the exact amount of food, based on the recommended food portion.\n9. Group the dogs by the number of owners they have\n10. Sort the dogs array by recommended food portion in an ascending order. Make sure to NOT mutate the original array!\n\nHINT 1: Use many different tools to solve these challenges, you can use the summary lecture to choose between them 😉\nHINT 2: Being within a range 10% above and below the recommended portion means: current > (recommended * 0.90) && current < (recommended * 1.10). Basically, the current portion should be between 90% and 110% of the recommended portion.\n\nTEST DATA:\nconst dogs = [\n { weight: 22, curFood: 250, owners: ['Alice', 'Bob'] },\n { weight: 8, curFood: 200, owners: ['Matilda'] },\n { weight: 13, curFood: 275, owners: ['Sarah', 'John', 'Leo'] },\n { weight: 18, curFood: 244, owners: ['Joe'] },\n { weight: 32, curFood: 340, owners: ['Michael'] },\n];\n\nGOOD LUCK 😀\n*/\n\n/*\nconst dogs = [\n { weight: 22, curFood: 250, owners: ['Alice', 'Bob'] },\n { weight: 8, curFood: 200, owners: ['Matilda'] },\n { weight: 13, curFood: 275, owners: ['Sarah', 'John', 'Leo'] },\n { weight: 18, curFood: 244, owners: ['Joe'] },\n { weight: 32, curFood: 340, owners: ['Michael'] },\n];\n\n// 1.\ndogs.forEach(dog => (dog.recFood = Math.floor(dog.weight ** 0.75 * 28)));\nconsole.log(dogs);\n\n// 2.\nconst dogSarah = dogs.find(dog => dog.owners.includes('Sarah'));\nconsole.log(\n `Sarah's dog eats too ${\n dogSarah.curFood > dogSarah.recFood ? 'much' : 'little'\n }`\n);\n\n// 3.\nconst ownersTooMuch = dogs\n .filter(dog => dog.curFood > dog.recFood)\n .flatMap(dog => dog.owners);\nconst ownersTooLittle = dogs\n .filter(dog => dog.curFood < dog.recFood)\n .flatMap(dog => dog.owners);\n\nconsole.log(ownersTooMuch);\nconsole.log(ownersTooLittle);\n\n// 4.\nconsole.log(`${ownersTooMuch.join(' and ')}'s dogs are eating too much`);\nconsole.log(`${ownersTooLittle.join(' and ')}'s dogs are eating too little`);\n\n// 5.\nconsole.log(dogs.some(dog => dog.curFood === dog.recFood));\n\n// 6.\nconst checkEatingOkay = dog =>\n dog.curFood < dog.recFood * 1.1 && dog.curFood > dog.recFood * 0.9;\n\nconsole.log(dogs.every(checkEatingOkay));\n\n// 7.\nconst dogsEatingOkay = dogs.filter(checkEatingOkay);\nconsole.log(dogsEatingOkay);\n\n// 8.\nconst dogsGroupedByPortion = Object.groupBy(dogs, dog => {\n if (dog.curFood > dog.recFood) {\n return 'too-much';\n } else if (dog.curFood < dog.recFood) {\n return 'too-little';\n } else {\n return 'exact';\n }\n});\nconsole.log(dogsGroupedByPortion);\n\n// 9.\nconst dogsGroupedByOwners = Object.groupBy(\n dogs,\n dog => `${dog.owners.length}-owners`\n);\nconsole.log(dogsGroupedByOwners);\n\n// 10.\nconst dogsSorted = dogs.toSorted((a, b) => a.recFood - b.recFood);\nconsole.log(dogsSorted);\n*/\n" }, { "path": "11-Arrays-Bankist/final/style.css", "content": "/*\n * Use this CSS to learn some intersting techniques,\n * in case you're wondering how I built the UI.\n * Have fun! 😁\n */\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: inherit;\n}\n\nhtml {\n font-size: 62.5%;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Poppins', sans-serif;\n color: #444;\n background-color: #f3f3f3;\n height: 100vh;\n padding: 2rem;\n}\n\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0 2rem;\n}\n\n.welcome {\n font-size: 1.9rem;\n font-weight: 500;\n}\n\n.logo {\n height: 5.25rem;\n}\n\n.login {\n display: flex;\n}\n\n.login__input {\n border: none;\n padding: 0.5rem 2rem;\n font-size: 1.6rem;\n font-family: inherit;\n text-align: center;\n width: 12rem;\n border-radius: 10rem;\n margin-right: 1rem;\n color: inherit;\n border: 1px solid #fff;\n transition: all 0.3s;\n}\n\n.login__input:focus {\n outline: none;\n border: 1px solid #ccc;\n}\n\n.login__input::placeholder {\n color: #bbb;\n}\n\n.login__btn {\n border: none;\n background: none;\n font-size: 2.2rem;\n color: inherit;\n cursor: pointer;\n transition: all 0.3s;\n}\n\n.login__btn:hover,\n.login__btn:focus,\n.btn--sort:hover,\n.btn--sort:focus {\n outline: none;\n color: #777;\n}\n\n/* MAIN */\n.app {\n position: relative;\n max-width: 100rem;\n margin: 4rem auto;\n display: grid;\n grid-template-columns: 4fr 3fr;\n grid-template-rows: auto repeat(3, 15rem) auto;\n gap: 2rem;\n\n /* NOTE This creates the fade in/out anumation */\n opacity: 0;\n transition: all 1s;\n}\n\n.balance {\n grid-column: 1 / span 2;\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n margin-bottom: 2rem;\n}\n\n.balance__label {\n font-size: 2.2rem;\n font-weight: 500;\n margin-bottom: -0.2rem;\n}\n\n.balance__date {\n font-size: 1.4rem;\n color: #888;\n}\n\n.balance__value {\n font-size: 4.5rem;\n font-weight: 400;\n}\n\n/* MOVEMENTS */\n.movements {\n grid-row: 2 / span 3;\n background-color: #fff;\n border-radius: 1rem;\n overflow: scroll;\n}\n\n.movements__row {\n padding: 2.25rem 4rem;\n display: flex;\n align-items: center;\n border-bottom: 1px solid #eee;\n}\n\n.movements__type {\n font-size: 1.1rem;\n text-transform: uppercase;\n font-weight: 500;\n color: #fff;\n padding: 0.1rem 1rem;\n border-radius: 10rem;\n margin-right: 2rem;\n}\n\n.movements__date {\n font-size: 1.1rem;\n text-transform: uppercase;\n font-weight: 500;\n color: #666;\n}\n\n.movements__type--deposit {\n background-image: linear-gradient(to top left, #39b385, #9be15d);\n}\n\n.movements__type--withdrawal {\n background-image: linear-gradient(to top left, #e52a5a, #ff585f);\n}\n\n.movements__value {\n font-size: 1.7rem;\n margin-left: auto;\n}\n\n/* SUMMARY */\n.summary {\n grid-row: 5 / 6;\n display: flex;\n align-items: baseline;\n padding: 0 0.3rem;\n margin-top: 1rem;\n}\n\n.summary__label {\n font-size: 1.2rem;\n font-weight: 500;\n text-transform: uppercase;\n margin-right: 0.8rem;\n}\n\n.summary__value {\n font-size: 2.2rem;\n margin-right: 2.5rem;\n}\n\n.summary__value--in,\n.summary__value--interest {\n color: #66c873;\n}\n\n.summary__value--out {\n color: #f5465d;\n}\n\n.btn--sort {\n margin-left: auto;\n border: none;\n background: none;\n font-size: 1.3rem;\n font-weight: 500;\n cursor: pointer;\n}\n\n/* OPERATIONS */\n.operation {\n border-radius: 1rem;\n padding: 3rem 4rem;\n color: #333;\n}\n\n.operation--transfer {\n background-image: linear-gradient(to top left, #ffb003, #ffcb03);\n}\n\n.operation--loan {\n background-image: linear-gradient(to top left, #39b385, #9be15d);\n}\n\n.operation--close {\n background-image: linear-gradient(to top left, #e52a5a, #ff585f);\n}\n\nh2 {\n margin-bottom: 1.5rem;\n font-size: 1.7rem;\n font-weight: 600;\n color: #333;\n}\n\n.form {\n display: grid;\n grid-template-columns: 2.5fr 2.5fr 1fr;\n grid-template-rows: auto auto;\n gap: 0.4rem 1rem;\n}\n\n/* Exceptions for interst */\n.form.form--loan {\n grid-template-columns: 2.5fr 1fr 2.5fr;\n}\n.form__label--loan {\n grid-row: 2;\n}\n/* End exceptions */\n\n.form__input {\n width: 100%;\n border: none;\n background-color: rgba(255, 255, 255, 0.4);\n font-family: inherit;\n font-size: 1.5rem;\n text-align: center;\n color: #333;\n padding: 0.3rem 1rem;\n border-radius: 0.7rem;\n transition: all 0.3s;\n}\n\n.form__input:focus {\n outline: none;\n background-color: rgba(255, 255, 255, 0.6);\n}\n\n.form__label {\n font-size: 1.3rem;\n text-align: center;\n}\n\n.form__btn {\n border: none;\n border-radius: 0.7rem;\n font-size: 1.8rem;\n background-color: #fff;\n cursor: pointer;\n transition: all 0.3s;\n}\n\n.form__btn:focus {\n outline: none;\n background-color: rgba(255, 255, 255, 0.8);\n}\n\n.logout-timer {\n padding: 0 0.3rem;\n margin-top: 1.9rem;\n text-align: right;\n font-size: 1.25rem;\n}\n\n.timer {\n font-weight: 600;\n}\n" }, { "path": "11-Arrays-Bankist/starter/.prettierrc", "content": "{\n \"singleQuote\": true,\n \"arrowParens\": \"avoid\"\n}\n" }, { "path": "11-Arrays-Bankist/starter/index.html", "content": "\n\n \n \n \n \n \n\n \n\n \n Bankist\n \n \n \n \n\n
\n \n
\n
\n

Current balance

\n

\n As of 05/03/2037\n

\n
\n

0000€

\n
\n\n \n
\n
\n
2 deposit
\n
3 days ago
\n
4 000€
\n
\n
\n
\n 1 withdrawal\n
\n
24/01/2037
\n
-378€
\n
\n
\n\n \n
\n

In

\n

0000€

\n

Out

\n

0000€

\n

Interest

\n

0000€

\n \n
\n\n \n
\n

Transfer money

\n
\n \n \n \n \n \n
\n
\n\n \n
\n

Request loan

\n
\n \n \n \n
\n
\n\n \n
\n

Close account

\n
\n \n \n \n \n \n \n
\n\n \n

\n You will be logged out in 05:00\n

\n
\n\n \n\n \n \n\n" }, { "path": "11-Arrays-Bankist/starter/script.js", "content": "'use strict';\n\n/////////////////////////////////////////////////\n/////////////////////////////////////////////////\n// BANKIST APP\n\n// Data\nconst account1 = {\n owner: 'Jonas Schmedtmann',\n movements: [200, 450, -400, 3000, -650, -130, 70, 1300],\n interestRate: 1.2, // %\n pin: 1111,\n};\n\nconst account2 = {\n owner: 'Jessica Davis',\n movements: [5000, 3400, -150, -790, -3210, -1000, 8500, -30],\n interestRate: 1.5,\n pin: 2222,\n};\n\nconst account3 = {\n owner: 'Steven Thomas Williams',\n movements: [200, -200, 340, -300, -20, 50, 400, -460],\n interestRate: 0.7,\n pin: 3333,\n};\n\nconst account4 = {\n owner: 'Sarah Smith',\n movements: [430, 1000, 700, 50, 90],\n interestRate: 1,\n pin: 4444,\n};\n\nconst accounts = [account1, account2, account3, account4];\n\n// Elements\nconst labelWelcome = document.querySelector('.welcome');\nconst labelDate = document.querySelector('.date');\nconst labelBalance = document.querySelector('.balance__value');\nconst labelSumIn = document.querySelector('.summary__value--in');\nconst labelSumOut = document.querySelector('.summary__value--out');\nconst labelSumInterest = document.querySelector('.summary__value--interest');\nconst labelTimer = document.querySelector('.timer');\n\nconst containerApp = document.querySelector('.app');\nconst containerMovements = document.querySelector('.movements');\n\nconst btnLogin = document.querySelector('.login__btn');\nconst btnTransfer = document.querySelector('.form__btn--transfer');\nconst btnLoan = document.querySelector('.form__btn--loan');\nconst btnClose = document.querySelector('.form__btn--close');\nconst btnSort = document.querySelector('.btn--sort');\n\nconst inputLoginUsername = document.querySelector('.login__input--user');\nconst inputLoginPin = document.querySelector('.login__input--pin');\nconst inputTransferTo = document.querySelector('.form__input--to');\nconst inputTransferAmount = document.querySelector('.form__input--amount');\nconst inputLoanAmount = document.querySelector('.form__input--loan-amount');\nconst inputCloseUsername = document.querySelector('.form__input--user');\nconst inputClosePin = document.querySelector('.form__input--pin');\n\n/////////////////////////////////////////////////\n/////////////////////////////////////////////////\n// LECTURES\n\nconst currencies = new Map([\n ['USD', 'United States dollar'],\n ['EUR', 'Euro'],\n ['GBP', 'Pound sterling'],\n]);\n\nconst movements = [200, 450, -400, 3000, -650, -130, 70, 1300];\n\n/////////////////////////////////////////////////\n" }, { "path": "11-Arrays-Bankist/starter/style.css", "content": "/*\n * Use this CSS to learn some intersting techniques,\n * in case you're wondering how I built the UI.\n * Have fun! 😁\n */\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: inherit;\n}\n\nhtml {\n font-size: 62.5%;\n box-sizing: border-box;\n}\n\nbody {\n font-family: \"Poppins\", sans-serif;\n color: #444;\n background-color: #f3f3f3;\n height: 100vh;\n padding: 2rem;\n}\n\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0 2rem;\n}\n\n.welcome {\n font-size: 1.9rem;\n font-weight: 500;\n}\n\n.logo {\n height: 5.25rem;\n}\n\n.login {\n display: flex;\n}\n\n.login__input {\n border: none;\n padding: 0.5rem 2rem;\n font-size: 1.6rem;\n font-family: inherit;\n text-align: center;\n width: 12rem;\n border-radius: 10rem;\n margin-right: 1rem;\n color: inherit;\n border: 1px solid #fff;\n transition: all 0.3s;\n}\n\n.login__input:focus {\n outline: none;\n border: 1px solid #ccc;\n}\n\n.login__input::placeholder {\n color: #bbb;\n}\n\n.login__btn {\n border: none;\n background: none;\n font-size: 2.2rem;\n color: inherit;\n cursor: pointer;\n transition: all 0.3s;\n}\n\n.login__btn:hover,\n.login__btn:focus,\n.btn--sort:hover,\n.btn--sort:focus {\n outline: none;\n color: #777;\n}\n\n/* MAIN */\n.app {\n position: relative;\n max-width: 100rem;\n margin: 4rem auto;\n display: grid;\n grid-template-columns: 4fr 3fr;\n grid-template-rows: auto repeat(3, 15rem) auto;\n gap: 2rem;\n\n /* NOTE This creates the fade in/out anumation */\n opacity: 0;\n transition: all 1s;\n}\n\n.balance {\n grid-column: 1 / span 2;\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n margin-bottom: 2rem;\n}\n\n.balance__label {\n font-size: 2.2rem;\n font-weight: 500;\n margin-bottom: -0.2rem;\n}\n\n.balance__date {\n font-size: 1.4rem;\n color: #888;\n}\n\n.balance__value {\n font-size: 4.5rem;\n font-weight: 400;\n}\n\n/* MOVEMENTS */\n.movements {\n grid-row: 2 / span 3;\n background-color: #fff;\n border-radius: 1rem;\n overflow: scroll;\n}\n\n.movements__row {\n padding: 2.25rem 4rem;\n display: flex;\n align-items: center;\n border-bottom: 1px solid #eee;\n}\n\n.movements__type {\n font-size: 1.1rem;\n text-transform: uppercase;\n font-weight: 500;\n color: #fff;\n padding: 0.1rem 1rem;\n border-radius: 10rem;\n margin-right: 2rem;\n}\n\n.movements__date {\n font-size: 1.1rem;\n text-transform: uppercase;\n font-weight: 500;\n color: #666;\n}\n\n.movements__type--deposit {\n background-image: linear-gradient(to top left, #39b385, #9be15d);\n}\n\n.movements__type--withdrawal {\n background-image: linear-gradient(to top left, #e52a5a, #ff585f);\n}\n\n.movements__value {\n font-size: 1.7rem;\n margin-left: auto;\n}\n\n/* SUMMARY */\n.summary {\n grid-row: 5 / 6;\n display: flex;\n align-items: baseline;\n padding: 0 0.3rem;\n margin-top: 1rem;\n}\n\n.summary__label {\n font-size: 1.2rem;\n font-weight: 500;\n text-transform: uppercase;\n margin-right: 0.8rem;\n}\n\n.summary__value {\n font-size: 2.2rem;\n margin-right: 2.5rem;\n}\n\n.summary__value--in,\n.summary__value--interest {\n color: #66c873;\n}\n\n.summary__value--out {\n color: #f5465d;\n}\n\n.btn--sort {\n margin-left: auto;\n border: none;\n background: none;\n font-size: 1.3rem;\n font-weight: 500;\n cursor: pointer;\n}\n\n/* OPERATIONS */\n.operation {\n border-radius: 1rem;\n padding: 3rem 4rem;\n color: #333;\n}\n\n.operation--transfer {\n background-image: linear-gradient(to top left, #ffb003, #ffcb03);\n}\n\n.operation--loan {\n background-image: linear-gradient(to top left, #39b385, #9be15d);\n}\n\n.operation--close {\n background-image: linear-gradient(to top left, #e52a5a, #ff585f);\n}\n\nh2 {\n margin-bottom: 1.5rem;\n font-size: 1.7rem;\n font-weight: 600;\n color: #333;\n}\n\n.form {\n display: grid;\n grid-template-columns: 2.5fr 2.5fr 1fr;\n grid-template-rows: auto auto;\n gap: 0.4rem 1rem;\n}\n\n/* Exceptions for interst */\n.form.form--loan {\n grid-template-columns: 2.5fr 1fr 2.5fr;\n}\n.form__label--loan {\n grid-row: 2;\n}\n/* End exceptions */\n\n.form__input {\n width: 100%;\n border: none;\n background-color: rgba(255, 255, 255, 0.4);\n font-family: inherit;\n font-size: 1.5rem;\n text-align: center;\n color: #333;\n padding: 0.3rem 1rem;\n border-radius: 0.7rem;\n transition: all 0.3s;\n}\n\n.form__input:focus {\n outline: none;\n background-color: rgba(255, 255, 255, 0.6);\n}\n\n.form__label {\n font-size: 1.3rem;\n text-align: center;\n}\n\n.form__btn {\n border: none;\n border-radius: 0.7rem;\n font-size: 1.8rem;\n background-color: #fff;\n cursor: pointer;\n transition: all 0.3s;\n}\n\n.form__btn:focus {\n outline: none;\n background-color: rgba(255, 255, 255, 0.8);\n}\n\n.logout-timer {\n padding: 0 0.3rem;\n margin-top: 1.9rem;\n text-align: right;\n font-size: 1.25rem;\n}\n\n.timer {\n font-weight: 600;\n}\n" }, { "path": "12-Numbers-Dates-Timers-Bankist/final/.prettierrc", "content": "{\n \"singleQuote\": true,\n \"arrowParens\": \"avoid\"\n}\n" }, { "path": "12-Numbers-Dates-Timers-Bankist/final/index.html", "content": "\n\n \n \n \n \n \n\n \n\n \n Bankist\n \n \n \n \n\n
\n \n
\n
\n

Current balance

\n

\n As of 05/03/2037\n

\n
\n

0000€

\n
\n\n \n
\n
\n
2 deposit
\n
3 days ago
\n
4 000€
\n
\n
\n
\n 1 withdrawal\n
\n
24/01/2037
\n
-378€
\n
\n
\n\n \n
\n

In

\n

0000€

\n

Out

\n

0000€

\n

Interest

\n

0000€

\n \n
\n\n \n
\n

Transfer money

\n
\n \n \n \n \n \n
\n
\n\n \n
\n

Request loan

\n
\n \n \n \n
\n
\n\n \n
\n

Close account

\n
\n \n \n \n \n \n \n
\n\n \n

\n You will be logged out in 05:00\n

\n
\n\n \n\n \n \n\n" }, { "path": "12-Numbers-Dates-Timers-Bankist/final/script.js", "content": "'use strict';\n\n/////////////////////////////////////////////////\n/////////////////////////////////////////////////\n// BANKIST APP\n\n/////////////////////////////////////////////////\n// Data\n\n// DIFFERENT DATA! Contains movement dates, currency and locale\n\nconst account1 = {\n owner: 'Jonas Schmedtmann',\n movements: [200, 455.23, -306.5, 25000, -642.21, -133.9, 79.97, 1300],\n interestRate: 1.2, // %\n pin: 1111,\n\n movementsDates: [\n '2019-11-18T21:31:17.178Z',\n '2019-12-23T07:42:02.383Z',\n '2020-01-28T09:15:04.904Z',\n '2020-04-01T10:17:24.185Z',\n '2020-05-08T14:11:59.604Z',\n '2020-07-26T17:01:17.194Z',\n '2020-07-28T23:36:17.929Z',\n '2020-08-01T10:51:36.790Z',\n ],\n currency: 'EUR',\n locale: 'pt-PT', // de-DE\n};\n\nconst account2 = {\n owner: 'Jessica Davis',\n movements: [5000, 3400, -150, -790, -3210, -1000, 8500, -30],\n interestRate: 1.5,\n pin: 2222,\n\n movementsDates: [\n '2019-11-01T13:15:33.035Z',\n '2019-11-30T09:48:16.867Z',\n '2019-12-25T06:04:23.907Z',\n '2020-01-25T14:18:46.235Z',\n '2020-02-05T16:33:06.386Z',\n '2020-04-10T14:43:26.374Z',\n '2020-06-25T18:49:59.371Z',\n '2020-07-26T12:01:20.894Z',\n ],\n currency: 'USD',\n locale: 'en-US',\n};\n\nconst accounts = [account1, account2];\n\n/////////////////////////////////////////////////\n// Elements\nconst labelWelcome = document.querySelector('.welcome');\nconst labelDate = document.querySelector('.date');\nconst labelBalance = document.querySelector('.balance__value');\nconst labelSumIn = document.querySelector('.summary__value--in');\nconst labelSumOut = document.querySelector('.summary__value--out');\nconst labelSumInterest = document.querySelector('.summary__value--interest');\nconst labelTimer = document.querySelector('.timer');\n\nconst containerApp = document.querySelector('.app');\nconst containerMovements = document.querySelector('.movements');\n\nconst btnLogin = document.querySelector('.login__btn');\nconst btnTransfer = document.querySelector('.form__btn--transfer');\nconst btnLoan = document.querySelector('.form__btn--loan');\nconst btnClose = document.querySelector('.form__btn--close');\nconst btnSort = document.querySelector('.btn--sort');\n\nconst inputLoginUsername = document.querySelector('.login__input--user');\nconst inputLoginPin = document.querySelector('.login__input--pin');\nconst inputTransferTo = document.querySelector('.form__input--to');\nconst inputTransferAmount = document.querySelector('.form__input--amount');\nconst inputLoanAmount = document.querySelector('.form__input--loan-amount');\nconst inputCloseUsername = document.querySelector('.form__input--user');\nconst inputClosePin = document.querySelector('.form__input--pin');\n\n/////////////////////////////////////////////////\n// Functions\n\nconst formatMovementDate = function (date, locale) {\n const calcDaysPassed = (date1, date2) =>\n Math.round(Math.abs(date2 - date1) / (1000 * 60 * 60 * 24));\n\n const daysPassed = calcDaysPassed(new Date(), date);\n console.log(daysPassed);\n\n if (daysPassed === 0) return 'Today';\n if (daysPassed === 1) return 'Yesterday';\n if (daysPassed <= 7) return `${daysPassed} days ago`;\n\n // const day = `${date.getDate()}`.padStart(2, 0);\n // const month = `${date.getMonth() + 1}`.padStart(2, 0);\n // const year = date.getFullYear();\n // return `${day}/${month}/${year}`;\n return new Intl.DateTimeFormat(locale).format(date);\n};\n\nconst formatCur = function (value, locale, currency) {\n return new Intl.NumberFormat(locale, {\n style: 'currency',\n currency: currency,\n }).format(value);\n};\n\nconst displayMovements = function (acc, sort = false) {\n containerMovements.innerHTML = '';\n\n const combinedMovsDates = acc.movements.map((mov, i) => ({\n movement: mov,\n movementDate: acc.movementsDates.at(i),\n }));\n\n if (sort) combinedMovsDates.sort((a, b) => a.movement - b.movement);\n\n combinedMovsDates.forEach(function (obj, i) {\n const { movement, movementDate } = obj;\n const type = movement > 0 ? 'deposit' : 'withdrawal';\n\n const date = new Date(movementDate);\n const displayDate = formatMovementDate(date, acc.locale);\n\n const formattedMov = formatCur(movement, acc.locale, acc.currency);\n\n const html = `\n
\n
${\n i + 1\n } ${type}
\n
${displayDate}
\n
${formattedMov}
\n
\n `;\n\n containerMovements.insertAdjacentHTML('afterbegin', html);\n });\n};\n\nconst calcDisplayBalance = function (acc) {\n acc.balance = acc.movements.reduce((acc, mov) => acc + mov, 0);\n labelBalance.textContent = formatCur(acc.balance, acc.locale, acc.currency);\n};\n\nconst calcDisplaySummary = function (acc) {\n const incomes = acc.movements\n .filter(mov => mov > 0)\n .reduce((acc, mov) => acc + mov, 0);\n labelSumIn.textContent = formatCur(incomes, acc.locale, acc.currency);\n\n const out = acc.movements\n .filter(mov => mov < 0)\n .reduce((acc, mov) => acc + mov, 0);\n labelSumOut.textContent = formatCur(Math.abs(out), acc.locale, acc.currency);\n\n const interest = acc.movements\n .filter(mov => mov > 0)\n .map(deposit => (deposit * acc.interestRate) / 100)\n .filter((int, i, arr) => {\n // console.log(arr);\n return int >= 1;\n })\n .reduce((acc, int) => acc + int, 0);\n labelSumInterest.textContent = formatCur(interest, acc.locale, acc.currency);\n};\n\nconst createUsernames = function (accs) {\n accs.forEach(function (acc) {\n acc.username = acc.owner\n .toLowerCase()\n .split(' ')\n .map(name => name[0])\n .join('');\n });\n};\ncreateUsernames(accounts);\n\nconst updateUI = function (acc) {\n // Display movements\n displayMovements(acc);\n\n // Display balance\n calcDisplayBalance(acc);\n\n // Display summary\n calcDisplaySummary(acc);\n};\n\nconst startLogOutTimer = function () {\n const tick = function () {\n const min = String(Math.trunc(time / 60)).padStart(2, 0);\n const sec = String(time % 60).padStart(2, 0);\n\n // In each call, print the remaining time to UI\n labelTimer.textContent = `${min}:${sec}`;\n\n // When 0 seconds, stop timer and log out user\n if (time === 0) {\n clearInterval(timer);\n labelWelcome.textContent = 'Log in to get started';\n containerApp.style.opacity = 0;\n }\n\n // Decrease 1s\n time--;\n };\n\n // Set time to 5 minutes\n let time = 120;\n\n // Call the timer every second\n tick();\n const timer = setInterval(tick, 1000);\n\n return timer;\n};\n\n///////////////////////////////////////\n// Event handlers\nlet currentAccount, timer;\n\n// FAKE ALWAYS LOGGED IN\n// currentAccount = account1;\n// updateUI(currentAccount);\n// containerApp.style.opacity = 100;\n\nbtnLogin.addEventListener('click', function (e) {\n // Prevent form from submitting\n e.preventDefault();\n\n currentAccount = accounts.find(\n acc => acc.username === inputLoginUsername.value\n );\n console.log(currentAccount);\n\n if (currentAccount?.pin === +inputLoginPin.value) {\n // Display UI and message\n labelWelcome.textContent = `Welcome back, ${\n currentAccount.owner.split(' ')[0]\n }`;\n containerApp.style.opacity = 100;\n\n // Create current date and time\n const now = new Date();\n const options = {\n hour: 'numeric',\n minute: 'numeric',\n day: 'numeric',\n month: 'numeric',\n year: 'numeric',\n // weekday: 'long',\n };\n // const locale = navigator.language;\n // console.log(locale);\n\n labelDate.textContent = new Intl.DateTimeFormat(\n currentAccount.locale,\n options\n ).format(now);\n\n // const day = `${now.getDate()}`.padStart(2, 0);\n // const month = `${now.getMonth() + 1}`.padStart(2, 0);\n // const year = now.getFullYear();\n // const hour = `${now.getHours()}`.padStart(2, 0);\n // const min = `${now.getMinutes()}`.padStart(2, 0);\n // labelDate.textContent = `${day}/${month}/${year}, ${hour}:${min}`;\n\n // Clear input fields\n inputLoginUsername.value = inputLoginPin.value = '';\n inputLoginPin.blur();\n\n // Timer\n if (timer) clearInterval(timer);\n timer = startLogOutTimer();\n\n // Update UI\n updateUI(currentAccount);\n }\n});\n\nbtnTransfer.addEventListener('click', function (e) {\n e.preventDefault();\n const amount = +inputTransferAmount.value;\n const receiverAcc = accounts.find(\n acc => acc.username === inputTransferTo.value\n );\n inputTransferAmount.value = inputTransferTo.value = '';\n\n if (\n amount > 0 &&\n receiverAcc &&\n currentAccount.balance >= amount &&\n receiverAcc?.username !== currentAccount.username\n ) {\n // Doing the transfer\n currentAccount.movements.push(-amount);\n receiverAcc.movements.push(amount);\n\n // Add transfer date\n currentAccount.movementsDates.push(new Date().toISOString());\n receiverAcc.movementsDates.push(new Date().toISOString());\n\n // Update UI\n updateUI(currentAccount);\n\n // Reset timer\n clearInterval(timer);\n timer = startLogOutTimer();\n }\n});\n\nbtnLoan.addEventListener('click', function (e) {\n e.preventDefault();\n\n const amount = Math.floor(inputLoanAmount.value);\n\n if (amount > 0 && currentAccount.movements.some(mov => mov >= amount * 0.1)) {\n setTimeout(function () {\n // Add movement\n currentAccount.movements.push(amount);\n\n // Add loan date\n currentAccount.movementsDates.push(new Date().toISOString());\n\n // Update UI\n updateUI(currentAccount);\n\n // Reset timer\n clearInterval(timer);\n timer = startLogOutTimer();\n }, 2500);\n }\n inputLoanAmount.value = '';\n});\n\nbtnClose.addEventListener('click', function (e) {\n e.preventDefault();\n\n if (\n inputCloseUsername.value === currentAccount.username &&\n +inputClosePin.value === currentAccount.pin\n ) {\n const index = accounts.findIndex(\n acc => acc.username === currentAccount.username\n );\n console.log(index);\n // .indexOf(23)\n\n // Delete account\n accounts.splice(index, 1);\n\n // Hide UI\n containerApp.style.opacity = 0;\n }\n\n inputCloseUsername.value = inputClosePin.value = '';\n});\n\nlet sorted = false;\nbtnSort.addEventListener('click', function (e) {\n e.preventDefault();\n // BUG in video:\n // displayMovements(currentAccount.movements, !sorted);\n\n // FIX:\n displayMovements(currentAccount, !sorted);\n sorted = !sorted;\n});\n\n/////////////////////////////////////////////////\n/////////////////////////////////////////////////\n// LECTURES\n\n/*\n///////////////////////////////////////\n// Converting and Checking Numbers\nconsole.log(23 === 23.0);\n\n// Base 10 - 0 to 9. 1/10 = 0.1. 3/10 = 3.3333333\n// Binary base 2 - 0 1\nconsole.log(0.1 + 0.2);\nconsole.log(0.1 + 0.2 === 0.3);\n\n// Conversion\nconsole.log(Number('23'));\nconsole.log(+'23');\n\n// Parsing\nconsole.log(Number.parseInt('30px', 10));\nconsole.log(Number.parseInt('e23', 10));\n\nconsole.log(Number.parseInt(' 2.5rem '));\nconsole.log(Number.parseFloat(' 2.5rem '));\n\n// console.log(parseFloat(' 2.5rem '));\n\n// Check if value is NaN\nconsole.log(Number.isNaN(20));\nconsole.log(Number.isNaN('20'));\nconsole.log(Number.isNaN(+'20X'));\nconsole.log(Number.isNaN(23 / 0));\n\n// Checking if value is number\nconsole.log(Number.isFinite(20));\nconsole.log(Number.isFinite('20'));\nconsole.log(Number.isFinite(+'20X'));\nconsole.log(Number.isFinite(23 / 0));\n\nconsole.log(Number.isInteger(23));\nconsole.log(Number.isInteger(23.0));\nconsole.log(Number.isInteger(23 / 0));\n\n\n\n///////////////////////////////////////\n// Math and Rounding\n\nconsole.log(Math.sqrt(25));\nconsole.log(25 ** (1 / 2));\nconsole.log(8 ** (1 / 3));\n\nconsole.log(Math.max(5, 18, 23, 11, 2));\nconsole.log(Math.max(5, 18, '23', 11, 2));\nconsole.log(Math.max(5, 18, '23px', 11, 2));\n\nconsole.log(Math.min(5, 18, 23, 11, 2));\n\nconsole.log(Math.PI * Number.parseFloat('10px') ** 2);\n\nconsole.log(Math.trunc(Math.random() * 6) + 1);\n\nconst randomInt = (min, max) =>\n Math.floor(Math.random() * (max - min + 1)) + min;\n\nconsole.log(randomInt(10, 20));\nconsole.log(randomInt(0, 3));\n\n// Rounding integers\nconsole.log(Math.round(23.3));\nconsole.log(Math.round(23.9));\n\nconsole.log(Math.ceil(23.3));\nconsole.log(Math.ceil(23.9));\n\nconsole.log(Math.floor(23.3));\nconsole.log(Math.floor('23.9'));\n\nconsole.log(Math.trunc(23.3));\n\nconsole.log(Math.trunc(-23.3));\nconsole.log(Math.floor(-23.3));\n\n// Rounding decimals\nconsole.log((2.7).toFixed(0));\nconsole.log((2.7).toFixed(3));\nconsole.log((2.345).toFixed(2));\nconsole.log(+(2.345).toFixed(2));\n\n\n///////////////////////////////////////\n// The Remainder Operator\nconsole.log(5 % 2);\nconsole.log(5 / 2); // 5 = 2 * 2 + 1\n\nconsole.log(8 % 3);\nconsole.log(8 / 3); // 8 = 2 * 3 + 2\n\nconsole.log(6 % 2);\nconsole.log(6 / 2);\n\nconsole.log(7 % 2);\nconsole.log(7 / 2);\n\nconst isEven = n => n % 2 === 0;\nconsole.log(isEven(8));\nconsole.log(isEven(23));\nconsole.log(isEven(514));\n\nlabelBalance.addEventListener('click', function () {\n [...document.querySelectorAll('.movements__row')].forEach(function (row, i) {\n // 0, 2, 4, 6\n if (i % 2 === 0) row.style.backgroundColor = 'orangered';\n // 0, 3, 6, 9\n if (i % 3 === 0) row.style.backgroundColor = 'blue';\n });\n});\n\n\n///////////////////////////////////////\n// Numeric Separators\n\n// 287,460,000,000\nconst diameter = 287_460_000_000;\nconsole.log(diameter);\n\nconst price = 345_99;\nconsole.log(price);\n\nconst transferFee1 = 15_00;\nconst transferFee2 = 1_500;\n\nconst PI = 3.1415;\nconsole.log(PI);\n\nconsole.log(Number('230_000'));\nconsole.log(parseInt('230_000'));\n\n\n///////////////////////////////////////\n// Working with BigInt\nconsole.log(2 ** 53 - 1);\nconsole.log(Number.MAX_SAFE_INTEGER);\nconsole.log(2 ** 53 + 1);\nconsole.log(2 ** 53 + 2);\nconsole.log(2 ** 53 + 3);\nconsole.log(2 ** 53 + 4);\n\nconsole.log(4838430248342043823408394839483204n);\nconsole.log(BigInt(48384302));\n\n// Operations\nconsole.log(10000n + 10000n);\nconsole.log(36286372637263726376237263726372632n * 10000000n);\n// console.log(Math.sqrt(16n));\n\nconst huge = 20289830237283728378237n;\nconst num = 23;\nconsole.log(huge * BigInt(num));\n\n// Exceptions\nconsole.log(20n > 15);\nconsole.log(20n === 20);\nconsole.log(typeof 20n);\nconsole.log(20n == '20');\n\nconsole.log(huge + ' is REALLY big!!!');\n\n// Divisions\nconsole.log(11n / 3n);\nconsole.log(10 / 3);\n\n\n///////////////////////////////////////\n// Creating Dates\n\n// Create a date\n\nconst now = new Date();\nconsole.log(now);\n\nconsole.log(new Date('Aug 02 2020 18:05:41'));\nconsole.log(new Date('December 24, 2015'));\nconsole.log(new Date(account1.movementsDates[0]));\n\nconsole.log(new Date(2037, 10, 19, 15, 23, 5));\nconsole.log(new Date(2037, 10, 31));\n\nconsole.log(new Date(0));\nconsole.log(new Date(3 * 24 * 60 * 60 * 1000));\n\n\n// Working with dates\nconst future = new Date(2037, 10, 19, 15, 23);\nconsole.log(future);\nconsole.log(future.getFullYear());\nconsole.log(future.getMonth());\nconsole.log(future.getDate());\nconsole.log(future.getDay());\nconsole.log(future.getHours());\nconsole.log(future.getMinutes());\nconsole.log(future.getSeconds());\nconsole.log(future.toISOString());\nconsole.log(future.getTime());\n\nconsole.log(new Date(2142256980000));\n\nconsole.log(Date.now());\n\nfuture.setFullYear(2040);\nconsole.log(future);\n\n\n///////////////////////////////////////\n// Operations With Dates\nconst future = new Date(2037, 10, 19, 15, 23);\nconsole.log(+future);\n\nconst calcDaysPassed = (date1, date2) =>\n Math.abs(date2 - date1) / (1000 * 60 * 60 * 24);\n\nconst days1 = calcDaysPassed(new Date(2037, 3, 4), new Date(2037, 3, 14));\nconsole.log(days1);\n\n\n///////////////////////////////////////\n// Internationalizing Numbers (Intl)\nconst num = 3884764.23;\n\nconst options = {\n style: 'currency',\n unit: 'celsius',\n currency: 'EUR',\n // useGrouping: false,\n};\n\nconsole.log('US: ', new Intl.NumberFormat('en-US', options).format(num));\nconsole.log('Germany: ', new Intl.NumberFormat('de-DE', options).format(num));\nconsole.log('Syria: ', new Intl.NumberFormat('ar-SY', options).format(num));\nconsole.log(\n navigator.language,\n new Intl.NumberFormat(navigator.language, options).format(num)\n);\n\n\n///////////////////////////////////////\n// Timers\n\n// setTimeout\nconst ingredients = ['olives', 'spinach'];\nconst pizzaTimer = setTimeout(\n (ing1, ing2) => console.log(`Here is your pizza with ${ing1} and ${ing2} 🍕`),\n 3000,\n ...ingredients\n);\nconsole.log('Waiting...');\n\nif (ingredients.includes('spinach')) clearTimeout(pizzaTimer);\n\n// setInterval\nsetInterval(function () {\n const now = new Date();\n console.log(now);\n}, 1000);\n*/\n" }, { "path": "12-Numbers-Dates-Timers-Bankist/final/style.css", "content": "/*\n * Use this CSS to learn some intersting techniques,\n * in case you're wondering how I built the UI.\n * Have fun! 😁\n */\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: inherit;\n}\n\nhtml {\n font-size: 62.5%;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Poppins', sans-serif;\n color: #444;\n background-color: #f3f3f3;\n height: 100vh;\n padding: 2rem;\n}\n\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0 2rem;\n}\n\n.welcome {\n font-size: 1.9rem;\n font-weight: 500;\n}\n\n.logo {\n height: 5.25rem;\n}\n\n.login {\n display: flex;\n}\n\n.login__input {\n border: none;\n padding: 0.5rem 2rem;\n font-size: 1.6rem;\n font-family: inherit;\n text-align: center;\n width: 12rem;\n border-radius: 10rem;\n margin-right: 1rem;\n color: inherit;\n border: 1px solid #fff;\n transition: all 0.3s;\n}\n\n.login__input:focus {\n outline: none;\n border: 1px solid #ccc;\n}\n\n.login__input::placeholder {\n color: #bbb;\n}\n\n.login__btn {\n border: none;\n background: none;\n font-size: 2.2rem;\n color: inherit;\n cursor: pointer;\n transition: all 0.3s;\n}\n\n.login__btn:hover,\n.login__btn:focus,\n.btn--sort:hover,\n.btn--sort:focus {\n outline: none;\n color: #777;\n}\n\n/* MAIN */\n.app {\n position: relative;\n max-width: 100rem;\n margin: 4rem auto;\n display: grid;\n grid-template-columns: 4fr 3fr;\n grid-template-rows: auto repeat(3, 15rem) auto;\n gap: 2rem;\n\n /* NOTE This creates the fade in/out anumation */\n opacity: 0;\n transition: all 1s;\n}\n\n.balance {\n grid-column: 1 / span 2;\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n margin-bottom: 2rem;\n}\n\n.balance__label {\n font-size: 2.2rem;\n font-weight: 500;\n margin-bottom: -0.2rem;\n}\n\n.balance__date {\n font-size: 1.4rem;\n color: #888;\n}\n\n.balance__value {\n font-size: 4.5rem;\n font-weight: 400;\n}\n\n/* MOVEMENTS */\n.movements {\n grid-row: 2 / span 3;\n background-color: #fff;\n border-radius: 1rem;\n overflow: scroll;\n}\n\n.movements__row {\n padding: 2.25rem 4rem;\n display: flex;\n align-items: center;\n border-bottom: 1px solid #eee;\n}\n\n.movements__type {\n font-size: 1.1rem;\n text-transform: uppercase;\n font-weight: 500;\n color: #fff;\n padding: 0.1rem 1rem;\n border-radius: 10rem;\n margin-right: 2rem;\n}\n\n.movements__date {\n font-size: 1.1rem;\n text-transform: uppercase;\n font-weight: 500;\n color: #666;\n}\n\n.movements__type--deposit {\n background-image: linear-gradient(to top left, #39b385, #9be15d);\n}\n\n.movements__type--withdrawal {\n background-image: linear-gradient(to top left, #e52a5a, #ff585f);\n}\n\n.movements__value {\n font-size: 1.7rem;\n margin-left: auto;\n}\n\n/* SUMMARY */\n.summary {\n grid-row: 5 / 6;\n display: flex;\n align-items: baseline;\n padding: 0 0.3rem;\n margin-top: 1rem;\n}\n\n.summary__label {\n font-size: 1.2rem;\n font-weight: 500;\n text-transform: uppercase;\n margin-right: 0.8rem;\n}\n\n.summary__value {\n font-size: 2.2rem;\n margin-right: 2.5rem;\n}\n\n.summary__value--in,\n.summary__value--interest {\n color: #66c873;\n}\n\n.summary__value--out {\n color: #f5465d;\n}\n\n.btn--sort {\n margin-left: auto;\n border: none;\n background: none;\n font-size: 1.3rem;\n font-weight: 500;\n cursor: pointer;\n}\n\n/* OPERATIONS */\n.operation {\n border-radius: 1rem;\n padding: 3rem 4rem;\n color: #333;\n}\n\n.operation--transfer {\n background-image: linear-gradient(to top left, #ffb003, #ffcb03);\n}\n\n.operation--loan {\n background-image: linear-gradient(to top left, #39b385, #9be15d);\n}\n\n.operation--close {\n background-image: linear-gradient(to top left, #e52a5a, #ff585f);\n}\n\nh2 {\n margin-bottom: 1.5rem;\n font-size: 1.7rem;\n font-weight: 600;\n color: #333;\n}\n\n.form {\n display: grid;\n grid-template-columns: 2.5fr 2.5fr 1fr;\n grid-template-rows: auto auto;\n gap: 0.4rem 1rem;\n}\n\n/* Exceptions for interst */\n.form.form--loan {\n grid-template-columns: 2.5fr 1fr 2.5fr;\n}\n.form__label--loan {\n grid-row: 2;\n}\n/* End exceptions */\n\n.form__input {\n width: 100%;\n border: none;\n background-color: rgba(255, 255, 255, 0.4);\n font-family: inherit;\n font-size: 1.5rem;\n text-align: center;\n color: #333;\n padding: 0.3rem 1rem;\n border-radius: 0.7rem;\n transition: all 0.3s;\n}\n\n.form__input:focus {\n outline: none;\n background-color: rgba(255, 255, 255, 0.6);\n}\n\n.form__label {\n font-size: 1.3rem;\n text-align: center;\n}\n\n.form__btn {\n border: none;\n border-radius: 0.7rem;\n font-size: 1.8rem;\n background-color: #fff;\n cursor: pointer;\n transition: all 0.3s;\n}\n\n.form__btn:focus {\n outline: none;\n background-color: rgba(255, 255, 255, 0.8);\n}\n\n.logout-timer {\n padding: 0 0.3rem;\n margin-top: 1.9rem;\n text-align: right;\n font-size: 1.25rem;\n}\n\n.timer {\n font-weight: 600;\n}\n" }, { "path": "12-Numbers-Dates-Timers-Bankist/starter/.prettierrc", "content": "{\n \"singleQuote\": true,\n \"arrowParens\": \"avoid\"\n}\n" }, { "path": "12-Numbers-Dates-Timers-Bankist/starter/index.html", "content": "\n\n \n \n \n \n \n\n \n\n \n Bankist\n \n \n \n \n\n
\n \n
\n
\n

Current balance

\n

\n As of 05/03/2037\n

\n
\n

0000€

\n
\n\n \n
\n
\n
2 deposit
\n
3 days ago
\n
4 000€
\n
\n
\n
\n 1 withdrawal\n
\n
24/01/2037
\n
-378€
\n
\n
\n\n \n
\n

In

\n

0000€

\n

Out

\n

0000€

\n

Interest

\n

0000€

\n \n
\n\n \n
\n

Transfer money

\n
\n \n \n \n \n \n
\n
\n\n \n
\n

Request loan

\n
\n \n \n \n
\n
\n\n \n
\n

Close account

\n
\n \n \n \n \n \n \n
\n\n \n

\n You will be logged out in 05:00\n

\n
\n\n \n\n \n \n\n" }, { "path": "12-Numbers-Dates-Timers-Bankist/starter/script.js", "content": "'use strict';\n\n/////////////////////////////////////////////////\n/////////////////////////////////////////////////\n// BANKIST APP\n\n/////////////////////////////////////////////////\n// Data\n\n// DIFFERENT DATA! Contains movement dates, currency and locale\n\nconst account1 = {\n owner: 'Jonas Schmedtmann',\n movements: [200, 455.23, -306.5, 25000, -642.21, -133.9, 79.97, 1300],\n interestRate: 1.2, // %\n pin: 1111,\n\n movementsDates: [\n '2019-11-18T21:31:17.178Z',\n '2019-12-23T07:42:02.383Z',\n '2020-01-28T09:15:04.904Z',\n '2020-04-01T10:17:24.185Z',\n '2020-05-08T14:11:59.604Z',\n '2020-05-27T17:01:17.194Z',\n '2020-07-11T23:36:17.929Z',\n '2020-07-12T10:51:36.790Z',\n ],\n currency: 'EUR',\n locale: 'pt-PT', // de-DE\n};\n\nconst account2 = {\n owner: 'Jessica Davis',\n movements: [5000, 3400, -150, -790, -3210, -1000, 8500, -30],\n interestRate: 1.5,\n pin: 2222,\n\n movementsDates: [\n '2019-11-01T13:15:33.035Z',\n '2019-11-30T09:48:16.867Z',\n '2019-12-25T06:04:23.907Z',\n '2020-01-25T14:18:46.235Z',\n '2020-02-05T16:33:06.386Z',\n '2020-04-10T14:43:26.374Z',\n '2020-06-25T18:49:59.371Z',\n '2020-07-26T12:01:20.894Z',\n ],\n currency: 'USD',\n locale: 'en-US',\n};\n\nconst accounts = [account1, account2];\n\n/////////////////////////////////////////////////\n// Elements\nconst labelWelcome = document.querySelector('.welcome');\nconst labelDate = document.querySelector('.date');\nconst labelBalance = document.querySelector('.balance__value');\nconst labelSumIn = document.querySelector('.summary__value--in');\nconst labelSumOut = document.querySelector('.summary__value--out');\nconst labelSumInterest = document.querySelector('.summary__value--interest');\nconst labelTimer = document.querySelector('.timer');\n\nconst containerApp = document.querySelector('.app');\nconst containerMovements = document.querySelector('.movements');\n\nconst btnLogin = document.querySelector('.login__btn');\nconst btnTransfer = document.querySelector('.form__btn--transfer');\nconst btnLoan = document.querySelector('.form__btn--loan');\nconst btnClose = document.querySelector('.form__btn--close');\nconst btnSort = document.querySelector('.btn--sort');\n\nconst inputLoginUsername = document.querySelector('.login__input--user');\nconst inputLoginPin = document.querySelector('.login__input--pin');\nconst inputTransferTo = document.querySelector('.form__input--to');\nconst inputTransferAmount = document.querySelector('.form__input--amount');\nconst inputLoanAmount = document.querySelector('.form__input--loan-amount');\nconst inputCloseUsername = document.querySelector('.form__input--user');\nconst inputClosePin = document.querySelector('.form__input--pin');\n\n/////////////////////////////////////////////////\n// Functions\n\nconst displayMovements = function (movements, sort = false) {\n containerMovements.innerHTML = '';\n\n const movs = sort ? movements.slice().sort((a, b) => a - b) : movements;\n\n movs.forEach(function (mov, i) {\n const type = mov > 0 ? 'deposit' : 'withdrawal';\n\n const html = `\n
\n
${\n i + 1\n } ${type}
\n
${mov}€
\n
\n `;\n\n containerMovements.insertAdjacentHTML('afterbegin', html);\n });\n};\n\nconst calcDisplayBalance = function (acc) {\n acc.balance = acc.movements.reduce((acc, mov) => acc + mov, 0);\n labelBalance.textContent = `${acc.balance}€`;\n};\n\nconst calcDisplaySummary = function (acc) {\n const incomes = acc.movements\n .filter(mov => mov > 0)\n .reduce((acc, mov) => acc + mov, 0);\n labelSumIn.textContent = `${incomes}€`;\n\n const out = acc.movements\n .filter(mov => mov < 0)\n .reduce((acc, mov) => acc + mov, 0);\n labelSumOut.textContent = `${Math.abs(out)}€`;\n\n const interest = acc.movements\n .filter(mov => mov > 0)\n .map(deposit => (deposit * acc.interestRate) / 100)\n .filter((int, i, arr) => {\n // console.log(arr);\n return int >= 1;\n })\n .reduce((acc, int) => acc + int, 0);\n labelSumInterest.textContent = `${interest}€`;\n};\n\nconst createUsernames = function (accs) {\n accs.forEach(function (acc) {\n acc.username = acc.owner\n .toLowerCase()\n .split(' ')\n .map(name => name[0])\n .join('');\n });\n};\ncreateUsernames(accounts);\n\nconst updateUI = function (acc) {\n // Display movements\n displayMovements(acc.movements);\n\n // Display balance\n calcDisplayBalance(acc);\n\n // Display summary\n calcDisplaySummary(acc);\n};\n\n///////////////////////////////////////\n// Event handlers\nlet currentAccount;\n\nbtnLogin.addEventListener('click', function (e) {\n // Prevent form from submitting\n e.preventDefault();\n\n currentAccount = accounts.find(\n acc => acc.username === inputLoginUsername.value\n );\n console.log(currentAccount);\n\n if (currentAccount?.pin === Number(inputLoginPin.value)) {\n // Display UI and message\n labelWelcome.textContent = `Welcome back, ${\n currentAccount.owner.split(' ')[0]\n }`;\n containerApp.style.opacity = 100;\n\n // Clear input fields\n inputLoginUsername.value = inputLoginPin.value = '';\n inputLoginPin.blur();\n\n // Update UI\n updateUI(currentAccount);\n }\n});\n\nbtnTransfer.addEventListener('click', function (e) {\n e.preventDefault();\n const amount = Number(inputTransferAmount.value);\n const receiverAcc = accounts.find(\n acc => acc.username === inputTransferTo.value\n );\n inputTransferAmount.value = inputTransferTo.value = '';\n\n if (\n amount > 0 &&\n receiverAcc &&\n currentAccount.balance >= amount &&\n receiverAcc?.username !== currentAccount.username\n ) {\n // Doing the transfer\n currentAccount.movements.push(-amount);\n receiverAcc.movements.push(amount);\n\n // Update UI\n updateUI(currentAccount);\n }\n});\n\nbtnLoan.addEventListener('click', function (e) {\n e.preventDefault();\n\n const amount = Number(inputLoanAmount.value);\n\n if (amount > 0 && currentAccount.movements.some(mov => mov >= amount * 0.1)) {\n // Add movement\n currentAccount.movements.push(amount);\n\n // Update UI\n updateUI(currentAccount);\n }\n inputLoanAmount.value = '';\n});\n\nbtnClose.addEventListener('click', function (e) {\n e.preventDefault();\n\n if (\n inputCloseUsername.value === currentAccount.username &&\n Number(inputClosePin.value) === currentAccount.pin\n ) {\n const index = accounts.findIndex(\n acc => acc.username === currentAccount.username\n );\n console.log(index);\n // .indexOf(23)\n\n // Delete account\n accounts.splice(index, 1);\n\n // Hide UI\n containerApp.style.opacity = 0;\n }\n\n inputCloseUsername.value = inputClosePin.value = '';\n});\n\nlet sorted = false;\nbtnSort.addEventListener('click', function (e) {\n e.preventDefault();\n displayMovements(currentAccount.movements, !sorted);\n sorted = !sorted;\n});\n\n/////////////////////////////////////////////////\n/////////////////////////////////////////////////\n// LECTURES\n" }, { "path": "12-Numbers-Dates-Timers-Bankist/starter/style.css", "content": "/*\n * Use this CSS to learn some intersting techniques,\n * in case you're wondering how I built the UI.\n * Have fun! 😁\n */\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: inherit;\n}\n\nhtml {\n font-size: 62.5%;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Poppins', sans-serif;\n color: #444;\n background-color: #f3f3f3;\n height: 100vh;\n padding: 2rem;\n}\n\nnav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0 2rem;\n}\n\n.welcome {\n font-size: 1.9rem;\n font-weight: 500;\n}\n\n.logo {\n height: 5.25rem;\n}\n\n.login {\n display: flex;\n}\n\n.login__input {\n border: none;\n padding: 0.5rem 2rem;\n font-size: 1.6rem;\n font-family: inherit;\n text-align: center;\n width: 12rem;\n border-radius: 10rem;\n margin-right: 1rem;\n color: inherit;\n border: 1px solid #fff;\n transition: all 0.3s;\n}\n\n.login__input:focus {\n outline: none;\n border: 1px solid #ccc;\n}\n\n.login__input::placeholder {\n color: #bbb;\n}\n\n.login__btn {\n border: none;\n background: none;\n font-size: 2.2rem;\n color: inherit;\n cursor: pointer;\n transition: all 0.3s;\n}\n\n.login__btn:hover,\n.login__btn:focus,\n.btn--sort:hover,\n.btn--sort:focus {\n outline: none;\n color: #777;\n}\n\n/* MAIN */\n.app {\n position: relative;\n max-width: 100rem;\n margin: 4rem auto;\n display: grid;\n grid-template-columns: 4fr 3fr;\n grid-template-rows: auto repeat(3, 15rem) auto;\n gap: 2rem;\n\n /* NOTE This creates the fade in/out anumation */\n opacity: 0;\n transition: all 1s;\n}\n\n.balance {\n grid-column: 1 / span 2;\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n margin-bottom: 2rem;\n}\n\n.balance__label {\n font-size: 2.2rem;\n font-weight: 500;\n margin-bottom: -0.2rem;\n}\n\n.balance__date {\n font-size: 1.4rem;\n color: #888;\n}\n\n.balance__value {\n font-size: 4.5rem;\n font-weight: 400;\n}\n\n/* MOVEMENTS */\n.movements {\n grid-row: 2 / span 3;\n background-color: #fff;\n border-radius: 1rem;\n overflow: scroll;\n}\n\n.movements__row {\n padding: 2.25rem 4rem;\n display: flex;\n align-items: center;\n border-bottom: 1px solid #eee;\n}\n\n.movements__type {\n font-size: 1.1rem;\n text-transform: uppercase;\n font-weight: 500;\n color: #fff;\n padding: 0.1rem 1rem;\n border-radius: 10rem;\n margin-right: 2rem;\n}\n\n.movements__date {\n font-size: 1.1rem;\n text-transform: uppercase;\n font-weight: 500;\n color: #666;\n}\n\n.movements__type--deposit {\n background-image: linear-gradient(to top left, #39b385, #9be15d);\n}\n\n.movements__type--withdrawal {\n background-image: linear-gradient(to top left, #e52a5a, #ff585f);\n}\n\n.movements__value {\n font-size: 1.7rem;\n margin-left: auto;\n}\n\n/* SUMMARY */\n.summary {\n grid-row: 5 / 6;\n display: flex;\n align-items: baseline;\n padding: 0 0.3rem;\n margin-top: 1rem;\n}\n\n.summary__label {\n font-size: 1.2rem;\n font-weight: 500;\n text-transform: uppercase;\n margin-right: 0.8rem;\n}\n\n.summary__value {\n font-size: 2.2rem;\n margin-right: 2.5rem;\n}\n\n.summary__value--in,\n.summary__value--interest {\n color: #66c873;\n}\n\n.summary__value--out {\n color: #f5465d;\n}\n\n.btn--sort {\n margin-left: auto;\n border: none;\n background: none;\n font-size: 1.3rem;\n font-weight: 500;\n cursor: pointer;\n}\n\n/* OPERATIONS */\n.operation {\n border-radius: 1rem;\n padding: 3rem 4rem;\n color: #333;\n}\n\n.operation--transfer {\n background-image: linear-gradient(to top left, #ffb003, #ffcb03);\n}\n\n.operation--loan {\n background-image: linear-gradient(to top left, #39b385, #9be15d);\n}\n\n.operation--close {\n background-image: linear-gradient(to top left, #e52a5a, #ff585f);\n}\n\nh2 {\n margin-bottom: 1.5rem;\n font-size: 1.7rem;\n font-weight: 600;\n color: #333;\n}\n\n.form {\n display: grid;\n grid-template-columns: 2.5fr 2.5fr 1fr;\n grid-template-rows: auto auto;\n gap: 0.4rem 1rem;\n}\n\n/* Exceptions for interst */\n.form.form--loan {\n grid-template-columns: 2.5fr 1fr 2.5fr;\n}\n.form__label--loan {\n grid-row: 2;\n}\n/* End exceptions */\n\n.form__input {\n width: 100%;\n border: none;\n background-color: rgba(255, 255, 255, 0.4);\n font-family: inherit;\n font-size: 1.5rem;\n text-align: center;\n color: #333;\n padding: 0.3rem 1rem;\n border-radius: 0.7rem;\n transition: all 0.3s;\n}\n\n.form__input:focus {\n outline: none;\n background-color: rgba(255, 255, 255, 0.6);\n}\n\n.form__label {\n font-size: 1.3rem;\n text-align: center;\n}\n\n.form__btn {\n border: none;\n border-radius: 0.7rem;\n font-size: 1.8rem;\n background-color: #fff;\n cursor: pointer;\n transition: all 0.3s;\n}\n\n.form__btn:focus {\n outline: none;\n background-color: rgba(255, 255, 255, 0.8);\n}\n\n.logout-timer {\n padding: 0 0.3rem;\n margin-top: 1.9rem;\n text-align: right;\n font-size: 1.25rem;\n}\n\n.timer {\n font-weight: 600;\n}\n" }, { "path": "13-Advanced-DOM-Bankist/final/.prettierrc", "content": "{\n \"singleQuote\": true,\n \"arrowParens\": \"avoid\"\n}\n" }, { "path": "13-Advanced-DOM-Bankist/final/index.html", "content": "\n\n \n \n \n \n \n\n \n \n Bankist | When Banking meets Minimalist\n\n \n \n \n
\n \n\n
\n \n

\n When\n \n banking\n meets
\n minimalist\n

\n

A simpler banking experience for a simpler life.

\n \n \n
\n
\n\n
\n
\n

Features

\n

\n Everything you need in a modern bank and more.\n

\n
\n\n
\n \n
\n
\n \n \n \n
\n
100% digital bank
\n

\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde alias\n sint quos? Accusantium a fugiat porro reiciendis saepe quibusdam\n debitis ducimus.\n

\n
\n\n
\n
\n \n \n \n
\n
Watch your money grow
\n

\n Nesciunt quos autem dolorum voluptates cum dolores dicta fuga\n inventore ab? Nulla incidunt eius numquam sequi iste pariatur\n quibusdam!\n

\n
\n \n\n \n
\n
\n \n \n \n
\n
Free debit card included
\n

\n Quasi, fugit in cumque cupiditate reprehenderit debitis animi enim\n eveniet consequatur odit quam quos possimus assumenda dicta fuga\n inventore ab.\n

\n
\n
\n
\n\n
\n
\n

Operations

\n

\n Everything as simple as possible, but no simpler.\n

\n
\n\n
\n
\n \n 01Instant Transfers\n \n \n \n
\n \n
\n \n \n \n
\n
\n Tranfser money to anyone, instantly! No fees, no BS.\n
\n

\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\n ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\n aliquip ex ea commodo consequat.\n

\n
\n\n
\n
\n \n \n \n
\n
\n Buy a home or make your dreams come true, with instant loans.\n
\n

\n Duis aute irure dolor in reprehenderit in voluptate velit esse\n cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat\n cupidatat non proident, sunt in culpa qui officia deserunt mollit\n anim id est laborum.\n

\n
\n
\n
\n \n \n \n
\n
\n No longer need your account? No problem! Close it instantly.\n
\n

\n Excepteur sint occaecat cupidatat non proident, sunt in culpa qui\n officia deserunt mollit anim id est laborum. Ut enim ad minim\n veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex\n ea commodo consequat.\n

\n
\n \n
\n\n
\n
\n

Not sure yet?

\n

\n Millions of Bankists are already making their lifes simpler.\n

\n
\n\n
\n
\n
\n
Best financial decision ever!
\n
\n Lorem ipsum dolor sit, amet consectetur adipisicing elit.\n Accusantium quas quisquam non? Quas voluptate nulla minima\n deleniti optio ullam nesciunt, numquam corporis et asperiores\n laboriosam sunt, praesentium suscipit blanditiis. Necessitatibus\n id alias reiciendis, perferendis facere pariatur dolore veniam\n autem esse non voluptatem saepe provident nihil molestiae.\n
\n
\n \"\"\n
Aarav Lynn
\n

San Francisco, USA

\n
\n
\n
\n\n
\n
\n
\n The last step to becoming a complete minimalist\n
\n
\n Quisquam itaque deserunt ullam, quia ea repellendus provident,\n ducimus neque ipsam modi voluptatibus doloremque, corrupti\n laborum. Incidunt numquam perferendis veritatis neque repellendus.\n Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illo\n deserunt exercitationem deleniti.\n
\n
\n \"\"\n
Miyah Miles
\n

London, UK

\n
\n
\n
\n\n
\n
\n
\n Finally free from old-school banks\n
\n
\n Debitis, nihil sit minus suscipit magni aperiam vel tenetur\n incidunt commodi architecto numquam omnis nulla autem,\n necessitatibus blanditiis modi similique quidem. Odio aliquam\n culpa dicta beatae quod maiores ipsa minus consequatur error sunt,\n deleniti saepe aliquid quos inventore sequi. Necessitatibus id\n alias reiciendis, perferendis facere.\n
\n
\n \"\"\n
Francisco Gomes
\n

Lisbon, Portugal

\n
\n
\n
\n\n \n \n
\n
\n
\n\n
\n
\n

\n The best day to join Bankist was one year ago. The second best is\n today!\n

\n
\n \n
\n\n \n\n
\n \n

\n Open your bank account
\n in just 5 minutes\n

\n
\n \n \n \n \n \n \n \n
\n
\n
\n\n \n \n\n" }, { "path": "13-Advanced-DOM-Bankist/final/script.js", "content": "'use strict';\n\nconst modal = document.querySelector('.modal');\nconst overlay = document.querySelector('.overlay');\nconst btnCloseModal = document.querySelector('.btn--close-modal');\nconst btnsOpenModal = document.querySelectorAll('.btn--show-modal');\nconst btnScrollTo = document.querySelector('.btn--scroll-to');\nconst section1 = document.querySelector('#section--1');\nconst nav = document.querySelector('.nav');\nconst tabs = document.querySelectorAll('.operations__tab');\nconst tabsContainer = document.querySelector('.operations__tab-container');\nconst tabsContent = document.querySelectorAll('.operations__content');\n\n///////////////////////////////////////\n// Modal window\n\nconst openModal = function (e) {\n e.preventDefault();\n modal.classList.remove('hidden');\n overlay.classList.remove('hidden');\n};\n\nconst closeModal = function () {\n modal.classList.add('hidden');\n overlay.classList.add('hidden');\n};\n\nbtnsOpenModal.forEach(btn => btn.addEventListener('click', openModal));\n\nbtnCloseModal.addEventListener('click', closeModal);\noverlay.addEventListener('click', closeModal);\n\ndocument.addEventListener('keydown', function (e) {\n if (e.key === 'Escape' && !modal.classList.contains('hidden')) {\n closeModal();\n }\n});\n\n///////////////////////////////////////\n// Button scrolling\nbtnScrollTo.addEventListener('click', function (e) {\n const s1coords = section1.getBoundingClientRect();\n console.log(s1coords);\n\n console.log(e.target.getBoundingClientRect());\n\n console.log('Current scroll (X/Y)', window.pageXOffset, window.pageYOffset);\n\n console.log(\n 'height/width viewport',\n document.documentElement.clientHeight,\n document.documentElement.clientWidth\n );\n\n // Scrolling\n // window.scrollTo(\n // s1coords.left + window.pageXOffset,\n // s1coords.top + window.pageYOffset\n // );\n\n // window.scrollTo({\n // left: s1coords.left + window.pageXOffset,\n // top: s1coords.top + window.pageYOffset,\n // behavior: 'smooth',\n // });\n\n section1.scrollIntoView({ behavior: 'smooth' });\n});\n\n///////////////////////////////////////\n// Page navigation\n\n// document.querySelectorAll('.nav__link').forEach(function (el) {\n// el.addEventListener('click', function (e) {\n// e.preventDefault();\n// const id = this.getAttribute('href');\n// console.log(id);\n// document.querySelector(id).scrollIntoView({ behavior: 'smooth' });\n// });\n// });\n\n// 1. Add event listener to common parent element\n// 2. Determine what element originated the event\n\ndocument.querySelector('.nav__links').addEventListener('click', function (e) {\n e.preventDefault();\n\n // Matching strategy\n if (e.target.classList.contains('nav__link')) {\n const id = e.target.getAttribute('href');\n document.querySelector(id).scrollIntoView({ behavior: 'smooth' });\n }\n});\n\n///////////////////////////////////////\n// Tabbed component\n\ntabsContainer.addEventListener('click', function (e) {\n const clicked = e.target.closest('.operations__tab');\n\n // Guard clause\n if (!clicked) return;\n\n // Remove active classes\n tabs.forEach(t => t.classList.remove('operations__tab--active'));\n tabsContent.forEach(c => c.classList.remove('operations__content--active'));\n\n // Activate tab\n clicked.classList.add('operations__tab--active');\n\n // Activate content area\n document\n .querySelector(`.operations__content--${clicked.dataset.tab}`)\n .classList.add('operations__content--active');\n});\n\n///////////////////////////////////////\n// Menu fade animation\nconst handleHover = function (e) {\n if (e.target.classList.contains('nav__link')) {\n const link = e.target;\n const siblings = link.closest('.nav').querySelectorAll('.nav__link');\n const logo = link.closest('.nav').querySelector('img');\n\n siblings.forEach(el => {\n if (el !== link) el.style.opacity = this;\n });\n logo.style.opacity = this;\n }\n};\n\n// Passing \"argument\" into handler\nnav.addEventListener('mouseover', handleHover.bind(0.5));\nnav.addEventListener('mouseout', handleHover.bind(1));\n\n///////////////////////////////////////\n// Sticky navigation: Intersection Observer API\n\nconst header = document.querySelector('.header');\nconst navHeight = nav.getBoundingClientRect().height;\n\nconst stickyNav = function (entries) {\n const [entry] = entries;\n // console.log(entry);\n\n if (!entry.isIntersecting) nav.classList.add('sticky');\n else nav.classList.remove('sticky');\n};\n\nconst headerObserver = new IntersectionObserver(stickyNav, {\n root: null,\n threshold: 0,\n rootMargin: `-${navHeight}px`,\n});\n\nheaderObserver.observe(header);\n\n///////////////////////////////////////\n// Reveal sections\nconst allSections = document.querySelectorAll('.section');\n\nconst revealSection = function (entries, observer) {\n entries.forEach(entry => {\n if (!entry.isIntersecting) return;\n\n entry.target.classList.remove('section--hidden');\n observer.unobserve(entry.target);\n });\n};\n\nconst sectionObserver = new IntersectionObserver(revealSection, {\n root: null,\n threshold: 0.15,\n});\n\nallSections.forEach(function (section) {\n sectionObserver.observe(section);\n section.classList.add('section--hidden');\n});\n\n// Lazy loading images\nconst imgTargets = document.querySelectorAll('img[data-src]');\n\nconst loadImg = function (entries, observer) {\n const [entry] = entries;\n\n if (!entry.isIntersecting) return;\n\n // Replace src with data-src\n entry.target.src = entry.target.dataset.src;\n\n entry.target.addEventListener('load', function () {\n entry.target.classList.remove('lazy-img');\n });\n\n observer.unobserve(entry.target);\n};\n\nconst imgObserver = new IntersectionObserver(loadImg, {\n root: null,\n threshold: 0,\n rootMargin: '200px',\n});\n\nimgTargets.forEach(img => imgObserver.observe(img));\n\n///////////////////////////////////////\n// Slider\nconst slider = function () {\n const slides = document.querySelectorAll('.slide');\n const btnLeft = document.querySelector('.slider__btn--left');\n const btnRight = document.querySelector('.slider__btn--right');\n const dotContainer = document.querySelector('.dots');\n\n let curSlide = 0;\n const maxSlide = slides.length;\n\n // Functions\n const createDots = function () {\n slides.forEach(function (_, i) {\n dotContainer.insertAdjacentHTML(\n 'beforeend',\n ``\n );\n });\n };\n\n const activateDot = function (slide) {\n document\n .querySelectorAll('.dots__dot')\n .forEach(dot => dot.classList.remove('dots__dot--active'));\n\n document\n .querySelector(`.dots__dot[data-slide=\"${slide}\"]`)\n .classList.add('dots__dot--active');\n };\n\n const goToSlide = function (slide) {\n slides.forEach(\n (s, i) => (s.style.transform = `translateX(${100 * (i - slide)}%)`)\n );\n };\n\n // Next slide\n const nextSlide = function () {\n if (curSlide === maxSlide - 1) {\n curSlide = 0;\n } else {\n curSlide++;\n }\n\n goToSlide(curSlide);\n activateDot(curSlide);\n };\n\n const prevSlide = function () {\n if (curSlide === 0) {\n curSlide = maxSlide - 1;\n } else {\n curSlide--;\n }\n goToSlide(curSlide);\n activateDot(curSlide);\n };\n\n const init = function () {\n goToSlide(0);\n createDots();\n\n activateDot(0);\n };\n init();\n\n // Event handlers\n btnRight.addEventListener('click', nextSlide);\n btnLeft.addEventListener('click', prevSlide);\n\n document.addEventListener('keydown', function (e) {\n if (e.key === 'ArrowLeft') prevSlide();\n e.key === 'ArrowRight' && nextSlide();\n });\n\n dotContainer.addEventListener('click', function (e) {\n if (e.target.classList.contains('dots__dot')) {\n // BUG in v2: This way, we're not keeping track of the current slide when clicking on a slide\n // const { slide } = e.target.dataset;\n\n curSlide = Number(e.target.dataset.slide);\n goToSlide(curSlide);\n activateDot(curSlide);\n }\n });\n};\nslider();\n\n///////////////////////////////////////\n///////////////////////////////////////\n///////////////////////////////////////\n\n/*\n///////////////////////////////////////\n// Selecting, Creating, and Deleting Elements\n\n// Selecting elements\nconsole.log(document.documentElement);\nconsole.log(document.head);\nconsole.log(document.body);\n\nconst header = document.querySelector('.header');\nconst allSections = document.querySelectorAll('.section');\nconsole.log(allSections);\n\ndocument.getElementById('section--1');\nconst allButtons = document.getElementsByTagName('button');\nconsole.log(allButtons);\n\nconsole.log(document.getElementsByClassName('btn'));\n\n// Creating and inserting elements\nconst message = document.createElement('div');\nmessage.classList.add('cookie-message');\n// message.textContent = 'We use cookied for improved functionality and analytics.';\nmessage.innerHTML =\n 'We use cookied for improved functionality and analytics. ';\n\n// header.prepend(message);\nheader.append(message);\n// header.append(message.cloneNode(true));\n\n// header.before(message);\n// header.after(message);\n\n// Delete elements\ndocument\n .querySelector('.btn--close-cookie')\n .addEventListener('click', function () {\n // message.remove();\n message.parentElement.removeChild(message);\n });\n\n \n///////////////////////////////////////\n// Styles, Attributes and Classes\n \n// Styles\nmessage.style.backgroundColor = '#37383d';\nmessage.style.width = '120%';\n\nconsole.log(message.style.color);\nconsole.log(message.style.backgroundColor);\n\nconsole.log(getComputedStyle(message).color);\nconsole.log(getComputedStyle(message).height);\n\nmessage.style.height =\n Number.parseFloat(getComputedStyle(message).height, 10) + 30 + 'px';\n\ndocument.documentElement.style.setProperty('--color-primary', 'orangered');\n\n// Attributes\nconst logo = document.querySelector('.nav__logo');\nconsole.log(logo.alt);\nconsole.log(logo.className);\n\nlogo.alt = 'Beautiful minimalist logo';\n\n// Non-standard\nconsole.log(logo.designer);\nconsole.log(logo.getAttribute('designer'));\nlogo.setAttribute('company', 'Bankist');\n\nconsole.log(logo.src);\nconsole.log(logo.getAttribute('src'));\n\nconst link = document.querySelector('.nav__link--btn');\nconsole.log(link.href);\nconsole.log(link.getAttribute('href'));\n\n// Data attributes\nconsole.log(logo.dataset.versionNumber);\n\n// Classes\nlogo.classList.add('c', 'j');\nlogo.classList.remove('c', 'j');\nlogo.classList.toggle('c');\nlogo.classList.contains('c'); // not includes\n\n// Don't use\nlogo.clasName = 'jonas';\n\n\n///////////////////////////////////////\n// Types of Events and Event Handlers\nconst h1 = document.querySelector('h1');\n\nconst alertH1 = function (e) {\n alert('addEventListener: Great! You are reading the heading :D');\n};\n\nh1.addEventListener('mouseenter', alertH1);\n\nsetTimeout(() => h1.removeEventListener('mouseenter', alertH1), 3000);\n\n// h1.onmouseenter = function (e) {\n// alert('onmouseenter: Great! You are reading the heading :D');\n// };\n\n\n///////////////////////////////////////\n// Event Propagation in Practice\nconst randomInt = (min, max) =>\n Math.floor(Math.random() * (max - min + 1) + min);\nconst randomColor = () =>\n `rgb(${randomInt(0, 255)},${randomInt(0, 255)},${randomInt(0, 255)})`;\n\ndocument.querySelector('.nav__link').addEventListener('click', function (e) {\n this.style.backgroundColor = randomColor();\n console.log('LINK', e.target, e.currentTarget);\n console.log(e.currentTarget === this);\n\n // Stop propagation\n // e.stopPropagation();\n});\n\ndocument.querySelector('.nav__links').addEventListener('click', function (e) {\n this.style.backgroundColor = randomColor();\n console.log('CONTAINER', e.target, e.currentTarget);\n});\n\ndocument.querySelector('.nav').addEventListener('click', function (e) {\n this.style.backgroundColor = randomColor();\n console.log('NAV', e.target, e.currentTarget);\n});\n\n\n///////////////////////////////////////\n// DOM Traversing\nconst h1 = document.querySelector('h1');\n\n// Going downwards: child\nconsole.log(h1.querySelectorAll('.highlight'));\nconsole.log(h1.childNodes);\nconsole.log(h1.children);\nh1.firstElementChild.style.color = 'white';\nh1.lastElementChild.style.color = 'orangered';\n\n// Going upwards: parents\nconsole.log(h1.parentNode);\nconsole.log(h1.parentElement);\n\nh1.closest('.header').style.background = 'var(--gradient-secondary)';\n\nh1.closest('h1').style.background = 'var(--gradient-primary)';\n\n// Going sideways: siblings\nconsole.log(h1.previousElementSibling);\nconsole.log(h1.nextElementSibling);\n\nconsole.log(h1.previousSibling);\nconsole.log(h1.nextSibling);\n\nconsole.log(h1.parentElement.children);\n[...h1.parentElement.children].forEach(function (el) {\n if (el !== h1) el.style.transform = 'scale(0.5)';\n});\n\n///////////////////////////////////////\n// Sticky navigation\nconst initialCoords = section1.getBoundingClientRect();\nconsole.log(initialCoords);\n\nwindow.addEventListener('scroll', function () {\n console.log(window.scrollY);\n\n if (window.scrollY > initialCoords.top) nav.classList.add('sticky');\n else nav.classList.remove('sticky');\n});\n\n///////////////////////////////////////\n// Sticky navigation: Intersection Observer API\n\nconst obsCallback = function (entries, observer) {\n entries.forEach(entry => {\n console.log(entry);\n });\n};\n\nconst obsOptions = {\n root: null,\n threshold: [0, 0.2],\n};\n\nconst observer = new IntersectionObserver(obsCallback, obsOptions);\nobserver.observe(section1);\n\n\n///////////////////////////////////////\n// Lifecycle DOM Events\ndocument.addEventListener('DOMContentLoaded', function (e) {\n console.log('HTML parsed and DOM tree built!', e);\n});\n\nwindow.addEventListener('load', function (e) {\n console.log('Page fully loaded', e);\n});\n\nwindow.addEventListener('beforeunload', function (e) {\n e.preventDefault();\n console.log(e);\n e.returnValue = '';\n});\n*/\n" }, { "path": "13-Advanced-DOM-Bankist/final/style.css", "content": "/* The page is NOT responsive. You can implement responsiveness yourself if you wanna have some fun 😃 */\n\n:root {\n --color-primary: #5ec576;\n --color-secondary: #ffcb03;\n --color-tertiary: #ff585f;\n --color-primary-darker: #4bbb7d;\n --color-secondary-darker: #ffbb00;\n --color-tertiary-darker: #fd424b;\n --color-primary-opacity: #5ec5763a;\n --color-secondary-opacity: #ffcd0331;\n --color-tertiary-opacity: #ff58602d;\n --gradient-primary: linear-gradient(to top left, #39b385, #9be15d);\n --gradient-secondary: linear-gradient(to top left, #ffb003, #ffcb03);\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: inherit;\n}\n\nhtml {\n font-size: 62.5%;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Poppins', sans-serif;\n font-weight: 300;\n color: #444;\n line-height: 1.9;\n background-color: #f3f3f3;\n}\n\n/* GENERAL ELEMENTS */\n.section {\n padding: 15rem 3rem;\n border-top: 1px solid #ddd;\n\n transition: transform 1s, opacity 1s;\n}\n\n.section--hidden {\n opacity: 0;\n transform: translateY(8rem);\n}\n\n.section__title {\n max-width: 80rem;\n margin: 0 auto 8rem auto;\n}\n\n.section__description {\n font-size: 1.8rem;\n font-weight: 600;\n text-transform: uppercase;\n color: var(--color-primary);\n margin-bottom: 1rem;\n}\n\n.section__header {\n font-size: 4rem;\n line-height: 1.3;\n font-weight: 500;\n}\n\n.btn {\n display: inline-block;\n background-color: var(--color-primary);\n font-size: 1.6rem;\n font-family: inherit;\n font-weight: 500;\n border: none;\n padding: 1.25rem 4.5rem;\n border-radius: 10rem;\n cursor: pointer;\n transition: all 0.3s;\n}\n\n.btn:hover {\n background-color: var(--color-primary-darker);\n}\n\n.btn--text {\n display: inline-block;\n background: none;\n font-size: 1.7rem;\n font-family: inherit;\n font-weight: 500;\n color: var(--color-primary);\n border: none;\n border-bottom: 1px solid currentColor;\n padding-bottom: 2px;\n cursor: pointer;\n transition: all 0.3s;\n}\n\np {\n color: #666;\n}\n\n/* This is BAD for accessibility! Don't do in the real world! */\nbutton:focus {\n outline: none;\n}\n\nimg {\n transition: filter 0.5s;\n}\n\n.lazy-img {\n filter: blur(20px);\n}\n\n/* NAVIGATION */\n.nav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n height: 9rem;\n width: 100%;\n padding: 0 6rem;\n z-index: 100;\n}\n\n/* nav and stickly class at the same time */\n.nav.sticky {\n position: fixed;\n background-color: rgba(255, 255, 255, 0.95);\n}\n\n.nav__logo {\n height: 4.5rem;\n transition: all 0.3s;\n}\n\n.nav__links {\n display: flex;\n align-items: center;\n list-style: none;\n}\n\n.nav__item {\n margin-left: 4rem;\n}\n\n.nav__link:link,\n.nav__link:visited {\n font-size: 1.7rem;\n font-weight: 400;\n color: inherit;\n text-decoration: none;\n display: block;\n transition: all 0.3s;\n}\n\n.nav__link--btn:link,\n.nav__link--btn:visited {\n padding: 0.8rem 2.5rem;\n border-radius: 3rem;\n background-color: var(--color-primary);\n color: #222;\n}\n\n.nav__link--btn:hover,\n.nav__link--btn:active {\n color: inherit;\n background-color: var(--color-primary-darker);\n color: #333;\n}\n\n/* HEADER */\n.header {\n padding: 0 3rem;\n height: 100vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.header__title {\n flex: 1;\n\n max-width: 115rem;\n display: grid;\n grid-template-columns: 3fr 2fr;\n row-gap: 3rem;\n align-content: center;\n justify-content: center;\n\n align-items: start;\n justify-items: start;\n}\n\nh1 {\n font-size: 5.5rem;\n line-height: 1.35;\n}\n\nh4 {\n font-size: 2.4rem;\n font-weight: 500;\n}\n\n.header__img {\n width: 100%;\n grid-column: 2 / 3;\n grid-row: 1 / span 4;\n transform: translateY(-6rem);\n}\n\n.highlight {\n position: relative;\n}\n\n.highlight::after {\n display: block;\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n height: 100%;\n width: 100%;\n z-index: -1;\n opacity: 0.7;\n transform: scale(1.07, 1.05) skewX(-15deg);\n background-image: var(--gradient-primary);\n}\n\n/* FEATURES */\n.features {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 4rem;\n margin: 0 12rem;\n}\n\n.features__img {\n width: 100%;\n}\n\n.features__feature {\n align-self: center;\n justify-self: center;\n width: 70%;\n font-size: 1.5rem;\n}\n\n.features__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--color-primary-opacity);\n height: 5.5rem;\n width: 5.5rem;\n border-radius: 50%;\n margin-bottom: 2rem;\n}\n\n.features__icon svg {\n height: 2.5rem;\n width: 2.5rem;\n fill: var(--color-primary);\n}\n\n.features__header {\n font-size: 2rem;\n margin-bottom: 1rem;\n}\n\n/* OPERATIONS */\n.operations {\n max-width: 100rem;\n margin: 12rem auto 0 auto;\n\n background-color: #fff;\n}\n\n.operations__tab-container {\n display: flex;\n justify-content: center;\n}\n\n.operations__tab {\n margin-right: 2.5rem;\n transform: translateY(-50%);\n}\n\n.operations__tab span {\n margin-right: 1rem;\n font-weight: 600;\n display: inline-block;\n}\n\n.operations__tab--1 {\n background-color: var(--color-secondary);\n}\n\n.operations__tab--1:hover {\n background-color: var(--color-secondary-darker);\n}\n\n.operations__tab--3 {\n background-color: var(--color-tertiary);\n margin: 0;\n}\n\n.operations__tab--3:hover {\n background-color: var(--color-tertiary-darker);\n}\n\n.operations__tab--active {\n transform: translateY(-66%);\n}\n\n.operations__content {\n display: none;\n\n /* JUST PRESENTATIONAL */\n font-size: 1.7rem;\n padding: 2.5rem 7rem 6.5rem 7rem;\n}\n\n.operations__content--active {\n display: grid;\n grid-template-columns: 7rem 1fr;\n column-gap: 3rem;\n row-gap: 0.5rem;\n}\n\n.operations__header {\n font-size: 2.25rem;\n font-weight: 500;\n align-self: center;\n}\n\n.operations__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 7rem;\n width: 7rem;\n border-radius: 50%;\n}\n\n.operations__icon svg {\n height: 2.75rem;\n width: 2.75rem;\n}\n\n.operations__content p {\n grid-column: 2;\n}\n\n.operations__icon--1 {\n background-color: var(--color-secondary-opacity);\n}\n.operations__icon--2 {\n background-color: var(--color-primary-opacity);\n}\n.operations__icon--3 {\n background-color: var(--color-tertiary-opacity);\n}\n.operations__icon--1 svg {\n fill: var(--color-secondary-darker);\n}\n.operations__icon--2 svg {\n fill: var(--color-primary);\n}\n.operations__icon--3 svg {\n fill: var(--color-tertiary);\n}\n\n/* SLIDER */\n.slider {\n max-width: 100rem;\n height: 50rem;\n margin: 0 auto;\n position: relative;\n\n /* IN THE END */\n overflow: hidden;\n}\n\n.slide {\n position: absolute;\n top: 0;\n width: 100%;\n height: 50rem;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n /* THIS creates the animation! */\n transition: transform 1s;\n}\n\n.slide > img {\n /* Only for images that have different size than slide */\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.slider__btn {\n position: absolute;\n top: 50%;\n z-index: 10;\n\n border: none;\n background: rgba(255, 255, 255, 0.7);\n font-family: inherit;\n color: #333;\n border-radius: 50%;\n height: 5.5rem;\n width: 5.5rem;\n font-size: 3.25rem;\n cursor: pointer;\n}\n\n.slider__btn--left {\n left: 6%;\n transform: translate(-50%, -50%);\n}\n\n.slider__btn--right {\n right: 6%;\n transform: translate(50%, -50%);\n}\n\n.dots {\n position: absolute;\n bottom: 5%;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n}\n\n.dots__dot {\n border: none;\n background-color: #b9b9b9;\n opacity: 0.7;\n height: 1rem;\n width: 1rem;\n border-radius: 50%;\n margin-right: 1.75rem;\n cursor: pointer;\n transition: all 0.5s;\n\n /* Only necessary when overlying images */\n /* box-shadow: 0 0.6rem 1.5rem rgba(0, 0, 0, 0.7); */\n}\n\n.dots__dot:last-child {\n margin: 0;\n}\n\n.dots__dot--active {\n /* background-color: #fff; */\n background-color: #888;\n opacity: 1;\n}\n\n/* TESTIMONIALS */\n.testimonial {\n width: 65%;\n position: relative;\n}\n\n.testimonial::before {\n content: '\\201C';\n position: absolute;\n top: -5.7rem;\n left: -6.8rem;\n line-height: 1;\n font-size: 20rem;\n font-family: inherit;\n color: var(--color-primary);\n z-index: -1;\n}\n\n.testimonial__header {\n font-size: 2.25rem;\n font-weight: 500;\n margin-bottom: 1.5rem;\n}\n\n.testimonial__text {\n font-size: 1.7rem;\n margin-bottom: 3.5rem;\n color: #666;\n}\n\n.testimonial__author {\n margin-left: 3rem;\n font-style: normal;\n\n display: grid;\n grid-template-columns: 6.5rem 1fr;\n column-gap: 2rem;\n}\n\n.testimonial__photo {\n grid-row: 1 / span 2;\n width: 6.5rem;\n border-radius: 50%;\n}\n\n.testimonial__name {\n font-size: 1.7rem;\n font-weight: 500;\n align-self: end;\n margin: 0;\n}\n\n.testimonial__location {\n font-size: 1.5rem;\n}\n\n.section__title--testimonials {\n margin-bottom: 4rem;\n}\n\n/* SIGNUP */\n.section--sign-up {\n background-color: #37383d;\n border-top: none;\n border-bottom: 1px solid #444;\n text-align: center;\n padding: 10rem 3rem;\n}\n\n.section--sign-up .section__header {\n color: #fff;\n text-align: center;\n}\n\n.section--sign-up .section__title {\n margin-bottom: 6rem;\n}\n\n.section--sign-up .btn {\n font-size: 1.9rem;\n padding: 2rem 5rem;\n}\n\n/* FOOTER */\n.footer {\n padding: 10rem 3rem;\n background-color: #37383d;\n}\n\n.footer__nav {\n list-style: none;\n display: flex;\n justify-content: center;\n margin-bottom: 5rem;\n}\n\n.footer__item {\n margin-right: 4rem;\n}\n\n.footer__link {\n font-size: 1.6rem;\n color: #eee;\n text-decoration: none;\n}\n\n.footer__logo {\n height: 5rem;\n display: block;\n margin: 0 auto;\n margin-bottom: 5rem;\n}\n\n.footer__copyright {\n font-size: 1.4rem;\n color: #aaa;\n text-align: center;\n}\n\n.footer__copyright .footer__link {\n font-size: 1.4rem;\n}\n\n/* MODAL WINDOW */\n.modal {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n max-width: 60rem;\n background-color: #f3f3f3;\n padding: 5rem 6rem;\n box-shadow: 0 4rem 6rem rgba(0, 0, 0, 0.3);\n z-index: 1000;\n transition: all 0.5s;\n}\n\n.overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.5);\n backdrop-filter: blur(4px);\n z-index: 100;\n transition: all 0.5s;\n}\n\n.modal__header {\n font-size: 3.25rem;\n margin-bottom: 4.5rem;\n line-height: 1.5;\n}\n\n.modal__form {\n margin: 0 3rem;\n display: grid;\n grid-template-columns: 1fr 2fr;\n align-items: center;\n gap: 2.5rem;\n}\n\n.modal__form label {\n font-size: 1.7rem;\n font-weight: 500;\n}\n\n.modal__form input {\n font-size: 1.7rem;\n padding: 1rem 1.5rem;\n border: 1px solid #ddd;\n border-radius: 0.5rem;\n}\n\n.modal__form button {\n grid-column: 1 / span 2;\n justify-self: center;\n margin-top: 1rem;\n}\n\n.btn--close-modal {\n font-family: inherit;\n color: inherit;\n position: absolute;\n top: 0.5rem;\n right: 2rem;\n font-size: 4rem;\n cursor: pointer;\n border: none;\n background: none;\n}\n\n.hidden {\n visibility: hidden;\n opacity: 0;\n}\n\n/* COOKIE MESSAGE */\n.cookie-message {\n display: flex;\n align-items: center;\n justify-content: space-evenly;\n width: 100%;\n background-color: white;\n color: #bbb;\n font-size: 1.5rem;\n font-weight: 400;\n}\n" }, { "path": "13-Advanced-DOM-Bankist/starter/.prettierrc", "content": "{\n \"singleQuote\": true,\n \"arrowParens\": \"avoid\"\n}\n" }, { "path": "13-Advanced-DOM-Bankist/starter/index.html", "content": "\n\n \n \n \n \n \n\n \n \n Bankist | When Banking meets Minimalist\n \n \n
\n \n\n
\n

\n When\n \n banking\n meets
\n minimalist\n

\n

A simpler banking experience for a simpler life.

\n \n \n
\n
\n\n
\n
\n

Features

\n

\n Everything you need in a modern bank and more.\n

\n
\n\n
\n \n
\n
\n \n \n \n
\n
100% digital bank
\n

\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde alias\n sint quos? Accusantium a fugiat porro reiciendis saepe quibusdam\n debitis ducimus.\n

\n
\n\n
\n
\n \n \n \n
\n
Watch your money grow
\n

\n Nesciunt quos autem dolorum voluptates cum dolores dicta fuga\n inventore ab? Nulla incidunt eius numquam sequi iste pariatur\n quibusdam!\n

\n
\n \n\n \n
\n
\n \n \n \n
\n
Free debit card included
\n

\n Quasi, fugit in cumque cupiditate reprehenderit debitis animi enim\n eveniet consequatur odit quam quos possimus assumenda dicta fuga\n inventore ab.\n

\n
\n
\n
\n\n
\n
\n

Operations

\n

\n Everything as simple as possible, but no simpler.\n

\n
\n\n
\n
\n \n 01Instant Transfers\n \n \n \n
\n \n
\n \n \n \n
\n
\n Tranfser money to anyone, instantly! No fees, no BS.\n
\n

\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\n ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\n aliquip ex ea commodo consequat.\n

\n
\n\n
\n
\n \n \n \n
\n
\n Buy a home or make your dreams come true, with instant loans.\n
\n

\n Duis aute irure dolor in reprehenderit in voluptate velit esse\n cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat\n cupidatat non proident, sunt in culpa qui officia deserunt mollit\n anim id est laborum.\n

\n
\n
\n
\n \n \n \n
\n
\n No longer need your account? No problem! Close it instantly.\n
\n

\n Excepteur sint occaecat cupidatat non proident, sunt in culpa qui\n officia deserunt mollit anim id est laborum. Ut enim ad minim\n veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex\n ea commodo consequat.\n

\n
\n \n
\n\n
\n
\n

Not sure yet?

\n

\n Millions of Bankists are already making their lifes simpler.\n

\n
\n\n
\n
\n
\n
Best financial decision ever!
\n
\n Lorem ipsum dolor sit, amet consectetur adipisicing elit.\n Accusantium quas quisquam non? Quas voluptate nulla minima\n deleniti optio ullam nesciunt, numquam corporis et asperiores\n laboriosam sunt, praesentium suscipit blanditiis. Necessitatibus\n id alias reiciendis, perferendis facere pariatur dolore veniam\n autem esse non voluptatem saepe provident nihil molestiae.\n
\n
\n \"\"\n
Aarav Lynn
\n

San Francisco, USA

\n
\n
\n
\n\n
\n
\n
\n The last step to becoming a complete minimalist\n
\n
\n Quisquam itaque deserunt ullam, quia ea repellendus provident,\n ducimus neque ipsam modi voluptatibus doloremque, corrupti\n laborum. Incidunt numquam perferendis veritatis neque repellendus.\n Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illo\n deserunt exercitationem deleniti.\n
\n
\n \"\"\n
Miyah Miles
\n

London, UK

\n
\n
\n
\n\n
\n
\n
\n Finally free from old-school banks\n
\n
\n Debitis, nihil sit minus suscipit magni aperiam vel tenetur\n incidunt commodi architecto numquam omnis nulla autem,\n necessitatibus blanditiis modi similique quidem. Odio aliquam\n culpa dicta beatae quod maiores ipsa minus consequatur error sunt,\n deleniti saepe aliquid quos inventore sequi. Necessitatibus id\n alias reiciendis, perferendis facere.\n
\n
\n \"\"\n
Francisco Gomes
\n

Lisbon, Portugal

\n
\n
\n
\n\n \n \n \n
\n
\n
\n\n
\n
\n

\n The best day to join Bankist was one year ago. The second best is\n today!\n

\n
\n \n
\n\n \n\n
\n \n

\n Open your bank account
\n in just 5 minutes\n

\n
\n \n \n \n \n \n \n \n
\n
\n
\n\n \n \n\n" }, { "path": "13-Advanced-DOM-Bankist/starter/script.js", "content": "'use strict';\n\n///////////////////////////////////////\n// Modal window\n\nconst modal = document.querySelector('.modal');\nconst overlay = document.querySelector('.overlay');\nconst btnCloseModal = document.querySelector('.btn--close-modal');\nconst btnsOpenModal = document.querySelectorAll('.btn--show-modal');\n\nconst openModal = function () {\n modal.classList.remove('hidden');\n overlay.classList.remove('hidden');\n};\n\nconst closeModal = function () {\n modal.classList.add('hidden');\n overlay.classList.add('hidden');\n};\n\nfor (let i = 0; i < btnsOpenModal.length; i++)\n btnsOpenModal[i].addEventListener('click', openModal);\n\nbtnCloseModal.addEventListener('click', closeModal);\noverlay.addEventListener('click', closeModal);\n\ndocument.addEventListener('keydown', function (e) {\n if (e.key === 'Escape' && !modal.classList.contains('hidden')) {\n closeModal();\n }\n});\n" }, { "path": "13-Advanced-DOM-Bankist/starter/style.css", "content": "/* The page is NOT responsive. You can implement responsiveness yourself if you wanna have some fun 😃 */\n\n:root {\n --color-primary: #5ec576;\n --color-secondary: #ffcb03;\n --color-tertiary: #ff585f;\n --color-primary-darker: #4bbb7d;\n --color-secondary-darker: #ffbb00;\n --color-tertiary-darker: #fd424b;\n --color-primary-opacity: #5ec5763a;\n --color-secondary-opacity: #ffcd0331;\n --color-tertiary-opacity: #ff58602d;\n --gradient-primary: linear-gradient(to top left, #39b385, #9be15d);\n --gradient-secondary: linear-gradient(to top left, #ffb003, #ffcb03);\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: inherit;\n}\n\nhtml {\n font-size: 62.5%;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Poppins', sans-serif;\n font-weight: 300;\n color: #444;\n line-height: 1.9;\n background-color: #f3f3f3;\n}\n\n/* GENERAL ELEMENTS */\n.section {\n padding: 15rem 3rem;\n border-top: 1px solid #ddd;\n\n transition: transform 1s, opacity 1s;\n}\n\n.section--hidden {\n opacity: 0;\n transform: translateY(8rem);\n}\n\n.section__title {\n max-width: 80rem;\n margin: 0 auto 8rem auto;\n}\n\n.section__description {\n font-size: 1.8rem;\n font-weight: 600;\n text-transform: uppercase;\n color: var(--color-primary);\n margin-bottom: 1rem;\n}\n\n.section__header {\n font-size: 4rem;\n line-height: 1.3;\n font-weight: 500;\n}\n\n.btn {\n display: inline-block;\n background-color: var(--color-primary);\n font-size: 1.6rem;\n font-family: inherit;\n font-weight: 500;\n border: none;\n padding: 1.25rem 4.5rem;\n border-radius: 10rem;\n cursor: pointer;\n transition: all 0.3s;\n}\n\n.btn:hover {\n background-color: var(--color-primary-darker);\n}\n\n.btn--text {\n display: inline-block;\n background: none;\n font-size: 1.7rem;\n font-family: inherit;\n font-weight: 500;\n color: var(--color-primary);\n border: none;\n border-bottom: 1px solid currentColor;\n padding-bottom: 2px;\n cursor: pointer;\n transition: all 0.3s;\n}\n\np {\n color: #666;\n}\n\n/* This is BAD for accessibility! Don't do in the real world! */\nbutton:focus {\n outline: none;\n}\n\nimg {\n transition: filter 0.5s;\n}\n\n.lazy-img {\n filter: blur(20px);\n}\n\n/* NAVIGATION */\n.nav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n height: 9rem;\n width: 100%;\n padding: 0 6rem;\n z-index: 100;\n}\n\n/* nav and stickly class at the same time */\n.nav.sticky {\n position: fixed;\n background-color: rgba(255, 255, 255, 0.95);\n}\n\n.nav__logo {\n height: 4.5rem;\n transition: all 0.3s;\n}\n\n.nav__links {\n display: flex;\n align-items: center;\n list-style: none;\n}\n\n.nav__item {\n margin-left: 4rem;\n}\n\n.nav__link:link,\n.nav__link:visited {\n font-size: 1.7rem;\n font-weight: 400;\n color: inherit;\n text-decoration: none;\n display: block;\n transition: all 0.3s;\n}\n\n.nav__link--btn:link,\n.nav__link--btn:visited {\n padding: 0.8rem 2.5rem;\n border-radius: 3rem;\n background-color: var(--color-primary);\n color: #222;\n}\n\n.nav__link--btn:hover,\n.nav__link--btn:active {\n color: inherit;\n background-color: var(--color-primary-darker);\n color: #333;\n}\n\n/* HEADER */\n.header {\n padding: 0 3rem;\n height: 100vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.header__title {\n flex: 1;\n\n max-width: 115rem;\n display: grid;\n grid-template-columns: 3fr 2fr;\n row-gap: 3rem;\n align-content: center;\n justify-content: center;\n\n align-items: start;\n justify-items: start;\n}\n\nh1 {\n font-size: 5.5rem;\n line-height: 1.35;\n}\n\nh4 {\n font-size: 2.4rem;\n font-weight: 500;\n}\n\n.header__img {\n width: 100%;\n grid-column: 2 / 3;\n grid-row: 1 / span 4;\n transform: translateY(-6rem);\n}\n\n.highlight {\n position: relative;\n}\n\n.highlight::after {\n display: block;\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n height: 100%;\n width: 100%;\n z-index: -1;\n opacity: 0.7;\n transform: scale(1.07, 1.05) skewX(-15deg);\n background-image: var(--gradient-primary);\n}\n\n/* FEATURES */\n.features {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 4rem;\n margin: 0 12rem;\n}\n\n.features__img {\n width: 100%;\n}\n\n.features__feature {\n align-self: center;\n justify-self: center;\n width: 70%;\n font-size: 1.5rem;\n}\n\n.features__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--color-primary-opacity);\n height: 5.5rem;\n width: 5.5rem;\n border-radius: 50%;\n margin-bottom: 2rem;\n}\n\n.features__icon svg {\n height: 2.5rem;\n width: 2.5rem;\n fill: var(--color-primary);\n}\n\n.features__header {\n font-size: 2rem;\n margin-bottom: 1rem;\n}\n\n/* OPERATIONS */\n.operations {\n max-width: 100rem;\n margin: 12rem auto 0 auto;\n\n background-color: #fff;\n}\n\n.operations__tab-container {\n display: flex;\n justify-content: center;\n}\n\n.operations__tab {\n margin-right: 2.5rem;\n transform: translateY(-50%);\n}\n\n.operations__tab span {\n margin-right: 1rem;\n font-weight: 600;\n display: inline-block;\n}\n\n.operations__tab--1 {\n background-color: var(--color-secondary);\n}\n\n.operations__tab--1:hover {\n background-color: var(--color-secondary-darker);\n}\n\n.operations__tab--3 {\n background-color: var(--color-tertiary);\n margin: 0;\n}\n\n.operations__tab--3:hover {\n background-color: var(--color-tertiary-darker);\n}\n\n.operations__tab--active {\n transform: translateY(-66%);\n}\n\n.operations__content {\n display: none;\n\n /* JUST PRESENTATIONAL */\n font-size: 1.7rem;\n padding: 2.5rem 7rem 6.5rem 7rem;\n}\n\n.operations__content--active {\n display: grid;\n grid-template-columns: 7rem 1fr;\n column-gap: 3rem;\n row-gap: 0.5rem;\n}\n\n.operations__header {\n font-size: 2.25rem;\n font-weight: 500;\n align-self: center;\n}\n\n.operations__icon {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 7rem;\n width: 7rem;\n border-radius: 50%;\n}\n\n.operations__icon svg {\n height: 2.75rem;\n width: 2.75rem;\n}\n\n.operations__content p {\n grid-column: 2;\n}\n\n.operations__icon--1 {\n background-color: var(--color-secondary-opacity);\n}\n.operations__icon--2 {\n background-color: var(--color-primary-opacity);\n}\n.operations__icon--3 {\n background-color: var(--color-tertiary-opacity);\n}\n.operations__icon--1 svg {\n fill: var(--color-secondary-darker);\n}\n.operations__icon--2 svg {\n fill: var(--color-primary);\n}\n.operations__icon--3 svg {\n fill: var(--color-tertiary);\n}\n\n/* SLIDER */\n.slider {\n max-width: 100rem;\n height: 50rem;\n margin: 0 auto;\n position: relative;\n\n /* IN THE END */\n overflow: hidden;\n}\n\n.slide {\n position: absolute;\n top: 0;\n width: 100%;\n height: 50rem;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n /* THIS creates the animation! */\n transition: transform 1s;\n}\n\n.slide > img {\n /* Only for images that have different size than slide */\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.slider__btn {\n position: absolute;\n top: 50%;\n z-index: 10;\n\n border: none;\n background: rgba(255, 255, 255, 0.7);\n font-family: inherit;\n color: #333;\n border-radius: 50%;\n height: 5.5rem;\n width: 5.5rem;\n font-size: 3.25rem;\n cursor: pointer;\n}\n\n.slider__btn--left {\n left: 6%;\n transform: translate(-50%, -50%);\n}\n\n.slider__btn--right {\n right: 6%;\n transform: translate(50%, -50%);\n}\n\n.dots {\n position: absolute;\n bottom: 5%;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n}\n\n.dots__dot {\n border: none;\n background-color: #b9b9b9;\n opacity: 0.7;\n height: 1rem;\n width: 1rem;\n border-radius: 50%;\n margin-right: 1.75rem;\n cursor: pointer;\n transition: all 0.5s;\n\n /* Only necessary when overlying images */\n /* box-shadow: 0 0.6rem 1.5rem rgba(0, 0, 0, 0.7); */\n}\n\n.dots__dot:last-child {\n margin: 0;\n}\n\n.dots__dot--active {\n /* background-color: #fff; */\n background-color: #888;\n opacity: 1;\n}\n\n/* TESTIMONIALS */\n.testimonial {\n width: 65%;\n position: relative;\n}\n\n.testimonial::before {\n content: '\\201C';\n position: absolute;\n top: -5.7rem;\n left: -6.8rem;\n line-height: 1;\n font-size: 20rem;\n font-family: inherit;\n color: var(--color-primary);\n z-index: -1;\n}\n\n.testimonial__header {\n font-size: 2.25rem;\n font-weight: 500;\n margin-bottom: 1.5rem;\n}\n\n.testimonial__text {\n font-size: 1.7rem;\n margin-bottom: 3.5rem;\n color: #666;\n}\n\n.testimonial__author {\n margin-left: 3rem;\n font-style: normal;\n\n display: grid;\n grid-template-columns: 6.5rem 1fr;\n column-gap: 2rem;\n}\n\n.testimonial__photo {\n grid-row: 1 / span 2;\n width: 6.5rem;\n border-radius: 50%;\n}\n\n.testimonial__name {\n font-size: 1.7rem;\n font-weight: 500;\n align-self: end;\n margin: 0;\n}\n\n.testimonial__location {\n font-size: 1.5rem;\n}\n\n.section__title--testimonials {\n margin-bottom: 4rem;\n}\n\n/* SIGNUP */\n.section--sign-up {\n background-color: #37383d;\n border-top: none;\n border-bottom: 1px solid #444;\n text-align: center;\n padding: 10rem 3rem;\n}\n\n.section--sign-up .section__header {\n color: #fff;\n text-align: center;\n}\n\n.section--sign-up .section__title {\n margin-bottom: 6rem;\n}\n\n.section--sign-up .btn {\n font-size: 1.9rem;\n padding: 2rem 5rem;\n}\n\n/* FOOTER */\n.footer {\n padding: 10rem 3rem;\n background-color: #37383d;\n}\n\n.footer__nav {\n list-style: none;\n display: flex;\n justify-content: center;\n margin-bottom: 5rem;\n}\n\n.footer__item {\n margin-right: 4rem;\n}\n\n.footer__link {\n font-size: 1.6rem;\n color: #eee;\n text-decoration: none;\n}\n\n.footer__logo {\n height: 5rem;\n display: block;\n margin: 0 auto;\n margin-bottom: 5rem;\n}\n\n.footer__copyright {\n font-size: 1.4rem;\n color: #aaa;\n text-align: center;\n}\n\n.footer__copyright .footer__link {\n font-size: 1.4rem;\n}\n\n/* MODAL WINDOW */\n.modal {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n max-width: 60rem;\n background-color: #f3f3f3;\n padding: 5rem 6rem;\n box-shadow: 0 4rem 6rem rgba(0, 0, 0, 0.3);\n z-index: 1000;\n transition: all 0.5s;\n}\n\n.overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.5);\n backdrop-filter: blur(4px);\n z-index: 100;\n transition: all 0.5s;\n}\n\n.modal__header {\n font-size: 3.25rem;\n margin-bottom: 4.5rem;\n line-height: 1.5;\n}\n\n.modal__form {\n margin: 0 3rem;\n display: grid;\n grid-template-columns: 1fr 2fr;\n align-items: center;\n gap: 2.5rem;\n}\n\n.modal__form label {\n font-size: 1.7rem;\n font-weight: 500;\n}\n\n.modal__form input {\n font-size: 1.7rem;\n padding: 1rem 1.5rem;\n border: 1px solid #ddd;\n border-radius: 0.5rem;\n}\n\n.modal__form button {\n grid-column: 1 / span 2;\n justify-self: center;\n margin-top: 1rem;\n}\n\n.btn--close-modal {\n font-family: inherit;\n color: inherit;\n position: absolute;\n top: 0.5rem;\n right: 2rem;\n font-size: 4rem;\n cursor: pointer;\n border: none;\n background: none;\n}\n\n.hidden {\n visibility: hidden;\n opacity: 0;\n}\n\n/* COOKIE MESSAGE */\n.cookie-message {\n display: flex;\n align-items: center;\n justify-content: space-evenly;\n width: 100%;\n background-color: white;\n color: #bbb;\n font-size: 1.5rem;\n font-weight: 400;\n}\n" }, { "path": "14-OOP/final/.prettierrc", "content": "{\n \"singleQuote\": true,\n \"arrowParens\": \"avoid\"\n}\n" }, { "path": "14-OOP/final/index.html", "content": "\n\n \n \n \n \n Object Oriented Programming (OOP) With JavaScript\n \n \n \n \n

Object Oriented Programming (OOP) With JavaScript

\n \n\n" }, { "path": "14-OOP/final/script.js", "content": "'use strict';\n\n/*\n///////////////////////////////////////\n// Constructor Functions and the new Operator\nconst Person = function (firstName, birthYear) {\n // Instance properties\n this.firstName = firstName;\n this.birthYear = birthYear;\n\n // Never to this!\n // this.calcAge = function () {\n // console.log(2037 - this.birthYear);\n // };\n};\n\nconst jonas = new Person('Jonas', 1991);\nconsole.log(jonas);\n\n// 1. New {} is created\n// 2. function is called, this = {}\n// 3. {} linked to prototype\n// 4. function automatically return {}\n\nconst matilda = new Person('Matilda', 2017);\nconst jack = new Person('Jack', 1975);\n\nconsole.log(jonas instanceof Person);\n\nPerson.hey = function () {\n console.log('Hey there 👋');\n console.log(this);\n};\nPerson.hey();\n\n///////////////////////////////////////\n// Prototypes\nconsole.log(Person.prototype);\n\nPerson.prototype.calcAge = function () {\n console.log(2037 - this.birthYear);\n};\n\njonas.calcAge();\nmatilda.calcAge();\n\nconsole.log(jonas.__proto__);\nconsole.log(jonas.__proto__ === Person.prototype);\n\nconsole.log(Person.prototype.isPrototypeOf(jonas));\nconsole.log(Person.prototype.isPrototypeOf(matilda));\nconsole.log(Person.prototype.isPrototypeOf(Person));\n\n// .prototyeOfLinkedObjects\n\nPerson.prototype.species = 'Homo Sapiens';\nconsole.log(jonas.species, matilda.species);\n\nconsole.log(jonas.hasOwnProperty('firstName'));\nconsole.log(jonas.hasOwnProperty('species'));\n\n\n///////////////////////////////////////\n// Prototypal Inheritance on Built-In Objects\nconsole.log(jonas.__proto__);\n// Object.prototype (top of prototype chain)\nconsole.log(jonas.__proto__.__proto__);\nconsole.log(jonas.__proto__.__proto__.__proto__);\n\nconsole.dir(Person.prototype.constructor);\n\nconst arr = [3, 6, 6, 5, 6, 9, 9]; // new Array === []\nconsole.log(arr.__proto__);\nconsole.log(arr.__proto__ === Array.prototype);\n\nconsole.log(arr.__proto__.__proto__);\n\nArray.prototype.unique = function () {\n return [...new Set(this)];\n};\n\nconsole.log(arr.unique());\n\nconst h1 = document.querySelector('h1');\nconsole.dir(x => x + 1);\n*/\n\n///////////////////////////////////////\n// Coding Challenge #1\n\n/* \n1. Use a constructor function to implement a Car. A car has a make and a speed property. The speed property is the current speed of the car in km/h;\n2. Implement an 'accelerate' method that will increase the car's speed by 10, and log the new speed to the console;\n3. Implement a 'brake' method that will decrease the car's speed by 5, and log the new speed to the console;\n4. Create 2 car objects and experiment with calling 'accelerate' and 'brake' multiple times on each of them.\n\nDATA CAR 1: 'BMW' going at 120 km/h\nDATA CAR 2: 'Mercedes' going at 95 km/h\n\nGOOD LUCK 😀\n*/\n\n/*\nconst Car = function (make, speed) {\n this.make = make;\n this.speed = speed;\n};\n\nCar.prototype.accelerate = function () {\n this.speed += 10;\n console.log(`${this.make} is going at ${this.speed} km/h`);\n};\n\nCar.prototype.brake = function () {\n this.speed -= 5;\n console.log(`${this.make} is going at ${this.speed} km/h`);\n};\n\nconst bmw = new Car('BMW', 120);\nconst mercedes = new Car('Mercedes', 95);\n\nbmw.accelerate();\nbmw.accelerate();\nbmw.brake();\nbmw.accelerate();\n\n\n///////////////////////////////////////\n// ES6 Classes\n\n// Class expression\n// const PersonCl = class {}\n\n// Class declaration\nclass PersonCl {\n constructor(fullName, birthYear) {\n this.fullName = fullName;\n this.birthYear = birthYear;\n }\n\n // Instance methods\n // Methods will be added to .prototype property\n calcAge() {\n console.log(2037 - this.birthYear);\n }\n\n greet() {\n console.log(`Hey ${this.fullName}`);\n }\n\n get age() {\n return 2037 - this.birthYear;\n }\n\n // Set a property that already exists\n set fullName(name) {\n if (name.includes(' ')) this._fullName = name;\n else alert(`${name} is not a full name!`);\n }\n\n get fullName() {\n return this._fullName;\n }\n\n // Static method\n static hey() {\n console.log('Hey there 👋');\n console.log(this);\n }\n}\n\nconst jessica = new PersonCl('Jessica Davis', 1996);\nconsole.log(jessica);\njessica.calcAge();\nconsole.log(jessica.age);\n\nconsole.log(jessica.__proto__ === PersonCl.prototype);\n\n// PersonCl.prototype.greet = function () {\n// console.log(`Hey ${this.firstName}`);\n// };\njessica.greet();\n\n// 1. Classes are NOT hoisted\n// 2. Classes are first-class citizens\n// 3. Classes are executed in strict mode\n\nconst walter = new PersonCl('Walter White', 1965);\n// PersonCl.hey();\n\n\n///////////////////////////////////////\n// Setters and Getters\nconst account = {\n owner: 'Jonas',\n movements: [200, 530, 120, 300],\n\n get latest() {\n return this.movements.slice(-1).pop();\n },\n\n set latest(mov) {\n this.movements.push(mov);\n },\n};\n\nconsole.log(account.latest);\n\naccount.latest = 50;\nconsole.log(account.movements);\n\n\n///////////////////////////////////////\n// Object.create\nconst PersonProto = {\n calcAge() {\n console.log(2037 - this.birthYear);\n },\n\n init(firstName, birthYear) {\n this.firstName = firstName;\n this.birthYear = birthYear;\n },\n};\n\nconst steven = Object.create(PersonProto);\nconsole.log(steven);\nsteven.name = 'Steven';\nsteven.birthYear = 2002;\nsteven.calcAge();\n\nconsole.log(steven.__proto__ === PersonProto);\n\nconst sarah = Object.create(PersonProto);\nsarah.init('Sarah', 1979);\nsarah.calcAge();\n*/\n\n///////////////////////////////////////\n// Coding Challenge #2\n\n/* \n1. Re-create challenge 1, but this time using an ES6 class;\n2. Add a getter called 'speedUS' which returns the current speed in mi/h (divide by 1.6);\n3. Add a setter called 'speedUS' which sets the current speed in mi/h (but converts it to km/h before storing the value, by multiplying the input by 1.6);\n4. Create a new car and experiment with the accelerate and brake methods, and with the getter and setter.\n\nDATA CAR 1: 'Ford' going at 120 km/h\n\nGOOD LUCK 😀\n*/\n\n/*\nclass CarCl {\n constructor(make, speed) {\n this.make = make;\n this.speed = speed;\n }\n\n accelerate() {\n this.speed += 10;\n console.log(`${this.make} is going at ${this.speed} km/h`);\n }\n\n brake() {\n this.speed -= 5;\n console.log(`${this.make} is going at ${this.speed} km/h`);\n }\n\n get speedUS() {\n return this.speed / 1.6;\n }\n\n set speedUS(speed) {\n this.speed = speed * 1.6;\n }\n}\n\nconst ford = new CarCl('Ford', 120);\nconsole.log(ford.speedUS);\nford.accelerate();\nford.accelerate();\nford.brake();\nford.speedUS = 50;\nconsole.log(ford);\n\n\n///////////////////////////////////////\n// Inheritance Between \"Classes\": Constructor Functions\n\nconst Person = function (firstName, birthYear) {\n this.firstName = firstName;\n this.birthYear = birthYear;\n};\n\nPerson.prototype.calcAge = function () {\n console.log(2037 - this.birthYear);\n};\n\nconst Student = function (firstName, birthYear, course) {\n Person.call(this, firstName, birthYear);\n this.course = course;\n};\n\n// Linking prototypes\nStudent.prototype = Object.create(Person.prototype);\n\nStudent.prototype.introduce = function () {\n console.log(`My name is ${this.firstName} and I study ${this.course}`);\n};\n\nconst mike = new Student('Mike', 2020, 'Computer Science');\nmike.introduce();\nmike.calcAge();\n\nconsole.log(mike.__proto__);\nconsole.log(mike.__proto__.__proto__);\n\nconsole.log(mike instanceof Student);\nconsole.log(mike instanceof Person);\nconsole.log(mike instanceof Object);\n\nStudent.prototype.constructor = Student;\nconsole.dir(Student.prototype.constructor);\n*/\n\n///////////////////////////////////////\n// Coding Challenge #3\n\n/* \n1. Use a constructor function to implement an Electric Car (called EV) as a CHILD \"class\" of Car. Besides a make and current speed, the EV also has the current battery charge in % ('charge' property);\n2. Implement a 'chargeBattery' method which takes an argument 'chargeTo' and sets the battery charge to 'chargeTo';\n3. Implement an 'accelerate' method that will increase the car's speed by 20, and decrease the charge by 1%. Then log a message like this: 'Tesla going at 140 km/h, with a charge of 22%';\n4. Create an electric car object and experiment with calling 'accelerate', 'brake' and 'chargeBattery' (charge to 90%). Notice what happens when you 'accelerate'! HINT: Review the definiton of polymorphism 😉\n\nDATA CAR 1: 'Tesla' going at 120 km/h, with a charge of 23%\n\nGOOD LUCK 😀\n*/\n\n/*\nconst Car = function (make, speed) {\n this.make = make;\n this.speed = speed;\n};\n\nCar.prototype.accelerate = function () {\n this.speed += 10;\n console.log(`${this.make} is going at ${this.speed} km/h`);\n};\n\nCar.prototype.brake = function () {\n this.speed -= 5;\n console.log(`${this.make} is going at ${this.speed} km/h`);\n};\n\nconst EV = function (make, speed, charge) {\n Car.call(this, make, speed);\n this.charge = charge;\n};\n\n// Link the prototypes\nEV.prototype = Object.create(Car.prototype);\n\nEV.prototype.chargeBattery = function (chargeTo) {\n this.charge = chargeTo;\n};\n\nEV.prototype.accelerate = function () {\n this.speed += 20;\n this.charge--;\n console.log(\n `${this.make} is going at ${this.speed} km/h, with a charge of ${this.charge}`\n );\n};\n\nconst tesla = new EV('Tesla', 120, 23);\ntesla.chargeBattery(90);\nconsole.log(tesla);\ntesla.brake();\ntesla.accelerate();\n\n\n///////////////////////////////////////\n// Inheritance Between \"Classes\": ES6 Classes\n\nclass PersonCl {\n constructor(fullName, birthYear) {\n this.fullName = fullName;\n this.birthYear = birthYear;\n }\n\n // Instance methods\n calcAge() {\n console.log(2037 - this.birthYear);\n }\n\n greet() {\n console.log(`Hey ${this.fullName}`);\n }\n\n get age() {\n return 2037 - this.birthYear;\n }\n\n set fullName(name) {\n if (name.includes(' ')) this._fullName = name;\n else alert(`${name} is not a full name!`);\n }\n\n get fullName() {\n return this._fullName;\n }\n\n // Static method\n static hey() {\n console.log('Hey there 👋');\n }\n}\n\nclass StudentCl extends PersonCl {\n constructor(fullName, birthYear, course) {\n // Always needs to happen first!\n super(fullName, birthYear);\n this.course = course;\n }\n\n introduce() {\n console.log(`My name is ${this.fullName} and I study ${this.course}`);\n }\n\n calcAge() {\n console.log(\n `I'm ${\n 2037 - this.birthYear\n } years old, but as a student I feel more like ${\n 2037 - this.birthYear + 10\n }`\n );\n }\n}\n\nconst martha = new StudentCl('Martha Jones', 2012, 'Computer Science');\nmartha.introduce();\nmartha.calcAge();\n\n\n///////////////////////////////////////\n// Inheritance Between \"Classes\": Object.create\n\nconst PersonProto = {\n calcAge() {\n console.log(2037 - this.birthYear);\n },\n\n init(firstName, birthYear) {\n this.firstName = firstName;\n this.birthYear = birthYear;\n },\n};\n\nconst steven = Object.create(PersonProto);\n\nconst StudentProto = Object.create(PersonProto);\nStudentProto.init = function (firstName, birthYear, course) {\n PersonProto.init.call(this, firstName, birthYear);\n this.course = course;\n};\n\nStudentProto.introduce = function () {\n // BUG in video:\n // console.log(`My name is ${this.fullName} and I study ${this.course}`);\n \n // FIX:\n console.log(`My name is ${this.firstName} and I study ${this.course}`);\n};\n\nconst jay = Object.create(StudentProto);\njay.init('Jay', 2010, 'Computer Science');\njay.introduce();\njay.calcAge();\n\n\n///////////////////////////////////////\n// Another Class Example\n\nclass Account {\n constructor(owner, currency, pin) {\n this.owner = owner;\n this.currency = currency;\n this.pin = pin;\n this.movements = [];\n this.locale = navigator.language;\n\n console.log(`Thanks for opening an account, ${owner}`);\n }\n\n // Public interface\n deposit(val) {\n this.movements.push(val);\n }\n\n withdraw(val) {\n this.deposit(-val);\n }\n\n approveLoan(val) {\n return true;\n }\n\n requestLoan(val) {\n if (this.approveLoan(val)) {\n this.deposit(val);\n console.log(`Loan approved`);\n }\n }\n}\n\nconst acc1 = new Account('Jonas', 'EUR', 1111);\n\n// acc1.movements.push(250);\n// acc1.movements.push(-140);\nacc1.deposit(250);\nacc1.withdraw(140);\nacc1.approveLoan(1000);\nacc1.requestLoan(1000);\n\nconsole.log(acc1);\nconsole.log(acc1.pin);\n\n\n///////////////////////////////////////\n// Encapsulation: Private Class Fields and Methods\n\n// 1) Public fields\n// 2) Private fields\n// 3) Public methods\n// 4) Private methods\n// STATIC version of these 4\n\nclass Account {\n locale = navigator.language;\n bank = 'Bankist';\n #movements = [];\n #pin;\n\n constructor(owner, currency, pin) {\n this.owner = owner;\n this.currency = currency;\n this.#pin = pin;\n\n // this.movements = [];\n // this.locale = navigator.language;\n\n console.log(`Thanks for opening an account, ${owner}`);\n }\n\n // Public interface (API)\n getMovements() {\n return this.#movements;\n // Not chaninable\n }\n\n deposit(val) {\n this.#movements.push(val);\n return this;\n }\n\n withdraw(val) {\n this.deposit(-val);\n return this;\n }\n\n #approveLoan(val) {\n // Fake method\n return true;\n }\n\n requestLoan(val) {\n if (this.#approveLoan(val)) {\n this.deposit(val);\n console.log(`Loan approved`);\n }\n return this;\n }\n}\n\nconst acc1 = new Account('Jonas', 'EUR', 1111);\n// acc1.deposit(300);\n// acc1.withdraw(100);\nconst movements = acc1\n .deposit(300)\n .withdraw(100)\n .withdraw(50)\n .requestLoan(25000)\n .withdraw(4000)\n .getMovements();\n\nconsole.log(acc1);\n// console.log(acc1.#movements);\n// Account.#test();\nconsole.log(movements);\n\n\n///////////////////////////////////////\n// Coding Challenge #4\n\n/* \n1. Re-create challenge #3, but this time using ES6 classes: create an 'EVCl' child class of the 'CarCl' class\n2. Make the 'charge' property private;\n3. Implement the ability to chain the 'accelerate' and 'chargeBattery' methods of this class, and also update the 'brake' method in the 'CarCl' class. They experiment with chining!\n\nDATA CAR 1: 'Rivian' going at 120 km/h, with a charge of 23%\n\nGOOD LUCK 😀\n*/\n\n/*\nclass CarCl {\n constructor(make, speed) {\n this.make = make;\n this.speed = speed;\n }\n\n accelerate() {\n this.speed += 10;\n console.log(`${this.make} is going at ${this.speed} km/h`);\n }\n\n brake() {\n this.speed -= 5;\n console.log(`${this.make} is going at ${this.speed} km/h`);\n return this;\n }\n\n get speedUS() {\n return this.speed / 1.6;\n }\n\n set speedUS(speed) {\n this.speed = speed * 1.6;\n }\n}\n\nclass EVCl extends CarCl {\n #charge;\n\n constructor(make, speed, charge) {\n super(make, speed);\n this.#charge = charge;\n }\n\n chargeBattery(chargeTo) {\n this.#charge = chargeTo;\n return this;\n }\n\n accelerate() {\n this.speed += 20;\n this.#charge--;\n console.log(\n `${this.make} is going at ${this.speed} km/h, with a charge of ${\n this.#charge\n }`\n );\n return this;\n }\n}\n\nconst rivian = new EVCl('Rivian', 120, 23);\nconsole.log(rivian);\n// console.log(rivian.#charge);\nrivian\n .accelerate()\n .accelerate()\n .accelerate()\n .brake()\n .chargeBattery(50)\n .accelerate();\n\nconsole.log(rivian.speedUS);\n*/\n" }, { "path": "14-OOP/starter/.prettierrc", "content": "{\n \"singleQuote\": true,\n \"arrowParens\": \"avoid\"\n}\n" }, { "path": "14-OOP/starter/index.html", "content": "\n\n \n \n \n \n Object Oriented Programming (OOP) With JavaScript\n \n \n \n \n

Object Oriented Programming (OOP) With JavaScript

\n \n\n" }, { "path": "14-OOP/starter/script.js", "content": "'use strict';\n" }, { "path": "15-Mapty/final/.prettierrc", "content": "{\n \"singleQuote\": true,\n \"arrowParens\": \"avoid\"\n}\n" }, { "path": "15-Mapty/final/index.html", "content": "\n\n \n \n \n \n \n\n \n\n \n\n \n \n\n \n \n mapty // Map your workouts\n \n \n
\n \"Logo\"\n\n
    \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n
    \n \n \n
    \n\n
    \n \n \n
    \n
    \n \n \n
    \n \n
    \n\n \n
\n\n

\n © Copyright by\n Jonas Schmedtmann. Use for learning or your portfolio. Don't use to teach. Don't claim\n as your own.\n

\n
\n\n
\n \n\n" }, { "path": "15-Mapty/final/other.js", "content": "const firstName = 'Jonas';\nconsole.log(months);\n" }, { "path": "15-Mapty/final/script.js", "content": "'use strict';\n\nclass Workout {\n date = new Date();\n id = (Date.now() + '').slice(-10);\n clicks = 0;\n\n constructor(coords, distance, duration) {\n // this.date = ...\n // this.id = ...\n this.coords = coords; // [lat, lng]\n this.distance = distance; // in km\n this.duration = duration; // in min\n }\n\n _setDescription() {\n // prettier-ignore\n const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\n\n this.description = `${this.type[0].toUpperCase()}${this.type.slice(1)} on ${\n months[this.date.getMonth()]\n } ${this.date.getDate()}`;\n }\n\n click() {\n this.clicks++;\n }\n}\n\nclass Running extends Workout {\n type = 'running';\n\n constructor(coords, distance, duration, cadence) {\n super(coords, distance, duration);\n this.cadence = cadence;\n this.calcPace();\n this._setDescription();\n }\n\n calcPace() {\n // min/km\n this.pace = this.duration / this.distance;\n return this.pace;\n }\n}\n\nclass Cycling extends Workout {\n type = 'cycling';\n\n constructor(coords, distance, duration, elevationGain) {\n super(coords, distance, duration);\n this.elevationGain = elevationGain;\n // this.type = 'cycling';\n this.calcSpeed();\n this._setDescription();\n }\n\n calcSpeed() {\n // km/h\n this.speed = this.distance / (this.duration / 60);\n return this.speed;\n }\n}\n\n// const run1 = new Running([39, -12], 5.2, 24, 178);\n// const cycling1 = new Cycling([39, -12], 27, 95, 523);\n// console.log(run1, cycling1);\n\n///////////////////////////////////////\n// APPLICATION ARCHITECTURE\nconst form = document.querySelector('.form');\nconst containerWorkouts = document.querySelector('.workouts');\nconst inputType = document.querySelector('.form__input--type');\nconst inputDistance = document.querySelector('.form__input--distance');\nconst inputDuration = document.querySelector('.form__input--duration');\nconst inputCadence = document.querySelector('.form__input--cadence');\nconst inputElevation = document.querySelector('.form__input--elevation');\n\nclass App {\n #map;\n #mapZoomLevel = 13;\n #mapEvent;\n #workouts = [];\n\n constructor() {\n // Get user's position\n this._getPosition();\n\n // Get data from local storage\n this._getLocalStorage();\n\n // Attach event handlers\n form.addEventListener('submit', this._newWorkout.bind(this));\n inputType.addEventListener('change', this._toggleElevationField);\n containerWorkouts.addEventListener('click', this._moveToPopup.bind(this));\n }\n\n _getPosition() {\n if (navigator.geolocation)\n navigator.geolocation.getCurrentPosition(\n this._loadMap.bind(this),\n function () {\n alert('Could not get your position');\n }\n );\n }\n\n _loadMap(position) {\n const { latitude } = position.coords;\n const { longitude } = position.coords;\n // console.log(`https://www.google.pt/maps/@${latitude},${longitude}`);\n\n const coords = [latitude, longitude];\n\n this.#map = L.map('map').setView(coords, this.#mapZoomLevel);\n\n L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {\n attribution:\n '© OpenStreetMap contributors',\n }).addTo(this.#map);\n\n // Handling clicks on map\n this.#map.on('click', this._showForm.bind(this));\n\n this.#workouts.forEach(work => {\n this._renderWorkoutMarker(work);\n });\n }\n\n _showForm(mapE) {\n this.#mapEvent = mapE;\n form.classList.remove('hidden');\n inputDistance.focus();\n }\n\n _hideForm() {\n // Empty inputs\n inputDistance.value = inputDuration.value = inputCadence.value = inputElevation.value =\n '';\n\n form.style.display = 'none';\n form.classList.add('hidden');\n setTimeout(() => (form.style.display = 'grid'), 1000);\n }\n\n _toggleElevationField() {\n inputElevation.closest('.form__row').classList.toggle('form__row--hidden');\n inputCadence.closest('.form__row').classList.toggle('form__row--hidden');\n }\n\n _newWorkout(e) {\n const validInputs = (...inputs) =>\n inputs.every(inp => Number.isFinite(inp));\n const allPositive = (...inputs) => inputs.every(inp => inp > 0);\n\n e.preventDefault();\n\n // Get data from form\n const type = inputType.value;\n const distance = +inputDistance.value;\n const duration = +inputDuration.value;\n const { lat, lng } = this.#mapEvent.latlng;\n let workout;\n\n // If workout running, create running object\n if (type === 'running') {\n const cadence = +inputCadence.value;\n\n // Check if data is valid\n if (\n // !Number.isFinite(distance) ||\n // !Number.isFinite(duration) ||\n // !Number.isFinite(cadence)\n !validInputs(distance, duration, cadence) ||\n !allPositive(distance, duration, cadence)\n )\n return alert('Inputs have to be positive numbers!');\n\n workout = new Running([lat, lng], distance, duration, cadence);\n }\n\n // If workout cycling, create cycling object\n if (type === 'cycling') {\n const elevation = +inputElevation.value;\n\n if (\n !validInputs(distance, duration, elevation) ||\n !allPositive(distance, duration)\n )\n return alert('Inputs have to be positive numbers!');\n\n workout = new Cycling([lat, lng], distance, duration, elevation);\n }\n\n // Add new object to workout array\n this.#workouts.push(workout);\n\n // Render workout on map as marker\n this._renderWorkoutMarker(workout);\n\n // Render workout on list\n this._renderWorkout(workout);\n\n // Hide form + clear input fields\n this._hideForm();\n\n // Set local storage to all workouts\n this._setLocalStorage();\n }\n\n _renderWorkoutMarker(workout) {\n L.marker(workout.coords)\n .addTo(this.#map)\n .bindPopup(\n L.popup({\n maxWidth: 250,\n minWidth: 100,\n autoClose: false,\n closeOnClick: false,\n className: `${workout.type}-popup`,\n })\n )\n .setPopupContent(\n `${workout.type === 'running' ? '🏃‍♂️' : '🚴‍♀️'} ${workout.description}`\n )\n .openPopup();\n }\n\n _renderWorkout(workout) {\n let html = `\n
  • \n

    ${workout.description}

    \n
    \n ${\n workout.type === 'running' ? '🏃‍♂️' : '🚴‍♀️'\n }\n ${workout.distance}\n km\n
    \n
    \n ⏱\n ${workout.duration}\n min\n
    \n `;\n\n if (workout.type === 'running')\n html += `\n
    \n ⚡️\n ${workout.pace.toFixed(1)}\n min/km\n
    \n
    \n 🦶🏼\n ${workout.cadence}\n spm\n
    \n
    • \n `;\n\n if (workout.type === 'cycling')\n html += `\n
    \n ⚡️\n ${workout.speed.toFixed(1)}\n km/h\n
    \n
    \n ⛰\n ${workout.elevationGain}\n m\n
    \n \n `;\n\n form.insertAdjacentHTML('afterend', html);\n }\n\n _moveToPopup(e) {\n // BUGFIX: When we click on a workout before the map has loaded, we get an error. But there is an easy fix:\n if (!this.#map) return;\n\n const workoutEl = e.target.closest('.workout');\n\n if (!workoutEl) return;\n\n const workout = this.#workouts.find(\n work => work.id === workoutEl.dataset.id\n );\n\n this.#map.setView(workout.coords, this.#mapZoomLevel, {\n animate: true,\n pan: {\n duration: 1,\n },\n });\n\n // using the public interface\n // workout.click();\n }\n\n _setLocalStorage() {\n localStorage.setItem('workouts', JSON.stringify(this.#workouts));\n }\n\n _getLocalStorage() {\n const data = JSON.parse(localStorage.getItem('workouts'));\n\n if (!data) return;\n\n this.#workouts = data;\n\n this.#workouts.forEach(work => {\n this._renderWorkout(work);\n });\n }\n\n reset() {\n localStorage.removeItem('workouts');\n location.reload();\n }\n}\n\nconst app = new App();\n" }, { "path": "15-Mapty/final/style.css", "content": ":root {\n --color-brand--1: #ffb545;\n --color-brand--2: #00c46a;\n\n --color-dark--1: #2d3439;\n --color-dark--2: #42484d;\n --color-light--1: #aaa;\n --color-light--2: #ececec;\n --color-light--3: rgb(214, 222, 224);\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: inherit;\n}\n\nhtml {\n font-size: 62.5%;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Manrope', sans-serif;\n color: var(--color-light--2);\n font-weight: 400;\n line-height: 1.6;\n height: 100vh;\n overscroll-behavior-y: none;\n\n background-color: #fff;\n padding: 2.5rem;\n\n display: flex;\n}\n\n/* GENERAL */\na:link,\na:visited {\n color: var(--color-brand--1);\n}\n\n/* SIDEBAR */\n.sidebar {\n flex-basis: 50rem;\n background-color: var(--color-dark--1);\n padding: 3rem 5rem 4rem 5rem;\n display: flex;\n flex-direction: column;\n}\n\n.logo {\n height: 5.2rem;\n align-self: center;\n margin-bottom: 4rem;\n}\n\n.workouts {\n list-style: none;\n height: 77vh;\n overflow-y: scroll;\n overflow-x: hidden;\n}\n\n.workouts::-webkit-scrollbar {\n width: 0;\n}\n\n.workout {\n background-color: var(--color-dark--2);\n border-radius: 5px;\n padding: 1.5rem 2.25rem;\n margin-bottom: 1.75rem;\n cursor: pointer;\n\n display: grid;\n grid-template-columns: 1fr 1fr 1fr 1fr;\n gap: 0.75rem 1.5rem;\n}\n.workout--running {\n border-left: 5px solid var(--color-brand--2);\n}\n.workout--cycling {\n border-left: 5px solid var(--color-brand--1);\n}\n\n.workout__title {\n font-size: 1.7rem;\n font-weight: 600;\n grid-column: 1 / -1;\n}\n\n.workout__details {\n display: flex;\n align-items: baseline;\n}\n\n.workout__icon {\n font-size: 1.8rem;\n margin-right: 0.2rem;\n height: 0.28rem;\n}\n\n.workout__value {\n font-size: 1.5rem;\n margin-right: 0.5rem;\n}\n\n.workout__unit {\n font-size: 1.1rem;\n color: var(--color-light--1);\n text-transform: uppercase;\n font-weight: 800;\n}\n\n.form {\n background-color: var(--color-dark--2);\n border-radius: 5px;\n padding: 1.5rem 2.75rem;\n margin-bottom: 1.75rem;\n\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 0.5rem 2.5rem;\n\n /* Match height and activity boxes */\n height: 9.25rem;\n transition: all 0.5s, transform 1ms;\n}\n\n.form.hidden {\n transform: translateY(-30rem);\n height: 0;\n padding: 0 2.25rem;\n margin-bottom: 0;\n opacity: 0;\n}\n\n.form__row {\n display: flex;\n align-items: center;\n}\n\n.form__row--hidden {\n display: none;\n}\n\n.form__label {\n flex: 0 0 50%;\n font-size: 1.5rem;\n font-weight: 600;\n}\n\n.form__input {\n width: 100%;\n padding: 0.3rem 1.1rem;\n font-family: inherit;\n font-size: 1.4rem;\n border: none;\n border-radius: 3px;\n background-color: var(--color-light--3);\n transition: all 0.2s;\n}\n\n.form__input:focus {\n outline: none;\n background-color: #fff;\n}\n\n.form__btn {\n display: none;\n}\n\n.copyright {\n margin-top: auto;\n font-size: 1.3rem;\n text-align: center;\n color: var(--color-light--1);\n}\n\n.twitter-link:link,\n.twitter-link:visited {\n color: var(--color-light--1);\n transition: all 0.2s;\n}\n\n.twitter-link:hover,\n.twitter-link:active {\n color: var(--color-light--2);\n}\n\n/* MAP */\n#map {\n flex: 1;\n height: 100%;\n background-color: var(--color-light--1);\n}\n\n/* Popup width is defined in JS using options */\n.leaflet-popup .leaflet-popup-content-wrapper {\n background-color: var(--color-dark--1);\n color: var(--color-light--2);\n border-radius: 5px;\n padding-right: 0.6rem;\n}\n\n.leaflet-popup .leaflet-popup-content {\n font-size: 1.5rem;\n}\n\n.leaflet-popup .leaflet-popup-tip {\n background-color: var(--color-dark--1);\n}\n\n.running-popup .leaflet-popup-content-wrapper {\n border-left: 5px solid var(--color-brand--2);\n}\n.cycling-popup .leaflet-popup-content-wrapper {\n border-left: 5px solid var(--color-brand--1);\n}\n" }, { "path": "15-Mapty/starter/.prettierrc", "content": "{\n \"singleQuote\": true,\n \"arrowParens\": \"avoid\"\n}\n" }, { "path": "15-Mapty/starter/index.html", "content": "\n\n \n \n \n \n \n\n \n\n \n\n \n mapty // Map your workouts\n \n \n
    \n \"Logo\"\n\n
      \n
      \n
      \n \n \n
      \n
      \n \n \n
      \n
      \n \n \n
      \n
      \n \n \n
      \n
      \n \n \n
      \n \n
      \n\n \n
    \n\n

    \n © Copyright by\n Jonas Schmedtmann. Use for learning or your portfolio. Don't use to teach. Don't claim\n as your own.\n

    \n
    \n\n
    \n \n\n" }, { "path": "15-Mapty/starter/script.js", "content": "'use strict';\n\n// prettier-ignore\nconst months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\n\nconst form = document.querySelector('.form');\nconst containerWorkouts = document.querySelector('.workouts');\nconst inputType = document.querySelector('.form__input--type');\nconst inputDistance = document.querySelector('.form__input--distance');\nconst inputDuration = document.querySelector('.form__input--duration');\nconst inputCadence = document.querySelector('.form__input--cadence');\nconst inputElevation = document.querySelector('.form__input--elevation');\n" }, { "path": "15-Mapty/starter/style.css", "content": ":root {\n --color-brand--1: #ffb545;\n --color-brand--2: #00c46a;\n\n --color-dark--1: #2d3439;\n --color-dark--2: #42484d;\n --color-light--1: #aaa;\n --color-light--2: #ececec;\n --color-light--3: rgb(214, 222, 224);\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: inherit;\n}\n\nhtml {\n font-size: 62.5%;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Manrope', sans-serif;\n color: var(--color-light--2);\n font-weight: 400;\n line-height: 1.6;\n height: 100vh;\n overscroll-behavior-y: none;\n\n background-color: #fff;\n padding: 2.5rem;\n\n display: flex;\n}\n\n/* GENERAL */\na:link,\na:visited {\n color: var(--color-brand--1);\n}\n\n/* SIDEBAR */\n.sidebar {\n flex-basis: 50rem;\n background-color: var(--color-dark--1);\n padding: 3rem 5rem 4rem 5rem;\n display: flex;\n flex-direction: column;\n}\n\n.logo {\n height: 5.2rem;\n align-self: center;\n margin-bottom: 4rem;\n}\n\n.workouts {\n list-style: none;\n height: 77vh;\n overflow-y: scroll;\n overflow-x: hidden;\n}\n\n.workouts::-webkit-scrollbar {\n width: 0;\n}\n\n.workout {\n background-color: var(--color-dark--2);\n border-radius: 5px;\n padding: 1.5rem 2.25rem;\n margin-bottom: 1.75rem;\n cursor: pointer;\n\n display: grid;\n grid-template-columns: 1fr 1fr 1fr 1fr;\n gap: 0.75rem 1.5rem;\n}\n.workout--running {\n border-left: 5px solid var(--color-brand--2);\n}\n.workout--cycling {\n border-left: 5px solid var(--color-brand--1);\n}\n\n.workout__title {\n font-size: 1.7rem;\n font-weight: 600;\n grid-column: 1 / -1;\n}\n\n.workout__details {\n display: flex;\n align-items: baseline;\n}\n\n.workout__icon {\n font-size: 1.8rem;\n margin-right: 0.2rem;\n height: 0.28rem;\n}\n\n.workout__value {\n font-size: 1.5rem;\n margin-right: 0.5rem;\n}\n\n.workout__unit {\n font-size: 1.1rem;\n color: var(--color-light--1);\n text-transform: uppercase;\n font-weight: 800;\n}\n\n.form {\n background-color: var(--color-dark--2);\n border-radius: 5px;\n padding: 1.5rem 2.75rem;\n margin-bottom: 1.75rem;\n\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 0.5rem 2.5rem;\n\n /* Match height and activity boxes */\n height: 9.25rem;\n transition: all 0.5s, transform 1ms;\n}\n\n.form.hidden {\n transform: translateY(-30rem);\n height: 0;\n padding: 0 2.25rem;\n margin-bottom: 0;\n opacity: 0;\n}\n\n.form__row {\n display: flex;\n align-items: center;\n}\n\n.form__row--hidden {\n display: none;\n}\n\n.form__label {\n flex: 0 0 50%;\n font-size: 1.5rem;\n font-weight: 600;\n}\n\n.form__input {\n width: 100%;\n padding: 0.3rem 1.1rem;\n font-family: inherit;\n font-size: 1.4rem;\n border: none;\n border-radius: 3px;\n background-color: var(--color-light--3);\n transition: all 0.2s;\n}\n\n.form__input:focus {\n outline: none;\n background-color: #fff;\n}\n\n.form__btn {\n display: none;\n}\n\n.copyright {\n margin-top: auto;\n font-size: 1.3rem;\n text-align: center;\n color: var(--color-light--1);\n}\n\n.twitter-link:link,\n.twitter-link:visited {\n color: var(--color-light--1);\n transition: all 0.2s;\n}\n\n.twitter-link:hover,\n.twitter-link:active {\n color: var(--color-light--2);\n}\n\n/* MAP */\n#map {\n flex: 1;\n height: 100%;\n background-color: var(--color-light--1);\n}\n\n/* Popup width is defined in JS using options */\n.leaflet-popup .leaflet-popup-content-wrapper {\n background-color: var(--color-dark--1);\n color: var(--color-light--2);\n border-radius: 5px;\n padding-right: 0.6rem;\n}\n\n.leaflet-popup .leaflet-popup-content {\n font-size: 1.5rem;\n}\n\n.leaflet-popup .leaflet-popup-tip {\n background-color: var(--color-dark--1);\n}\n\n.running-popup .leaflet-popup-content-wrapper {\n border-left: 5px solid var(--color-brand--2);\n}\n.cycling-popup .leaflet-popup-content-wrapper {\n border-left: 5px solid var(--color-brand--1);\n}\n" }, { "path": "16-Asynchronous/final/.prettierrc", "content": "{\n \"singleQuote\": true,\n \"arrowParens\": \"avoid\"\n}\n" }, { "path": "16-Asynchronous/final/index.html", "content": "\n\n \n \n \n \n \n \n Asynchronous JavaScript\n \n \n
    \n
    \n \n
    \n \n
    \n
    \n \n\n" }, { "path": "16-Asynchronous/final/script.js", "content": "'use strict';\n\nconst btn = document.querySelector('.btn-country');\nconst countriesContainer = document.querySelector('.countries');\n\nconst renderCountry = function (data, className = '') {\n const html = `\n
    \n \n
    \n

    ${data.name}

    \n

    ${data.region}

    \n

    👫${(\n +data.population / 1000000\n ).toFixed(1)} people

    \n

    🗣️${data.languages[0].name}

    \n

    💰${data.currencies[0].name}

    \n
    \n
    \n `;\n countriesContainer.insertAdjacentHTML('beforeend', html);\n countriesContainer.style.opacity = 1;\n};\n\nconst renderError = function (msg) {\n countriesContainer.insertAdjacentText('beforeend', msg);\n countriesContainer.style.opacity = 1;\n};\n\nconst getJSON = function (url, errorMsg = 'Something went wrong') {\n return fetch(url).then(response => {\n if (!response.ok) throw new Error(`${errorMsg} (${response.status})`);\n\n return response.json();\n });\n};\n\n/*\n///////////////////////////////////////\n// Our First AJAX Call: XMLHttpRequest\n\nconst getCountryData = function (country) {\n const request = new XMLHttpRequest();\n request.open('GET', `https://restcountries.com/v2/name/${country}`);\n request.send();\n\n request.addEventListener('load', function () {\n const [data] = JSON.parse(this.responseText);\n console.log(data);\n\n const html = `\n
    \n \n
    \n

    ${data.name}

    \n

    ${data.region}

    \n

    👫${(\n +data.population / 1000000\n ).toFixed(1)} people

    \n

    🗣️${data.languages[0].name}

    \n

    💰${data.currencies[0].name}

    \n
    \n
    \n `;\n countriesContainer.insertAdjacentHTML('beforeend', html);\n countriesContainer.style.opacity = 1;\n });\n};\n\ngetCountryData('portugal');\ngetCountryData('usa');\ngetCountryData('germany');\n*/\n\n///////////////////////////////////////\n// Welcome to Callback Hell\n\n/*\nconst getCountryAndNeighbour = function (country) {\n // AJAX call country 1\n const request = new XMLHttpRequest();\n request.open('GET', `https://restcountries.com/v2/name/${country}`);\n request.send();\n\n request.addEventListener('load', function () {\n const [data] = JSON.parse(this.responseText);\n console.log(data);\n\n // Render country 1\n renderCountry(data);\n\n // Get neighbour country (2)\n const [neighbour] = data.borders;\n\n if (!neighbour) return;\n\n // AJAX call country 2\n const request2 = new XMLHttpRequest();\n request2.open('GET', `https://restcountries.eu/rest/v2/alpha/${neighbour}`);\n request2.send();\n\n request2.addEventListener('load', function () {\n const data2 = JSON.parse(this.responseText);\n console.log(data2);\n\n renderCountry(data2, 'neighbour');\n });\n });\n};\n\n// getCountryAndNeighbour('portugal');\ngetCountryAndNeighbour('usa');\n\nsetTimeout(() => {\n console.log('1 second passed');\n setTimeout(() => {\n console.log('2 seconds passed');\n setTimeout(() => {\n console.log('3 second passed');\n setTimeout(() => {\n console.log('4 second passed');\n }, 1000);\n }, 1000);\n }, 1000);\n}, 1000);\n\n\n///////////////////////////////////////\n// Consuming Promises\n// Chaining Promises\n// Handling Rejected Promises\n// Throwing Errors Manually\n\n// const getCountryData = function (country) {\n// fetch(`https://restcountries.com/v2/name/${country}`)\n// .then(function (response) {\n// console.log(response);\n// return response.json();\n// })\n// .then(function (data) {\n// console.log(data);\n// renderCountry(data[0]);\n// });\n// };\n\n// const getCountryData = function (country) {\n// // Country 1\n// fetch(`https://restcountries.com/v2/name/${country}`)\n// .then(response => {\n// console.log(response);\n\n// if (!response.ok)\n// throw new Error(`Country not found (${response.status})`);\n\n// return response.json();\n// })\n// .then(data => {\n// renderCountry(data[0]);\n// // const neighbour = data[0].borders[0];\n// const neighbour = 'dfsdfdef';\n\n// if (!neighbour) return;\n\n// // Country 2\n// return fetch(`https://restcountries.eu/rest/v2/alpha/${neighbour}`);\n// })\n// .then(response => {\n// if (!response.ok)\n// throw new Error(`Country not found (${response.status})`);\n\n// return response.json();\n// })\n// .then(data => renderCountry(data, 'neighbour'))\n// .catch(err => {\n// console.error(`${err} 💥💥💥`);\n// renderError(`Something went wrong 💥💥 ${err.message}. Try again!`);\n// })\n// .finally(() => {\n// countriesContainer.style.opacity = 1;\n// });\n// };\n\nconst getCountryData = function (country) {\n // Country 1\n getJSON(\n `https://restcountries.com/v2/name/${country}`,\n 'Country not found'\n )\n .then(data => {\n renderCountry(data[0]);\n const neighbour = data[0].borders[0];\n\n if (!neighbour) throw new Error('No neighbour found!');\n\n // Country 2\n return getJSON(\n `https://restcountries.eu/rest/v2/alpha/${neighbour}`,\n 'Country not found'\n );\n })\n\n .then(data => renderCountry(data, 'neighbour'))\n .catch(err => {\n console.error(`${err} 💥💥💥`);\n renderError(`Something went wrong 💥💥 ${err.message}. Try again!`);\n })\n .finally(() => {\n countriesContainer.style.opacity = 1;\n });\n};\n\nbtn.addEventListener('click', function () {\n getCountryData('portugal');\n});\n\n// getCountryData('australia');\n*/\n\n///////////////////////////////////////\n// Coding Challenge #1\n\n/* \nIn this challenge you will build a function 'whereAmI' which renders a country ONLY based on GPS coordinates. For that, you will use a second API to geocode coordinates.\n\nHere are your tasks:\n\nPART 1\n1. Create a function 'whereAmI' which takes as inputs a latitude value (lat) and a longitude value (lng) (these are GPS coordinates, examples are below).\n2. Do 'reverse geocoding' of the provided coordinates. Reverse geocoding means to convert coordinates to a meaningful location, like a city and country name. Use this API to do reverse geocoding: https://api.bigdatacloud.net/data/reverse-geocode-client?latitude=${lat}&longitude=${lng}.\nThe AJAX call will be done to a URL with this format: https://api.bigdatacloud.net/data/reverse-geocode-client?latitude=52.508&longitude=13.381. Use the fetch API and promises to get the data. Do NOT use the getJSON function we created, that is cheating 😉\n3. Once you have the data, take a look at it in the console to see all the attributes that you recieved about the provided location. Then, using this data, log a messsage like this to the console: 'You are in Berlin, Germany'\n4. Chain a .catch method to the end of the promise chain and log errors to the console\n5. This API allows you to make only 3 requests per second. If you reload fast, you will get this error with code 403. This is an error with the request. Remember, fetch() does NOT reject the promise in this case. So create an error to reject the promise yourself, with a meaningful error message.\n\nPART 2\n6. Now it's time to use the received data to render a country. So take the relevant attribute from the geocoding API result, and plug it into the countries API that we have been using.\n7. Render the country and catch any errors, just like we have done in the last lecture (you can even copy this code, no need to type the same code)\n\nTEST COORDINATES 1: 52.508, 13.381 (Latitude, Longitude)\nTEST COORDINATES 2: 19.037, 72.873\nTEST COORDINATES 2: -33.933, 18.474\n\nGOOD LUCK 😀\n*/\n\n/*\nconst whereAmI = function (lat, lng) {\n fetch(`https://api.bigdatacloud.net/data/reverse-geocode-client?latitude=${lat}&longitude=${lng}`)\n .then(res => {\n if (!res.ok) throw new Error(`Problem with geocoding ${res.status}`);\n return res.json();\n })\n .then(data => {\n console.log(data);\n console.log(`You are in ${data.city}, ${data.countryCode}`);\n\n return fetch(`https://restcountries.com/v2/name/${data.country}`);\n })\n .then(res => {\n if (!res.ok) throw new Error(`Country not found (${res.status})`);\n\n return res.json();\n })\n .then(data => renderCountry(data[0]))\n .catch(err => console.error(`${err.message} 💥`));\n};\nwhereAmI(52.508, 13.381);\nwhereAmI(19.037, 72.873);\nwhereAmI(-33.933, 18.474);\n\n\n///////////////////////////////////////\n// The Event Loop in Practice\nconsole.log('Test start');\nsetTimeout(() => console.log('0 sec timer'), 0);\nPromise.resolve('Resolved promise 1').then(res => console.log(res));\n\nPromise.resolve('Resolved promise 2').then(res => {\n for (let i = 0; i < 1000000000; i++) {}\n console.log(res);\n});\n\nconsole.log('Test end');\n\n\n///////////////////////////////////////\n// Building a Simple Promise\nconst lotteryPromise = new Promise(function (resolve, reject) {\n console.log('Lotter draw is happening 🔮');\n setTimeout(function () {\n if (Math.random() >= 0.5) {\n resolve('You WIN 💰');\n } else {\n reject(new Error('You lost your money 💩'));\n }\n }, 2000);\n});\n\nlotteryPromise.then(res => console.log(res)).catch(err => console.error(err));\n\n// Promisifying setTimeout\nconst wait = function (seconds) {\n return new Promise(function (resolve) {\n setTimeout(resolve, seconds * 1000);\n });\n};\n\nwait(1)\n .then(() => {\n console.log('1 second passed');\n return wait(1);\n })\n .then(() => {\n console.log('2 second passed');\n return wait(1);\n })\n .then(() => {\n console.log('3 second passed');\n return wait(1);\n })\n .then(() => console.log('4 second passed'));\n\n// setTimeout(() => {\n// console.log('1 second passed');\n// setTimeout(() => {\n// console.log('2 seconds passed');\n// setTimeout(() => {\n// console.log('3 second passed');\n// setTimeout(() => {\n// console.log('4 second passed');\n// }, 1000);\n// }, 1000);\n// }, 1000);\n// }, 1000);\n\nPromise.resolve('abc').then(x => console.log(x));\nPromise.reject(new Error('Problem!')).catch(x => console.error(x));\n\n\n///////////////////////////////////////\n// Promisifying the Geolocation API\nconst getPosition = function () {\n return new Promise(function (resolve, reject) {\n // navigator.geolocation.getCurrentPosition(\n // position => resolve(position),\n // err => reject(err)\n // );\n navigator.geolocation.getCurrentPosition(resolve, reject);\n });\n};\n// getPosition().then(pos => console.log(pos));\n\nconst whereAmI = function () {\n getPosition()\n .then(pos => {\n const { latitude: lat, longitude: lng } = pos.coords;\n\n return fetch(`https://api.bigdatacloud.net/data/reverse-geocode-client?latitude=${lat}&longitude=${lng}`);\n })\n .then(res => {\n if (!res.ok) throw new Error(`Problem with geocoding ${res.status}`);\n return res.json();\n })\n .then(data => {\n console.log(data);\n console.log(`You are in ${data.city}, ${data.countryCode}`);\n\n return fetch(`https://restcountries.com/v2/name/${data.countryCode}`);\n })\n .then(res => {\n if (!res.ok) throw new Error(`Country not found (${res.status})`);\n\n return res.json();\n })\n .then(data => renderCountry(data[0]))\n .catch(err => console.error(`${err.message} 💥`));\n};\n\nbtn.addEventListener('click', whereAmI);\n*/\n\n///////////////////////////////////////\n// Coding Challenge #2\n\n/* \nBuild the image loading functionality that I just showed you on the screen.\n\nTasks are not super-descriptive this time, so that you can figure out some stuff on your own. Pretend you're working on your own 😉\n\nPART 1\n1. Create a function 'createImage' which receives imgPath as an input. This function returns a promise which creates a new image (use document.createElement('img')) and sets the .src attribute to the provided image path. When the image is done loading, append it to the DOM element with the 'images' class, and resolve the promise. The fulfilled value should be the image element itself. In case there is an error loading the image ('error' event), reject the promise.\n\nIf this part is too tricky for you, just watch the first part of the solution.\n\nPART 2\n2. Comsume the promise using .then and also add an error handler;\n3. After the image has loaded, pause execution for 2 seconds using the wait function we created earlier;\n4. After the 2 seconds have passed, hide the current image (set display to 'none'), and load a second image (HINT: Use the image element returned by the createImage promise to hide the current image. You will need a global variable for that 😉);\n5. After the second image has loaded, pause execution for 2 seconds again;\n6. After the 2 seconds have passed, hide the current image.\n\nTEST DATA: Images in the img folder. Test the error handler by passing a wrong image path. Set the network speed to 'Fast 3G' in the dev tools Network tab, otherwise images load too fast.\n\nGOOD LUCK 😀\n*/\n\n/*\nconst wait = function (seconds) {\n return new Promise(function (resolve) {\n setTimeout(resolve, seconds * 1000);\n });\n};\n\nconst imgContainer = document.querySelector('.images');\n\nconst createImage = function (imgPath) {\n return new Promise(function (resolve, reject) {\n const img = document.createElement('img');\n img.src = imgPath;\n\n img.addEventListener('load', function () {\n imgContainer.append(img);\n resolve(img);\n });\n\n img.addEventListener('error', function () {\n reject(new Error('Image not found'));\n });\n });\n};\n\nlet currentImg;\n\ncreateImage('img/img-1.jpg')\n .then(img => {\n currentImg = img;\n console.log('Image 1 loaded');\n return wait(2);\n })\n .then(() => {\n currentImg.style.display = 'none';\n return createImage('img/img-2.jpg');\n })\n .then(img => {\n currentImg = img;\n console.log('Image 2 loaded');\n return wait(2);\n })\n .then(() => {\n currentImg.style.display = 'none';\n })\n .catch(err => console.error(err));\n\n\n///////////////////////////////////////\n// Consuming Promises with Async/Await\n// Error Handling With try...catch\n\nconst getPosition = function () {\n return new Promise(function (resolve, reject) {\n navigator.geolocation.getCurrentPosition(resolve, reject);\n });\n};\n\n// fetch(`https://restcountries.com/v2/name/${country}`).then(res => console.log(res))\n\nconst whereAmI = async function () {\n try {\n // Geolocation\n const pos = await getPosition();\n const { latitude: lat, longitude: lng } = pos.coords;\n\n // Reverse geocoding\n const resGeo = await fetch(`https://api.bigdatacloud.net/data/reverse-geocode-client?latitude=${lat}&longitude=${lng}`);\n if (!resGeo.ok) throw new Error('Problem getting location data');\n\n const dataGeo = await resGeo.json();\n console.log(dataGeo);\n\n // Country data\n const res = await fetch(\n `https://restcountries.com/v2/name/${dataGeo.countryCode}`\n );\n \n // BUG in video:\n // if (!resGeo.ok) throw new Error('Problem getting country');\n \n // FIX:\n if (!res.ok) throw new Error('Problem getting country');\n\n const data = await res.json();\n console.log(data);\n renderCountry(data[0]);\n } catch (err) {\n console.error(`${err} 💥`);\n renderError(`💥 ${err.message}`);\n }\n};\nwhereAmI();\nwhereAmI();\nwhereAmI();\nconsole.log('FIRST');\n\n// try {\n// let y = 1;\n// const x = 2;\n// y = 3;\n// } catch (err) {\n// alert(err.message);\n// }\n\n\n///////////////////////////////////////\n// Returning Values from Async Functions\nconst getPosition = function () {\n return new Promise(function (resolve, reject) {\n navigator.geolocation.getCurrentPosition(resolve, reject);\n });\n};\n\nconst whereAmI = async function () {\n try {\n // Geolocation\n const pos = await getPosition();\n const { latitude: lat, longitude: lng } = pos.coords;\n\n // Reverse geocoding\n const resGeo = await fetch(`https://api.bigdatacloud.net/data/reverse-geocode-client?latitude=${lat}&longitude=${lng}`);\n if (!resGeo.ok) throw new Error('Problem getting location data');\n const dataGeo = await resGeo.json();\n\n // Country data\n const res = await fetch(\n `https://restcountries.com/v2/name/${dataGeo.country}`\n );\n if (!resGeo.ok) throw new Error('Problem getting country');\n const data = await res.json();\n renderCountry(data[0]);\n\n return `You are in ${dataGeo.city}, ${dataGeo.country}`;\n } catch (err) {\n console.error(`${err} 💥`);\n renderError(`💥 ${err.message}`);\n\n // Reject promise returned from async function\n throw err;\n }\n};\n\nconsole.log('1: Will get location');\n// const city = whereAmI();\n// console.log(city);\n\n// whereAmI()\n// .then(city => console.log(`2: ${city}`))\n// .catch(err => console.error(`2: ${err.message} 💥`))\n// .finally(() => console.log('3: Finished getting location'));\n\n(async function () {\n try {\n const city = await whereAmI();\n console.log(`2: ${city}`);\n } catch (err) {\n console.error(`2: ${err.message} 💥`);\n }\n console.log('3: Finished getting location');\n})();\n\n\n///////////////////////////////////////\n// Running Promises in Parallel\nconst get3Countries = async function (c1, c2, c3) {\n try {\n // const [data1] = await getJSON(\n // `https://restcountries.com/v2/name/${c1}`\n // );\n // const [data2] = await getJSON(\n // `https://restcountries.com/v2/name/${c2}`\n // );\n // const [data3] = await getJSON(\n // `https://restcountries.com/v2/name/${c3}`\n // );\n // console.log([data1.capital, data2.capital, data3.capital]);\n\n const data = await Promise.all([\n getJSON(`https://restcountries.com/v2/name/${c1}`),\n getJSON(`https://restcountries.com/v2/name/${c2}`),\n getJSON(`https://restcountries.com/v2/name/${c3}`),\n ]);\n console.log(data.map(d => d[0].capital));\n } catch (err) {\n console.error(err);\n }\n};\nget3Countries('portugal', 'canada', 'tanzania');\n\n\n///////////////////////////////////////\n// Other Promise Combinators: race, allSettled and any\n// Promise.race\n(async function () {\n const res = await Promise.race([\n getJSON(`https://restcountries.com/v2/name/italy`),\n getJSON(`https://restcountries.com/v2/name/egypt`),\n getJSON(`https://restcountries.com/v2/name/mexico`),\n ]);\n console.log(res[0]);\n})();\n\nconst timeout = function (sec) {\n return new Promise(function (_, reject) {\n setTimeout(function () {\n reject(new Error('Request took too long!'));\n }, sec * 1000);\n });\n};\n\nPromise.race([\n getJSON(`https://restcountries.com/v2/name/tanzania`),\n timeout(5),\n])\n .then(res => console.log(res[0]))\n .catch(err => console.error(err));\n\n// Promise.allSettled\nPromise.allSettled([\n Promise.resolve('Success'),\n Promise.reject('ERROR'),\n Promise.resolve('Another success'),\n]).then(res => console.log(res));\n\nPromise.all([\n Promise.resolve('Success'),\n Promise.reject('ERROR'),\n Promise.resolve('Another success'),\n])\n .then(res => console.log(res))\n .catch(err => console.error(err));\n\n// Promise.any [ES2021]\nPromise.any([\n Promise.resolve('Success'),\n Promise.reject('ERROR'),\n Promise.resolve('Another success'),\n])\n .then(res => console.log(res))\n .catch(err => console.error(err));\n*/\n\n///////////////////////////////////////\n// Coding Challenge #3\n\n/* \nPART 1\nWrite an async function 'loadNPause' that recreates Coding Challenge #2, this time using async/await (only the part where the promise is consumed). Compare the two versions, think about the big differences, and see which one you like more.\nDon't forget to test the error handler, and to set the network speed to 'Fast 3G' in the dev tools Network tab.\n\nPART 2\n1. Create an async function 'loadAll' that receives an array of image paths 'imgArr';\n2. Use .map to loop over the array, to load all the images with the 'createImage' function (call the resulting array 'imgs')\n3. Check out the 'imgs' array in the console! Is it like you expected?\n4. Use a promise combinator function to actually get the images from the array 😉\n5. Add the 'paralell' class to all the images (it has some CSS styles).\n\nTEST DATA: ['img/img-1.jpg', 'img/img-2.jpg', 'img/img-3.jpg']. To test, turn off the 'loadNPause' function.\n\nGOOD LUCK 😀\n*/\n\n/*\nconst wait = function (seconds) {\n return new Promise(function (resolve) {\n setTimeout(resolve, seconds * 1000);\n });\n};\n\nconst imgContainer = document.querySelector('.images');\n\nconst createImage = function (imgPath) {\n return new Promise(function (resolve, reject) {\n const img = document.createElement('img');\n img.src = imgPath;\n\n img.addEventListener('load', function () {\n imgContainer.append(img);\n resolve(img);\n });\n\n img.addEventListener('error', function () {\n reject(new Error('Image not found'));\n });\n });\n};\n\nlet currentImg;\n\n// createImage('img/img-1.jpg')\n// .then(img => {\n// currentImg = img;\n// console.log('Image 1 loaded');\n// return wait(2);\n// })\n// .then(() => {\n// currentImg.style.display = 'none';\n// return createImage('img/img-2.jpg');\n// })\n// .then(img => {\n// currentImg = img;\n// console.log('Image 2 loaded');\n// return wait(2);\n// })\n// .then(() => {\n// currentImg.style.display = 'none';\n// })\n// .catch(err => console.error(err));\n\n// PART 1\nconst loadNPause = async function () {\n try {\n // Load image 1\n let img = await createImage('img/img-1.jpg');\n console.log('Image 1 loaded');\n await wait(2);\n img.style.display = 'none';\n\n // Load image 1\n img = await createImage('img/img-2.jpg');\n console.log('Image 2 loaded');\n await wait(2);\n img.style.display = 'none';\n } catch (err) {\n console.error(err);\n }\n};\n// loadNPause();\n\n// PART 2\nconst loadAll = async function (imgArr) {\n try {\n const imgs = imgArr.map(async img => await createImage(img));\n const imgsEl = await Promise.all(imgs);\n console.log(imgsEl);\n imgsEl.forEach(img => img.classList.add('parallel'));\n } catch (err) {\n console.error(err);\n }\n};\nloadAll(['img/img-1.jpg', 'img/img-2.jpg', 'img/img-3.jpg']);\n*/\n" }, { "path": "16-Asynchronous/final/style.css", "content": "* {\n margin: 0;\n padding: 0;\n box-sizing: inherit;\n}\n\nhtml {\n font-size: 62.5%;\n box-sizing: border-box;\n}\n\nbody {\n font-family: system-ui;\n color: #555;\n background-color: #f7f7f7;\n min-height: 100vh;\n\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.container {\n display: flex;\n flex-flow: column;\n align-items: center;\n}\n\n.countries {\n /* margin-bottom: 8rem; */\n display: flex;\n\n font-size: 2rem;\n opacity: 0;\n transition: opacity 1s;\n}\n\n.country {\n background-color: #fff;\n box-shadow: 0 2rem 5rem 1rem rgba(0, 0, 0, 0.1);\n font-size: 1.8rem;\n width: 30rem;\n border-radius: 0.7rem;\n margin: 0 3rem;\n /* overflow: hidden; */\n}\n\n.neighbour::before {\n content: 'Neighbour country';\n width: 100%;\n position: absolute;\n top: -4rem;\n\n text-align: center;\n font-size: 1.8rem;\n font-weight: 600;\n text-transform: uppercase;\n color: #888;\n}\n\n.neighbour {\n transform: scale(0.8) translateY(1rem);\n margin-left: 0;\n}\n\n.country__img {\n width: 30rem;\n height: 17rem;\n object-fit: cover;\n background-color: #eee;\n border-top-left-radius: 0.7rem;\n border-top-right-radius: 0.7rem;\n}\n\n.country__data {\n padding: 2.5rem 3.75rem 3rem 3.75rem;\n}\n\n.country__name {\n font-size: 2.7rem;\n margin-bottom: 0.7rem;\n}\n\n.country__region {\n font-size: 1.4rem;\n margin-bottom: 2.5rem;\n text-transform: uppercase;\n color: #888;\n}\n\n.country__row:not(:last-child) {\n margin-bottom: 1rem;\n}\n\n.country__row span {\n display: inline-block;\n margin-right: 2rem;\n font-size: 2.4rem;\n}\n\n.btn-country {\n border: none;\n font-size: 2rem;\n padding: 2rem 5rem;\n border-radius: 0.7rem;\n color: white;\n background-color: orangered;\n cursor: pointer;\n}\n\n.images {\n display: flex;\n}\n\n.images img {\n display: block;\n width: 80rem;\n margin: 4rem;\n}\n\n.images img.parallel {\n width: 40rem;\n margin: 2rem;\n border: 3rem solid white;\n box-shadow: 0 2rem 5rem 1rem rgba(0, 0, 0, 0.1);\n}\n" }, { "path": "16-Asynchronous/starter/.prettierrc", "content": "{\n \"singleQuote\": true,\n \"arrowParens\": \"avoid\"\n}\n" }, { "path": "16-Asynchronous/starter/index.html", "content": "\n\n \n \n \n \n \n \n Asynchronous JavaScript\n \n \n
    \n
    \n \n
    \n \n
    \n
    \n \n\n" }, { "path": "16-Asynchronous/starter/script.js", "content": "'use strict';\n\nconst btn = document.querySelector('.btn-country');\nconst countriesContainer = document.querySelector('.countries');\n\n// NEW COUNTRIES API URL (use instead of the URL shown in videos):\n// https://restcountries.com/v2/name/portugal\n\n// NEW REVERSE GEOCODING API URL (use instead of the URL shown in videos):\n// https://api.bigdatacloud.net/data/reverse-geocode-client?latitude=${lat}&longitude=${lng}\n\n///////////////////////////////////////\n" }, { "path": "16-Asynchronous/starter/style.css", "content": "* {\n margin: 0;\n padding: 0;\n box-sizing: inherit;\n}\n\nhtml {\n font-size: 62.5%;\n box-sizing: border-box;\n}\n\nbody {\n font-family: system-ui;\n color: #555;\n background-color: #f7f7f7;\n min-height: 100vh;\n\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.container {\n display: flex;\n flex-flow: column;\n align-items: center;\n}\n\n.countries {\n /* margin-bottom: 8rem; */\n display: flex;\n\n font-size: 2rem;\n opacity: 0;\n transition: opacity 1s;\n}\n\n.country {\n background-color: #fff;\n box-shadow: 0 2rem 5rem 1rem rgba(0, 0, 0, 0.1);\n font-size: 1.8rem;\n width: 30rem;\n border-radius: 0.7rem;\n margin: 0 3rem;\n /* overflow: hidden; */\n}\n\n.neighbour::before {\n content: 'Neighbour country';\n width: 100%;\n position: absolute;\n top: -4rem;\n\n text-align: center;\n font-size: 1.8rem;\n font-weight: 600;\n text-transform: uppercase;\n color: #888;\n}\n\n.neighbour {\n transform: scale(0.8) translateY(1rem);\n margin-left: 0;\n}\n\n.country__img {\n width: 30rem;\n height: 17rem;\n object-fit: cover;\n background-color: #eee;\n border-top-left-radius: 0.7rem;\n border-top-right-radius: 0.7rem;\n}\n\n.country__data {\n padding: 2.5rem 3.75rem 3rem 3.75rem;\n}\n\n.country__name {\n font-size: 2.7rem;\n margin-bottom: 0.7rem;\n}\n\n.country__region {\n font-size: 1.4rem;\n margin-bottom: 2.5rem;\n text-transform: uppercase;\n color: #888;\n}\n\n.country__row:not(:last-child) {\n margin-bottom: 1rem;\n}\n\n.country__row span {\n display: inline-block;\n margin-right: 2rem;\n font-size: 2.4rem;\n}\n\n.btn-country {\n border: none;\n font-size: 2rem;\n padding: 2rem 5rem;\n border-radius: 0.7rem;\n color: white;\n background-color: orangered;\n cursor: pointer;\n}\n\n.images {\n display: flex;\n}\n\n.images img {\n display: block;\n width: 80rem;\n margin: 4rem;\n}\n\n.images img.parallel {\n width: 40rem;\n margin: 2rem;\n border: 3rem solid white;\n box-shadow: 0 2rem 5rem 1rem rgba(0, 0, 0, 0.1);\n}\n" }, { "path": "17-Modern-JS-Modules-Tooling/final/.prettierrc", "content": "{\n \"singleQuote\": true,\n \"arrowParens\": \"avoid\"\n}\n" }, { "path": "17-Modern-JS-Modules-Tooling/final/clean.js", "content": "'use strict';\n\nconst budget = Object.freeze([\n { value: 250, description: 'Sold old TV 📺', user: 'jonas' },\n { value: -45, description: 'Groceries 🥑', user: 'jonas' },\n { value: 3500, description: 'Monthly salary 👩‍💻', user: 'jonas' },\n { value: 300, description: 'Freelancing 👩‍💻', user: 'jonas' },\n { value: -1100, description: 'New iPhone 📱', user: 'jonas' },\n { value: -20, description: 'Candy 🍭', user: 'matilda' },\n { value: -125, description: 'Toys 🚂', user: 'matilda' },\n { value: -1800, description: 'New Laptop 💻', user: 'jonas' },\n]);\n\nconst spendingLimits = Object.freeze({\n jonas: 1500,\n matilda: 100,\n});\n// spendingLimits.jay = 200;\n\n// const limit = spendingLimits[user] ? spendingLimits[user] : 0;\nconst getLimit = (limits, user) => limits?.[user] ?? 0;\n\n// Pure function :D\nconst addExpense = function (\n state,\n limits,\n value,\n description,\n user = 'jonas'\n) {\n const cleanUser = user.toLowerCase();\n\n return value <= getLimit(limits, cleanUser)\n ? [...state, { value: -value, description, user: cleanUser }]\n : state;\n};\n\nconst newBudget1 = addExpense(budget, spendingLimits, 10, 'Pizza 🍕');\nconst newBudget2 = addExpense(\n newBudget1,\n spendingLimits,\n 100,\n 'Going to movies 🍿',\n 'Matilda'\n);\nconst newBudget3 = addExpense(newBudget2, spendingLimits, 200, 'Stuff', 'Jay');\n\n// const checkExpenses2 = function (state, limits) {\n// return state.map(entry => {\n// return entry.value < -getLimit(limits, entry.user)\n// ? { ...entry, flag: 'limit' }\n// : entry;\n// });\n// // for (const entry of newBudget3)\n// // if (entry.value < -getLimit(limits, entry.user)) entry.flag = 'limit';\n// };\n\nconst checkExpenses = (state, limits) =>\n state.map(entry =>\n entry.value < -getLimit(limits, entry.user)\n ? { ...entry, flag: 'limit' }\n : entry\n );\n\nconst finalBudget = checkExpenses(newBudget3, spendingLimits);\nconsole.log(finalBudget);\n\n// Impure\nconst logBigExpenses = function (state, bigLimit) {\n const bigExpenses = state\n .filter(entry => entry.value <= -bigLimit)\n .map(entry => entry.description.slice(-2))\n .join(' / ');\n // .reduce((str, cur) => `${str} / ${cur.description.slice(-2)}`, '');\n\n console.log(bigExpenses);\n\n // let output = '';\n // for (const entry of budget)\n // output +=\n // entry.value <= -bigLimit ? `${entry.description.slice(-2)} / ` : '';\n // output = output.slice(0, -2); // Remove last '/ '\n // console.log(output);\n};\n\nlogBigExpenses(finalBudget, 500);\n" }, { "path": "17-Modern-JS-Modules-Tooling/final/dist/index.html", "content": "\n\n \n \n \n \n \n \n\n Modern JavaScript Development: Modules and Tooling\n \n \n \n

    Modern JavaScript Development: Modules and Tooling

    \n \n\n" }, { "path": "17-Modern-JS-Modules-Tooling/final/dist/index.js", "content": "// modules are defined as an array\n// [ module function, map of requires ]\n//\n// map of requires is short require name -> numeric require\n//\n// anything defined in a previous bundle is accessed via the\n// orig method which is the require for previous bundles\nparcelRequire = (function (modules, cache, entry, globalName) {\n // Save the require from previous bundle to this closure if any\n var previousRequire = typeof parcelRequire === 'function' && parcelRequire;\n var nodeRequire = typeof require === 'function' && require;\n\n function newRequire(name, jumped) {\n if (!cache[name]) {\n if (!modules[name]) {\n // if we cannot find the module within our internal map or\n // cache jump to the current global require ie. the last bundle\n // that was added to the page.\n var currentRequire = typeof parcelRequire === 'function' && parcelRequire;\n if (!jumped && currentRequire) {\n return currentRequire(name, true);\n }\n\n // If there are other bundles on this page the require from the\n // previous one is saved to 'previousRequire'. Repeat this as\n // many times as there are bundles until the module is found or\n // we exhaust the require chain.\n if (previousRequire) {\n return previousRequire(name, true);\n }\n\n // Try the node require function if it exists.\n if (nodeRequire && typeof name === 'string') {\n return nodeRequire(name);\n }\n\n var err = new Error('Cannot find module \\'' + name + '\\'');\n err.code = 'MODULE_NOT_FOUND';\n throw err;\n }\n\n localRequire.resolve = resolve;\n localRequire.cache = {};\n\n var module = cache[name] = new newRequire.Module(name);\n\n modules[name][0].call(module.exports, localRequire, module, module.exports, this);\n }\n\n return cache[name].exports;\n\n function localRequire(x){\n return newRequire(localRequire.resolve(x));\n }\n\n function resolve(x){\n return modules[name][1][x] || x;\n }\n }\n\n function Module(moduleName) {\n this.id = moduleName;\n this.bundle = newRequire;\n this.exports = {};\n }\n\n newRequire.isParcelRequire = true;\n newRequire.Module = Module;\n newRequire.modules = modules;\n newRequire.cache = cache;\n newRequire.parent = previousRequire;\n newRequire.register = function (id, exports) {\n modules[id] = [function (require, module) {\n module.exports = exports;\n }, {}];\n };\n\n var error;\n for (var i = 0; i < entry.length; i++) {\n try {\n newRequire(entry[i]);\n } catch (e) {\n // Save first error but execute all entries\n if (!error) {\n error = e;\n }\n }\n }\n\n if (entry.length) {\n // Expose entry point to Node, AMD or browser globals\n // Based on https://github.com/ForbesLindesay/umd/blob/master/template.js\n var mainExports = newRequire(entry[entry.length - 1]);\n\n // CommonJS\n if (typeof exports === \"object\" && typeof module !== \"undefined\") {\n module.exports = mainExports;\n\n // RequireJS\n } else if (typeof define === \"function\" && define.amd) {\n define(function () {\n return mainExports;\n });\n\n // \n\n Modern JavaScript Development: Modules and Tooling\n \n \n \n

    Modern JavaScript Development: Modules and Tooling

    \n \n\n" }, { "path": "17-Modern-JS-Modules-Tooling/final/package.json", "content": "{\n \"name\": \"17-modern-js-modules-tooling\",\n \"version\": \"1.0.0\",\n \"description\": \"\",\n \"main\": \"script.js\",\n \"scripts\": {\n \"start\": \"parcel index.html\",\n \"build\": \"parcel build index.html\"\n },\n \"author\": \"Jonas\",\n \"license\": \"ISC\",\n \"dependencies\": {\n \"core-js\": \"^3.6.5\",\n \"leaflet\": \"^1.6.0\",\n \"lodash-es\": \"^4.17.15\",\n \"regenerator-runtime\": \"^0.13.7\"\n },\n \"devDependencies\": {\n \"parcel\": \"^1.12.4\"\n }\n}\n" }, { "path": "17-Modern-JS-Modules-Tooling/final/script.js", "content": "///////////////////////////////////////\n// Exporting and Importing in ES6 Modules\n\n// Importing module\n// import { addToCart, totalPrice as price, tq } from './shoppingCart.js';\n// addToCart('bread', 5);\n// console.log(price, tq);\n\nconsole.log('Importing module');\n// console.log(shippingCost);\n\n// import * as ShoppingCart from './shoppingCart.js';\n// ShoppingCart.addToCart('bread', 5);\n// console.log(ShoppingCart.totalPrice);\n\n// import add, { addToCart, totalPrice as price, tq } from './shoppingCart.js';\n// console.log(price);\n\nimport add, { cart } from './shoppingCart.js';\nadd('pizza', 2);\nadd('bread', 5);\nadd('apples', 4);\n\nconsole.log(cart);\n/*\n\n\n///////////////////////////////////////\n// Top-Level Await (ES2022)\n\n// console.log('Start fetching');\n// const res = await fetch('https://jsonplaceholder.typicode.com/posts');\n// const data = await res.json();\n// console.log(data);\n// console.log('Something');\n\nconst getLastPost = async function () {\n const res = await fetch('https://jsonplaceholder.typicode.com/posts');\n const data = await res.json();\n\n return { title: data.at(-1).title, text: data.at(-1).body };\n};\n\nconst lastPost = getLastPost();\nconsole.log(lastPost);\n\n// Not very clean\n// lastPost.then(last => console.log(last));\n\nconst lastPost2 = await getLastPost();\nconsole.log(lastPost2);\n\n\n///////////////////////////////////////\n// The Module Pattern\n\nconst ShoppingCart2 = (function () {\n const cart = [];\n const shippingCost = 10;\n const totalPrice = 237;\n const totalQuantity = 23;\n\n const addToCart = function (product, quantity) {\n cart.push({ product, quantity });\n console.log(\n `${quantity} ${product} added to cart (sipping cost is ${shippingCost})`\n );\n };\n\n const orderStock = function (product, quantity) {\n console.log(`${quantity} ${product} ordered from supplier`);\n };\n\n return {\n addToCart,\n cart,\n totalPrice,\n totalQuantity,\n };\n})();\n\nShoppingCart2.addToCart('apple', 4);\nShoppingCart2.addToCart('pizza', 2);\nconsole.log(ShoppingCart2);\nconsole.log(ShoppingCart2.shippingCost);\n\n\n///////////////////////////////////////\n// CommonJS Modules\n// Export\nexport.addTocart = function (product, quantity) {\n cart.push({ product, quantity });\n console.log(\n `${quantity} ${product} added to cart (sipping cost is ${shippingCost})`\n );\n};\n\n// Import\nconst { addTocart } = require('./shoppingCart.js');\n*/\n\n///////////////////////////////////////\n// Introduction to NPM\n// import cloneDeep from './node_modules/lodash-es/cloneDeep.js';\nimport cloneDeep from 'lodash-es';\n\nconst state = {\n cart: [\n { product: 'bread', quantity: 5 },\n { product: 'pizza', quantity: 5 },\n ],\n user: { loggedIn: true },\n};\nconst stateClone = Object.assign({}, state);\nconst stateDeepClone = cloneDeep(state);\n\nstate.user.loggedIn = false;\nconsole.log(stateClone);\n\nconsole.log(stateDeepClone);\n\nif (module.hot) {\n module.hot.accept();\n}\n\nclass Person {\n #greeting = 'Hey';\n constructor(name) {\n this.name = name;\n console.log(`${this.#greeting}, ${this.name}`);\n }\n}\nconst jonas = new Person('Jonas');\n\nconsole.log('Jonas' ?? null);\n\nconsole.log(cart.find(el => el.quantity >= 2));\nPromise.resolve('TEST').then(x => console.log(x));\n\nimport 'core-js/stable';\n// import 'core-js/stable/array/find';\n// import 'core-js/stable/promise';\n\n// Polifilling async functions\nimport 'regenerator-runtime/runtime';\n" }, { "path": "17-Modern-JS-Modules-Tooling/final/shoppingCart.js", "content": "// Exporting module\nconsole.log('Exporting module');\n\n// Blocking code\n// console.log('Start fetching users');\n// await fetch('https://jsonplaceholder.typicode.com/users');\n// console.log('Finish fetching users');\n\nconst shippingCost = 10;\nexport const cart = [];\n\nexport const addToCart = function (product, quantity) {\n cart.push({ product, quantity });\n console.log(`${quantity} ${product} added to cart`);\n};\n\nconst totalPrice = 237;\nconst totalQuantity = 23;\n\nexport { totalPrice, totalQuantity as tq };\n\nexport default function (product, quantity) {\n cart.push({ product, quantity });\n console.log(`${quantity} ${product} added to cart`);\n}\n" }, { "path": "17-Modern-JS-Modules-Tooling/starter/.prettierrc", "content": "{\n \"singleQuote\": true,\n \"arrowParens\": \"avoid\"\n}\n" }, { "path": "17-Modern-JS-Modules-Tooling/starter/clean.js", "content": "var budget = [\n { value: 250, description: 'Sold old TV 📺', user: 'jonas' },\n { value: -45, description: 'Groceries 🥑', user: 'jonas' },\n { value: 3500, description: 'Monthly salary 👩‍💻', user: 'jonas' },\n { value: 300, description: 'Freelancing 👩‍💻', user: 'jonas' },\n { value: -1100, description: 'New iPhone 📱', user: 'jonas' },\n { value: -20, description: 'Candy 🍭', user: 'matilda' },\n { value: -125, description: 'Toys 🚂', user: 'matilda' },\n { value: -1800, description: 'New Laptop 💻', user: 'jonas' },\n];\n\nvar limits = {\n jonas: 1500,\n matilda: 100,\n};\n\nvar add = function (value, description, user) {\n if (!user) user = 'jonas';\n user = user.toLowerCase();\n\n var lim;\n if (limits[user]) {\n lim = limits[user];\n } else {\n lim = 0;\n }\n\n if (value <= lim) {\n budget.push({ value: -value, description: description, user: user });\n }\n};\nadd(10, 'Pizza 🍕');\nadd(100, 'Going to movies 🍿', 'Matilda');\nadd(200, 'Stuff', 'Jay');\nconsole.log(budget);\n\nvar check = function () {\n for (var el of budget) {\n var lim;\n if (limits[el.user]) {\n lim = limits[el.user];\n } else {\n lim = 0;\n }\n\n if (el.value < -lim) {\n el.flag = 'limit';\n }\n }\n};\ncheck();\n\nconsole.log(budget);\n\nvar bigExpenses = function (limit) {\n var output = '';\n for (var el of budget) {\n if (el.value <= -limit) {\n output += el.description.slice(-2) + ' / '; // Emojis are 2 chars\n }\n }\n output = output.slice(0, -2); // Remove last '/ '\n console.log(output);\n};\n" }, { "path": "17-Modern-JS-Modules-Tooling/starter/index.html", "content": "\n\n \n \n \n \n \n Modern JavaScript Development: Modules and Tooling\n \n \n \n

    Modern JavaScript Development: Modules and Tooling

    \n \n\n" }, { "path": "17-Modern-JS-Modules-Tooling/starter/script.js", "content": "" }, { "path": "18-forkify/final/.gitignore", "content": "node_modules\ndist\n.parcel-cache\n.DS_Store\n" }, { "path": "18-forkify/final/.prettierrc", "content": "{\n \"singleQuote\": true,\n \"arrowParens\": \"avoid\"\n}\n" }, { "path": "18-forkify/final/README.md", "content": "# forkify Project\n\nRecipe application with custom recipe uploads.\n" }, { "path": "18-forkify/final/index.html", "content": "\n\n \n \n \n \n \n \n\n \n \n\n forkify // Search over 1,000,000 recipes\n \n\n \n
    \n
    \n \"Logo\"\n
    \n \n \n \n\n \n
    \n\n
    \n
      \n \n
    \n\n
    \n \n
    \n\n

    \n © Copyright by\n Jonas Schmedtmann. Use for learning or your portfolio. Don't use to teach. Don't claim\n as your own.\n

    \n
    \n\n
    \n
    \n
    \n \n \n \n
    \n

    Start by searching for a recipe or an ingredient. Have fun!

    \n
    \n\n \n\n \n\n \n
    \n
    \n\n
    \n
    \n \n
    \n
    \n

    Recipe data

    \n \n \n \n \n \n \n \n \n \n \n \n \n
    \n\n
    \n

    Ingredients

    \n \n \n \n \n \n \n \n \n \n \n \n \n
    \n\n \n
    \n
    \n \n\n" }, { "path": "18-forkify/final/package.json", "content": "{\n \"name\": \"forkify\",\n \"version\": \"1.0.0\",\n \"description\": \"Recipe application\",\n \"default\": \"index.html\",\n \"scripts\": {\n \"start\": \"parcel index.html\",\n \"build\": \"parcel build index.html --dist-dir ./dist\"\n },\n \"author\": \"Jonas Schedtmann\",\n \"license\": \"ISC\",\n \"devDependencies\": {\n \"parcel\": \"^2.0.0-beta.1\",\n \"sass\": \"^1.26.10\"\n },\n \"dependencies\": {\n \"core-js\": \"^3.6.5\",\n \"fractional\": \"^1.0.0\",\n \"regenerator-runtime\": \"^0.13.7\"\n }\n}\n" }, { "path": "18-forkify/final/src/js/config.js", "content": "export const API_URL = 'https://forkify-api.jonas.io/api/v2/recipes/';\nexport const TIMEOUT_SEC = 10;\nexport const RES_PER_PAGE = 10;\nexport const KEY = '';\nexport const MODAL_CLOSE_SEC = 2.5;\n" }, { "path": "18-forkify/final/src/js/controller.js", "content": "import * as model from './model.js';\nimport { MODAL_CLOSE_SEC } from './config.js';\nimport recipeView from './views/recipeView.js';\nimport searchView from './views/searchView.js';\nimport resultsView from './views/resultsView.js';\nimport paginationView from './views/paginationView.js';\nimport bookmarksView from './views/bookmarksView.js';\nimport addRecipeView from './views/addRecipeView.js';\n\nimport 'core-js/stable';\nimport 'regenerator-runtime/runtime';\nimport { async } from 'regenerator-runtime';\n\nconst controlRecipes = async function () {\n try {\n const id = window.location.hash.slice(1);\n\n if (!id) return;\n recipeView.renderSpinner();\n\n // 0) Update results view to mark selected search result\n resultsView.update(model.getSearchResultsPage());\n\n // 1) Updating bookmarks view\n bookmarksView.update(model.state.bookmarks);\n\n // 2) Loading recipe\n await model.loadRecipe(id);\n\n // 3) Rendering recipe\n recipeView.render(model.state.recipe);\n } catch (err) {\n recipeView.renderError();\n console.error(err);\n }\n};\n\nconst controlSearchResults = async function () {\n try {\n resultsView.renderSpinner();\n\n // 1) Get search query\n const query = searchView.getQuery();\n if (!query) return;\n\n // 2) Load search results\n await model.loadSearchResults(query);\n\n // 3) Render results\n resultsView.render(model.getSearchResultsPage());\n\n // 4) Render initial pagination buttons\n paginationView.render(model.state.search);\n } catch (err) {\n console.log(err);\n }\n};\n\nconst controlPagination = function (goToPage) {\n // 1) Render NEW results\n resultsView.render(model.getSearchResultsPage(goToPage));\n\n // 2) Render NEW pagination buttons\n paginationView.render(model.state.search);\n};\n\nconst controlServings = function (newServings) {\n // Update the recipe servings (in state)\n model.updateServings(newServings);\n\n // Update the recipe view\n recipeView.update(model.state.recipe);\n};\n\nconst controlAddBookmark = function () {\n // 1) Add/remove bookmark\n if (!model.state.recipe.bookmarked) model.addBookmark(model.state.recipe);\n else model.deleteBookmark(model.state.recipe.id);\n\n // 2) Update recipe view\n recipeView.update(model.state.recipe);\n\n // 3) Render bookmarks\n bookmarksView.render(model.state.bookmarks);\n};\n\nconst controlBookmarks = function () {\n bookmarksView.render(model.state.bookmarks);\n};\n\nconst controlAddRecipe = async function (newRecipe) {\n try {\n // Show loading spinner\n addRecipeView.renderSpinner();\n\n // Upload the new recipe data\n await model.uploadRecipe(newRecipe);\n console.log(model.state.recipe);\n\n // Render recipe\n recipeView.render(model.state.recipe);\n\n // Success message\n addRecipeView.renderMessage();\n\n // Render bookmark view\n bookmarksView.render(model.state.bookmarks);\n\n // Change ID in URL\n window.history.pushState(null, '', `#${model.state.recipe.id}`);\n\n // Close form window\n setTimeout(function () {\n addRecipeView.toggleWindow();\n }, MODAL_CLOSE_SEC * 1000);\n } catch (err) {\n console.error('💥', err);\n addRecipeView.renderError(err.message);\n }\n};\n\nconst init = function () {\n bookmarksView.addHandlerRender(controlBookmarks);\n recipeView.addHandlerRender(controlRecipes);\n recipeView.addHandlerUpdateServings(controlServings);\n recipeView.addHandlerAddBookmark(controlAddBookmark);\n searchView.addHandlerSearch(controlSearchResults);\n paginationView.addHandlerClick(controlPagination);\n addRecipeView.addHandlerUpload(controlAddRecipe);\n};\ninit();\n" }, { "path": "18-forkify/final/src/js/helpers.js", "content": "import { async } from 'regenerator-runtime';\nimport { TIMEOUT_SEC } from './config.js';\n\nconst timeout = function (s) {\n return new Promise(function (_, reject) {\n setTimeout(function () {\n reject(new Error(`Request took too long! Timeout after ${s} second`));\n }, s * 1000);\n });\n};\n\nexport const AJAX = async function (url, uploadData = undefined) {\n try {\n const fetchPro = uploadData\n ? fetch(url, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify(uploadData),\n })\n : fetch(url);\n\n const res = await Promise.race([fetchPro, timeout(TIMEOUT_SEC)]);\n const data = await res.json();\n\n if (!res.ok) throw new Error(`${data.message} (${res.status})`);\n return data;\n } catch (err) {\n throw err;\n }\n};\n\n/*\nexport const getJSON = async function (url) {\n try {\n const fetchPro = fetch(url);\n const res = await Promise.race([fetchPro, timeout(TIMEOUT_SEC)]);\n const data = await res.json();\n\n if (!res.ok) throw new Error(`${data.message} (${res.status})`);\n return data;\n } catch (err) {\n throw err;\n }\n};\n\nexport const sendJSON = async function (url, uploadData) {\n try {\n const fetchPro = fetch(url, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify(uploadData),\n });\n\n const res = await Promise.race([fetchPro, timeout(TIMEOUT_SEC)]);\n const data = await res.json();\n\n if (!res.ok) throw new Error(`${data.message} (${res.status})`);\n return data;\n } catch (err) {\n throw err;\n }\n};\n*/\n" }, { "path": "18-forkify/final/src/js/model.js", "content": "import { async } from 'regenerator-runtime';\nimport { API_URL, RES_PER_PAGE, KEY } from './config.js';\n// import { getJSON, sendJSON } from './helpers.js';\nimport { AJAX } from './helpers.js';\n\nexport const state = {\n recipe: {},\n search: {\n query: '',\n results: [],\n page: 1,\n resultsPerPage: RES_PER_PAGE,\n },\n bookmarks: [],\n};\n\nconst createRecipeObject = function (data) {\n const { recipe } = data.data;\n return {\n id: recipe.id,\n title: recipe.title,\n publisher: recipe.publisher,\n sourceUrl: recipe.source_url,\n image: recipe.image_url,\n servings: recipe.servings,\n cookingTime: recipe.cooking_time,\n ingredients: recipe.ingredients,\n ...(recipe.key && { key: recipe.key }),\n };\n};\n\nexport const loadRecipe = async function (id) {\n try {\n const data = await AJAX(`${API_URL}${id}?key=${KEY}`);\n state.recipe = createRecipeObject(data);\n\n if (state.bookmarks.some(bookmark => bookmark.id === id))\n state.recipe.bookmarked = true;\n else state.recipe.bookmarked = false;\n\n console.log(state.recipe);\n } catch (err) {\n // Temp error handling\n console.error(`${err} 💥💥💥💥`);\n throw err;\n }\n};\n\nexport const loadSearchResults = async function (query) {\n try {\n state.search.query = query;\n\n const data = await AJAX(`${API_URL}?search=${query}&key=${KEY}`);\n console.log(data);\n\n state.search.results = data.data.recipes.map(rec => {\n return {\n id: rec.id,\n title: rec.title,\n publisher: rec.publisher,\n image: rec.image_url,\n ...(rec.key && { key: rec.key }),\n };\n });\n state.search.page = 1;\n } catch (err) {\n console.error(`${err} 💥💥💥💥`);\n throw err;\n }\n};\n\nexport const getSearchResultsPage = function (page = state.search.page) {\n state.search.page = page;\n\n const start = (page - 1) * state.search.resultsPerPage; // 0\n const end = page * state.search.resultsPerPage; // 9\n\n return state.search.results.slice(start, end);\n};\n\nexport const updateServings = function (newServings) {\n state.recipe.ingredients.forEach(ing => {\n ing.quantity = (ing.quantity * newServings) / state.recipe.servings;\n // newQt = oldQt * newServings / oldServings // 2 * 8 / 4 = 4\n });\n\n state.recipe.servings = newServings;\n};\n\nconst persistBookmarks = function () {\n localStorage.setItem('bookmarks', JSON.stringify(state.bookmarks));\n};\n\nexport const addBookmark = function (recipe) {\n // Add bookmark\n state.bookmarks.push(recipe);\n\n // Mark current recipe as bookmarked\n if (recipe.id === state.recipe.id) state.recipe.bookmarked = true;\n\n persistBookmarks();\n};\n\nexport const deleteBookmark = function (id) {\n // Delete bookmark\n const index = state.bookmarks.findIndex(el => el.id === id);\n state.bookmarks.splice(index, 1);\n\n // Mark current recipe as NOT bookmarked\n if (id === state.recipe.id) state.recipe.bookmarked = false;\n\n persistBookmarks();\n};\n\nconst init = function () {\n const storage = localStorage.getItem('bookmarks');\n if (storage) state.bookmarks = JSON.parse(storage);\n};\ninit();\n\nconst clearBookmarks = function () {\n localStorage.clear('bookmarks');\n};\n// clearBookmarks();\n\nexport const uploadRecipe = async function (newRecipe) {\n try {\n const ingredients = Object.entries(newRecipe)\n .filter(entry => entry[0].startsWith('ingredient') && entry[1] !== '')\n .map(ing => {\n const ingArr = ing[1].split(',').map(el => el.trim());\n // const ingArr = ing[1].replaceAll(' ', '').split(',');\n if (ingArr.length !== 3)\n throw new Error(\n 'Wrong ingredient fromat! Please use the correct format :)'\n );\n\n const [quantity, unit, description] = ingArr;\n\n return { quantity: quantity ? +quantity : null, unit, description };\n });\n\n const recipe = {\n title: newRecipe.title,\n source_url: newRecipe.sourceUrl,\n image_url: newRecipe.image,\n publisher: newRecipe.publisher,\n cooking_time: +newRecipe.cookingTime,\n servings: +newRecipe.servings,\n ingredients,\n };\n\n const data = await AJAX(`${API_URL}?key=${KEY}`, recipe);\n state.recipe = createRecipeObject(data);\n addBookmark(state.recipe);\n } catch (err) {\n throw err;\n }\n};\n" }, { "path": "18-forkify/final/src/js/views/View.js", "content": "import icons from 'url:../../img/icons.svg'; // Parcel 2\n\nexport default class View {\n _data;\n\n /**\n * Render the received object to the DOM\n * @param {Object | Object[]} data The data to be rendered (e.g. recipe)\n * @param {boolean} [render=true] If false, create markup string instead of rendering to the DOM\n * @returns {undefined | string} A markup string is returned if render=false\n * @this {Object} View instance\n * @author Jonas Schmedtmann\n * @todo Finish implementation\n */\n render(data, render = true) {\n if (!data || (Array.isArray(data) && data.length === 0))\n return this.renderError();\n\n this._data = data;\n const markup = this._generateMarkup();\n\n if (!render) return markup;\n\n this._clear();\n this._parentElement.insertAdjacentHTML('afterbegin', markup);\n }\n\n update(data) {\n this._data = data;\n const newMarkup = this._generateMarkup();\n\n const newDOM = document.createRange().createContextualFragment(newMarkup);\n const newElements = Array.from(newDOM.querySelectorAll('*'));\n const curElements = Array.from(this._parentElement.querySelectorAll('*'));\n\n newElements.forEach((newEl, i) => {\n const curEl = curElements[i];\n // console.log(curEl, newEl.isEqualNode(curEl));\n\n // Updates changed TEXT\n if (\n !newEl.isEqualNode(curEl) &&\n newEl.firstChild?.nodeValue.trim() !== ''\n ) {\n // console.log('💥', newEl.firstChild.nodeValue.trim());\n curEl.textContent = newEl.textContent;\n }\n\n // Updates changed ATTRIBUES\n if (!newEl.isEqualNode(curEl))\n Array.from(newEl.attributes).forEach(attr =>\n curEl.setAttribute(attr.name, attr.value)\n );\n });\n }\n\n _clear() {\n this._parentElement.innerHTML = '';\n }\n\n renderSpinner() {\n const markup = `\n
    \n \n \n \n
    \n `;\n this._clear();\n this._parentElement.insertAdjacentHTML('afterbegin', markup);\n }\n\n renderError(message = this._errorMessage) {\n const markup = `\n
    \n
    \n \n \n \n
    \n

    ${message}

    \n
    \n `;\n this._clear();\n this._parentElement.insertAdjacentHTML('afterbegin', markup);\n }\n\n renderMessage(message = this._message) {\n const markup = `\n
    \n
    \n \n \n \n
    \n

    ${message}

    \n
    \n `;\n this._clear();\n this._parentElement.insertAdjacentHTML('afterbegin', markup);\n }\n}\n" }, { "path": "18-forkify/final/src/js/views/addRecipeView.js", "content": "import View from './View.js';\nimport icons from 'url:../../img/icons.svg'; // Parcel 2\n\nclass AddRecipeView extends View {\n _parentElement = document.querySelector('.upload');\n _message = 'Recipe was successfully uploaded :)';\n\n _window = document.querySelector('.add-recipe-window');\n _overlay = document.querySelector('.overlay');\n _btnOpen = document.querySelector('.nav__btn--add-recipe');\n _btnClose = document.querySelector('.btn--close-modal');\n\n constructor() {\n super();\n this._addHandlerShowWindow();\n this._addHandlerHideWindow();\n }\n\n toggleWindow() {\n this._overlay.classList.toggle('hidden');\n this._window.classList.toggle('hidden');\n }\n\n _addHandlerShowWindow() {\n this._btnOpen.addEventListener('click', this.toggleWindow.bind(this));\n }\n\n _addHandlerHideWindow() {\n this._btnClose.addEventListener('click', this.toggleWindow.bind(this));\n this._overlay.addEventListener('click', this.toggleWindow.bind(this));\n }\n\n addHandlerUpload(handler) {\n this._parentElement.addEventListener('submit', function (e) {\n e.preventDefault();\n const dataArr = [...new FormData(this)];\n const data = Object.fromEntries(dataArr);\n handler(data);\n });\n }\n\n _generateMarkup() {}\n}\n\nexport default new AddRecipeView();\n" }, { "path": "18-forkify/final/src/js/views/bookmarksView.js", "content": "import View from './View.js';\nimport previewView from './previewView.js';\nimport icons from 'url:../../img/icons.svg'; // Parcel 2\n\nclass BookmarksView extends View {\n _parentElement = document.querySelector('.bookmarks__list');\n _errorMessage = 'No bookmarks yet. Find a nice recipe and bookmark it ;)';\n _message = '';\n\n addHandlerRender(handler) {\n window.addEventListener('load', handler);\n }\n\n _generateMarkup() {\n return this._data\n .map(bookmark => previewView.render(bookmark, false))\n .join('');\n }\n}\n\nexport default new BookmarksView();\n" }, { "path": "18-forkify/final/src/js/views/paginationView.js", "content": "import View from './View.js';\nimport icons from 'url:../../img/icons.svg'; // Parcel 2\n\nclass PaginationView extends View {\n _parentElement = document.querySelector('.pagination');\n\n addHandlerClick(handler) {\n this._parentElement.addEventListener('click', function (e) {\n const btn = e.target.closest('.btn--inline');\n if (!btn) return;\n\n const goToPage = +btn.dataset.goto;\n handler(goToPage);\n });\n }\n\n _generateMarkup() {\n const curPage = this._data.page;\n const numPages = Math.ceil(\n this._data.results.length / this._data.resultsPerPage\n );\n\n // Page 1, and there are other pages\n if (curPage === 1 && numPages > 1) {\n return `\n \n `;\n }\n\n // Last page\n if (curPage === numPages && numPages > 1) {\n return `\n \n `;\n }\n\n // Other page\n if (curPage < numPages) {\n return `\n \n \n `;\n }\n\n // Page 1, and there are NO other pages\n return '';\n }\n}\n\nexport default new PaginationView();\n" }, { "path": "18-forkify/final/src/js/views/previewView.js", "content": "import View from './View.js';\nimport icons from 'url:../../img/icons.svg'; // Parcel 2\n\nclass PreviewView extends View {\n _parentElement = '';\n\n _generateMarkup() {\n const id = window.location.hash.slice(1);\n\n return `\n
  • \n \n
    \n \"${this._data.title}\"\n
    \n
    \n

    ${this._data.title}

    \n

    ${this._data.publisher}

    \n
    \n \n \n \n
    \n
    \n     \n
    • \n `;\n }\n}\n\nexport default new PreviewView();\n" }, { "path": "18-forkify/final/src/js/views/recipeView.js", "content": "import View from './View.js';\n\n// import icons from '../img/icons.svg'; // Parcel 1\nimport icons from 'url:../../img/icons.svg'; // Parcel 2\nimport { Fraction } from 'fractional';\n\nclass RecipeView extends View {\n _parentElement = document.querySelector('.recipe');\n _errorMessage = 'We could not find that recipe. Please try another one!';\n _message = '';\n\n addHandlerRender(handler) {\n ['hashchange', 'load'].forEach(ev => window.addEventListener(ev, handler));\n }\n\n addHandlerUpdateServings(handler) {\n this._parentElement.addEventListener('click', function (e) {\n const btn = e.target.closest('.btn--update-servings');\n if (!btn) return;\n const { updateTo } = btn.dataset;\n if (+updateTo > 0) handler(+updateTo);\n });\n }\n\n addHandlerAddBookmark(handler) {\n this._parentElement.addEventListener('click', function (e) {\n const btn = e.target.closest('.btn--bookmark');\n if (!btn) return;\n handler();\n });\n }\n\n _generateMarkup() {\n return `\n
    \n \"${\n\n

    \n ${this._data.title}\n

    \n
    \n\n
    \n
    \n \n \n \n ${\n this._data.cookingTime\n }\n minutes\n
    \n
    \n \n \n \n ${\n this._data.servings\n }\n servings\n\n
    \n \n \n
    \n
    \n\n
    \n \n \n \n
    \n \n
    \n\n
    \n

    Recipe ingredients

    \n
      \n ${this._data.ingredients.map(this._generateMarkupIngredient).join('')}\n
    \n\n
    \n

    How to cook it

    \n

    \n This recipe was carefully designed and tested by\n ${\n this._data.publisher\n }. Please check out\n directions at their website.\n

    \n \n Directions\n \n \n \n \n
    \n `;\n }\n\n _generateMarkupIngredient(ing) {\n return `\n
  • \n \n \n \n
    ${\n ing.quantity ? new Fraction(ing.quantity).toString() : ''\n }
    \n
    \n ${ing.unit}\n ${ing.description}\n
    \n
    • \n `;\n }\n}\n\nexport default new RecipeView();\n" }, { "path": "18-forkify/final/src/js/views/resultsView.js", "content": "import View from './View.js';\nimport previewView from './previewView.js';\nimport icons from 'url:../../img/icons.svg'; // Parcel 2\n\nclass ResultsView extends View {\n _parentElement = document.querySelector('.results');\n _errorMessage = 'No recipes found for your query! Please try again ;)';\n _message = '';\n\n _generateMarkup() {\n return this._data.map(result => previewView.render(result, false)).join('');\n }\n}\n\nexport default new ResultsView();\n" }, { "path": "18-forkify/final/src/js/views/searchView.js", "content": "class SearchView {\n _parentEl = document.querySelector('.search');\n\n getQuery() {\n const query = this._parentEl.querySelector('.search__field').value;\n this._clearInput();\n return query;\n }\n\n _clearInput() {\n this._parentEl.querySelector('.search__field').value = '';\n }\n\n addHandlerSearch(handler) {\n this._parentEl.addEventListener('submit', function (e) {\n e.preventDefault();\n handler();\n });\n }\n}\n\nexport default new SearchView();\n" }, { "path": "18-forkify/final/src/sass/_base.scss", "content": "// $color-primary: #f59a83;\n$color-primary: #f38e82;\n$color-grad-1: #fbdb89;\n$color-grad-2: #f48982;\n\n$color-grey-light-1: #f9f5f3; // Light background\n$color-grey-light-2: #f2efee; // Light lines\n$color-grey-light-3: #d3c7c3; // Light text (placeholder)\n$color-grey-dark-1: #615551; // Normal text\n$color-grey-dark-2: #918581; // Lighter text\n\n$gradient: linear-gradient(to right bottom, $color-grad-1, $color-grad-2);\n\n$bp-large: 78.15em; // 1250px\n$bp-medium: 61.25em; // 980px\n$bp-small: 37.5em; // 600px\n$bp-smallest: 31.25em; // 500px\n\n* {\n margin: 0;\n padding: 0;\n}\n\n*,\n*::before,\n*::after {\n box-sizing: inherit;\n}\n\nhtml {\n box-sizing: border-box;\n font-size: 62.5%;\n\n @media only screen and (max-width: $bp-medium) {\n font-size: 50%;\n }\n}\n\nbody {\n font-family: 'Nunito Sans', sans-serif;\n font-weight: 400;\n line-height: 1.6;\n color: $color-grey-dark-1;\n background-image: $gradient;\n background-size: cover;\n background-repeat: no-repeat;\n min-height: calc(100vh - 2 * 4vw);\n}\n\n.container {\n max-width: 120rem;\n min-height: 117rem;\n margin: 4vw auto;\n background-color: #fff;\n border-radius: 9px;\n overflow: hidden;\n box-shadow: 0 2rem 6rem 0.5rem rgba($color-grey-dark-1, 0.2);\n\n display: grid;\n grid-template-rows: 10rem minmax(100rem, auto);\n grid-template-columns: 1fr 2fr;\n grid-template-areas:\n 'head head'\n 'list recipe';\n\n @media only screen and (max-width: $bp-large) {\n max-width: 100%;\n margin: 0;\n border-radius: 0;\n }\n}\n" }, { "path": "18-forkify/final/src/sass/_components.scss", "content": "%btn {\n background-image: $gradient;\n border-radius: 10rem;\n border: none;\n text-transform: uppercase;\n color: #fff;\n cursor: pointer;\n display: flex;\n align-items: center;\n transition: all 0.2s;\n\n &:hover {\n transform: scale(1.05);\n }\n\n &:focus {\n outline: none;\n }\n\n & > *:first-child {\n margin-right: 1rem;\n }\n}\n\n.btn {\n @extend %btn;\n\n padding: 1.5rem 4rem;\n font-size: 1.5rem;\n font-weight: 600;\n\n svg {\n height: 2.25rem;\n width: 2.25rem;\n fill: currentColor;\n }\n}\n\n.btn--small {\n &,\n &:link,\n &:visited {\n @extend %btn;\n\n font-size: 1.4rem;\n font-weight: 600;\n padding: 1.25rem 2.25rem;\n text-decoration: none;\n\n svg {\n height: 1.75rem;\n width: 1.75rem;\n fill: currentColor;\n }\n }\n}\n\n.btn--inline {\n color: $color-primary;\n font-size: 1.3rem;\n font-weight: 600;\n border: none;\n background-color: $color-grey-light-1;\n padding: 0.8rem 1.2rem;\n border-radius: 10rem;\n cursor: pointer;\n\n display: flex;\n align-items: center;\n transition: all 0.2s;\n\n svg {\n height: 1.6rem;\n width: 1.6rem;\n fill: currentColor;\n margin: 0 0.2rem;\n }\n\n span {\n margin: 0 0.4rem;\n }\n\n &:hover {\n color: $color-grad-2;\n background-color: $color-grey-light-2;\n }\n\n &:focus {\n outline: none;\n }\n}\n\n.btn--round {\n background-image: $gradient;\n border-radius: 50%;\n border: none;\n cursor: pointer;\n height: 4.5rem;\n width: 4.5rem;\n // margin-left: auto;\n transition: all 0.2s;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n &:hover {\n transform: scale(1.07);\n }\n\n &:focus {\n outline: none;\n }\n\n svg {\n height: 2.5rem;\n width: 2.5rem;\n fill: #fff;\n }\n}\n\n.btn--tiny {\n height: 2rem;\n width: 2rem;\n border: none;\n background: none;\n cursor: pointer;\n\n svg {\n height: 100%;\n width: 100%;\n fill: $color-primary;\n transition: all 0.3s;\n }\n\n &:focus {\n outline: none;\n }\n\n &:hover svg {\n fill: $color-grad-2;\n transform: translateY(-1px);\n }\n\n &:active svg {\n fill: $color-grad-2;\n transform: translateY(0);\n }\n\n &:not(:last-child) {\n margin-right: 0.3rem;\n }\n}\n\n.heading--2 {\n font-size: 2rem;\n font-weight: 700;\n color: $color-primary;\n text-transform: uppercase;\n margin-bottom: 2.5rem;\n text-align: center;\n // transform: skewY(-3deg);\n}\n\n.link:link,\n.link:visited {\n color: $color-grey-dark-2;\n}\n\n.spinner {\n margin: 5rem auto;\n text-align: center;\n\n svg {\n height: 6rem;\n width: 6rem;\n fill: $color-primary;\n animation: rotate 2s infinite linear;\n }\n}\n\n@keyframes rotate {\n 0% {\n transform: rotate(0);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n.message,\n.error {\n max-width: 40rem;\n margin: 0 auto;\n padding: 5rem 4rem;\n\n display: flex;\n\n svg {\n height: 3rem;\n width: 3rem;\n fill: $color-primary;\n transform: translateY(-0.3rem);\n }\n\n p {\n margin-left: 1.5rem;\n font-size: 1.8rem;\n line-height: 1.5;\n font-weight: 600;\n }\n}\n" }, { "path": "18-forkify/final/src/sass/_header.scss", "content": ".header {\n grid-area: head;\n background-color: $color-grey-light-1;\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n &__logo {\n margin-left: 4rem;\n height: 4.6rem;\n display: block;\n }\n}\n\n.search {\n background-color: #fff;\n border-radius: 10rem;\n display: flex;\n align-items: center;\n padding-left: 3rem;\n transition: all 0.3s;\n\n &:focus-within {\n transform: translateY(-2px);\n box-shadow: 0 0.7rem 3rem rgba($color-grey-dark-1, 0.08);\n }\n\n &__field {\n border: none;\n background: none;\n font-family: inherit;\n color: inherit;\n font-size: 1.7rem;\n width: 30rem;\n\n &:focus {\n outline: none;\n }\n\n &::placeholder {\n color: $color-grey-light-3;\n }\n\n @media only screen and (max-width: $bp-medium) {\n width: auto;\n\n &::placeholder {\n color: white;\n }\n }\n }\n\n &__btn {\n font-weight: 600;\n font-family: inherit;\n }\n}\n\n.nav {\n align-self: stretch;\n margin-right: 2.5rem;\n\n &__list {\n list-style: none;\n display: flex;\n height: 100%;\n }\n\n &__item {\n position: relative;\n }\n\n &__btn {\n height: 100%;\n font-family: inherit;\n color: inherit;\n font-size: 1.4rem;\n font-weight: 700;\n text-transform: uppercase;\n background: none;\n border: none;\n cursor: pointer;\n padding: 0 1.5rem;\n transition: all 0.3s;\n\n display: flex;\n align-items: center;\n\n svg {\n height: 2.4rem;\n width: 2.4rem;\n fill: $color-primary;\n margin-right: 0.7rem;\n transform: translateY(-1px);\n }\n\n &:focus {\n outline: none;\n }\n\n &:hover {\n background-color: $color-grey-light-2;\n }\n }\n}\n\n.bookmarks {\n padding: 1rem 0;\n position: absolute;\n // right: 0;\n right: -2.5rem;\n z-index: 10;\n width: 40rem;\n background-color: #fff;\n box-shadow: 0 0.8rem 5rem 2rem rgba($color-grey-dark-1, 0.1);\n\n visibility: hidden;\n opacity: 0;\n transition: all 0.5s 0.2s;\n\n &__list {\n list-style: none;\n }\n\n &__field {\n cursor: pointer;\n padding: 0 4rem;\n\n display: flex;\n align-items: center;\n height: 100%;\n transition: all 0.3s;\n\n &:hover {\n background-color: $color-grey-light-2;\n }\n }\n\n &:hover,\n .nav__btn--bookmarks:hover + & {\n visibility: visible;\n opacity: 1;\n }\n}\n" }, { "path": "18-forkify/final/src/sass/_preview.scss", "content": ".preview {\n &__link {\n &:link,\n &:visited {\n display: flex;\n align-items: center;\n padding: 1.5rem 3.25rem;\n transition: all 0.3s;\n border-right: 1px solid #fff;\n text-decoration: none;\n }\n\n &:hover {\n background-color: $color-grey-light-1;\n transform: translateY(-2px);\n }\n\n &--active {\n background-color: $color-grey-light-1;\n }\n }\n\n &__fig {\n flex: 0 0 5.8rem;\n border-radius: 50%;\n overflow: hidden;\n height: 5.8rem;\n margin-right: 2rem;\n position: relative;\n backface-visibility: hidden;\n\n &::before {\n content: '';\n display: block;\n height: 100%;\n width: 100%;\n position: absolute;\n top: 0;\n left: 0;\n background-image: linear-gradient(\n to right bottom,\n $color-grad-1,\n $color-grad-2\n );\n opacity: 0.4;\n }\n\n img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: all 0.3s;\n }\n }\n\n &__data {\n display: grid;\n width: 100%;\n grid-template-columns: 1fr 2rem;\n row-gap: 0.1rem;\n align-items: center;\n }\n\n &__title {\n grid-column: 1/-1;\n font-size: 1.45rem;\n color: $color-primary;\n text-transform: uppercase;\n font-weight: 600;\n\n // This is how text is truncated!\n text-overflow: ellipsis;\n max-width: 25rem;\n white-space: nowrap;\n overflow: hidden;\n }\n\n &__publisher {\n font-size: 1.15rem;\n color: $color-grey-dark-2;\n text-transform: uppercase;\n font-weight: 600;\n }\n\n &__user-generated {\n background-color: darken($color-grey-light-2, 2%);\n\n display: flex;\n align-items: center;\n justify-content: center;\n height: 2rem;\n width: 2rem;\n border-radius: 10rem;\n\n margin-left: auto;\n margin-right: 1.75rem;\n\n svg {\n height: 1.2rem;\n width: 1.2rem;\n fill: $color-primary;\n }\n }\n}\n" }, { "path": "18-forkify/final/src/sass/_recipe.scss", "content": ".recipe {\n background-color: $color-grey-light-1;\n\n ///////////\n // FIGURE\n &__fig {\n height: 32rem;\n position: relative;\n // transform: scale(1.04) translateY(-1px);\n transform-origin: top;\n\n &::before {\n content: '';\n display: block;\n height: 100%;\n width: 100%;\n position: absolute;\n top: 0;\n left: 0;\n background-image: linear-gradient(\n to right bottom,\n $color-grad-1,\n $color-grad-2\n );\n opacity: 0.6;\n }\n }\n\n &__img {\n width: 100%;\n display: block;\n height: 100%;\n object-fit: cover;\n }\n\n &__title {\n position: absolute;\n bottom: 0;\n left: 50%;\n transform: translate(-50%, 20%) skewY(-6deg);\n color: #fff;\n font-weight: 700;\n font-size: 3.25rem;\n text-transform: uppercase;\n width: 50%;\n line-height: 1.95;\n text-align: center;\n\n span {\n -webkit-box-decoration-break: clone;\n box-decoration-break: clone;\n padding: 1.3rem 2rem;\n background-image: linear-gradient(\n to right bottom,\n $color-grad-1,\n $color-grad-2\n );\n }\n\n @media only screen and (max-width: $bp-medium) {\n width: 70%;\n }\n }\n\n ///////////\n // DETAILS\n &__details {\n display: flex;\n align-items: center;\n padding: 7.5rem 8rem 3.5rem 8rem;\n }\n\n &__info {\n font-size: 1.65rem;\n text-transform: uppercase;\n display: flex;\n align-items: center;\n\n &:not(:last-child) {\n margin-right: 4.5rem;\n }\n }\n\n &__info-icon {\n height: 2.35rem;\n width: 2.35rem;\n fill: $color-primary;\n margin-right: 1.15rem;\n }\n\n &__info-data {\n margin-right: 0.5rem;\n font-weight: 700;\n }\n\n &__info-buttons {\n display: flex;\n margin-left: 1.6rem;\n transform: translateY(-1px);\n }\n\n &__user-generated {\n background-color: darken($color-grey-light-2, 2%);\n\n display: flex;\n align-items: center;\n justify-content: center;\n height: 4rem;\n width: 4rem;\n border-radius: 10rem;\n\n margin-left: auto;\n margin-right: 1.75rem;\n\n svg {\n height: 2.25rem;\n width: 2.25rem;\n fill: $color-primary;\n }\n }\n\n ///////////\n // INGREDIENTS\n &__ingredients {\n padding: 5rem 8rem;\n font-size: 1.6rem;\n line-height: 1.4;\n background-color: $color-grey-light-2;\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n\n &__ingredient-list {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 2.5rem 3rem;\n list-style: none;\n }\n\n &__ingredient {\n display: flex;\n }\n\n &__icon {\n height: 2rem;\n width: 2rem;\n fill: $color-primary;\n margin-right: 1.1rem;\n flex: 0 0 auto;\n margin-top: 0.1rem;\n }\n\n &__quantity {\n margin-right: 0.5rem;\n flex: 0 0 auto;\n }\n\n ///////////\n // DIRECTIONS\n &__directions {\n padding: 5rem 10rem;\n padding-bottom: 5rem;\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n\n &__directions-text {\n font-size: 1.7rem;\n text-align: center;\n margin-bottom: 3.5rem;\n color: $color-grey-dark-2;\n }\n\n &__publisher {\n font-weight: 700;\n }\n}\n" }, { "path": "18-forkify/final/src/sass/_searchResults.scss", "content": ".search-results {\n padding: 3rem 0;\n display: flex;\n flex-direction: column;\n}\n\n.results {\n list-style: none;\n margin-bottom: 2rem;\n}\n\n.pagination {\n margin-top: auto;\n padding: 0 3.5rem;\n\n &::after {\n content: '';\n display: table;\n clear: both;\n }\n\n &__btn {\n &--prev {\n float: left;\n }\n &--next {\n float: right;\n }\n }\n}\n\n.copyright {\n color: $color-grey-dark-2;\n font-size: 1.2rem;\n padding: 0 3.5rem;\n margin-top: 4rem;\n\n .twitter-link:link,\n .twitter-link:visited {\n color: $color-grey-dark-2;\n }\n}\n" }, { "path": "18-forkify/final/src/sass/_upload.scss", "content": ".add-recipe-window {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 100rem;\n background-color: white;\n border-radius: 9px;\n\n padding: 5rem 6rem;\n box-shadow: 0 4rem 6rem rgba(0, 0, 0, 0.25);\n z-index: 1000;\n transition: all 0.5s;\n\n .btn--close-modal {\n font-family: inherit;\n color: inherit;\n position: absolute;\n top: 0.5rem;\n right: 1.6rem;\n font-size: 3.5rem;\n cursor: pointer;\n border: none;\n background: none;\n }\n}\n\n.overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.4);\n backdrop-filter: blur(4px);\n z-index: 100;\n transition: all 0.5s;\n}\n\n.hidden {\n visibility: hidden;\n opacity: 0;\n}\n\n.upload {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 4rem 6rem;\n\n &__column {\n display: grid;\n grid-template-columns: 1fr 2.8fr;\n align-items: center;\n gap: 1.5rem;\n\n & label {\n font-size: 1.5rem;\n font-weight: 600;\n color: inherit;\n }\n\n & input {\n font-size: 1.5rem;\n padding: 0.8rem 1rem;\n border: 1px solid #ddd;\n border-radius: 0.5rem;\n transition: all 0.2s;\n\n &::placeholder {\n color: $color-grey-light-3;\n }\n\n &:focus {\n outline: none;\n border: 1px solid $color-primary;\n background-color: $color-grey-light-1;\n }\n }\n\n & button {\n grid-column: 1 / span 2;\n justify-self: center;\n margin-top: 1rem;\n }\n }\n\n &__heading {\n font-size: 2.25rem;\n font-weight: 700;\n text-transform: uppercase;\n margin-bottom: 1rem;\n grid-column: 1/-1;\n }\n\n &__btn {\n grid-column: 1 / -1;\n justify-self: center;\n }\n}\n" }, { "path": "18-forkify/final/src/sass/main.scss", "content": "@import 'base';\n@import 'components';\n@import 'header';\n@import 'preview';\n@import 'searchResults';\n@import 'recipe';\n@import 'upload';\n" }, { "path": "18-forkify/starter/.prettierrc", "content": "{\n \"singleQuote\": true,\n \"arrowParens\": \"avoid\"\n}\n" }, { "path": "18-forkify/starter/index.html", "content": "\n\n \n \n \n \n \n \n\n \n \n\n forkify // Search over 1,000,000 recipes\n \n\n \n
    \n
    \n \"Logo\"\n
    \n \n \n \n\n \n
    \n\n
    \n
      \n \n
    \n\n
    \n \n
    \n\n

    \n © Copyright by\n Jonas Schmedtmann. Use for learning or your portfolio. Don't use to teach. Don't claim\n as your own.\n

    \n
    \n\n
    \n
    \n
    \n \n \n \n
    \n

    Start by searching for a recipe or an ingredient. Have fun!

    \n
    \n\n \n\n \n\n \n
    \n
    \n\n
    \n
    \n \n
    \n
    \n

    Recipe data

    \n \n \n \n \n \n \n \n \n \n \n \n \n
    \n\n
    \n

    Ingredients

    \n \n \n \n \n \n \n \n \n \n \n \n \n
    \n\n \n
    \n
    \n \n\n" }, { "path": "18-forkify/starter/src/js/controller.js", "content": "const recipeContainer = document.querySelector('.recipe');\n\nconst timeout = function (s) {\n return new Promise(function (_, reject) {\n setTimeout(function () {\n reject(new Error(`Request took too long! Timeout after ${s} second`));\n }, s * 1000);\n });\n};\n\n// NEW API URL (instead of the one shown in the video)\n// https://forkify-api.jonas.io\n\n///////////////////////////////////////\n" }, { "path": "18-forkify/starter/src/sass/_base.scss", "content": "// $color-primary: #f59a83;\n$color-primary: #f38e82;\n$color-grad-1: #fbdb89;\n$color-grad-2: #f48982;\n\n$color-grey-light-1: #f9f5f3; // Light background\n$color-grey-light-2: #f2efee; // Light lines\n$color-grey-light-3: #d3c7c3; // Light text (placeholder)\n$color-grey-dark-1: #615551; // Normal text\n$color-grey-dark-2: #918581; // Lighter text\n\n$gradient: linear-gradient(to right bottom, $color-grad-1, $color-grad-2);\n\n$bp-large: 78.15em; // 1250px\n$bp-medium: 61.25em; // 980px\n$bp-small: 37.5em; // 600px\n$bp-smallest: 31.25em; // 500px\n\n* {\n margin: 0;\n padding: 0;\n}\n\n*,\n*::before,\n*::after {\n box-sizing: inherit;\n}\n\nhtml {\n box-sizing: border-box;\n font-size: 62.5%;\n\n @media only screen and (max-width: $bp-medium) {\n font-size: 50%;\n }\n}\n\nbody {\n font-family: 'Nunito Sans', sans-serif;\n font-weight: 400;\n line-height: 1.6;\n color: $color-grey-dark-1;\n background-image: $gradient;\n background-size: cover;\n background-repeat: no-repeat;\n min-height: calc(100vh - 2 * 4vw);\n}\n\n.container {\n max-width: 120rem;\n min-height: 117rem;\n margin: 4vw auto;\n background-color: #fff;\n border-radius: 9px;\n overflow: hidden;\n box-shadow: 0 2rem 6rem 0.5rem rgba($color-grey-dark-1, 0.2);\n\n display: grid;\n grid-template-rows: 10rem minmax(100rem, auto);\n grid-template-columns: 1fr 2fr;\n grid-template-areas:\n 'head head'\n 'list recipe';\n\n @media only screen and (max-width: $bp-large) {\n max-width: 100%;\n margin: 0;\n border-radius: 0;\n }\n}\n" }, { "path": "18-forkify/starter/src/sass/_components.scss", "content": "%btn {\n background-image: $gradient;\n border-radius: 10rem;\n border: none;\n text-transform: uppercase;\n color: #fff;\n cursor: pointer;\n display: flex;\n align-items: center;\n transition: all 0.2s;\n\n &:hover {\n transform: scale(1.05);\n }\n\n &:focus {\n outline: none;\n }\n\n & > *:first-child {\n margin-right: 1rem;\n }\n}\n\n.btn {\n @extend %btn;\n\n padding: 1.5rem 4rem;\n font-size: 1.5rem;\n font-weight: 600;\n\n svg {\n height: 2.25rem;\n width: 2.25rem;\n fill: currentColor;\n }\n}\n\n.btn--small {\n &,\n &:link,\n &:visited {\n @extend %btn;\n\n font-size: 1.4rem;\n font-weight: 600;\n padding: 1.25rem 2.25rem;\n text-decoration: none;\n\n svg {\n height: 1.75rem;\n width: 1.75rem;\n fill: currentColor;\n }\n }\n}\n\n.btn--inline {\n color: $color-primary;\n font-size: 1.3rem;\n font-weight: 600;\n border: none;\n background-color: $color-grey-light-1;\n padding: 0.8rem 1.2rem;\n border-radius: 10rem;\n cursor: pointer;\n\n display: flex;\n align-items: center;\n transition: all 0.2s;\n\n svg {\n height: 1.6rem;\n width: 1.6rem;\n fill: currentColor;\n margin: 0 0.2rem;\n }\n\n span {\n margin: 0 0.4rem;\n }\n\n &:hover {\n color: $color-grad-2;\n background-color: $color-grey-light-2;\n }\n\n &:focus {\n outline: none;\n }\n}\n\n.btn--round {\n background-image: $gradient;\n border-radius: 50%;\n border: none;\n cursor: pointer;\n height: 4.5rem;\n width: 4.5rem;\n // margin-left: auto;\n transition: all 0.2s;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n &:hover {\n transform: scale(1.07);\n }\n\n &:focus {\n outline: none;\n }\n\n svg {\n height: 2.5rem;\n width: 2.5rem;\n fill: #fff;\n }\n}\n\n.btn--tiny {\n height: 2rem;\n width: 2rem;\n border: none;\n background: none;\n cursor: pointer;\n\n svg {\n height: 100%;\n width: 100%;\n fill: $color-primary;\n transition: all 0.3s;\n }\n\n &:focus {\n outline: none;\n }\n\n &:hover svg {\n fill: $color-grad-2;\n transform: translateY(-1px);\n }\n\n &:active svg {\n fill: $color-grad-2;\n transform: translateY(0);\n }\n\n &:not(:last-child) {\n margin-right: 0.3rem;\n }\n}\n\n.heading--2 {\n font-size: 2rem;\n font-weight: 700;\n color: $color-primary;\n text-transform: uppercase;\n margin-bottom: 2.5rem;\n text-align: center;\n // transform: skewY(-3deg);\n}\n\n.link:link,\n.link:visited {\n color: $color-grey-dark-2;\n}\n\n.spinner {\n margin: 5rem auto;\n text-align: center;\n\n svg {\n height: 6rem;\n width: 6rem;\n fill: $color-primary;\n animation: rotate 2s infinite linear;\n }\n}\n\n@keyframes rotate {\n 0% {\n transform: rotate(0);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n.message,\n.error {\n max-width: 40rem;\n margin: 0 auto;\n padding: 5rem 4rem;\n\n display: flex;\n\n svg {\n height: 3rem;\n width: 3rem;\n fill: $color-primary;\n transform: translateY(-0.3rem);\n }\n\n p {\n margin-left: 1.5rem;\n font-size: 1.8rem;\n line-height: 1.5;\n font-weight: 600;\n }\n}\n" }, { "path": "18-forkify/starter/src/sass/_header.scss", "content": ".header {\n grid-area: head;\n background-color: $color-grey-light-1;\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n &__logo {\n margin-left: 4rem;\n height: 4.6rem;\n display: block;\n }\n}\n\n.search {\n background-color: #fff;\n border-radius: 10rem;\n display: flex;\n align-items: center;\n padding-left: 3rem;\n transition: all 0.3s;\n\n &:focus-within {\n transform: translateY(-2px);\n box-shadow: 0 0.7rem 3rem rgba($color-grey-dark-1, 0.08);\n }\n\n &__field {\n border: none;\n background: none;\n font-family: inherit;\n color: inherit;\n font-size: 1.7rem;\n width: 30rem;\n\n &:focus {\n outline: none;\n }\n\n &::placeholder {\n color: $color-grey-light-3;\n }\n\n @media only screen and (max-width: $bp-medium) {\n width: auto;\n\n &::placeholder {\n color: white;\n }\n }\n }\n\n &__btn {\n font-weight: 600;\n font-family: inherit;\n }\n}\n\n.nav {\n align-self: stretch;\n margin-right: 2.5rem;\n\n &__list {\n list-style: none;\n display: flex;\n height: 100%;\n }\n\n &__item {\n position: relative;\n }\n\n &__btn {\n height: 100%;\n font-family: inherit;\n color: inherit;\n font-size: 1.4rem;\n font-weight: 700;\n text-transform: uppercase;\n background: none;\n border: none;\n cursor: pointer;\n padding: 0 1.5rem;\n transition: all 0.3s;\n\n display: flex;\n align-items: center;\n\n svg {\n height: 2.4rem;\n width: 2.4rem;\n fill: $color-primary;\n margin-right: 0.7rem;\n transform: translateY(-1px);\n }\n\n &:focus {\n outline: none;\n }\n\n &:hover {\n background-color: $color-grey-light-2;\n }\n }\n}\n\n.bookmarks {\n padding: 1rem 0;\n position: absolute;\n // right: 0;\n right: -2.5rem;\n z-index: 10;\n width: 40rem;\n background-color: #fff;\n box-shadow: 0 0.8rem 5rem 2rem rgba($color-grey-dark-1, 0.1);\n\n visibility: hidden;\n opacity: 0;\n transition: all 0.5s 0.2s;\n\n &__list {\n list-style: none;\n }\n\n &__field {\n cursor: pointer;\n padding: 0 4rem;\n\n display: flex;\n align-items: center;\n height: 100%;\n transition: all 0.3s;\n\n &:hover {\n background-color: $color-grey-light-2;\n }\n }\n\n &:hover,\n .nav__btn--bookmarks:hover + & {\n visibility: visible;\n opacity: 1;\n }\n}\n" }, { "path": "18-forkify/starter/src/sass/_preview.scss", "content": ".preview {\n &__link {\n &:link,\n &:visited {\n display: flex;\n align-items: center;\n padding: 1.5rem 3.25rem;\n transition: all 0.3s;\n border-right: 1px solid #fff;\n text-decoration: none;\n }\n\n &:hover {\n background-color: $color-grey-light-1;\n transform: translateY(-2px);\n }\n\n &--active {\n background-color: $color-grey-light-1;\n }\n }\n\n &__fig {\n flex: 0 0 5.8rem;\n border-radius: 50%;\n overflow: hidden;\n height: 5.8rem;\n margin-right: 2rem;\n position: relative;\n backface-visibility: hidden;\n\n &::before {\n content: '';\n display: block;\n height: 100%;\n width: 100%;\n position: absolute;\n top: 0;\n left: 0;\n background-image: linear-gradient(\n to right bottom,\n $color-grad-1,\n $color-grad-2\n );\n opacity: 0.4;\n }\n\n img {\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: all 0.3s;\n }\n }\n\n &__data {\n display: grid;\n width: 100%;\n grid-template-columns: 1fr 2rem;\n row-gap: 0.1rem;\n align-items: center;\n }\n\n &__title {\n grid-column: 1/-1;\n font-size: 1.45rem;\n color: $color-primary;\n text-transform: uppercase;\n font-weight: 600;\n\n // This is how text is truncated!\n text-overflow: ellipsis;\n max-width: 25rem;\n white-space: nowrap;\n overflow: hidden;\n }\n\n &__publisher {\n font-size: 1.15rem;\n color: $color-grey-dark-2;\n text-transform: uppercase;\n font-weight: 600;\n }\n\n &__user-generated {\n background-color: darken($color-grey-light-2, 2%);\n\n display: flex;\n align-items: center;\n justify-content: center;\n height: 2rem;\n width: 2rem;\n border-radius: 10rem;\n\n margin-left: auto;\n margin-right: 1.75rem;\n\n svg {\n height: 1.2rem;\n width: 1.2rem;\n fill: $color-primary;\n }\n }\n}\n" }, { "path": "18-forkify/starter/src/sass/_recipe.scss", "content": ".recipe {\n background-color: $color-grey-light-1;\n\n ///////////\n // FIGURE\n &__fig {\n height: 32rem;\n position: relative;\n // transform: scale(1.04) translateY(-1px);\n transform-origin: top;\n\n &::before {\n content: '';\n display: block;\n height: 100%;\n width: 100%;\n position: absolute;\n top: 0;\n left: 0;\n background-image: linear-gradient(\n to right bottom,\n $color-grad-1,\n $color-grad-2\n );\n opacity: 0.6;\n }\n }\n\n &__img {\n width: 100%;\n display: block;\n height: 100%;\n object-fit: cover;\n }\n\n &__title {\n position: absolute;\n bottom: 0;\n left: 50%;\n transform: translate(-50%, 20%) skewY(-6deg);\n color: #fff;\n font-weight: 700;\n font-size: 3.25rem;\n text-transform: uppercase;\n width: 50%;\n line-height: 1.95;\n text-align: center;\n\n span {\n -webkit-box-decoration-break: clone;\n box-decoration-break: clone;\n padding: 1.3rem 2rem;\n background-image: linear-gradient(\n to right bottom,\n $color-grad-1,\n $color-grad-2\n );\n }\n\n @media only screen and (max-width: $bp-medium) {\n width: 70%;\n }\n }\n\n ///////////\n // DETAILS\n &__details {\n display: flex;\n align-items: center;\n padding: 7.5rem 8rem 3.5rem 8rem;\n }\n\n &__info {\n font-size: 1.65rem;\n text-transform: uppercase;\n display: flex;\n align-items: center;\n\n &:not(:last-child) {\n margin-right: 4.5rem;\n }\n }\n\n &__info-icon {\n height: 2.35rem;\n width: 2.35rem;\n fill: $color-primary;\n margin-right: 1.15rem;\n }\n\n &__info-data {\n margin-right: 0.5rem;\n font-weight: 700;\n }\n\n &__info-buttons {\n display: flex;\n margin-left: 1.6rem;\n transform: translateY(-1px);\n }\n\n &__user-generated {\n background-color: darken($color-grey-light-2, 2%);\n\n display: flex;\n align-items: center;\n justify-content: center;\n height: 4rem;\n width: 4rem;\n border-radius: 10rem;\n\n margin-left: auto;\n margin-right: 1.75rem;\n\n svg {\n height: 2.25rem;\n width: 2.25rem;\n fill: $color-primary;\n }\n }\n\n ///////////\n // INGREDIENTS\n &__ingredients {\n padding: 5rem 8rem;\n font-size: 1.6rem;\n line-height: 1.4;\n background-color: $color-grey-light-2;\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n\n &__ingredient-list {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 2.5rem 3rem;\n list-style: none;\n }\n\n &__ingredient {\n display: flex;\n }\n\n &__icon {\n height: 2rem;\n width: 2rem;\n fill: $color-primary;\n margin-right: 1.1rem;\n flex: 0 0 auto;\n margin-top: 0.1rem;\n }\n\n &__quantity {\n margin-right: 0.5rem;\n flex: 0 0 auto;\n }\n\n ///////////\n // DIRECTIONS\n &__directions {\n padding: 5rem 10rem;\n padding-bottom: 5rem;\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n\n &__directions-text {\n font-size: 1.7rem;\n text-align: center;\n margin-bottom: 3.5rem;\n color: $color-grey-dark-2;\n }\n\n &__publisher {\n font-weight: 700;\n }\n}\n" }, { "path": "18-forkify/starter/src/sass/_searchResults.scss", "content": ".search-results {\n padding: 3rem 0;\n display: flex;\n flex-direction: column;\n}\n\n.results {\n list-style: none;\n margin-bottom: 2rem;\n}\n\n.pagination {\n margin-top: auto;\n padding: 0 3.5rem;\n\n &::after {\n content: '';\n display: table;\n clear: both;\n }\n\n &__btn {\n &--prev {\n float: left;\n }\n &--next {\n float: right;\n }\n }\n}\n\n.copyright {\n color: $color-grey-dark-2;\n font-size: 1.2rem;\n padding: 0 3.5rem;\n margin-top: 4rem;\n\n .twitter-link:link,\n .twitter-link:visited {\n color: $color-grey-dark-2;\n }\n}\n" }, { "path": "18-forkify/starter/src/sass/_upload.scss", "content": ".add-recipe-window {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 100rem;\n background-color: white;\n border-radius: 9px;\n\n padding: 5rem 6rem;\n box-shadow: 0 4rem 6rem rgba(0, 0, 0, 0.25);\n z-index: 1000;\n transition: all 0.5s;\n\n .btn--close-modal {\n font-family: inherit;\n color: inherit;\n position: absolute;\n top: 0.5rem;\n right: 1.6rem;\n font-size: 3.5rem;\n cursor: pointer;\n border: none;\n background: none;\n }\n}\n\n.overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.4);\n backdrop-filter: blur(4px);\n z-index: 100;\n transition: all 0.5s;\n}\n\n.hidden {\n visibility: hidden;\n opacity: 0;\n}\n\n.upload {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 4rem 6rem;\n\n &__column {\n display: grid;\n grid-template-columns: 1fr 2.8fr;\n align-items: center;\n gap: 1.5rem;\n\n & label {\n font-size: 1.5rem;\n font-weight: 600;\n color: inherit;\n }\n\n & input {\n font-size: 1.5rem;\n padding: 0.8rem 1rem;\n border: 1px solid #ddd;\n border-radius: 0.5rem;\n transition: all 0.2s;\n\n &::placeholder {\n color: $color-grey-light-3;\n }\n\n &:focus {\n outline: none;\n border: 1px solid $color-primary;\n background-color: $color-grey-light-1;\n }\n }\n\n & button {\n grid-column: 1 / span 2;\n justify-self: center;\n margin-top: 1rem;\n }\n }\n\n &__heading {\n font-size: 2.25rem;\n font-weight: 700;\n text-transform: uppercase;\n margin-bottom: 1rem;\n grid-column: 1/-1;\n }\n\n &__btn {\n grid-column: 1 / -1;\n justify-self: center;\n }\n}\n" }, { "path": "18-forkify/starter/src/sass/main.scss", "content": "@import 'base';\n@import 'components';\n@import 'header';\n@import 'preview';\n@import 'searchResults';\n@import 'recipe';\n@import 'upload';\n" }, { "path": "README.md", "content": "# Course Material and FAQ for my Complete JavaScript Course\n\nThis branch of the repo contains starter files and final code for all sections and projects of the course, **exactly as shown in the videos**.\n\nUse starter code to start each section, and **final code to compare it with your own code whenever something doesn't work**!\n\nThere is also a the [updates-and-fixes](https://github.com/jonasschmedtmann/complete-javascript-course/tree/updates-and-fixes) branch which is kept up-to-date with **latest package updates and important bugfixes 🐛**\n\n🚨 **_Please read the following Frequently Asked Questions (FAQ) carefully before starting the course_** 🚨\n\n## FAQ\n\n### Q1: How do I download the files?\n\n**A:** If you're new to GitHub and just want to download the entire code, hit the green button saying \"Code\", and then choose the \"Download ZIP\" option. If you can't see the button (on mobile), use [this link](https://github.com/jonasschmedtmann/complete-javascript-course/archive/master.zip) instead.\n\n### Q2: I'm stuck! Where do I get help?\n\n**A:** Have you actually tried to fix the problem on your own? **Have you compared your code to the final code?** If you failed fixing your problem, please **post a detailed description of the problem to the Q&A area of that video over at Udemy**, along with a [codepen](https://codepen.io/pen/) containing your code. You will get help there. Please don't send me a personal message or email to fix coding problems.\n\n### Q3: What VSCode theme are you using?\n\n**A:** I use Monokai Pro for all my coding and course production. It's a paid theme (I', **not** affiliated with them), but you can actually use the free demo version forever 😅\n\n### Q4: Can I see a final version of the course projects?\n\n**A:** Sure! Here you go:\n\n- [Pig Game](https://pig-game-v2.netlify.app) (DOM Manipulation)\n- [Bankist](https://bankist.netlify.app/) (Arrays, Numbers, Dates, Timers. Fake \"log in\" with user `js` and PIN `1111`)\n- [Bankist Site](https://bankist-dom.netlify.app/) (Advanced DOM and Events)\n- [Mapty](https://mapty.netlify.app/) (OOP, Geolocation, Project planning)\n- [forkify](https://forkify-v2.jonas.io/) (Final advanced project)\n\n### Q5: Videos don't load, can you fix it?\n\n**A:** Unfortunately, there is nothing I can do about it. The course is hosted on Udemy, and sometimes they have technical issues like this. Please just come back a bit later or [contact their support team](https://support.udemy.com/hc/en-us).\n\n### Q6: Videos are blurred / have low quality, can you fix it?\n\n**A:** Please open video settings and change the quality from 'Auto' to another value, for example 720p. If that doesn't help, please [contact the Udemy support team](https://support.udemy.com/hc/en-us).\n\n### Q7: Are the videos downloadable?\n\n**A:** Videos used to be downloadable, but unfortunately, Udemy has disabled video downloads on all my courses in order to fight piracy. There is nothing I can do about this.\n\n### Q8: I want to put these projects in my portfolio. Is that allowed?\n\n**A:** Absolutely! Just make sure you actually built them yourself by following the course, and that you understand what you did. What is **not allowed** is that you create your own course/videos/articles based on this course's content!\n\n### Q9: You mentioned your resources page. Where can I find it?\n\n**A:** It's on my website at . You can subscribe for updates 😉\n\n### Q10: I love your courses and want to get updates on new courses. How?\n\n**A:** First, you can subscribe to my email list [at my website](http://codingheroes.io/resources). Plus, I make important announcements on twitter [@jonasschmedtman](https://twitter.com/jonasschmedtman), so you should definitely follow me there 🔥\n\n### Q11: How do I get my certificate of completion?\n\n**A:** A certificate of completion is provided by Udemy after you complete 100% of the course. After completing the course, just click on the \"Your progress\" indicator in the top right-hand corner of the course page. If you want to change your name on the certificate, please [contact the Udemy support team](https://support.udemy.com/hc/en-us).\n\n### Q12: Can you add subtitles in my language?\n\n**A:** No. I provide professional English captions, but Udemy is responsible for subtitles in all other languages (automatic translations). So please [contact the Udemy support team](https://support.udemy.com/hc/en-us) to request your own language.\n\n### Q13: Do you accept pull requests?\n\n**A:** No, for the simple reason that I want this repository to contain the _exact_ same code that is shown in the videos. _However, please feel free to add an issue if you found one._\n\n### Q14: I'm looking for the old course version (v1) files. Where can I find them?\n\n**A:** They are in this same repo, but in the [v1 branch](https://github.com/jonasschmedtmann/complete-javascript-course/tree/v1). So just go to [v1](https://github.com/jonasschmedtmann/complete-javascript-course/tree/v1), and download the code from there.\n" } ]