diff --git a/01-Fundamentals-Part-1/final/index.html b/01-Fundamentals-Part-1/final/index.html
deleted file mode 100755
index 96fbc80614..0000000000
--- a/01-Fundamentals-Part-1/final/index.html
+++ /dev/null
@@ -1,31 +0,0 @@
-
-
-
- JavaScript Fundamentals โ Part 1
-
-
-
- JavaScript Fundamentals โ Part 1
-
-
-
-
diff --git a/01-Fundamentals-Part-1/final/script.js b/01-Fundamentals-Part-1/final/script.js
deleted file mode 100644
index 9029e211ff..0000000000
--- a/01-Fundamentals-Part-1/final/script.js
+++ /dev/null
@@ -1,470 +0,0 @@
-/*
-////////////////////////////////////
-// Linking a JavaScript File
-let js = "amazing";
-console.log(40 + 8 + 23 - 10);
-
-////////////////////////////////////
-// Values and Variables
-console.log("Jonas");
-console.log(23);
-
-let firstName = "Matilda";
-
-console.log(firstName);
-console.log(firstName);
-console.log(firstName);
-
-// Variable name conventions
-let jonas_matilda = "JM";
-let $function = 27;
-
-let person = "jonas";
-let PI = 3.1415;
-
-let myFirstJob = "Coder";
-let myCurrentJob = "Teacher";
-
-let job1 = "programmer";
-let job2 = "teacher";
-
-console.log(myFirstJob);
-
-////////////////////////////////////
-// Data Types
-let javascriptIsFun = true;
-console.log(javascriptIsFun);
-
-// console.log(typeof true);
-console.log(typeof javascriptIsFun);
-// console.log(typeof 23);
-// console.log(typeof 'Jonas');
-
-javascriptIsFun = 'YES!';
-console.log(typeof javascriptIsFun);
-
-let year;
-console.log(year);
-console.log(typeof year);
-
-year = 1991;
-console.log(typeof year);
-
-console.log(typeof null);
-
-////////////////////////////////////
-// let, const and var
-let age = 30;
-age = 31;
-
-const birthYear = 1991;
-// birthYear = 1990;
-// const job;
-
-var job = 'programmer';
-job = 'teacher'
-
-lastName = 'Schmedtmann';
-console.log(lastName);
-
-////////////////////////////////////
-// Basic Operators
-// Math operators
-const now = 2037;
-const ageJonas = now - 1991;
-const ageSarah = now - 2018;
-console.log(ageJonas, ageSarah);
-
-console.log(ageJonas * 2, ageJonas / 10, 2 ** 3);
-// 2 ** 3 means 2 to the power of 3 = 2 * 2 * 2
-
-const firstName = 'Jonas';
-const lastName = 'Schmedtmann';
-console.log(firstName + ' ' + lastName);
-
-// Assignment operators
-let x = 10 + 5; // 15
-x += 10; // x = x + 10 = 25
-x *= 4; // x = x * 4 = 100
-x++; // x = x + 1
-x--;
-x--;
-console.log(x);
-
-// Comparison operators
-console.log(ageJonas > ageSarah); // >, <, >=, <=
-console.log(ageSarah >= 18);
-
-const isFullAge = ageSarah >= 18;
-
-console.log(now - 1991 > now - 2018);
-
-////////////////////////////////////
-// Operator Precedence
-const now = 2037;
-const ageJonas = now - 1991;
-const ageSarah = now - 2018;
-
-console.log(now - 1991 > now - 2018);
-
-let x, y;
-x = y = 25 - 10 - 5; // x = y = 10, x = 10
-console.log(x, y);
-
-const averageAge = (ageJonas + ageSarah) / 2;
-console.log(ageJonas, ageSarah, averageAge);
-*/
-
-////////////////////////////////////
-// Coding Challenge #1
-
-/*
-Mark 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).
-
-1. Store Mark's and John's mass and height in variables
-2. Calculate both their BMIs using the formula (you can even implement both versions)
-3. Create a boolean variable 'markHigherBMI' containing information about whether Mark has a higher BMI than John.
-
-TEST DATA 1: Marks weights 78 kg and is 1.69 m tall. John weights 92 kg and is 1.95 m tall.
-TEST DATA 2: Marks weights 95 kg and is 1.88 m tall. John weights 85 kg and is 1.76 m tall.
-
-GOOD LUCK ๐
-*/
-
-// const massMark = 78;
-// const heightMark = 1.69;
-// const massJohn = 92;
-// const heightJohn = 1.95;
-
-/*
-const massMark = 95;
-const heightMark = 1.88;
-const massJohn = 85;
-const heightJohn = 1.76;
-
-const BMIMark = massMark / heightMark ** 2;
-const BMIJohn = massJohn / (heightJohn * heightJohn);
-const markHigherBMI = BMIMark > BMIJohn;
-
-console.log(BMIMark, BMIJohn, markHigherBMI);
-
-////////////////////////////////////
-// Strings and Template Literals
-const firstName = 'Jonas';
-const job = 'teacher';
-const birthYear = 1991;
-const year = 2037;
-
-const jonas = "I'm " + firstName + ', a ' + (year - birthYear) + ' year old ' + job + '!';
-console.log(jonas);
-
-const jonasNew = `I'm ${firstName}, a ${year - birthYear} year old ${job}!`;
-console.log(jonasNew);
-
-console.log(`Just a regular string...`);
-
-console.log('String with \n\
-multiple \n\
-lines');
-
-console.log(`String
-multiple
-lines`);
-
-
-////////////////////////////////////
-// Taking Decisions: if / else Statements
-const age = 15;
-
-if (age >= 18) {
- console.log('Sarah can start driving license ๐');
-} else {
- const yearsLeft = 18 - age;
- console.log(`Sarah is too young. Wait another ${yearsLeft} years :)`);
-}
-
-const birthYear = 2012;
-
-let century;
-if (birthYear <= 2000) {
- century = 20;
-} else {
- century = 21;
-}
-console.log(century);
-*/
-
-////////////////////////////////////
-// Coding Challenge #2
-
-/*
-Use the BMI example from Challenge #1, and the code you already wrote, and improve it:
-
-1. 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!"
-2. 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)!"
-
-HINT: Use an if/else statement ๐
-
-GOOD LUCK ๐
-*/
-
-/*
-const massMark = 78;
-const heightMark = 1.69;
-const massJohn = 92;
-const heightJohn = 1.95;
-
-// const massMark = 95;
-// const heightMark = 1.88;
-// const massJohn = 85;
-// const heightJohn = 1.76;
-
-const BMIMark = massMark / heightMark ** 2;
-const BMIJohn = massJohn / (heightJohn * heightJohn);
-console.log(BMIMark, BMIJohn);
-
-if (BMIMark > BMIJohn) {
- console.log(`Mark's BMI (${BMIMark}) is higher than John's (${BMIJohn})!`)
-} else {
- console.log(`John's BMI (${BMIJohn}) is higher than Marks's (${BMIMark})!`)
-}
-
-////////////////////////////////////
-// Type Conversion and Coercion
-
-// type conversion
-const inputYear = '1991';
-console.log(Number(inputYear), inputYear);
-console.log(Number(inputYear) + 18);
-
-console.log(Number('Jonas'));
-console.log(typeof NaN);
-
-console.log(String(23), 23);
-
-// type coercion
-console.log('I am ' + 23 + ' years old');
-console.log('23' - '10' - 3);
-console.log('23' / '2');
-console.log('23' > '18');
-
-let n = '1' + 1; // '11'
-n = n - 1;
-console.log(n);
-
-////////////////////////////////////
-// Truthy and Falsy Values
-
-// 5 falsy values: 0, '', undefined, null, NaN
-console.log(Boolean(0));
-console.log(Boolean(undefined));
-console.log(Boolean('Jonas'));
-console.log(Boolean({}));
-console.log(Boolean(''));
-
-const money = 100;
-if (money) {
- console.log("Don't spend it all ;)");
-} else {
- console.log('You should get a job!');
-}
-
-let height = 0;
-if (height) {
- console.log('YAY! Height is defined');
-} else {
- console.log('Height is UNDEFINED');
-}
-
-////////////////////////////////////
-// Equality Operators: == vs. ===
-const age = '18';
-if (age === 18) console.log('You just became an adult :D (strict)');
-
-if (age == 18) console.log('You just became an adult :D (loose)');
-
-const favourite = Number(prompt("What's your favourite number?"));
-console.log(favourite);
-console.log(typeof favourite);
-
-if (favourite === 23) { // 22 === 23 -> FALSE
- console.log('Cool! 23 is an amzaing number!')
-} else if (favourite === 7) {
- console.log('7 is also a cool number')
-} else if (favourite === 9) {
- console.log('9 is also a cool number')
-} else {
- console.log('Number is not 23 or 7 or 9')
-}
-
-if (favourite !== 23) console.log('Why not 23?');
-
-////////////////////////////////////
-// Logical Operators
-const hasDriversLicense = true; // A
-const hasGoodVision = true; // B
-
-console.log(hasDriversLicense && hasGoodVision);
-console.log(hasDriversLicense || hasGoodVision);
-console.log(!hasDriversLicense);
-
-// if (hasDriversLicense && hasGoodVision) {
-// console.log('Sarah is able to drive!');
-// } else {
-// console.log('Someone else should drive...');
-// }
-
-const isTired = false; // C
-console.log(hasDriversLicense && hasGoodVision && isTired);
-
-if (hasDriversLicense && hasGoodVision && !isTired) {
- console.log('Sarah is able to drive!');
-} else {
- console.log('Someone else should drive...');
-}
-*/
-
-////////////////////////////////////
-// Coding Challenge #3
-
-/*
-There 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!
-
-1. Calculate the average score for each team, using the test data below
-2. 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).
-
-3. 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 ๐
-4. 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.
-
-TEST DATA: Dolphins score 96, 108 and 89. Koalas score 88, 91 and 110
-TEST DATA BONUS 1: Dolphins score 97, 112 and 101. Koalas score 109, 95 and 123
-TEST DATA BONUS 2: Dolphins score 97, 112 and 101. Koalas score 109, 95 and 106
-
-GOOD LUCK ๐
-*/
-
-/*
-// const scoreDolphins = (96 + 108 + 89) / 3;
-// const scoreKoalas = (88 + 91 + 110) / 3;
-// console.log(scoreDolphins, scoreKoalas);
-
-// if (scoreDolphins > scoreKoalas) {
-// console.log('Dolphins win the trophy ๐');
-// } else if (scoreKoalas > scoreDolphins) {
-// console.log('Koalas win the trophy ๐');
-// } else if (scoreDolphins === scoreKoalas) {
-// console.log('Both win the trophy!');
-// }
-
-// BONUS 1
-const scoreDolphins = (97 + 112 + 80) / 3;
-const scoreKoalas = (109 + 95 + 50) / 3;
-console.log(scoreDolphins, scoreKoalas);
-
-if (scoreDolphins > scoreKoalas && scoreDolphins >= 100) {
- console.log('Dolphins win the trophy ๐');
-} else if (scoreKoalas > scoreDolphins && scoreKoalas >= 100) {
- console.log('Koalas win the trophy ๐');
-} else if (scoreDolphins === scoreKoalas && scoreDolphins >= 100 && scoreKoalas >= 100) {
- console.log('Both win the trophy!');
-} else {
- console.log('No one wins the trophy ๐ญ');
-}
-
-////////////////////////////////////
-// The switch Statement
-const day = 'friday';
-
-switch (day) {
- case 'monday': // day === 'monday'
- console.log('Plan course structure');
- console.log('Go to coding meetup');
- break;
- case 'tuesday':
- console.log('Prepare theory videos');
- break;
- case 'wednesday':
- case 'thursday':
- console.log('Write code examples');
- break;
- case 'friday':
- console.log('Record videos');
- break;
- case 'saturday':
- case 'sunday':
- console.log('Enjoy the weekend :D');
- break;
- default:
- console.log('Not a valid day!');
-}
-
-if (day === 'monday') {
- console.log('Plan course structure');
- console.log('Go to coding meetup');
-} else if (day === 'tuesday') {
- console.log('Prepare theory videos');
-} else if (day === 'wednesday' || day === 'thursday') {
- console.log('Write code examples');
-} else if (day === 'friday') {
- console.log('Record videos');
-} else if (day === 'saturday' || day === 'sunday') {
- console.log('Enjoy the weekend :D');
-} else {
- console.log('Not a valid day!');
-}
-
-////////////////////////////////////
-// Statements and Expressions
-3 + 4
-1991
-true && false && !false
-
-if (23 > 10) {
- const str = '23 is bigger';
-}
-
-const me = 'Jonas';
-console.log(`I'm ${2037 - 1991} years old ${me}`);
-
-////////////////////////////////////
-// The Conditional (Ternary) Operator
-const age = 23;
-// age >= 18 ? console.log('I like to drink wine ๐ท') : console.log('I like to drink water ๐ง');
-
-const drink = age >= 18 ? 'wine ๐ท' : 'water ๐ง';
-console.log(drink);
-
-let drink2;
-if (age >= 18) {
- drink2 = 'wine ๐ท';
-} else {
- drink2 = 'water ๐ง';
-}
-console.log(drink2);
-
-console.log(`I like to drink ${age >= 18 ? 'wine ๐ท' : 'water ๐ง'}`);
-*/
-
-
-////////////////////////////////////
-// Coding Challenge #4
-
-/*
-Steven 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%.
-
-1. 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!)
-2. 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'
-
-TEST DATA: Test for bill values 275, 40 and 430
-
-HINT: To calculate 20% of a value, simply multiply it by 20/100 = 0.2
-HINT: Value X is between 50 and 300, if it's >= 50 && <= 300 ๐
-
-GOOD LUCK ๐
-*/
-
-/*
-const bill = 430;
-const tip = bill <= 300 && bill >= 50 ? bill * 0.15 : bill * 0.2;
-console.log(`The bill was ${bill}, the tip was ${tip}, and the total value ${bill + tip}`);
-*/
\ No newline at end of file
diff --git a/01-Fundamentals-Part-1/starter/index.html b/01-Fundamentals-Part-1/starter/index.html
deleted file mode 100755
index 59529c7923..0000000000
--- a/01-Fundamentals-Part-1/starter/index.html
+++ /dev/null
@@ -1,29 +0,0 @@
-
-
-
- JavaScript Fundamentals โ Part 1
-
-
-
- JavaScript Fundamentals โ Part 1
-
-
diff --git a/02-Fundamentals-Part-2/final/index.html b/02-Fundamentals-Part-2/final/index.html
deleted file mode 100755
index ee4909e282..0000000000
--- a/02-Fundamentals-Part-2/final/index.html
+++ /dev/null
@@ -1,30 +0,0 @@
-
-
-
- JavaScript Fundamentals โ Part 2
-
-
-
- JavaScript Fundamentals โ Part 2
-
-
-
diff --git a/02-Fundamentals-Part-2/final/script.js b/02-Fundamentals-Part-2/final/script.js
deleted file mode 100755
index 8cee2087f7..0000000000
--- a/02-Fundamentals-Part-2/final/script.js
+++ /dev/null
@@ -1,589 +0,0 @@
-'use strict';
-
-/*
-///////////////////////////////////////
-// Activating Strict Mode
-let hasDriversLicense = false;
-const passTest = true;
-
-if (passTest) hasDriversLicense = true;
-if (hasDriversLicense) console.log('I can drive :D');
-
-// const interface = 'Audio';
-// const private = 534;
-
-
-///////////////////////////////////////
-// Functions
-function logger() {
- console.log('My name is Jonas');
-}
-
-// calling / running / invoking function
-logger();
-logger();
-logger();
-
-function fruitProcessor(apples, oranges) {
- const juice = `Juice with ${apples} apples and ${oranges} oranges.`;
- return juice;
-}
-
-const appleJuice = fruitProcessor(5, 0);
-console.log(appleJuice);
-
-const appleOrangeJuice = fruitProcessor(2, 4);
-console.log(appleOrangeJuice);
-
-const num = Number('23');
-
-
-///////////////////////////////////////
-// Function Declarations vs. Expressions
-
-// Function declaration
-function calcAge1(birthYeah) {
- return 2037 - birthYeah;
-}
-const age1 = calcAge1(1991);
-
-// Function expression
-const calcAge2 = function (birthYeah) {
- return 2037 - birthYeah;
-}
-const age2 = calcAge2(1991);
-
-console.log(age1, age2);
-
-
-///////////////////////////////////////
-// Arrow functions
-
-const calcAge3 = birthYeah => 2037 - birthYeah;
-const age3 = calcAge3(1991);
-console.log(age3);
-
-const yearsUntilRetirement = (birthYeah, firstName) => {
- const age = 2037 - birthYeah;
- const retirement = 65 - age;
- // return retirement;
- return `${firstName} retires in ${retirement} years`;
-}
-
-console.log(yearsUntilRetirement(1991, 'Jonas')); console.log(yearsUntilRetirement(1980, 'Bob'));
-
-
-///////////////////////////////////////
-// Functions Calling Other Functions
-function cutFruitPieces(fruit) {
- return fruit * 4;
-}
-
-function fruitProcessor(apples, oranges) {
- const applePieces = cutFruitPieces(apples);
- const orangePieces = cutFruitPieces(oranges);
-
- const juice = `Juice with ${applePieces} piece of apple and ${orangePieces} pieces of orange.`;
- return juice;
-}
-console.log(fruitProcessor(2, 3));
-
-
-///////////////////////////////////////
-// Reviewing Functions
-const calcAge = function (birthYeah) {
- return 2037 - birthYeah;
-}
-
-const yearsUntilRetirement = function (birthYeah, firstName) {
- const age = calcAge(birthYeah);
- const retirement = 65 - age;
-
- if (retirement > 0) {
- console.log(`${firstName} retires in ${retirement} years`);
- return retirement;
- } else {
- console.log(`${firstName} has already retired ๐`);
- return -1;
- }
-}
-
-console.log(yearsUntilRetirement(1991, 'Jonas'));
-console.log(yearsUntilRetirement(1950, 'Mike'));
-*/
-
-///////////////////////////////////////
-// Coding Challenge #1
-
-/*
-Back to the two gymnastics teams, the Dolphins and the Koalas! There is a new gymnastics discipline, which works differently.
-Each team competes 3 times, and then the average of the 3 scores is calculated (so one average score per team).
-A team ONLY wins if it has at least DOUBLE the average score of the other team. Otherwise, no team wins!
-
-1. Create an arrow function 'calcAverage' to calculate the average of 3 scores
-2. Use the function to calculate the average for both teams
-3. 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)".
-4. Use the 'checkWinner' function to determine the winner for both DATA 1 and DATA 2.
-5. Ignore draws this time.
-
-TEST DATA 1: Dolphins score 44, 23 and 71. Koalas score 65, 54 and 49
-TEST DATA 2: Dolphins score 85, 54 and 41. Koalas score 23, 34 and 27
-
-HINT: To calculate average of 3 values, add them all together and divide by 3
-HINT: To check if number A is at least double number B, check for A >= 2 * B. Apply this to the team's average scores ๐
-
-GOOD LUCK ๐
-*/
-
-/*
-const calcAverage = (a, b, c) => (a + b + c) / 3;
-console.log(calcAverage(3, 4, 5));
-
-// Test 1
-let scoreDolphins = calcAverage(44, 23, 71);
-let scoreKoalas = calcAverage(65, 54, 49);
-console.log(scoreDolphins, scoreKoalas);
-
-const checkWinner = function (avgDolphins, avgKoalas) {
- if (avgDolphins >= 2 * avgKoalas) {
- console.log(`Dolphins win ๐ (${avgDolphins} vs. ${avgKoalas})`);
- } else if (avgKoalas >= 2 * avgDolphins) {
- console.log(`Koalas win ๐ (${avgKoalas} vs. ${avgDolphins})`);
- } else {
- console.log('No team wins...');
- }
-}
-checkWinner(scoreDolphins, scoreKoalas);
-
-checkWinner(576, 111);
-
-// Test 2
-scoreDolphins = calcAverage(85, 54, 41);
-scoreKoalas = calcAverage(23, 34, 27);
-console.log(scoreDolphins, scoreKoalas);
-checkWinner(scoreDolphins, scoreKoalas);
-
-
-///////////////////////////////////////
-// Introduction to Arrays
-const friend1 = 'Michael';
-const friend2 = 'Steven';
-const friend3 = 'Peter';
-
-const friends = ['Michael', 'Steven', 'Peter'];
-console.log(friends);
-
-const y = new Array(1991, 1984, 2008, 2020);
-
-console.log(friends[0]);
-console.log(friends[2]);
-
-console.log(friends.length);
-console.log(friends[friends.length - 1]);
-
-friends[2] = 'Jay';
-console.log(friends);
-// friends = ['Bob', 'Alice']
-
-const firstName = 'Jonas';
-const jonas = [firstName, 'Schmedtmann', 2037 - 1991, 'teacher', friends];
-console.log(jonas);
-console.log(jonas.length);
-
-// Exercise
-const calcAge = function (birthYeah) {
- return 2037 - birthYeah;
-}
-const years = [1990, 1967, 2002, 2010, 2018];
-
-const age1 = calcAge(years[0]);
-const age2 = calcAge(years[1]);
-const age3 = calcAge(years[years.length - 1]);
-console.log(age1, age2, age3);
-
-const ages = [calcAge(years[0]), calcAge(years[1]), calcAge(years[years.length - 1])];
-console.log(ages);
-
-
-///////////////////////////////////////
-// Basic Array Operations (Methods)
-const friends = ['Michael', 'Steven', 'Peter'];
-
-// Add elements
-const newLength = friends.push('Jay');
-console.log(friends);
-console.log(newLength);
-
-friends.unshift('John');
-console.log(friends);
-
-// Remove elements
-friends.pop(); // Last
-const popped = friends.pop();
-console.log(popped);
-console.log(friends);
-
-friends.shift(); // First
-console.log(friends);
-
-console.log(friends.indexOf('Steven'));
-console.log(friends.indexOf('Bob'));
-
-friends.push(23);
-console.log(friends.includes('Steven'));
-console.log(friends.includes('Bob'));
-console.log(friends.includes(23));
-
-if (friends.includes('Steven')) {
- console.log('You have a friend called Steven');
-}
-*/
-
-///////////////////////////////////////
-// Coding Challenge #2
-
-/*
-Steven 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%.
-
-1. 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.
-2. And now let's use arrays! So create an array 'bills' containing the test data below.
-3. Create an array 'tips' containing the tip value for each bill, calculated from the function you created before.
-4. BONUS: Create an array 'total' containing the total values, so the bill + tip.
-
-TEST DATA: 125, 555 and 44
-
-HINT: 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) ๐
-
-GOOD LUCK ๐
-*/
-
-/*
-const calcTip = function (bill) {
- return bill >= 50 && bill <= 300 ? bill * 0.15 : bill * 0.2;
-}
-// const calcTip = bill => bill >= 50 && bill <= 300 ? bill * 0.15 : bill * 0.2;
-
-const bills = [125, 555, 44];
-const tips = [calcTip(bills[0]), calcTip(bills[1]), calcTip(bills[2])];
-const totals = [bills[0] + tips[0], bills[1] + tips[1], bills[2] + tips[2]];
-
-console.log(bills, tips, totals);
-
-
-///////////////////////////////////////
-// Introduction to Objects
-const jonasArray = [
- 'Jonas',
- 'Schmedtmann',
- 2037 - 1991,
- 'teacher',
- ['Michael', 'Peter', 'Steven']
-];
-
-const jonas = {
- firstName: 'Jonas',
- lastName: 'Schmedtmann',
- age: 2037 - 1991,
- job: 'teacher',
- friends: ['Michael', 'Peter', 'Steven']
-};
-
-
-///////////////////////////////////////
-// Dot vs. Bracket Notation
-const jonas = {
- firstName: 'Jonas',
- lastName: 'Schmedtmann',
- age: 2037 - 1991,
- job: 'teacher',
- friends: ['Michael', 'Peter', 'Steven']
-};
-console.log(jonas);
-
-console.log(jonas.lastName);
-console.log(jonas['lastName']);
-
-const nameKey = 'Name';
-console.log(jonas['first' + nameKey]);
-console.log(jonas['last' + nameKey]);
-
-// console.log(jonas.'last' + nameKey)
-
-const interestedIn = prompt('What do you want to know about Jonas? Choose between firstName, lastName, age, job, and friends');
-
-if (jonas[interestedIn]) {
- console.log(jonas[interestedIn]);
-} else {
- console.log('Wrong request! Choose between firstName, lastName, age, job, and friends');
-}
-
-jonas.location = 'Portugal';
-jonas['twitter'] = '@jonasschmedtman';
-console.log(jonas);
-
-// Challenge
-// "Jonas has 3 friends, and his best friend is called Michael"
-console.log(`${jonas.firstName} has ${jonas.friends.length} friends, and his best friend is called ${jonas.friends[0]}`);
-
-
-///////////////////////////////////////
-// Object Methods
-
-const jonas = {
- firstName: 'Jonas',
- lastName: 'Schmedtmann',
- birthYeah: 1991,
- job: 'teacher',
- friends: ['Michael', 'Peter', 'Steven'],
- hasDriversLicense: true,
-
- // calcAge: function (birthYeah) {
- // return 2037 - birthYeah;
- // }
-
- // calcAge: function () {
- // // console.log(this);
- // return 2037 - this.birthYeah;
- // }
-
- calcAge: function () {
- this.age = 2037 - this.birthYeah;
- return this.age;
- },
-
- getSummary: function () {
- return `${this.firstName} is a ${this.calcAge()}-year old ${jonas.job}, and he has ${this.hasDriversLicense ? 'a' : 'no'} driver's license.`
- }
-};
-
-console.log(jonas.calcAge());
-
-console.log(jonas.age);
-console.log(jonas.age);
-console.log(jonas.age);
-
-// Challenge
-// "Jonas is a 46-year old teacher, and he has a driver's license"
-console.log(jonas.getSummary());
-*/
-
-///////////////////////////////////////
-// Coding Challenge #3
-
-/*
-Let'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)
-
-1. For each of them, create an object with properties for their full name, mass, and height (Mark Miller and John Smith)
-2. 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.
-3. 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)!"
-
-TEST DATA: Marks weights 78 kg and is 1.69 m tall. John weights 92 kg and is 1.95 m tall.
-
-GOOD LUCK ๐
-*/
-
-/*
-const mark = {
- fullName: 'Mark Miller',
- mass: 78,
- height: 1.69,
- calcBMI: function () {
- this.bmi = this.mass / this.height ** 2;
- return this.bmi;
- }
-};
-
-const john = {
- fullName: 'John Smith',
- mass: 92,
- height: 1.95,
- calcBMI: function () {
- this.bmi = this.mass / this.height ** 2;
- return this.bmi;
- }
-};
-
-mark.calcBMI();
-john.calcBMI();
-
-console.log(mark.bmi, john.bmi);
-
-// "John Smith's BMI (28.3) is higher than Mark Miller's (23.9)!"
-
-if (mark.bmi > john.bmi) {
- console.log(`${mark.fullName}'s BMI (${mark.bmi}) is higher than ${john.fullName}'s BMI (${john.bmi})`)
-} else if (john.bmi > mark.bmi) {
- console.log(`${john.fullName}'s BMI (${john.bmi}) is higher than ${mark.fullName}'s BMI (${mark.bmi})`)
-}
-
-
-///////////////////////////////////////
-// Iteration: The for Loop
-
-// console.log('Lifting weights repetition 1 ๐๏ธโโ๏ธ');
-// console.log('Lifting weights repetition 2 ๐๏ธโโ๏ธ');
-// console.log('Lifting weights repetition 3 ๐๏ธโโ๏ธ');
-// console.log('Lifting weights repetition 4 ๐๏ธโโ๏ธ');
-// console.log('Lifting weights repetition 5 ๐๏ธโโ๏ธ');
-// console.log('Lifting weights repetition 6 ๐๏ธโโ๏ธ');
-// console.log('Lifting weights repetition 7 ๐๏ธโโ๏ธ');
-// console.log('Lifting weights repetition 8 ๐๏ธโโ๏ธ');
-// console.log('Lifting weights repetition 9 ๐๏ธโโ๏ธ');
-// console.log('Lifting weights repetition 10 ๐๏ธโโ๏ธ');
-
-// for loop keeps running while condition is TRUE
-for (let rep = 1; rep <= 30; rep++) {
- console.log(`Lifting weights repetition ${rep} ๐๏ธโโ๏ธ`);
-}
-
-
-///////////////////////////////////////
-// Looping Arrays, Breaking and Continuing
-const jonas = [
- 'Jonas',
- 'Schmedtmann',
- 2037 - 1991,
- 'teacher',
- ['Michael', 'Peter', 'Steven'],
- true
-];
-const types = [];
-
-// console.log(jonas[0])
-// console.log(jonas[1])
-// ...
-// console.log(jonas[4])
-// jonas[5] does NOT exist
-
-for (let i = 0; i < jonas.length; i++) {
- // Reading from jonas array
- console.log(jonas[i], typeof jonas[i]);
-
- // Filling types array
- // types[i] = typeof jonas[i];
- types.push(typeof jonas[i]);
-}
-
-console.log(types);
-
-const years = [1991, 2007, 1969, 2020];
-const ages = [];
-
-for (let i = 0; i < years.length; i++) {
- ages.push(2037 - years[i]);
-}
-console.log(ages);
-
-// continue and break
-console.log('--- ONLY STRINGS ---')
-for (let i = 0; i < jonas.length; i++) {
- if (typeof jonas[i] !== 'string') continue;
-
- console.log(jonas[i], typeof jonas[i]);
-}
-
-console.log('--- BREAK WITH NUMBER ---')
-for (let i = 0; i < jonas.length; i++) {
- if (typeof jonas[i] === 'number') break;
-
- console.log(jonas[i], typeof jonas[i]);
-}
-
-
-///////////////////////////////////////
-// Looping Backwards and Loops in Loops
-const jonas = [
- 'Jonas',
- 'Schmedtmann',
- 2037 - 1991,
- 'teacher',
- ['Michael', 'Peter', 'Steven'],
- true
-];
-
-// 0, 1, ..., 4
-// 4, 3, ..., 0
-
-for (let i = jonas.length - 1; i >= 0; i--) {
- console.log(i, jonas[i]);
-}
-
-for (let exercise = 1; exercise < 4; exercise++) {
- console.log(`-------- Starting exercise ${exercise}`);
-
- for (let rep = 1; rep < 6; rep++) {
- console.log(`Exercise ${exercise}: Lifting weight repetition ${rep} ๐๏ธโโ๏ธ`);
- }
-}
-
-
-///////////////////////////////////////
-// The while Loop
-for (let rep = 1; rep <= 10; rep++) {
- console.log(`Lifting weights repetition ${rep} ๐๏ธโโ๏ธ`);
-}
-
-let rep = 1;
-while (rep <= 10) {
- // console.log(`WHILE: Lifting weights repetition ${rep} ๐๏ธโโ๏ธ`);
- rep++;
-}
-
-let dice = Math.trunc(Math.random() * 6) + 1;
-
-while (dice !== 6) {
- console.log(`You rolled a ${dice}`);
- dice = Math.trunc(Math.random() * 6) + 1;
- if (dice === 6) console.log('Loop is about to end...');
-}
-*/
-
-///////////////////////////////////////
-// Coding Challenge #4
-
-/*
-Let's improve Steven's tip calculator even more, this time using loops!
-
-1. Create an array 'bills' containing all 10 test bill values
-2. Create empty arrays for the tips and the totals ('tips' and 'totals')
-3. 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!
-
-TEST DATA: 22, 295, 176, 440, 37, 105, 10, 1100, 86 and 52
-
-HINT: Call calcTip in the loop and use the push method to add values to the tips and totals arrays ๐
-
-4. 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:
- 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
- 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)
- 4.3. Call the function with the 'totals' array
-
-GOOD LUCK ๐
-*/
-
-/*
-const calcTip = function (bill) {
- return bill >= 50 && bill <= 300 ? bill * 0.15 : bill * 0.2;
-}
-const bills = [22, 295, 176, 440, 37, 105, 10, 1100, 86, 52];
-const tips = [];
-const totals = [];
-
-for (let i = 0; i < bills.length; i++) {
- const tip = calcTip(bills[i]);
- tips.push(tip);
- totals.push(tip + bills[i]);
-}
-console.log(bills, tips, totals);
-
-const calcAverage = function (arr) {
- let sum = 0;
- for (let i = 0; i < arr.length; i++) {
- // sum = sum + arr[i];
- sum += arr[i];
- }
- return sum / arr.length;
-}
-console.log(calcAverage([2, 3, 7]));
-console.log(calcAverage(totals));
-console.log(calcAverage(tips));
-*/
diff --git a/02-Fundamentals-Part-2/starter/index.html b/02-Fundamentals-Part-2/starter/index.html
deleted file mode 100755
index ee4909e282..0000000000
--- a/02-Fundamentals-Part-2/starter/index.html
+++ /dev/null
@@ -1,30 +0,0 @@
-
-
-
- JavaScript Fundamentals โ Part 2
-
-
-
- JavaScript Fundamentals โ Part 2
-
-
-
diff --git a/03-Developer-Skills/final/.prettierrc b/03-Developer-Skills/final/.prettierrc
deleted file mode 100644
index b4f8e6a6a1..0000000000
--- a/03-Developer-Skills/final/.prettierrc
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "singleQuote": true,
- "arrowParens": "avoid"
-}
diff --git a/03-Developer-Skills/final/index.html b/03-Developer-Skills/final/index.html
deleted file mode 100644
index fe26bd2b09..0000000000
--- a/03-Developer-Skills/final/index.html
+++ /dev/null
@@ -1,30 +0,0 @@
-
-
-
- Developer Skills & Editor Setup
-
-
-
- Developer Skills & Editor Setup
-
-
-
diff --git a/03-Developer-Skills/final/script.js b/03-Developer-Skills/final/script.js
deleted file mode 100644
index eceaebbc72..0000000000
--- a/03-Developer-Skills/final/script.js
+++ /dev/null
@@ -1,161 +0,0 @@
-// Remember, we're gonna use strict mode in all scripts now!
-'use strict';
-
-/*
-///////////////////////////////////////
-// Using Google, StackOverflow and MDN
-
-// PROBLEM 1:
-// 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."
-
-const temperatures = [3, -2, -6, -1, 'error', 9, 13, 17, 15, 14, 9, 5];
-
-// 1) Understanding the problem
-// - What is temp amplitude? Answer: difference between highest and lowest temp
-// - How to compute max and min temperatures?
-// - What's a sensor error? And what do do?
-
-// 2) Breaking up into sub-problems
-// - How to ignore errors?
-// - Find max value in temp array
-// - Find min value in temp array
-// - Subtract min from max (amplitude) and return it
-
-const calcTempAmplitude = function (temps) {
- let max = temps[0];
- let min = temps[0];
-
- for (let i = 0; i < temps.length; i++) {
- const curTemp = temps[i];
- if (typeof curTemp !== 'number') continue;
-
- if (curTemp > max) max = curTemp;
- if (curTemp < min) min = curTemp;
- }
- console.log(max, min);
- return max - min;
-};
-const amplitude = calcTempAmplitude(temperatures);
-console.log(amplitude);
-
-// PROBLEM 2:
-// Function should now receive 2 arrays of temps
-
-// 1) Understanding the problem
-// - With 2 arrays, should we implement functionality twice? NO! Just merge two arrays
-
-// 2) Breaking up into sub-problems
-// - Merge 2 arrays
-
-const calcTempAmplitudeNew = function (t1, t2) {
- const temps = t1.concat(t2);
- console.log(temps);
-
- let max = temps[0];
- let min = temps[0];
-
- for (let i = 0; i < temps.length; i++) {
- const curTemp = temps[i];
- if (typeof curTemp !== 'number') continue;
-
- if (curTemp > max) max = curTemp;
- if (curTemp < min) min = curTemp;
- }
- console.log(max, min);
- return max - min;
-};
-const amplitudeNew = calcTempAmplitudeNew([3, 5, 1], [9, 0, 5]);
-console.log(amplitudeNew);
-
-
-///////////////////////////////////////
-// Debugging with the Console and Breakpoints
-const measureKelvin = function () {
- const measurement = {
- type: 'temp',
- unit: 'celsius',
-
- // C) FIX
- // value: Number(prompt('Degrees celsius:')),
- value: 10,
- };
-
- // B) FIND
- console.table(measurement);
-
- // console.log(measurement.value);
- // console.warn(measurement.value);
- // console.error(measurement.value);
-
- const kelvin = measurement.value + 273;
- return kelvin;
-};
-// A) IDENTIFY
-console.log(measureKelvin());
-
-// Using a debugger
-const calcTempAmplitudeBug = function (t1, t2) {
- const temps = t1.concat(t2);
- console.log(temps);
-
- let max = 0;
- let min = 0;
-
- for (let i = 0; i < temps.length; i++) {
- const curTemp = temps[i];
- if (typeof curTemp !== 'number') continue;
-
- if (curTemp > max) max = curTemp;
- if (curTemp < min) min = curTemp;
- }
- console.log(max, min);
- return max - min;
-};
-const amplitudeBug = calcTempAmplitudeBug([3, 5, 1], [9, 4, 5]);
-// A) IDENTIFY
-console.log(amplitudeBug);
-*/
-
-///////////////////////////////////////
-// Coding Challenge #1
-
-/*
-Given an array of forecasted maximum temperatures, the thermometer displays a string with these temperatures.
-
-Example: [17, 21, 23] will print "... 17ยบC in 1 days ... 21ยบC in 2 days ... 23ยบC in 3 days ..."
-
-Create a function 'printForecast' which takes in an array 'arr' and logs a string like the above to the console.
-
-Use the problem-solving framework: Understand the problem and break it up into sub-problems!
-
-TEST DATA 1: [17, 21, 23]
-TEST DATA 2: [12, 5, -5, 0, 4]
-*/
-
-/*
-// 1) Understanding the problem
-// - Array transformed to string, separated by ...
-// - What is the X days? Answer: index + 1
-
-// 2) Breaking up into sub-problems
-// - Transform array into string
-// - Transform each element to string with ยบC
-// - Strings needs to contain day (index + 1)
-// - Add ... between elements and start and end of string
-// - Log string to console
-
-const data1 = [17, 21, 23];
-const data2 = [12, 5, -5, 0, 4];
-
-console.log(`... ${data1[0]}ยบC ... ${data1[1]}ยบC ... ${data1[2]}ยบC ...`);
-
-const printForecast = function (arr) {
- let str = '';
- for (let i = 0; i < arr.length; i++) {
- str += `${arr[i]}ยบC in ${i + 1} days ... `;
- }
- console.log('...' + str);
-};
-printForecast(data1);
-*/
-
diff --git a/03-Developer-Skills/starter/index.html b/03-Developer-Skills/starter/index.html
deleted file mode 100644
index fe26bd2b09..0000000000
--- a/03-Developer-Skills/starter/index.html
+++ /dev/null
@@ -1,30 +0,0 @@
-
-
-
- Developer Skills & Editor Setup
-
-
-
- Developer Skills & Editor Setup
-
-
-
diff --git a/03-Developer-Skills/starter/script.js b/03-Developer-Skills/starter/script.js
deleted file mode 100644
index 939b2a2446..0000000000
--- a/03-Developer-Skills/starter/script.js
+++ /dev/null
@@ -1,3 +0,0 @@
-// Remember, we're gonna use strict mode in all scripts now!
-'use strict';
-
diff --git a/04-HTML-CSS/final/index.html b/04-HTML-CSS/final/index.html
deleted file mode 100644
index da7d3f055b..0000000000
--- a/04-HTML-CSS/final/index.html
+++ /dev/null
@@ -1,38 +0,0 @@
-
-
-
- Learning HTML & CSS
-
-
- JavaScript is fun, but so is HTML & CSS!
-
- You can learn JavaScript without HTML and CSS, but for DOM manipulation
- it's useful to have some basic ideas of HTML & CSS. You can learn more
- about it
- on Udemy .
-
-
- Another heading
-
- Just another paragraph
-
-
- Guess My Number!
-
-
-
- Guess My Number!
- (Between 1 and 20)
- Again!
- ?
-
-
-
-
- Start guessing...
- ๐ฏ Score: 20
-
- ๐ฅ Highscore: 0
-
-
-
-
-
-
diff --git a/05-Guess-My-Number/final/script.js b/05-Guess-My-Number/final/script.js
deleted file mode 100644
index 8ca1e15c34..0000000000
--- a/05-Guess-My-Number/final/script.js
+++ /dev/null
@@ -1,110 +0,0 @@
-'use strict';
-
-/*
-console.log(document.querySelector('.message').textContent);
-document.querySelector('.message').textContent = '๐ Correct Number!';
-
-document.querySelector('.number').textContent = 13;
-document.querySelector('.score').textContent = 10;
-
-document.querySelector('.guess').value = 23;
-console.log(document.querySelector('.guess').value);
-*/
-
-let secretNumber = Math.trunc(Math.random() * 20) + 1;
-let score = 20;
-let highscore = 0;
-
-const displayMessage = function (message) {
- document.querySelector('.message').textContent = message;
-};
-
-document.querySelector('.check').addEventListener('click', function () {
- const guess = Number(document.querySelector('.guess').value);
- console.log(guess, typeof guess);
-
- // When there is no input
- if (!guess) {
- // document.querySelector('.message').textContent = 'โ๏ธ No number!';
- displayMessage('โ๏ธ No number!');
-
- // When player wins
- } else if (guess === secretNumber) {
- // document.querySelector('.message').textContent = '๐ Correct Number!';
- displayMessage('๐ Correct Number!');
- document.querySelector('.number').textContent = secretNumber;
-
- document.querySelector('body').style.backgroundColor = '#60b347';
- document.querySelector('.number').style.width = '30rem';
-
- if (score > highscore) {
- highscore = score;
- document.querySelector('.highscore').textContent = highscore;
- }
-
- // When guess is wrong
- } else if (guess !== secretNumber) {
- if (score > 1) {
- // document.querySelector('.message').textContent =
- // guess > secretNumber ? '๐ Too high!' : '๐ Too low!';
- displayMessage(guess > secretNumber ? '๐ Too high!' : '๐ Too low!');
- score--;
- document.querySelector('.score').textContent = score;
- } else {
- // document.querySelector('.message').textContent = '๐ฅ You lost the game!';
- displayMessage('๐ฅ You lost the game!');
- document.querySelector('.score').textContent = 0;
- }
- }
-
- // // When guess is too high
- // } else if (guess > secretNumber) {
- // if (score > 1) {
- // document.querySelector('.message').textContent = '๐ Too high!';
- // score--;
- // document.querySelector('.score').textContent = score;
- // } else {
- // document.querySelector('.message').textContent = '๐ฅ You lost the game!';
- // document.querySelector('.score').textContent = 0;
- // }
-
- // // When guess is too low
- // } else if (guess < secretNumber) {
- // if (score > 1) {
- // document.querySelector('.message').textContent = '๐ Too low!';
- // score--;
- // document.querySelector('.score').textContent = score;
- // } else {
- // document.querySelector('.message').textContent = '๐ฅ You lost the game!';
- // document.querySelector('.score').textContent = 0;
- // }
- // }
-});
-
-document.querySelector('.again').addEventListener('click', function () {
- score = 20;
- secretNumber = Math.trunc(Math.random() * 20) + 1;
-
- // document.querySelector('.message').textContent = 'Start guessing...';
- displayMessage('Start guessing...');
- document.querySelector('.score').textContent = score;
- document.querySelector('.number').textContent = '?';
- document.querySelector('.guess').value = '';
-
- document.querySelector('body').style.backgroundColor = '#222';
- document.querySelector('.number').style.width = '15rem';
-});
-
-///////////////////////////////////////
-// Coding Challenge #1
-
-/*
-Implement a game rest functionality, so that the player can make a new guess! Here is how:
-
-1. Select the element with the 'again' class and attach a click event handler
-2. In the handler function, restore initial values of the score and secretNumber variables
-3. Restore the initial conditions of the message, number, score and guess input field
-4. Also restore the original background color (#222) and number width (15rem)
-
-GOOD LUCK ๐
-*/
diff --git a/05-Guess-My-Number/final/style.css b/05-Guess-My-Number/final/style.css
deleted file mode 100644
index dfed55a320..0000000000
--- a/05-Guess-My-Number/final/style.css
+++ /dev/null
@@ -1,119 +0,0 @@
-@import url('https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap');
-
-* {
- margin: 0;
- padding: 0;
- box-sizing: inherit;
-}
-
-html {
- font-size: 62.5%;
- box-sizing: border-box;
-}
-
-body {
- font-family: 'Press Start 2P', sans-serif;
- color: #eee;
- background-color: #222;
- /* background-color: #60b347; */
-}
-
-/* LAYOUT */
-header {
- position: relative;
- height: 35vh;
- border-bottom: 7px solid #eee;
-}
-
-main {
- height: 65vh;
- color: #eee;
- display: flex;
- align-items: center;
- justify-content: space-around;
-}
-
-.left {
- width: 52rem;
- display: flex;
- flex-direction: column;
- align-items: center;
-}
-
-.right {
- width: 52rem;
- font-size: 2rem;
-}
-
-/* ELEMENTS STYLE */
-h1 {
- font-size: 4rem;
- text-align: center;
- position: absolute;
- width: 100%;
- top: 52%;
- left: 50%;
- transform: translate(-50%, -50%);
-}
-
-.number {
- background: #eee;
- color: #333;
- font-size: 6rem;
- width: 15rem;
- padding: 3rem 0rem;
- text-align: center;
- position: absolute;
- bottom: 0;
- left: 50%;
- transform: translate(-50%, 50%);
-}
-
-.between {
- font-size: 1.4rem;
- position: absolute;
- top: 2rem;
- right: 2rem;
-}
-
-.again {
- position: absolute;
- top: 2rem;
- left: 2rem;
-}
-
-.guess {
- background: none;
- border: 4px solid #eee;
- font-family: inherit;
- color: inherit;
- font-size: 5rem;
- padding: 2.5rem;
- width: 25rem;
- text-align: center;
- display: block;
- margin-bottom: 3rem;
-}
-
-.btn {
- border: none;
- background-color: #eee;
- color: #222;
- font-size: 2rem;
- font-family: inherit;
- padding: 2rem 3rem;
- cursor: pointer;
-}
-
-.btn:hover {
- background-color: #ccc;
-}
-
-.message {
- margin-bottom: 8rem;
- height: 3rem;
-}
-
-.label-score {
- margin-bottom: 2rem;
-}
diff --git a/05-Guess-My-Number/starter/.prettierrc b/05-Guess-My-Number/starter/.prettierrc
deleted file mode 100644
index b4f8e6a6a1..0000000000
--- a/05-Guess-My-Number/starter/.prettierrc
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "singleQuote": true,
- "arrowParens": "avoid"
-}
diff --git a/05-Guess-My-Number/starter/index.html b/05-Guess-My-Number/starter/index.html
deleted file mode 100644
index b25c17540a..0000000000
--- a/05-Guess-My-Number/starter/index.html
+++ /dev/null
@@ -1,32 +0,0 @@
-
-
-
- Guess My Number!
-
-
-
- Guess My Number!
- (Between 1 and 20)
- Again!
- ?
-
-
-
-
- Start guessing...
- ๐ฏ Score: 20
-
- ๐ฅ Highscore: 0
-
-
-
-
-
-
diff --git a/05-Guess-My-Number/starter/script.js b/05-Guess-My-Number/starter/script.js
deleted file mode 100644
index ad9a93a7c1..0000000000
--- a/05-Guess-My-Number/starter/script.js
+++ /dev/null
@@ -1 +0,0 @@
-'use strict';
diff --git a/05-Guess-My-Number/starter/style.css b/05-Guess-My-Number/starter/style.css
deleted file mode 100644
index dfed55a320..0000000000
--- a/05-Guess-My-Number/starter/style.css
+++ /dev/null
@@ -1,119 +0,0 @@
-@import url('https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap');
-
-* {
- margin: 0;
- padding: 0;
- box-sizing: inherit;
-}
-
-html {
- font-size: 62.5%;
- box-sizing: border-box;
-}
-
-body {
- font-family: 'Press Start 2P', sans-serif;
- color: #eee;
- background-color: #222;
- /* background-color: #60b347; */
-}
-
-/* LAYOUT */
-header {
- position: relative;
- height: 35vh;
- border-bottom: 7px solid #eee;
-}
-
-main {
- height: 65vh;
- color: #eee;
- display: flex;
- align-items: center;
- justify-content: space-around;
-}
-
-.left {
- width: 52rem;
- display: flex;
- flex-direction: column;
- align-items: center;
-}
-
-.right {
- width: 52rem;
- font-size: 2rem;
-}
-
-/* ELEMENTS STYLE */
-h1 {
- font-size: 4rem;
- text-align: center;
- position: absolute;
- width: 100%;
- top: 52%;
- left: 50%;
- transform: translate(-50%, -50%);
-}
-
-.number {
- background: #eee;
- color: #333;
- font-size: 6rem;
- width: 15rem;
- padding: 3rem 0rem;
- text-align: center;
- position: absolute;
- bottom: 0;
- left: 50%;
- transform: translate(-50%, 50%);
-}
-
-.between {
- font-size: 1.4rem;
- position: absolute;
- top: 2rem;
- right: 2rem;
-}
-
-.again {
- position: absolute;
- top: 2rem;
- left: 2rem;
-}
-
-.guess {
- background: none;
- border: 4px solid #eee;
- font-family: inherit;
- color: inherit;
- font-size: 5rem;
- padding: 2.5rem;
- width: 25rem;
- text-align: center;
- display: block;
- margin-bottom: 3rem;
-}
-
-.btn {
- border: none;
- background-color: #eee;
- color: #222;
- font-size: 2rem;
- font-family: inherit;
- padding: 2rem 3rem;
- cursor: pointer;
-}
-
-.btn:hover {
- background-color: #ccc;
-}
-
-.message {
- margin-bottom: 8rem;
- height: 3rem;
-}
-
-.label-score {
- margin-bottom: 2rem;
-}
diff --git a/06-Modal/final/.prettierrc b/06-Modal/final/.prettierrc
deleted file mode 100644
index b4f8e6a6a1..0000000000
--- a/06-Modal/final/.prettierrc
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "singleQuote": true,
- "arrowParens": "avoid"
-}
diff --git a/06-Modal/final/index.html b/06-Modal/final/index.html
deleted file mode 100644
index cb0458612b..0000000000
--- a/06-Modal/final/index.html
+++ /dev/null
@@ -1,32 +0,0 @@
-
-
-
- Modal window
-
-
- Show modal 1
- Show modal 2
- Show modal 3
-
-
-
×
-
I'm a modal window ๐
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
- tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
- veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
- commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
- velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
- occaecat cupidatat non proident, sunt in culpa qui officia deserunt
- mollit anim id est laborum.
-
-
-
-
-
-
diff --git a/06-Modal/final/script.js b/06-Modal/final/script.js
deleted file mode 100644
index bc4028350e..0000000000
--- a/06-Modal/final/script.js
+++ /dev/null
@@ -1,30 +0,0 @@
-'use strict';
-
-const modal = document.querySelector('.modal');
-const overlay = document.querySelector('.overlay');
-const btnCloseModal = document.querySelector('.close-modal');
-const btnsOpenModal = document.querySelectorAll('.show-modal');
-
-const openModal = function () {
- modal.classList.remove('hidden');
- overlay.classList.remove('hidden');
-};
-
-const closeModal = function () {
- modal.classList.add('hidden');
- overlay.classList.add('hidden');
-};
-
-for (let i = 0; i < btnsOpenModal.length; i++)
- btnsOpenModal[i].addEventListener('click', openModal);
-
-btnCloseModal.addEventListener('click', closeModal);
-overlay.addEventListener('click', closeModal);
-
-document.addEventListener('keydown', function (e) {
- // console.log(e.key);
-
- if (e.key === 'Escape' && !modal.classList.contains('hidden')) {
- closeModal();
- }
-});
diff --git a/06-Modal/final/style.css b/06-Modal/final/style.css
deleted file mode 100644
index 47c6861f1e..0000000000
--- a/06-Modal/final/style.css
+++ /dev/null
@@ -1,85 +0,0 @@
-* {
- margin: 0;
- padding: 0;
- box-sizing: inherit;
-}
-
-html {
- font-size: 62.5%;
- box-sizing: border-box;
-}
-
-body {
- font-family: sans-serif;
- color: #333;
- line-height: 1.5;
- height: 100vh;
- position: relative;
- display: flex;
- align-items: flex-start;
- justify-content: center;
- background: linear-gradient(to top left, #28b487, #7dd56f);
-}
-
-.show-modal {
- font-size: 2rem;
- font-weight: 600;
- padding: 1.75rem 3.5rem;
- margin: 5rem 2rem;
- border: none;
- background-color: #fff;
- color: #444;
- border-radius: 10rem;
- cursor: pointer;
-}
-
-.close-modal {
- position: absolute;
- top: 1.2rem;
- right: 2rem;
- font-size: 5rem;
- color: #333;
- cursor: pointer;
- border: none;
- background: none;
-}
-
-h1 {
- font-size: 2.5rem;
- margin-bottom: 2rem;
-}
-
-p {
- font-size: 1.8rem;
-}
-
-/* -------------------------- */
-/* CLASSES TO MAKE MODAL WORK */
-.hidden {
- display: none;
-}
-
-.modal {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- width: 70%;
-
- background-color: white;
- padding: 6rem;
- border-radius: 5px;
- box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3);
- z-index: 10;
-}
-
-.overlay {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background-color: rgba(0, 0, 0, 0.6);
- backdrop-filter: blur(3px);
- z-index: 5;
-}
diff --git a/06-Modal/starter/.prettierrc b/06-Modal/starter/.prettierrc
deleted file mode 100644
index b4f8e6a6a1..0000000000
--- a/06-Modal/starter/.prettierrc
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "singleQuote": true,
- "arrowParens": "avoid"
-}
diff --git a/06-Modal/starter/index.html b/06-Modal/starter/index.html
deleted file mode 100644
index cb0458612b..0000000000
--- a/06-Modal/starter/index.html
+++ /dev/null
@@ -1,32 +0,0 @@
-
-
-
- Modal window
-
-
- Show modal 1
- Show modal 2
- Show modal 3
-
-
-
×
-
I'm a modal window ๐
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
- tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
- veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
- commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
- velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
- occaecat cupidatat non proident, sunt in culpa qui officia deserunt
- mollit anim id est laborum.
-
-
-
-
-
-
diff --git a/06-Modal/starter/script.js b/06-Modal/starter/script.js
deleted file mode 100644
index ad9a93a7c1..0000000000
--- a/06-Modal/starter/script.js
+++ /dev/null
@@ -1 +0,0 @@
-'use strict';
diff --git a/06-Modal/starter/style.css b/06-Modal/starter/style.css
deleted file mode 100644
index 47c6861f1e..0000000000
--- a/06-Modal/starter/style.css
+++ /dev/null
@@ -1,85 +0,0 @@
-* {
- margin: 0;
- padding: 0;
- box-sizing: inherit;
-}
-
-html {
- font-size: 62.5%;
- box-sizing: border-box;
-}
-
-body {
- font-family: sans-serif;
- color: #333;
- line-height: 1.5;
- height: 100vh;
- position: relative;
- display: flex;
- align-items: flex-start;
- justify-content: center;
- background: linear-gradient(to top left, #28b487, #7dd56f);
-}
-
-.show-modal {
- font-size: 2rem;
- font-weight: 600;
- padding: 1.75rem 3.5rem;
- margin: 5rem 2rem;
- border: none;
- background-color: #fff;
- color: #444;
- border-radius: 10rem;
- cursor: pointer;
-}
-
-.close-modal {
- position: absolute;
- top: 1.2rem;
- right: 2rem;
- font-size: 5rem;
- color: #333;
- cursor: pointer;
- border: none;
- background: none;
-}
-
-h1 {
- font-size: 2.5rem;
- margin-bottom: 2rem;
-}
-
-p {
- font-size: 1.8rem;
-}
-
-/* -------------------------- */
-/* CLASSES TO MAKE MODAL WORK */
-.hidden {
- display: none;
-}
-
-.modal {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- width: 70%;
-
- background-color: white;
- padding: 6rem;
- border-radius: 5px;
- box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3);
- z-index: 10;
-}
-
-.overlay {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background-color: rgba(0, 0, 0, 0.6);
- backdrop-filter: blur(3px);
- z-index: 5;
-}
diff --git a/07-Pig-Game/final/.prettierrc b/07-Pig-Game/final/.prettierrc
deleted file mode 100644
index b4f8e6a6a1..0000000000
--- a/07-Pig-Game/final/.prettierrc
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "singleQuote": true,
- "arrowParens": "avoid"
-}
diff --git a/07-Pig-Game/final/index.html b/07-Pig-Game/final/index.html
deleted file mode 100644
index f72c8f4e92..0000000000
--- a/07-Pig-Game/final/index.html
+++ /dev/null
@@ -1,36 +0,0 @@
-
-
-
- Pig Game
-
-
-
-
-
-
- ๐ New game
- ๐ฒ Roll dice
- ๐ฅ Hold
-
-
-
-
diff --git a/07-Pig-Game/final/pig-game-flowchart.png b/07-Pig-Game/final/pig-game-flowchart.png
deleted file mode 100644
index d807a5d40e..0000000000
Binary files a/07-Pig-Game/final/pig-game-flowchart.png and /dev/null differ
diff --git a/07-Pig-Game/final/script.js b/07-Pig-Game/final/script.js
deleted file mode 100644
index aa191032be..0000000000
--- a/07-Pig-Game/final/script.js
+++ /dev/null
@@ -1,98 +0,0 @@
-'use strict';
-
-// Selecting elements
-const player0El = document.querySelector('.player--0');
-const player1El = document.querySelector('.player--1');
-const score0El = document.querySelector('#score--0');
-const score1El = document.getElementById('score--1');
-const current0El = document.getElementById('current--0');
-const current1El = document.getElementById('current--1');
-
-const diceEl = document.querySelector('.dice');
-const btnNew = document.querySelector('.btn--new');
-const btnRoll = document.querySelector('.btn--roll');
-const btnHold = document.querySelector('.btn--hold');
-
-let scores, currentScore, activePlayer, playing;
-
-// Starting conditions
-const init = function () {
- scores = [0, 0];
- currentScore = 0;
- activePlayer = 0;
- playing = true;
-
- score0El.textContent = 0;
- score1El.textContent = 0;
- current0El.textContent = 0;
- current1El.textContent = 0;
-
- diceEl.classList.add('hidden');
- player0El.classList.remove('player--winner');
- player1El.classList.remove('player--winner');
- player0El.classList.add('player--active');
- player1El.classList.remove('player--active');
-};
-init();
-
-const switchPlayer = function () {
- document.getElementById(`current--${activePlayer}`).textContent = 0;
- currentScore = 0;
- activePlayer = activePlayer === 0 ? 1 : 0;
- player0El.classList.toggle('player--active');
- player1El.classList.toggle('player--active');
-};
-
-// Rolling dice functionality
-btnRoll.addEventListener('click', function () {
- if (playing) {
- // 1. Generating a random dice roll
- const dice = Math.trunc(Math.random() * 6) + 1;
-
- // 2. Display dice
- diceEl.classList.remove('hidden');
- diceEl.src = `dice-${dice}.png`;
-
- // 3. Check for rolled 1
- if (dice !== 1) {
- // Add dice to current score
- currentScore += dice;
- document.getElementById(
- `current--${activePlayer}`
- ).textContent = currentScore;
- } else {
- // Switch to next player
- switchPlayer();
- }
- }
-});
-
-btnHold.addEventListener('click', function () {
- if (playing) {
- // 1. Add current score to active player's score
- scores[activePlayer] += currentScore;
- // scores[1] = scores[1] + currentScore
-
- document.getElementById(`score--${activePlayer}`).textContent =
- scores[activePlayer];
-
- // 2. Check if player's score is >= 100
- if (scores[activePlayer] >= 100) {
- // Finish the game
- playing = false;
- diceEl.classList.add('hidden');
-
- document
- .querySelector(`.player--${activePlayer}`)
- .classList.add('player--winner');
- document
- .querySelector(`.player--${activePlayer}`)
- .classList.remove('player--active');
- } else {
- // Switch to the next player
- switchPlayer();
- }
- }
-});
-
-btnNew.addEventListener('click', init);
diff --git a/07-Pig-Game/final/style.css b/07-Pig-Game/final/style.css
deleted file mode 100644
index 555ea263e0..0000000000
--- a/07-Pig-Game/final/style.css
+++ /dev/null
@@ -1,171 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
-
-* {
- margin: 0;
- padding: 0;
- box-sizing: inherit;
-}
-
-html {
- font-size: 62.5%;
- box-sizing: border-box;
-}
-
-body {
- font-family: 'Nunito', sans-serif;
- font-weight: 400;
- height: 100vh;
- color: #333;
- background-image: linear-gradient(to top left, #753682 0%, #bf2e34 100%);
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-/* LAYOUT */
-main {
- position: relative;
- width: 100rem;
- height: 60rem;
- background-color: rgba(255, 255, 255, 0.35);
- backdrop-filter: blur(200px);
- filter: blur();
- box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.25);
- border-radius: 9px;
- overflow: hidden;
- display: flex;
-}
-
-.player {
- flex: 50%;
- padding: 9rem;
- display: flex;
- flex-direction: column;
- align-items: center;
- transition: all 0.75s;
-}
-
-/* ELEMENTS */
-.name {
- position: relative;
- font-size: 4rem;
- text-transform: uppercase;
- letter-spacing: 1px;
- word-spacing: 2px;
- font-weight: 300;
- margin-bottom: 1rem;
-}
-
-.score {
- font-size: 8rem;
- font-weight: 300;
- color: #c7365f;
- margin-bottom: auto;
-}
-
-.player--active {
- background-color: rgba(255, 255, 255, 0.4);
-}
-.player--active .name {
- font-weight: 700;
-}
-.player--active .score {
- font-weight: 400;
-}
-
-.player--active .current {
- opacity: 1;
-}
-
-.current {
- background-color: #c7365f;
- opacity: 0.8;
- border-radius: 9px;
- color: #fff;
- width: 65%;
- padding: 2rem;
- text-align: center;
- transition: all 0.75s;
-}
-
-.current-label {
- text-transform: uppercase;
- margin-bottom: 1rem;
- font-size: 1.7rem;
- color: #ddd;
-}
-
-.current-score {
- font-size: 3.5rem;
-}
-
-/* ABSOLUTE POSITIONED ELEMENTS */
-.btn {
- position: absolute;
- left: 50%;
- transform: translateX(-50%);
- color: #444;
- background: none;
- border: none;
- font-family: inherit;
- font-size: 1.8rem;
- text-transform: uppercase;
- cursor: pointer;
- font-weight: 400;
- transition: all 0.2s;
-
- background-color: white;
- background-color: rgba(255, 255, 255, 0.6);
- backdrop-filter: blur(10px);
-
- padding: 0.7rem 2.5rem;
- border-radius: 50rem;
- box-shadow: 0 1.75rem 3.5rem rgba(0, 0, 0, 0.1);
-}
-
-.btn::first-letter {
- font-size: 2.4rem;
- display: inline-block;
- margin-right: 0.7rem;
-}
-
-.btn--new {
- top: 4rem;
-}
-.btn--roll {
- top: 39.3rem;
-}
-.btn--hold {
- top: 46.1rem;
-}
-
-.btn:active {
- transform: translate(-50%, 3px);
- box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15);
-}
-
-.btn:focus {
- outline: none;
-}
-
-.dice {
- position: absolute;
- left: 50%;
- top: 16.5rem;
- transform: translateX(-50%);
- height: 10rem;
- box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.2);
-}
-
-.player--winner {
- background-color: #2f2f2f;
-}
-
-.player--winner .name {
- font-weight: 700;
- color: #c7365f;
-}
-
-.hidden {
- display: none;
-}
diff --git a/07-Pig-Game/starter/.prettierrc b/07-Pig-Game/starter/.prettierrc
deleted file mode 100644
index b4f8e6a6a1..0000000000
--- a/07-Pig-Game/starter/.prettierrc
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "singleQuote": true,
- "arrowParens": "avoid"
-}
diff --git a/07-Pig-Game/starter/index.html b/07-Pig-Game/starter/index.html
deleted file mode 100644
index f72c8f4e92..0000000000
--- a/07-Pig-Game/starter/index.html
+++ /dev/null
@@ -1,36 +0,0 @@
-
-
-
- Pig Game
-
-
-
-
-
-
- ๐ New game
- ๐ฒ Roll dice
- ๐ฅ Hold
-
-
-
-
diff --git a/07-Pig-Game/starter/pig-game-flowchart.png b/07-Pig-Game/starter/pig-game-flowchart.png
deleted file mode 100644
index 2e51a84f36..0000000000
Binary files a/07-Pig-Game/starter/pig-game-flowchart.png and /dev/null differ
diff --git a/07-Pig-Game/starter/script.js b/07-Pig-Game/starter/script.js
deleted file mode 100644
index ad9a93a7c1..0000000000
--- a/07-Pig-Game/starter/script.js
+++ /dev/null
@@ -1 +0,0 @@
-'use strict';
diff --git a/07-Pig-Game/starter/style.css b/07-Pig-Game/starter/style.css
deleted file mode 100644
index dcf788f011..0000000000
--- a/07-Pig-Game/starter/style.css
+++ /dev/null
@@ -1,167 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
-
-* {
- margin: 0;
- padding: 0;
- box-sizing: inherit;
-}
-
-html {
- font-size: 62.5%;
- box-sizing: border-box;
-}
-
-body {
- font-family: 'Nunito', sans-serif;
- font-weight: 400;
- height: 100vh;
- color: #333;
- background-image: linear-gradient(to top left, #753682 0%, #bf2e34 100%);
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-/* LAYOUT */
-main {
- position: relative;
- width: 100rem;
- height: 60rem;
- background-color: rgba(255, 255, 255, 0.35);
- backdrop-filter: blur(200px);
- filter: blur();
- box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.25);
- border-radius: 9px;
- overflow: hidden;
- display: flex;
-}
-
-.player {
- flex: 50%;
- padding: 9rem;
- display: flex;
- flex-direction: column;
- align-items: center;
- transition: all 0.75s;
-}
-
-/* ELEMENTS */
-.name {
- position: relative;
- font-size: 4rem;
- text-transform: uppercase;
- letter-spacing: 1px;
- word-spacing: 2px;
- font-weight: 300;
- margin-bottom: 1rem;
-}
-
-.score {
- font-size: 8rem;
- font-weight: 300;
- color: #c7365f;
- margin-bottom: auto;
-}
-
-.player--active {
- background-color: rgba(255, 255, 255, 0.4);
-}
-.player--active .name {
- font-weight: 700;
-}
-.player--active .score {
- font-weight: 400;
-}
-
-.player--active .current {
- opacity: 1;
-}
-
-.current {
- background-color: #c7365f;
- opacity: 0.8;
- border-radius: 9px;
- color: #fff;
- width: 65%;
- padding: 2rem;
- text-align: center;
- transition: all 0.75s;
-}
-
-.current-label {
- text-transform: uppercase;
- margin-bottom: 1rem;
- font-size: 1.7rem;
- color: #ddd;
-}
-
-.current-score {
- font-size: 3.5rem;
-}
-
-/* ABSOLUTE POSITIONED ELEMENTS */
-.btn {
- position: absolute;
- left: 50%;
- transform: translateX(-50%);
- color: #444;
- background: none;
- border: none;
- font-family: inherit;
- font-size: 1.8rem;
- text-transform: uppercase;
- cursor: pointer;
- font-weight: 400;
- transition: all 0.2s;
-
- background-color: white;
- background-color: rgba(255, 255, 255, 0.6);
- backdrop-filter: blur(10px);
-
- padding: 0.7rem 2.5rem;
- border-radius: 50rem;
- box-shadow: 0 1.75rem 3.5rem rgba(0, 0, 0, 0.1);
-}
-
-.btn::first-letter {
- font-size: 2.4rem;
- display: inline-block;
- margin-right: 0.7rem;
-}
-
-.btn--new {
- top: 4rem;
-}
-.btn--roll {
- top: 39.3rem;
-}
-.btn--hold {
- top: 46.1rem;
-}
-
-.btn:active {
- transform: translate(-50%, 3px);
- box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15);
-}
-
-.btn:focus {
- outline: none;
-}
-
-.dice {
- position: absolute;
- left: 50%;
- top: 16.5rem;
- transform: translateX(-50%);
- height: 10rem;
- box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.2);
-}
-
-.player--winner {
- background-color: #2f2f2f;
-}
-
-.player--winner .name {
- font-weight: 700;
- color: #c7365f;
-}
diff --git a/08-Behind-the-Scenes/final/.prettierrc b/08-Behind-the-Scenes/final/.prettierrc
deleted file mode 100644
index b4f8e6a6a1..0000000000
--- a/08-Behind-the-Scenes/final/.prettierrc
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "singleQuote": true,
- "arrowParens": "avoid"
-}
diff --git a/08-Behind-the-Scenes/final/index.html b/08-Behind-the-Scenes/final/index.html
deleted file mode 100644
index 7bd55f4ef0..0000000000
--- a/08-Behind-the-Scenes/final/index.html
+++ /dev/null
@@ -1,30 +0,0 @@
-
-
-
- How JavaScript Works Behind the Scenes
-
-
-
- How JavaScript Works Behind the Scenes
-
-
-
diff --git a/08-Behind-the-Scenes/final/script.js b/08-Behind-the-Scenes/final/script.js
deleted file mode 100644
index 6a9596f614..0000000000
--- a/08-Behind-the-Scenes/final/script.js
+++ /dev/null
@@ -1,233 +0,0 @@
-'use strict';
-
-///////////////////////////////////////
-// Scoping in Practice
-
-/*
-function calcAge(birthYear) {
- const age = 2037 - birthYear;
-
- function printAge() {
- let output = `${firstName}, you are ${age}, born in ${birthYear}`;
- console.log(output);
-
- if (birthYear >= 1981 && birthYear <= 1996) {
- var millenial = true;
- // Creating NEW variable with same name as outer scope's variable
- const firstName = 'Steven';
-
- // Reasssigning outer scope's variable
- output = 'NEW OUTPUT!';
-
- const str = `Oh, and you're a millenial, ${firstName}`;
- console.log(str);
-
- function add(a, b) {
- return a + b;
- }
- }
- // console.log(str);
- console.log(millenial);
- // console.log(add(2, 3));
- console.log(output);
- }
- printAge();
-
- return age;
-}
-
-const firstName = 'Jonas';
-calcAge(1991);
-// console.log(age);
-// printAge();
-
-
-///////////////////////////////////////
-// Hoisting and TDZ in Practice
-
-// Variables
-console.log(me);
-// console.log(job);
-// console.log(year);
-
-var me = 'Jonas';
-let job = 'teacher';
-const year = 1991;
-
-// Functions
-console.log(addDecl(2, 3));
-// console.log(addExpr(2, 3));
-console.log(addArrow);
-// console.log(addArrow(2, 3));
-
-function addDecl(a, b) {
- return a + b;
-}
-
-const addExpr = function (a, b) {
- return a + b;
-};
-
-var addArrow = (a, b) => a + b;
-
-// Example
-console.log(undefined);
-if (!numProducts) deleteShoppingCart();
-
-var numProducts = 10;
-
-function deleteShoppingCart() {
- console.log('All products deleted!');
-}
-
-var x = 1;
-let y = 2;
-const z = 3;
-
-console.log(x === window.x);
-console.log(y === window.y);
-console.log(z === window.z);
-
-
-///////////////////////////////////////
-// The this Keyword in Practice
-console.log(this);
-
-const calcAge = function (birthYear) {
- console.log(2037 - birthYear);
- console.log(this);
-};
-calcAge(1991);
-
-const calcAgeArrow = birthYear => {
- console.log(2037 - birthYear);
- console.log(this);
-};
-calcAgeArrow(1980);
-
-const jonas = {
- year: 1991,
- calcAge: function () {
- console.log(this);
- console.log(2037 - this.year);
- },
-};
-jonas.calcAge();
-
-const matilda = {
- year: 2017,
-};
-
-matilda.calcAge = jonas.calcAge;
-matilda.calcAge();
-
-const f = jonas.calcAge;
-f();
-
-
-///////////////////////////////////////
-// Regular Functions vs. Arrow Functions
-// var firstName = 'Matilda';
-
-const jonas = {
- firstName: 'Jonas',
- year: 1991,
- calcAge: function () {
- // console.log(this);
- console.log(2037 - this.year);
-
- // Solution 1
- // const self = this; // self or that
- // const isMillenial = function () {
- // console.log(self);
- // console.log(self.year >= 1981 && self.year <= 1996);
- // };
-
- // Solution 2
- const isMillenial = () => {
- console.log(this);
- console.log(this.year >= 1981 && this.year <= 1996);
- };
- isMillenial();
- },
-
- greet: () => {
- console.log(this);
- console.log(`Hey ${this.firstName}`);
- },
-};
-jonas.greet();
-jonas.calcAge();
-
-// arguments keyword
-const addExpr = function (a, b) {
- console.log(arguments);
- return a + b;
-};
-addExpr(2, 5);
-addExpr(2, 5, 8, 12);
-
-var addArrow = (a, b) => {
- console.log(arguments);
- return a + b;
-};
-addArrow(2, 5, 8);
-
-
-///////////////////////////////////////
-// Objects vs. primitives
-let age = 30;
-let oldAge = age;
-age = 31;
-console.log(age);
-console.log(oldAge);
-
-const me = {
- name: 'Jonas',
- age: 30,
-};
-const friend = me;
-friend.age = 27;
-console.log('Friend:', friend);
-console.log('Me', me);
-
-
-///////////////////////////////////////
-// Primitives vs. Objects in Practice
-
-// Primitive types
-let lastName = 'Williams';
-let oldLastName = lastName;
-lastName = 'Davis';
-console.log(lastName, oldLastName);
-
-// Reference types
-const jessica = {
- firstName: 'Jessica',
- lastName: 'Williams',
- age: 27,
-};
-const marriedJessica = jessica;
-marriedJessica.lastName = 'Davis';
-console.log('Before marriage:', jessica);
-console.log('After marriage: ', marriedJessica);
-// marriedJessica = {};
-
-// Copying objects
-const jessica2 = {
- firstName: 'Jessica',
- lastName: 'Williams',
- age: 27,
- family: ['Alice', 'Bob'],
-};
-
-const jessicaCopy = Object.assign({}, jessica2);
-jessicaCopy.lastName = 'Davis';
-
-jessicaCopy.family.push('Mary');
-jessicaCopy.family.push('John');
-
-console.log('Before marriage:', jessica2);
-console.log('After marriage: ', jessicaCopy);
-*/
-
diff --git a/08-Behind-the-Scenes/starter/.prettierrc b/08-Behind-the-Scenes/starter/.prettierrc
deleted file mode 100644
index b4f8e6a6a1..0000000000
--- a/08-Behind-the-Scenes/starter/.prettierrc
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "singleQuote": true,
- "arrowParens": "avoid"
-}
diff --git a/08-Behind-the-Scenes/starter/index.html b/08-Behind-the-Scenes/starter/index.html
deleted file mode 100644
index 7bd55f4ef0..0000000000
--- a/08-Behind-the-Scenes/starter/index.html
+++ /dev/null
@@ -1,30 +0,0 @@
-
-
-
- How JavaScript Works Behind the Scenes
-
-
-
- How JavaScript Works Behind the Scenes
-
-
-
diff --git a/08-Behind-the-Scenes/starter/script.js b/08-Behind-the-Scenes/starter/script.js
deleted file mode 100644
index ad9a93a7c1..0000000000
--- a/08-Behind-the-Scenes/starter/script.js
+++ /dev/null
@@ -1 +0,0 @@
-'use strict';
diff --git a/09-Data-Structures-Operators/final/.prettierrc b/09-Data-Structures-Operators/final/.prettierrc
deleted file mode 100644
index b4f8e6a6a1..0000000000
--- a/09-Data-Structures-Operators/final/.prettierrc
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "singleQuote": true,
- "arrowParens": "avoid"
-}
diff --git a/09-Data-Structures-Operators/final/index.html b/09-Data-Structures-Operators/final/index.html
deleted file mode 100644
index 7d248b95f5..0000000000
--- a/09-Data-Structures-Operators/final/index.html
+++ /dev/null
@@ -1,39 +0,0 @@
-
-
-
- Data Structures and Modern Operators
-
-
-
- Data Structures and Modern Operators
-
-
-
diff --git a/09-Data-Structures-Operators/final/script.js b/09-Data-Structures-Operators/final/script.js
deleted file mode 100644
index 29daadacb8..0000000000
--- a/09-Data-Structures-Operators/final/script.js
+++ /dev/null
@@ -1,863 +0,0 @@
-'use strict';
-
-const weekdays = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];
-const openingHours = {
- [weekdays[3]]: {
- open: 12,
- close: 22,
- },
- [weekdays[4]]: {
- open: 11,
- close: 23,
- },
- [weekdays[5]]: {
- open: 0, // Open 24 hours
- close: 24,
- },
-};
-
-const restaurant = {
- name: 'Classico Italiano',
- location: 'Via Angelo Tavanti 23, Firenze, Italy',
- categories: ['Italian', 'Pizzeria', 'Vegetarian', 'Organic'],
- starterMenu: ['Focaccia', 'Bruschetta', 'Garlic Bread', 'Caprese Salad'],
- mainMenu: ['Pizza', 'Pasta', 'Risotto'],
-
- // ES6 enhanced object literals
- openingHours,
-
- order(starterIndex, mainIndex) {
- return [this.starterMenu[starterIndex], this.mainMenu[mainIndex]];
- },
-
- orderDelivery({ starterIndex = 1, mainIndex = 0, time = '20:00', address }) {
- console.log(
- `Order received! ${this.starterMenu[starterIndex]} and ${this.mainMenu[mainIndex]} will be delivered to ${address} at ${time}`
- );
- },
-
- orderPasta(ing1, ing2, ing3) {
- console.log(
- `Here is your declicious pasta with ${ing1}, ${ing2} and ${ing3}`
- );
- },
-
- orderPizza(mainIngredient, ...otherIngredients) {
- console.log(mainIngredient);
- console.log(otherIngredients);
- },
-};
-
-///////////////////////////////////////
-// Coding Challenge #4
-
-/*
-Write a program that receives a list of variable names written in underscore_case and convert them to camelCase.
-
-The input will come from a textarea inserted into the DOM (see code below), and conversion will happen when the button is pressed.
-
-THIS TEST DATA (pasted to textarea)
-underscore_case
- first_name
-Some_Variable
- calculate_AGE
-delayed_departure
-
-SHOULD PRODUCE THIS OUTPUT (5 separate console.log outputs)
-underscoreCase โ
-firstName โ
โ
-someVariable โ
โ
โ
-calculateAge โ
โ
โ
โ
-delayedDeparture โ
โ
โ
โ
โ
-
-HINT 1: Remember which character defines a new line in the textarea ๐
-HINT 2: The solution only needs to work for a variable made out of 2 words, like a_b
-HINT 3: Start without worrying about the โ
. Tackle that only after you have the variable name conversion working ๐
-HINT 4: This challenge is difficult on purpose, so start watching the solution in case you're stuck. Then pause and continue!
-
-Afterwards, test with your own test data!
-
-GOOD LUCK ๐
-*/
-
-/*
-document.body.append(document.createElement('textarea'));
-document.body.append(document.createElement('button'));
-
-document.querySelector('button').addEventListener('click', function () {
- const text = document.querySelector('textarea').value;
- const rows = text.split('\n');
-
- for (const [i, row] of rows.entries()) {
- const [first, second] = row.toLowerCase().trim().split('_');
-
- const output = `${first}${second.replace(
- second[0],
- second[0].toUpperCase()
- )}`;
- console.log(`${output.padEnd(20)}${'โ
'.repeat(i + 1)}`);
- }
-});
-*/
-
-/*
-///////////////////////////////////////
-// Working With Strings - Part 2
-
-// Split and join
-console.log('a+very+nice+string'.split('+'));
-console.log('Jonas Schmedtmann'.split(' '));
-
-const [firstName, lastName] = 'Jonas Schmedtmann'.split(' ');
-
-const newName = ['Mr.', firstName, lastName.toUpperCase()].join(' ');
-console.log(newName);
-
-const capitalizeName = function (name) {
- const names = name.split(' ');
- const namesUpper = [];
-
- for (const n of names) {
- // namesUpper.push(n[0].toUpperCase() + n.slice(1));
- namesUpper.push(n.replace(n[0], n[0].toUpperCase()));
- }
- console.log(namesUpper.join(' '));
-};
-
-capitalizeName('jessica ann smith davis');
-capitalizeName('jonas schmedtmann');
-
-// Padding
-const message = 'Go to gate 23!';
-console.log(message.padStart(20, '+').padEnd(30, '+'));
-console.log('Jonas'.padStart(20, '+').padEnd(30, '+'));
-
-const maskCreditCard = function (number) {
- const str = number + '';
- const last = str.slice(-4);
- return last.padStart(str.length, '*');
-};
-
-console.log(maskCreditCard(64637836));
-console.log(maskCreditCard(43378463864647384));
-console.log(maskCreditCard('334859493847755774747'));
-
-// Repeat
-const message2 = 'Bad waether... All Departues Delayed... ';
-console.log(message2.repeat(5));
-
-const planesInLine = function (n) {
- console.log(`There are ${n} planes in line ${'๐ฉ'.repeat(n)}`);
-};
-planesInLine(5);
-planesInLine(3);
-planesInLine(12);
-
-
-///////////////////////////////////////
-// Working With Strings - Part 2
-
-const airline = 'TAP Air Portugal';
-
-console.log(airline.toLowerCase());
-console.log(airline.toUpperCase());
-
-// Fix capitalization in name
-const passenger = 'jOnAS'; // Jonas
-const passengerLower = passenger.toLowerCase();
-const passengerCorrect =
- passengerLower[0].toUpperCase() + passengerLower.slice(1);
-console.log(passengerCorrect);
-
-// Comparing emails
-const email = 'hello@jonas.io';
-const loginEmail = ' Hello@Jonas.Io \n';
-
-// const lowerEmail = loginEmail.toLowerCase();
-// const trimmedEmail = lowerEmail.trim();
-const normalizedEmail = loginEmail.toLowerCase().trim();
-console.log(normalizedEmail);
-console.log(email === normalizedEmail);
-
-// replacing
-const priceGB = '288,97ยฃ';
-const priceUS = priceGB.replace('ยฃ', '$').replace(',', '.');
-console.log(priceUS);
-
-const announcement =
- 'All passengers come to boarding door 23. Boarding door 23!';
-
-console.log(announcement.replace('door', 'gate'));
-// console.log(announcement.replaceAll('door', 'gate'));
-console.log(announcement.replace(/door/g, 'gate'));
-
-// Booleans
-const plane = 'Airbus A320neo';
-console.log(plane.includes('A320'));
-console.log(plane.includes('Boeing'));
-console.log(plane.startsWith('Airb'));
-
-if (plane.startsWith('Airbus') && plane.endsWith('neo')) {
- console.log('Part of the NEW ARirbus family');
-}
-
-// Practice exercise
-const checkBaggage = function (items) {
- const baggage = items.toLowerCase();
-
- if (baggage.includes('knife') || baggage.includes('gun')) {
- console.log('You are NOT allowed on board');
- } else {
- console.log('Welcome aboard!');
- }
-};
-
-checkBaggage('I have a laptop, some Food and a pocket Knife');
-checkBaggage('Socks and camera');
-checkBaggage('Got some snacks and a gun for protection');
-
-
-///////////////////////////////////////
-// Working With Strings - Part 1
-const airline = 'TAP Air Portugal';
-const plane = 'A320';
-
-console.log(plane[0]);
-console.log(plane[1]);
-console.log(plane[2]);
-console.log('B737'[0]);
-
-console.log(airline.length);
-console.log('B737'.length);
-
-console.log(airline.indexOf('r'));
-console.log(airline.lastIndexOf('r'));
-console.log(airline.indexOf('portugal'));
-
-console.log(airline.slice(4));
-console.log(airline.slice(4, 7));
-
-console.log(airline.slice(0, airline.indexOf(' ')));
-console.log(airline.slice(airline.lastIndexOf(' ') + 1));
-
-console.log(airline.slice(-2));
-console.log(airline.slice(1, -1));
-
-const checkMiddleSeat = function (seat) {
- // B and E are middle seats
- const s = seat.slice(-1);
- if (s === 'B' || s === 'E') console.log('You got the middle seat ๐ฌ');
- else console.log('You got lucky ๐');
-};
-
-checkMiddleSeat('11B');
-checkMiddleSeat('23C');
-checkMiddleSeat('3E');
-
-console.log(new String('jonas'));
-console.log(typeof new String('jonas'));
-
-console.log(typeof new String('jonas').slice(1));
-*/
-
-///////////////////////////////////////
-// Coding Challenge #3
-
-/*
-Let'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).
-
-1. Create an array 'events' of the different game events that happened (no duplicates)
-2. 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.
-3. Print the following string to the console: "An event happened, on average, every 9 minutes" (keep in mind that a game has 90 minutes)
-4. 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:
- [FIRST HALF] 17: โฝ๏ธ GOAL
-
-GOOD LUCK ๐
-*/
-
-const gameEvents = new Map([
- [17, 'โฝ๏ธ GOAL'],
- [36, '๐ Substitution'],
- [47, 'โฝ๏ธ GOAL'],
- [61, '๐ Substitution'],
- [64, '๐ถ Yellow card'],
- [69, '๐ด Red card'],
- [70, '๐ Substitution'],
- [72, '๐ Substitution'],
- [76, 'โฝ๏ธ GOAL'],
- [80, 'โฝ๏ธ GOAL'],
- [92, '๐ถ Yellow card'],
-]);
-
-/*
-// 1.
-const events = [...new Set(gameEvents.values())];
-console.log(events);
-
-// 2.
-gameEvents.delete(64);
-
-// 3.
-console.log(
- `An event happened, on average, every ${90 / gameEvents.size} minutes`
-);
-const time = [...gameEvents.keys()].pop();
-console.log(time);
-console.log(
- `An event happened, on average, every ${time / gameEvents.size} minutes`
-);
-
-// 4.
-for (const [min, event] of gameEvents) {
- const half = min <= 45 ? 'FIRST' : 'SECOND';
- console.log(`[${half} HALF] ${min}: ${event}`);
-}
-*/
-
-/*
-///////////////////////////////////////
-// Maps: Iteration
-const question = new Map([
- ['question', 'What is the best programming language in the world?'],
- [1, 'C'],
- [2, 'Java'],
- [3, 'JavaScript'],
- ['correct', 3],
- [true, 'Correct ๐'],
- [false, 'Try again!'],
-]);
-console.log(question);
-
-// Convert object to map
-console.log(Object.entries(openingHours));
-const hoursMap = new Map(Object.entries(openingHours));
-console.log(hoursMap);
-
-// Quiz app
-console.log(question.get('question'));
-for (const [key, value] of question) {
- if (typeof key === 'number') console.log(`Answer ${key}: ${value}`);
-}
-// const answer = Number(prompt('Your answer'));
-const answer = 3;
-console.log(answer);
-
-console.log(question.get(question.get('correct') === answer));
-
-// Convert map to array
-console.log([...question]);
-// console.log(question.entries());
-console.log([...question.keys()]);
-console.log([...question.values()]);
-
-
-///////////////////////////////////////
-// Maps: Fundamentals
-const rest = new Map();
-rest.set('name', 'Classico Italiano');
-rest.set(1, 'Firenze, Italy');
-console.log(rest.set(2, 'Lisbon, Portugal'));
-
-rest
- .set('categories', ['Italian', 'Pizzeria', 'Vegetarian', 'Organic'])
- .set('open', 11)
- .set('close', 23)
- .set(true, 'We are open :D')
- .set(false, 'We are closed :(');
-
-console.log(rest.get('name'));
-console.log(rest.get(true));
-console.log(rest.get(1));
-
-const time = 8;
-console.log(rest.get(time > rest.get('open') && time < rest.get('close')));
-
-console.log(rest.has('categories'));
-rest.delete(2);
-// rest.clear();
-
-const arr = [1, 2];
-rest.set(arr, 'Test');
-rest.set(document.querySelector('h1'), 'Heading');
-console.log(rest);
-console.log(rest.size);
-
-console.log(rest.get(arr));
-
-
-///////////////////////////////////////
-// Sets
-const ordersSet = new Set([
- 'Pasta',
- 'Pizza',
- 'Pizza',
- 'Risotto',
- 'Pasta',
- 'Pizza',
-]);
-console.log(ordersSet);
-
-console.log(new Set('Jonas'));
-
-console.log(ordersSet.size);
-console.log(ordersSet.has('Pizza'));
-console.log(ordersSet.has('Bread'));
-ordersSet.add('Garlic Bread');
-ordersSet.add('Garlic Bread');
-ordersSet.delete('Risotto');
-// ordersSet.clear();
-console.log(ordersSet);
-
-for (const order of ordersSet) console.log(order);
-
-// Example
-const staff = ['Waiter', 'Chef', 'Waiter', 'Manager', 'Chef', 'Waiter'];
-const staffUnique = [...new Set(staff)];
-console.log(staffUnique);
-
-console.log(
- new Set(['Waiter', 'Chef', 'Waiter', 'Manager', 'Chef', 'Waiter']).size
-);
-
-console.log(new Set('jonasschmedtmann').size);
-*/
-
-///////////////////////////////////////
-// Coding Challenge #2
-
-/*
-Let's continue with our football betting app!
-
-1. Loop over the game.scored array and print each player name to the console, along with the goal number (Example: "Goal 1: Lewandowski")
-2. Use a loop to calculate the average odd and log it to the console (We already studied how to calculate averages, you can go check if you don't remember)
-3. Print the 3 odds to the console, but in a nice formatted way, exaclty like this:
- Odd of victory Bayern Munich: 1.33
- Odd of draw: 3.25
- Odd of victory Borrussia Dortmund: 6.5
-Get the team names directly from the game object, don't hardcode them (except for "draw"). HINT: Note how the odds and the game objects have the same property names ๐
-
-BONUS: Create an object called 'scorers' which contains the names of the players who scored as properties, and the number of goals as the value. In this game, it will look like this:
- {
- Gnarby: 1,
- Hummels: 1,
- Lewandowski: 2
- }
-
-GOOD LUCK ๐
-*/
-
-const game = {
- team1: 'Bayern Munich',
- team2: 'Borrussia Dortmund',
- players: [
- [
- 'Neuer',
- 'Pavard',
- 'Martinez',
- 'Alaba',
- 'Davies',
- 'Kimmich',
- 'Goretzka',
- 'Coman',
- 'Muller',
- 'Gnarby',
- 'Lewandowski',
- ],
- [
- 'Burki',
- 'Schulz',
- 'Hummels',
- 'Akanji',
- 'Hakimi',
- 'Weigl',
- 'Witsel',
- 'Hazard',
- 'Brandt',
- 'Sancho',
- 'Gotze',
- ],
- ],
- score: '4:0',
- scored: ['Lewandowski', 'Gnarby', 'Lewandowski', 'Hummels'],
- date: 'Nov 9th, 2037',
- odds: {
- team1: 1.33,
- x: 3.25,
- team2: 6.5,
- },
-};
-
-/*
-// 1.
-for (const [i, player] of game.scored.entries())
- console.log(`Goal ${i + 1}: ${player}`);
-
-// 2.
-const odds = Object.values(game.odds);
-let average = 0;
-for (const odd of odds) average += odd;
-average /= odds.length;
-console.log(average);
-
-// 3.
-for (const [team, odd] of Object.entries(game.odds)) {
- const teamStr = team === 'x' ? 'draw' : `victory ${game[team]}`;
- console.log(`Odd of ${teamStr} ${odd}`);
-}
-
-// Odd of victory Bayern Munich: 1.33
-// Odd of draw: 3.25
-// Odd of victory Borrussia Dortmund: 6.5
-
-// BONUS
-// 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
-const scorers = {};
-for (const player of game.scored) {
- scorers[player] ? scorers[player]++ : (scorers[player] = 1);
-}
-*/
-
-/*
-///////////////////////////////////////
-// Looping Objects: Object Keys, Values, and Entries
-
-// Property NAMES
-const properties = Object.keys(openingHours);
-console.log(properties);
-
-let openStr = `We are open on ${properties.length} days: `;
-for (const day of properties) {
- openStr += `${day}, `;
-}
-console.log(openStr);
-
-// Property VALUES
-const values = Object.values(openingHours);
-console.log(values);
-
-// Entire object
-const entries = Object.entries(openingHours);
-// console.log(entries);
-
-// [key, value]
-for (const [day, { open, close }] of entries) {
- console.log(`On ${day} we open at ${open} and close at ${close}`);
-}
-
-
-///////////////////////////////////////
-// Optional Chaining
-if (restaurant.openingHours && restaurant.openingHours.mon)
- console.log(restaurant.openingHours.mon.open);
-
-// console.log(restaurant.openingHours.mon.open);
-
-// WITH optional chaining
-console.log(restaurant.openingHours.mon?.open);
-console.log(restaurant.openingHours?.mon?.open);
-
-// Example
-const days = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'];
-
-for (const day of days) {
- const open = restaurant.openingHours[day]?.open ?? 'closed';
- console.log(`On ${day}, we open at ${open}`);
-}
-
-// Methods
-console.log(restaurant.order?.(0, 1) ?? 'Method does not exist');
-console.log(restaurant.orderRisotto?.(0, 1) ?? 'Method does not exist');
-
-// Arrays
-const users = [{ name: 'Jonas', email: 'hello@jonas.io' }];
-// const users = [];
-
-console.log(users[0]?.name ?? 'User array empty');
-
-if (users.length > 0) console.log(users[0].name);
-else console.log('user array empty');
-
-
-///////////////////////////////////////
-// The for-of Loop
-const menu = [...restaurant.starterMenu, ...restaurant.mainMenu];
-
-for (const item of menu) console.log(item);
-
-for (const [i, el] of menu.entries()) {
- console.log(`${i + 1}: ${el}`);
-}
-
-// console.log([...menu.entries()]);
-*/
-
-///////////////////////////////////////
-// Coding Challenge #1
-
-/*
-We're building a football betting app (soccer for my American friends ๐
)!
-
-Suppose we get data from a web service about a certain game (below). In this challenge we're gonna work with the data. So here are your tasks:
-
-1. Create one player array for each team (variables 'players1' and 'players2')
-2. The first player in any player array is the goalkeeper and the others are field players. For Bayern Munich (team 1) create one variable ('gk') with the goalkeeper's name, and one array ('fieldPlayers') with all the remaining 10 field players
-3. Create an array 'allPlayers' containing all players of both teams (22 players)
-4. During the game, Bayern Munich (team 1) used 3 substitute players. So create a new array ('players1Final') containing all the original team1 players plus 'Thiago', 'Coutinho' and 'Perisic'
-5. Based on the game.odds object, create one variable for each odd (called 'team1', 'draw' and 'team2')
-6. Write a function ('printGoals') that receives an arbitrary number of player names (NOT an array) and prints each of them to the console, along with the number of goals that were scored in total (number of player names passed in)
-7. The team with the lower odd is more likely to win. Print to the console which team is more likely to win, WITHOUT using an if/else statement or the ternary operator.
-
-TEST DATA FOR 6: Use players 'Davies', 'Muller', 'Lewandowski' and 'Kimmich'. Then, call the function again with players from game.scored
-
-GOOD LUCK ๐
-*/
-
-/*
-// 1.
-const [players1, players2] = game.players;
-console.log(players1, players2);
-
-// 2.
-const [gk, ...fieldPlayers] = players1;
-console.log(gk, fieldPlayers);
-
-// 3.
-const allPlayers = [...players1, ...players2];
-console.log(allPlayers);
-
-// 4.
-const players1Final = [...players1, 'Thiago', 'Coutinho', 'Periscic'];
-
-// 5.
-const {
- odds: { team1, x: draw, team2 },
-} = game;
-console.log(team1, draw, team2);
-
-// 6.
-const printGoals = function (...players) {
- console.log(players);
- console.log(`${players.length} goals were scored`);
-};
-
-// printGoals('Davies', 'Muller', 'Lewandowski', 'Kimmich');
-// printGoals('Davies', 'Muller');
-printGoals(...game.scored);
-
-// 7.
-team1 < team2 && console.log('Team 1 is more likely to win');
-team1 > team2 && console.log('Team 2 is more likely to win');
-
-
-///////////////////////////////////////
-// The Nullish Coalescing Operator
-restaurant.numGuests = 0;
-const guests = restaurant.numGuests || 10;
-console.log(guests);
-
-// Nullish: null and undefined (NOT 0 or '')
-const guestCorrect = restaurant.numGuests ?? 10;
-console.log(guestCorrect);
-
-///////////////////////////////////////
-// Short Circuiting (&& and ||)
-
-console.log('---- OR ----');
-// Use ANY data type, return ANY data type, short-circuiting
-console.log(3 || 'Jonas');
-console.log('' || 'Jonas');
-console.log(true || 0);
-console.log(undefined || null);
-
-console.log(undefined || 0 || '' || 'Hello' || 23 || null);
-
-restaurant.numGuests = 0;
-const guests1 = restaurant.numGuests ? restaurant.numGuests : 10;
-console.log(guests1);
-
-const guests2 = restaurant.numGuests || 10;
-console.log(guests2);
-
-console.log('---- AND ----');
-console.log(0 && 'Jonas');
-console.log(7 && 'Jonas');
-
-console.log('Hello' && 23 && null && 'jonas');
-
-// Practical example
-if (restaurant.orderPizza) {
- restaurant.orderPizza('mushrooms', 'spinach');
-}
-
-restaurant.orderPizza && restaurant.orderPizza('mushrooms', 'spinach');
-
-
-///////////////////////////////////////
-// Rest Pattern and Parameters
-// 1) Destructuring
-
-// SPREAD, because on RIGHT side of =
-const arr = [1, 2, ...[3, 4]];
-
-// REST, because on LEFT side of =
-const [a, b, ...others] = [1, 2, 3, 4, 5];
-console.log(a, b, others);
-
-const [pizza, , risotto, ...otherFood] = [
- ...restaurant.mainMenu,
- ...restaurant.starterMenu,
-];
-console.log(pizza, risotto, otherFood);
-
-// Objects
-const { sat, ...weekdays } = restaurant.openingHours;
-console.log(weekdays);
-
-// 2) Functions
-const add = function (...numbers) {
- let sum = 0;
- for (let i = 0; i < numbers.length; i++) sum += numbers[i];
- console.log(sum);
-};
-
-add(2, 3);
-add(5, 3, 7, 2);
-add(8, 2, 5, 3, 2, 1, 4);
-
-const x = [23, 5, 7];
-add(...x);
-
-restaurant.orderPizza('mushrooms', 'onion', 'olives', 'spinach');
-restaurant.orderPizza('mushrooms');
-
-
-///////////////////////////////////////
-// The Spread Operator (...)
-
-const arr = [7, 8, 9];
-const badNewArr = [1, 2, arr[0], arr[1], arr[2]];
-console.log(badNewArr);
-
-const newArr = [1, 2, ...arr];
-console.log(newArr);
-
-console.log(...newArr);
-console.log(1, 2, 7, 8, 9);
-
-const newMenu = [...restaurant.mainMenu, 'Gnocci'];
-console.log(newMenu);
-
-// Copy array
-const mainMenuCopy = [...restaurant.mainMenu];
-
-// Join 2 arrays
-const menu = [...restaurant.starterMenu, ...restaurant.mainMenu];
-console.log(menu);
-
-// Iterables: arrays, strings, maps, sets. NOT objects
-const str = 'Jonas';
-const letters = [...str, ' ', 'S.'];
-console.log(letters);
-console.log(...str);
-// console.log(`${...str} Schmedtmann`);
-
-// Real-world example
-const ingredients = [
- // prompt("Let's make pasta! Ingredient 1?"),
- // prompt('Ingredient 2?'),
- // prompt('Ingredient 3'),
-];
-console.log(ingredients);
-
-restaurant.orderPasta(ingredients[0], ingredients[1], ingredients[2]);
-restaurant.orderPasta(...ingredients);
-
-// Objects
-const newRestaurant = { foundedIn: 1998, ...restaurant, founder: 'Guiseppe' };
-console.log(newRestaurant);
-
-const restaurantCopy = { ...restaurant };
-restaurantCopy.name = 'Ristorante Roma';
-console.log(restaurantCopy.name);
-console.log(restaurant.name);
-
-
-///////////////////////////////////////
-// Destructuring Objects
-restaurant.orderDelivery({
- time: '22:30',
- address: 'Via del Sole, 21',
- mainIndex: 2,
- starterIndex: 2,
-});
-
-restaurant.orderDelivery({
- address: 'Via del Sole, 21',
- starterIndex: 1,
-});
-
-const { name, openingHours, categories } = restaurant;
-console.log(name, openingHours, categories);
-
-const {
- name: restaurantName,
- openingHours: hours,
- categories: tags,
-} = restaurant;
-console.log(restaurantName, hours, tags);
-
-// Default values
-const { menu = [], starterMenu: starters = [] } = restaurant;
-console.log(menu, starters);
-
-// Mutating variables
-let a = 111;
-let b = 999;
-const obj = { a: 23, b: 7, c: 14 };
-({ a, b } = obj);
-console.log(a, b);
-
-// Nested objects
-const {
- fri: { open: o, close: c },
-} = openingHours;
-console.log(o, c);
-
-
-///////////////////////////////////////
-// Destructuring Arrays
-const arr = [2, 3, 4];
-const a = arr[0];
-const b = arr[1];
-const c = arr[2];
-
-const [x, y, z] = arr;
-console.log(x, y, z);
-console.log(arr);
-
-let [main, , secondary] = restaurant.categories;
-console.log(main, secondary);
-
-// Switching variables
-// const temp = main;
-// main = secondary;
-// secondary = temp;
-// console.log(main, secondary);
-
-[main, secondary] = [secondary, main];
-console.log(main, secondary);
-
-// Receive 2 return values from a function
-const [starter, mainCourse] = restaurant.order(2, 0);
-console.log(starter, mainCourse);
-
-// Nested destructuring
-const nested = [2, 4, [5, 6]];
-// const [i, , j] = nested;
-const [i, , [j, k]] = nested;
-console.log(i, j, k);
-
-// Default values
-const [p = 1, q = 1, r = 1] = [8, 9];
-console.log(p, q, r);
-*/
diff --git a/09-Data-Structures-Operators/starter/.prettierrc b/09-Data-Structures-Operators/starter/.prettierrc
deleted file mode 100644
index b4f8e6a6a1..0000000000
--- a/09-Data-Structures-Operators/starter/.prettierrc
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "singleQuote": true,
- "arrowParens": "avoid"
-}
diff --git a/09-Data-Structures-Operators/starter/index.html b/09-Data-Structures-Operators/starter/index.html
deleted file mode 100644
index 7d248b95f5..0000000000
--- a/09-Data-Structures-Operators/starter/index.html
+++ /dev/null
@@ -1,39 +0,0 @@
-
-
-
- Data Structures and Modern Operators
-
-
-
- Data Structures and Modern Operators
-
-
-
diff --git a/09-Data-Structures-Operators/starter/script.js b/09-Data-Structures-Operators/starter/script.js
deleted file mode 100644
index e28a59b46e..0000000000
--- a/09-Data-Structures-Operators/starter/script.js
+++ /dev/null
@@ -1,24 +0,0 @@
-'use strict';
-
-const restaurant = {
- name: 'Classico Italiano',
- location: 'Via Angelo Tavanti 23, Firenze, Italy',
- categories: ['Italian', 'Pizzeria', 'Vegetarian', 'Organic'],
- starterMenu: ['Focaccia', 'Bruschetta', 'Garlic Bread', 'Caprese Salad'],
- mainMenu: ['Pizza', 'Pasta', 'Risotto'],
-
- openingHours: {
- thu: {
- open: 12,
- close: 22,
- },
- fri: {
- open: 11,
- close: 23,
- },
- sat: {
- open: 0, // Open 24 hours
- close: 24,
- },
- },
-};
diff --git a/10-Functions/final/.prettierrc b/10-Functions/final/.prettierrc
deleted file mode 100644
index b4f8e6a6a1..0000000000
--- a/10-Functions/final/.prettierrc
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "singleQuote": true,
- "arrowParens": "avoid"
-}
diff --git a/10-Functions/final/index.html b/10-Functions/final/index.html
deleted file mode 100644
index 5555734b8a..0000000000
--- a/10-Functions/final/index.html
+++ /dev/null
@@ -1,45 +0,0 @@
-
-
-
- A Closer Look at Functions
-
-
-
- A Closer Look at Functions
- Buy new plane ๐ฉ
- Answer poll โ๏ธ
-
-
-
diff --git a/10-Functions/final/script.js b/10-Functions/final/script.js
deleted file mode 100644
index aa2292ad30..0000000000
--- a/10-Functions/final/script.js
+++ /dev/null
@@ -1,410 +0,0 @@
-'use strict';
-
-/*
-///////////////////////////////////////
-// Default Parameters
-const bookings = [];
-
-const createBooking = function (
- flightNum,
- numPassengers = 1,
- price = 199 * numPassengers
-) {
- // ES5
- // numPassengers = numPassengers || 1;
- // price = price || 199;
-
- const booking = {
- flightNum,
- numPassengers,
- price,
- };
- console.log(booking);
- bookings.push(booking);
-};
-
-createBooking('LH123');
-createBooking('LH123', 2, 800);
-createBooking('LH123', 2);
-createBooking('LH123', 5);
-
-createBooking('LH123', undefined, 1000);
-
-
-///////////////////////////////////////
-// How Passing Arguments Works: Values vs. Reference
-const flight = 'LH234';
-const jonas = {
- name: 'Jonas Schmedtmann',
- passport: 24739479284,
-};
-
-const checkIn = function (flightNum, passenger) {
- flightNum = 'LH999';
- passenger.name = 'Mr. ' + passenger.name;
-
- if (passenger.passport === 24739479284) {
- alert('Checked in');
- } else {
- alert('Wrong passport!');
- }
-};
-
-// checkIn(flight, jonas);
-// console.log(flight);
-// console.log(jonas);
-
-// Is the same as doing...
-// const flightNum = flight;
-// const passenger = jonas;
-
-const newPassport = function (person) {
- person.passport = Math.trunc(Math.random() * 100000000000);
-};
-
-newPassport(jonas);
-checkIn(flight, jonas);
-
-
-///////////////////////////////////////
-// Functions Accepting Callback Functions
-const oneWord = function (str) {
- return str.replace(/ /g, '').toLowerCase();
-};
-
-const upperFirstWord = function (str) {
- const [first, ...others] = str.split(' ');
- return [first.toUpperCase(), ...others].join(' ');
-};
-
-// Higher-order function
-const transformer = function (str, fn) {
- console.log(`Original string: ${str}`);
- console.log(`Transformed string: ${fn(str)}`);
-
- console.log(`Transformed by: ${fn.name}`);
-};
-
-transformer('JavaScript is the best!', upperFirstWord);
-transformer('JavaScript is the best!', oneWord);
-
-// JS uses callbacks all the time
-const high5 = function () {
- console.log('๐');
-};
-document.body.addEventListener('click', high5);
-['Jonas', 'Martha', 'Adam'].forEach(high5);
-
-
-///////////////////////////////////////
-// Functions Returning Functions
-const greet = function (greeting) {
- return function (name) {
- console.log(`${greeting} ${name}`);
- };
-};
-
-const greeterHey = greet('Hey');
-greeterHey('Jonas');
-greeterHey('Steven');
-
-greet('Hello')('Jonas');
-
-// Challenge
-const greetArr = greeting => name => console.log(`${greeting} ${name}`);
-
-greetArr('Hi')('Jonas');
-
-
-///////////////////////////////////////
-// The call and apply Methods
-const lufthansa = {
- airline: 'Lufthansa',
- iataCode: 'LH',
- bookings: [],
- // book: function() {}
- book(flightNum, name) {
- console.log(
- `${name} booked a seat on ${this.airline} flight ${this.iataCode}${flightNum}`
- );
- this.bookings.push({ flight: `${this.iataCode}${flightNum}`, name });
- },
-};
-
-lufthansa.book(239, 'Jonas Schmedtmann');
-lufthansa.book(635, 'John Smith');
-
-const eurowings = {
- airline: 'Eurowings',
- iataCode: 'EW',
- bookings: [],
-};
-
-const book = lufthansa.book;
-
-// Does NOT work
-// book(23, 'Sarah Williams');
-
-// Call method
-book.call(eurowings, 23, 'Sarah Williams');
-console.log(eurowings);
-
-book.call(lufthansa, 239, 'Mary Cooper');
-console.log(lufthansa);
-
-const swiss = {
- airline: 'Swiss Air Lines',
- iataCode: 'LX',
- bookings: [],
-};
-
-book.call(swiss, 583, 'Mary Cooper');
-
-// Apply method
-const flightData = [583, 'George Cooper'];
-book.apply(swiss, flightData);
-console.log(swiss);
-
-book.call(swiss, ...flightData);
-
-///////////////////////////////////////
-// The bind Method
-// book.call(eurowings, 23, 'Sarah Williams');
-
-const bookEW = book.bind(eurowings);
-const bookLH = book.bind(lufthansa);
-const bookLX = book.bind(swiss);
-
-bookEW(23, 'Steven Williams');
-
-const bookEW23 = book.bind(eurowings, 23);
-bookEW23('Jonas Schmedtmann');
-bookEW23('Martha Cooper');
-
-// With Event Listeners
-lufthansa.planes = 300;
-lufthansa.buyPlane = function () {
- console.log(this);
-
- this.planes++;
- console.log(this.planes);
-};
-// lufthansa.buyPlane();
-
-document
- .querySelector('.buy')
- .addEventListener('click', lufthansa.buyPlane.bind(lufthansa));
-
-// Partial application
-const addTax = (rate, value) => value + value * rate;
-console.log(addTax(0.1, 200));
-
-const addVAT = addTax.bind(null, 0.23);
-// addVAT = value => value + value * 0.23;
-
-console.log(addVAT(100));
-console.log(addVAT(23));
-
-const addTaxRate = function (rate) {
- return function (value) {
- return value + value * rate;
- };
-};
-const addVAT2 = addTaxRate(0.23);
-console.log(addVAT2(100));
-console.log(addVAT2(23));
-*/
-
-///////////////////////////////////////
-// Coding Challenge #1
-
-/*
-Let's build a simple poll app!
-
-A 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.
-
-Here are your tasks:
-
-1. Create a method called 'registerNewAnswer' on the 'poll' object. The method does 2 things:
- 1.1. Display a prompt window for the user to input the number of the selected option. The prompt should look like this:
- What is your favourite programming language?
- 0: JavaScript
- 1: Python
- 2: Rust
- 3: C++
- (Write option number)
-
- 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?)
-2. Call this method whenever the user clicks the "Answer poll" button.
-3. 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".
-4. Run the 'displayResults' method at the end of each 'registerNewAnswer' method call.
-
-HINT: Use many of the tools you learned about in this and the last section ๐
-
-BONUS: 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?
-
-BONUS TEST DATA 1: [5, 2, 3]
-BONUS TEST DATA 2: [1, 5, 3, 9, 6, 1]
-
-GOOD LUCK ๐
-*/
-
-/*
-const poll = {
- question: 'What is your favourite programming language?',
- options: ['0: JavaScript', '1: Python', '2: Rust', '3: C++'],
- // This generates [0, 0, 0, 0]. More in the next section ๐
- answers: new Array(4).fill(0),
- registerNewAnswer() {
- // Get answer
- const answer = Number(
- prompt(
- `${this.question}\n${this.options.join('\n')}\n(Write option number)`
- )
- );
- console.log(answer);
-
- // Register answer
- typeof answer === 'number' &&
- answer < this.answers.length &&
- this.answers[answer]++;
-
- this.displayResults();
- this.displayResults('string');
- },
-
- displayResults(type = 'array') {
- if (type === 'array') {
- console.log(this.answers);
- } else if (type === 'string') {
- // Poll results are 13, 2, 4, 1
- console.log(`Poll results are ${this.answers.join(', ')}`);
- }
- },
-};
-
-document
- .querySelector('.poll')
- .addEventListener('click', poll.registerNewAnswer.bind(poll));
-
-poll.displayResults.call({ answers: [5, 2, 3] }, 'string');
-poll.displayResults.call({ answers: [1, 5, 3, 9, 6, 1] }, 'string');
-poll.displayResults.call({ answers: [1, 5, 3, 9, 6, 1] });
-
-// [5, 2, 3]
-// [1, 5, 3, 9, 6, 1]
-
-
-///////////////////////////////////////
-// Immediately Invoked Function Expressions (IIFE)
-const runOnce = function () {
- console.log('This will never run again');
-};
-runOnce();
-
-// IIFE
-(function () {
- console.log('This will never run again');
- const isPrivate = 23;
-})();
-
-// console.log(isPrivate);
-
-(() => console.log('This will ALSO never run again'))();
-
-{
- const isPrivate = 23;
- var notPrivate = 46;
-}
-// console.log(isPrivate);
-console.log(notPrivate);
-
-
-///////////////////////////////////////
-// Closures
-const secureBooking = function () {
- let passengerCount = 0;
-
- return function () {
- passengerCount++;
- console.log(`${passengerCount} passengers`);
- };
-};
-
-const booker = secureBooking();
-
-booker();
-booker();
-booker();
-
-console.dir(booker);
-
-
-///////////////////////////////////////
-// More Closure Examples
-// Example 1
-let f;
-
-const g = function () {
- const a = 23;
- f = function () {
- console.log(a * 2);
- };
-};
-
-const h = function () {
- const b = 777;
- f = function () {
- console.log(b * 2);
- };
-};
-
-g();
-f();
-console.dir(f);
-
-// Re-assigning f function
-h();
-f();
-console.dir(f);
-
-// Example 2
-const boardPassengers = function (n, wait) {
- const perGroup = n / 3;
-
- setTimeout(function () {
- console.log(`We are now boarding all ${n} passengers`);
- console.log(`There are 3 groups, each with ${perGroup} passengers`);
- }, wait * 1000);
-
- console.log(`Will start boarding in ${wait} seconds`);
-};
-
-const perGroup = 1000;
-boardPassengers(180, 3);
-*/
-
-///////////////////////////////////////
-// Coding Challenge #2
-
-/*
-This is more of a thinking challenge than a coding challenge ๐ค
-
-Take 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!
-
-And 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.
-
-GOOD LUCK ๐
-*/
-
-/*
-(function () {
- const header = document.querySelector('h1');
- header.style.color = 'red';
-
- document.querySelector('body').addEventListener('click', function () {
- header.style.color = 'blue';
- });
-})();
-*/
-
diff --git a/10-Functions/starter/.prettierrc b/10-Functions/starter/.prettierrc
deleted file mode 100644
index b4f8e6a6a1..0000000000
--- a/10-Functions/starter/.prettierrc
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "singleQuote": true,
- "arrowParens": "avoid"
-}
diff --git a/10-Functions/starter/index.html b/10-Functions/starter/index.html
deleted file mode 100644
index 5555734b8a..0000000000
--- a/10-Functions/starter/index.html
+++ /dev/null
@@ -1,45 +0,0 @@
-
-
-
- A Closer Look at Functions
-
-
-
- A Closer Look at Functions
- Buy new plane ๐ฉ
- Answer poll โ๏ธ
-
-
-
diff --git a/10-Functions/starter/script.js b/10-Functions/starter/script.js
deleted file mode 100644
index ad9a93a7c1..0000000000
--- a/10-Functions/starter/script.js
+++ /dev/null
@@ -1 +0,0 @@
-'use strict';
diff --git a/11-Arrays-Bankist/final/.prettierrc b/11-Arrays-Bankist/final/.prettierrc
deleted file mode 100644
index b4f8e6a6a1..0000000000
--- a/11-Arrays-Bankist/final/.prettierrc
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "singleQuote": true,
- "arrowParens": "avoid"
-}
diff --git a/11-Arrays-Bankist/final/Bankist-flowchart.png b/11-Arrays-Bankist/final/Bankist-flowchart.png
deleted file mode 100644
index 7c4923c3ef..0000000000
Binary files a/11-Arrays-Bankist/final/Bankist-flowchart.png and /dev/null differ
diff --git a/11-Arrays-Bankist/final/icon.png b/11-Arrays-Bankist/final/icon.png
deleted file mode 100644
index d00606eab8..0000000000
Binary files a/11-Arrays-Bankist/final/icon.png and /dev/null differ
diff --git a/11-Arrays-Bankist/final/index.html b/11-Arrays-Bankist/final/index.html
deleted file mode 100644
index 6a46971703..0000000000
--- a/11-Arrays-Bankist/final/index.html
+++ /dev/null
@@ -1,128 +0,0 @@
-
-
-
- Bankist
-
-
-
-
- Log in to get started
-
-
-
-
-
-
-
Current balance
-
- As of 05/03/2037
-
-
-
0000โฌ
-
-
-
2 deposit
-
3 days ago
-
4 000โฌ
-
-
-
- 1 withdrawal
-
-
24/01/2037
-
-378โฌ
-
-
-
In
-
0000โฌ
-
Out
-
0000โฌ
-
Interest
-
0000โฌ
-
↓ SORT
-
-
Transfer money
-
-
-
-
-
-
Request loan
-
-
-
-
-
-
Close account
-
-
-
-
-
- You will be logged out in 05:00
-
-
-
-
-
-
-
-
diff --git a/11-Arrays-Bankist/final/logo.png b/11-Arrays-Bankist/final/logo.png
deleted file mode 100644
index f437ac24f3..0000000000
Binary files a/11-Arrays-Bankist/final/logo.png and /dev/null differ
diff --git a/11-Arrays-Bankist/final/script.js b/11-Arrays-Bankist/final/script.js
deleted file mode 100644
index 1821f0a0ab..0000000000
--- a/11-Arrays-Bankist/final/script.js
+++ /dev/null
@@ -1,727 +0,0 @@
-'use strict';
-
-/////////////////////////////////////////////////
-/////////////////////////////////////////////////
-// BANKIST APP
-
-/////////////////////////////////////////////////
-// Data
-const account1 = {
- owner: 'Jonas Schmedtmann',
- movements: [200, 450, -400, 3000, -650, -130, 70, 1300],
- interestRate: 1.2, // %
- pin: 1111,
-};
-
-const account2 = {
- owner: 'Jessica Davis',
- movements: [5000, 3400, -150, -790, -3210, -1000, 8500, -30],
- interestRate: 1.5,
- pin: 2222,
-};
-
-const account3 = {
- owner: 'Steven Thomas Williams',
- movements: [200, -200, 340, -300, -20, 50, 400, -460],
- interestRate: 0.7,
- pin: 3333,
-};
-
-const account4 = {
- owner: 'Sarah Smith',
- movements: [430, 1000, 700, 50, 90],
- interestRate: 1,
- pin: 4444,
-};
-
-const accounts = [account1, account2, account3, account4];
-
-/////////////////////////////////////////////////
-// Elements
-const labelWelcome = document.querySelector('.welcome');
-const labelDate = document.querySelector('.date');
-const labelBalance = document.querySelector('.balance__value');
-const labelSumIn = document.querySelector('.summary__value--in');
-const labelSumOut = document.querySelector('.summary__value--out');
-const labelSumInterest = document.querySelector('.summary__value--interest');
-const labelTimer = document.querySelector('.timer');
-
-const containerApp = document.querySelector('.app');
-const containerMovements = document.querySelector('.movements');
-
-const btnLogin = document.querySelector('.login__btn');
-const btnTransfer = document.querySelector('.form__btn--transfer');
-const btnLoan = document.querySelector('.form__btn--loan');
-const btnClose = document.querySelector('.form__btn--close');
-const btnSort = document.querySelector('.btn--sort');
-
-const inputLoginUsername = document.querySelector('.login__input--user');
-const inputLoginPin = document.querySelector('.login__input--pin');
-const inputTransferTo = document.querySelector('.form__input--to');
-const inputTransferAmount = document.querySelector('.form__input--amount');
-const inputLoanAmount = document.querySelector('.form__input--loan-amount');
-const inputCloseUsername = document.querySelector('.form__input--user');
-const inputClosePin = document.querySelector('.form__input--pin');
-
-/////////////////////////////////////////////////
-// Functions
-
-const displayMovements = function (movements, sort = false) {
- containerMovements.innerHTML = '';
-
- const movs = sort ? movements.slice().sort((a, b) => a - b) : movements;
-
- movs.forEach(function (mov, i) {
- const type = mov > 0 ? 'deposit' : 'withdrawal';
-
- const html = `
-
-
${
- i + 1
- } ${type}
-
${mov}โฌ
-
Bankist
-
-
-
-
- Log in to get started
-
-
-
-
-
-
-
Current balance
-
- As of 05/03/2037
-
-
-
0000โฌ
-
-
-
2 deposit
-
3 days ago
-
4 000โฌ
-
-
-
- 1 withdrawal
-
-
24/01/2037
-
-378โฌ
-
-
-
In
-
0000โฌ
-
Out
-
0000โฌ
-
Interest
-
0000โฌ
-
↓ SORT
-
-
Transfer money
-
-
-
-
-
-
Request loan
-
-
-
-
-
-
Close account
-
-
-
-
-
- You will be logged out in 05:00
-
-
-
-
-
-
-
-
diff --git a/11-Arrays-Bankist/starter/logo.png b/11-Arrays-Bankist/starter/logo.png
deleted file mode 100644
index f437ac24f3..0000000000
Binary files a/11-Arrays-Bankist/starter/logo.png and /dev/null differ
diff --git a/11-Arrays-Bankist/starter/script.js b/11-Arrays-Bankist/starter/script.js
deleted file mode 100644
index 05b54ddf31..0000000000
--- a/11-Arrays-Bankist/starter/script.js
+++ /dev/null
@@ -1,76 +0,0 @@
-'use strict';
-
-/////////////////////////////////////////////////
-/////////////////////////////////////////////////
-// BANKIST APP
-
-// Data
-const account1 = {
- owner: 'Jonas Schmedtmann',
- movements: [200, 450, -400, 3000, -650, -130, 70, 1300],
- interestRate: 1.2, // %
- pin: 1111,
-};
-
-const account2 = {
- owner: 'Jessica Davis',
- movements: [5000, 3400, -150, -790, -3210, -1000, 8500, -30],
- interestRate: 1.5,
- pin: 2222,
-};
-
-const account3 = {
- owner: 'Steven Thomas Williams',
- movements: [200, -200, 340, -300, -20, 50, 400, -460],
- interestRate: 0.7,
- pin: 3333,
-};
-
-const account4 = {
- owner: 'Sarah Smith',
- movements: [430, 1000, 700, 50, 90],
- interestRate: 1,
- pin: 4444,
-};
-
-const accounts = [account1, account2, account3, account4];
-
-// Elements
-const labelWelcome = document.querySelector('.welcome');
-const labelDate = document.querySelector('.date');
-const labelBalance = document.querySelector('.balance__value');
-const labelSumIn = document.querySelector('.summary__value--in');
-const labelSumOut = document.querySelector('.summary__value--out');
-const labelSumInterest = document.querySelector('.summary__value--interest');
-const labelTimer = document.querySelector('.timer');
-
-const containerApp = document.querySelector('.app');
-const containerMovements = document.querySelector('.movements');
-
-const btnLogin = document.querySelector('.login__btn');
-const btnTransfer = document.querySelector('.form__btn--transfer');
-const btnLoan = document.querySelector('.form__btn--loan');
-const btnClose = document.querySelector('.form__btn--close');
-const btnSort = document.querySelector('.btn--sort');
-
-const inputLoginUsername = document.querySelector('.login__input--user');
-const inputLoginPin = document.querySelector('.login__input--pin');
-const inputTransferTo = document.querySelector('.form__input--to');
-const inputTransferAmount = document.querySelector('.form__input--amount');
-const inputLoanAmount = document.querySelector('.form__input--loan-amount');
-const inputCloseUsername = document.querySelector('.form__input--user');
-const inputClosePin = document.querySelector('.form__input--pin');
-
-/////////////////////////////////////////////////
-/////////////////////////////////////////////////
-// LECTURES
-
-const currencies = new Map([
- ['USD', 'United States dollar'],
- ['EUR', 'Euro'],
- ['GBP', 'Pound sterling'],
-]);
-
-const movements = [200, 450, -400, 3000, -650, -130, 70, 1300];
-
-/////////////////////////////////////////////////
diff --git a/11-Arrays-Bankist/starter/style.css b/11-Arrays-Bankist/starter/style.css
deleted file mode 100644
index 05dcf39618..0000000000
--- a/11-Arrays-Bankist/starter/style.css
+++ /dev/null
@@ -1,297 +0,0 @@
-/*
- * Use this CSS to learn some intersting techniques,
- * in case you're wondering how I built the UI.
- * Have fun! ๐
- */
-
-* {
- margin: 0;
- padding: 0;
- box-sizing: inherit;
-}
-
-html {
- font-size: 62.5%;
- box-sizing: border-box;
-}
-
-body {
- font-family: "Poppins", sans-serif;
- color: #444;
- background-color: #f3f3f3;
- height: 100vh;
- padding: 2rem;
-}
-
-nav {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 0 2rem;
-}
-
-.welcome {
- font-size: 1.9rem;
- font-weight: 500;
-}
-
-.logo {
- height: 5.25rem;
-}
-
-.login {
- display: flex;
-}
-
-.login__input {
- border: none;
- padding: 0.5rem 2rem;
- font-size: 1.6rem;
- font-family: inherit;
- text-align: center;
- width: 12rem;
- border-radius: 10rem;
- margin-right: 1rem;
- color: inherit;
- border: 1px solid #fff;
- transition: all 0.3s;
-}
-
-.login__input:focus {
- outline: none;
- border: 1px solid #ccc;
-}
-
-.login__input::placeholder {
- color: #bbb;
-}
-
-.login__btn {
- border: none;
- background: none;
- font-size: 2.2rem;
- color: inherit;
- cursor: pointer;
- transition: all 0.3s;
-}
-
-.login__btn:hover,
-.login__btn:focus,
-.btn--sort:hover,
-.btn--sort:focus {
- outline: none;
- color: #777;
-}
-
-/* MAIN */
-.app {
- position: relative;
- max-width: 100rem;
- margin: 4rem auto;
- display: grid;
- grid-template-columns: 4fr 3fr;
- grid-template-rows: auto repeat(3, 15rem) auto;
- gap: 2rem;
-
- /* NOTE This creates the fade in/out anumation */
- opacity: 0;
- transition: all 1s;
-}
-
-.balance {
- grid-column: 1 / span 2;
- display: flex;
- align-items: flex-end;
- justify-content: space-between;
- margin-bottom: 2rem;
-}
-
-.balance__label {
- font-size: 2.2rem;
- font-weight: 500;
- margin-bottom: -0.2rem;
-}
-
-.balance__date {
- font-size: 1.4rem;
- color: #888;
-}
-
-.balance__value {
- font-size: 4.5rem;
- font-weight: 400;
-}
-
-/* MOVEMENTS */
-.movements {
- grid-row: 2 / span 3;
- background-color: #fff;
- border-radius: 1rem;
- overflow: scroll;
-}
-
-.movements__row {
- padding: 2.25rem 4rem;
- display: flex;
- align-items: center;
- border-bottom: 1px solid #eee;
-}
-
-.movements__type {
- font-size: 1.1rem;
- text-transform: uppercase;
- font-weight: 500;
- color: #fff;
- padding: 0.1rem 1rem;
- border-radius: 10rem;
- margin-right: 2rem;
-}
-
-.movements__date {
- font-size: 1.1rem;
- text-transform: uppercase;
- font-weight: 500;
- color: #666;
-}
-
-.movements__type--deposit {
- background-image: linear-gradient(to top left, #39b385, #9be15d);
-}
-
-.movements__type--withdrawal {
- background-image: linear-gradient(to top left, #e52a5a, #ff585f);
-}
-
-.movements__value {
- font-size: 1.7rem;
- margin-left: auto;
-}
-
-/* SUMMARY */
-.summary {
- grid-row: 5 / 6;
- display: flex;
- align-items: baseline;
- padding: 0 0.3rem;
- margin-top: 1rem;
-}
-
-.summary__label {
- font-size: 1.2rem;
- font-weight: 500;
- text-transform: uppercase;
- margin-right: 0.8rem;
-}
-
-.summary__value {
- font-size: 2.2rem;
- margin-right: 2.5rem;
-}
-
-.summary__value--in,
-.summary__value--interest {
- color: #66c873;
-}
-
-.summary__value--out {
- color: #f5465d;
-}
-
-.btn--sort {
- margin-left: auto;
- border: none;
- background: none;
- font-size: 1.3rem;
- font-weight: 500;
- cursor: pointer;
-}
-
-/* OPERATIONS */
-.operation {
- border-radius: 1rem;
- padding: 3rem 4rem;
- color: #333;
-}
-
-.operation--transfer {
- background-image: linear-gradient(to top left, #ffb003, #ffcb03);
-}
-
-.operation--loan {
- background-image: linear-gradient(to top left, #39b385, #9be15d);
-}
-
-.operation--close {
- background-image: linear-gradient(to top left, #e52a5a, #ff585f);
-}
-
-h2 {
- margin-bottom: 1.5rem;
- font-size: 1.7rem;
- font-weight: 600;
- color: #333;
-}
-
-.form {
- display: grid;
- grid-template-columns: 2.5fr 2.5fr 1fr;
- grid-template-rows: auto auto;
- gap: 0.4rem 1rem;
-}
-
-/* Exceptions for interst */
-.form.form--loan {
- grid-template-columns: 2.5fr 1fr 2.5fr;
-}
-.form__label--loan {
- grid-row: 2;
-}
-/* End exceptions */
-
-.form__input {
- width: 100%;
- border: none;
- background-color: rgba(255, 255, 255, 0.4);
- font-family: inherit;
- font-size: 1.5rem;
- text-align: center;
- color: #333;
- padding: 0.3rem 1rem;
- border-radius: 0.7rem;
- transition: all 0.3s;
-}
-
-.form__input:focus {
- outline: none;
- background-color: rgba(255, 255, 255, 0.6);
-}
-
-.form__label {
- font-size: 1.3rem;
- text-align: center;
-}
-
-.form__btn {
- border: none;
- border-radius: 0.7rem;
- font-size: 1.8rem;
- background-color: #fff;
- cursor: pointer;
- transition: all 0.3s;
-}
-
-.form__btn:focus {
- outline: none;
- background-color: rgba(255, 255, 255, 0.8);
-}
-
-.logout-timer {
- padding: 0 0.3rem;
- margin-top: 1.9rem;
- text-align: right;
- font-size: 1.25rem;
-}
-
-.timer {
- font-weight: 600;
-}
diff --git a/12-Numbers-Dates-Timers-Bankist/final/.prettierrc b/12-Numbers-Dates-Timers-Bankist/final/.prettierrc
deleted file mode 100644
index b4f8e6a6a1..0000000000
--- a/12-Numbers-Dates-Timers-Bankist/final/.prettierrc
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "singleQuote": true,
- "arrowParens": "avoid"
-}
diff --git a/12-Numbers-Dates-Timers-Bankist/final/Bankist-flowchart.png b/12-Numbers-Dates-Timers-Bankist/final/Bankist-flowchart.png
deleted file mode 100644
index 7c4923c3ef..0000000000
Binary files a/12-Numbers-Dates-Timers-Bankist/final/Bankist-flowchart.png and /dev/null differ
diff --git a/12-Numbers-Dates-Timers-Bankist/final/icon.png b/12-Numbers-Dates-Timers-Bankist/final/icon.png
deleted file mode 100644
index d00606eab8..0000000000
Binary files a/12-Numbers-Dates-Timers-Bankist/final/icon.png and /dev/null differ
diff --git a/12-Numbers-Dates-Timers-Bankist/final/index.html b/12-Numbers-Dates-Timers-Bankist/final/index.html
deleted file mode 100644
index 6a46971703..0000000000
--- a/12-Numbers-Dates-Timers-Bankist/final/index.html
+++ /dev/null
@@ -1,128 +0,0 @@
-
-
-
- Bankist
-
-
-
-
- Log in to get started
-
-
-
-
-
-
-
Current balance
-
- As of 05/03/2037
-
-
-
0000โฌ
-
-
-
2 deposit
-
3 days ago
-
4 000โฌ
-
-
-
- 1 withdrawal
-
-
24/01/2037
-
-378โฌ
-
-
-
In
-
0000โฌ
-
Out
-
0000โฌ
-
Interest
-
0000โฌ
-
↓ SORT
-
-
Transfer money
-
-
-
-
-
-
Request loan
-
-
-
-
-
-
Close account
-
-
-
-
-
- You will be logged out in 05:00
-
-
-
-
-
-
-
-
diff --git a/12-Numbers-Dates-Timers-Bankist/final/logo.png b/12-Numbers-Dates-Timers-Bankist/final/logo.png
deleted file mode 100644
index f437ac24f3..0000000000
Binary files a/12-Numbers-Dates-Timers-Bankist/final/logo.png and /dev/null differ
diff --git a/12-Numbers-Dates-Timers-Bankist/final/script.js b/12-Numbers-Dates-Timers-Bankist/final/script.js
deleted file mode 100644
index df64cbffa3..0000000000
--- a/12-Numbers-Dates-Timers-Bankist/final/script.js
+++ /dev/null
@@ -1,605 +0,0 @@
-'use strict';
-
-/////////////////////////////////////////////////
-/////////////////////////////////////////////////
-// BANKIST APP
-
-/////////////////////////////////////////////////
-// Data
-
-// DIFFERENT DATA! Contains movement dates, currency and locale
-
-const account1 = {
- owner: 'Jonas Schmedtmann',
- movements: [200, 455.23, -306.5, 25000, -642.21, -133.9, 79.97, 1300],
- interestRate: 1.2, // %
- pin: 1111,
-
- movementsDates: [
- '2019-11-18T21:31:17.178Z',
- '2019-12-23T07:42:02.383Z',
- '2020-01-28T09:15:04.904Z',
- '2020-04-01T10:17:24.185Z',
- '2020-05-08T14:11:59.604Z',
- '2020-07-26T17:01:17.194Z',
- '2020-07-28T23:36:17.929Z',
- '2020-08-01T10:51:36.790Z',
- ],
- currency: 'EUR',
- locale: 'pt-PT', // de-DE
-};
-
-const account2 = {
- owner: 'Jessica Davis',
- movements: [5000, 3400, -150, -790, -3210, -1000, 8500, -30],
- interestRate: 1.5,
- pin: 2222,
-
- movementsDates: [
- '2019-11-01T13:15:33.035Z',
- '2019-11-30T09:48:16.867Z',
- '2019-12-25T06:04:23.907Z',
- '2020-01-25T14:18:46.235Z',
- '2020-02-05T16:33:06.386Z',
- '2020-04-10T14:43:26.374Z',
- '2020-06-25T18:49:59.371Z',
- '2020-07-26T12:01:20.894Z',
- ],
- currency: 'USD',
- locale: 'en-US',
-};
-
-const accounts = [account1, account2];
-
-/////////////////////////////////////////////////
-// Elements
-const labelWelcome = document.querySelector('.welcome');
-const labelDate = document.querySelector('.date');
-const labelBalance = document.querySelector('.balance__value');
-const labelSumIn = document.querySelector('.summary__value--in');
-const labelSumOut = document.querySelector('.summary__value--out');
-const labelSumInterest = document.querySelector('.summary__value--interest');
-const labelTimer = document.querySelector('.timer');
-
-const containerApp = document.querySelector('.app');
-const containerMovements = document.querySelector('.movements');
-
-const btnLogin = document.querySelector('.login__btn');
-const btnTransfer = document.querySelector('.form__btn--transfer');
-const btnLoan = document.querySelector('.form__btn--loan');
-const btnClose = document.querySelector('.form__btn--close');
-const btnSort = document.querySelector('.btn--sort');
-
-const inputLoginUsername = document.querySelector('.login__input--user');
-const inputLoginPin = document.querySelector('.login__input--pin');
-const inputTransferTo = document.querySelector('.form__input--to');
-const inputTransferAmount = document.querySelector('.form__input--amount');
-const inputLoanAmount = document.querySelector('.form__input--loan-amount');
-const inputCloseUsername = document.querySelector('.form__input--user');
-const inputClosePin = document.querySelector('.form__input--pin');
-
-/////////////////////////////////////////////////
-// Functions
-
-const formatMovementDate = function (date, locale) {
- const calcDaysPassed = (date1, date2) =>
- Math.round(Math.abs(date2 - date1) / (1000 * 60 * 60 * 24));
-
- const daysPassed = calcDaysPassed(new Date(), date);
- console.log(daysPassed);
-
- if (daysPassed === 0) return 'Today';
- if (daysPassed === 1) return 'Yesterday';
- if (daysPassed <= 7) return `${daysPassed} days ago`;
-
- // const day = `${date.getDate()}`.padStart(2, 0);
- // const month = `${date.getMonth() + 1}`.padStart(2, 0);
- // const year = date.getFullYear();
- // return `${day}/${month}/${year}`;
- return new Intl.DateTimeFormat(locale).format(date);
-};
-
-const formatCur = function (value, locale, currency) {
- return new Intl.NumberFormat(locale, {
- style: 'currency',
- currency: currency,
- }).format(value);
-};
-
-const displayMovements = function (acc, sort = false) {
- containerMovements.innerHTML = '';
-
- const movs = sort
- ? acc.movements.slice().sort((a, b) => a - b)
- : acc.movements;
-
- movs.forEach(function (mov, i) {
- const type = mov > 0 ? 'deposit' : 'withdrawal';
-
- const date = new Date(acc.movementsDates[i]);
- const displayDate = formatMovementDate(date, acc.locale);
-
- const formattedMov = formatCur(mov, acc.locale, acc.currency);
-
- const html = `
-
-
${
- i + 1
- } ${type}
-
${displayDate}
-
${formattedMov}
-
Bankist
-
-
-
-
- Log in to get started
-
-
-
-
-
-
-
Current balance
-
- As of 05/03/2037
-
-
-
0000โฌ
-
-
-
2 deposit
-
3 days ago
-
4 000โฌ
-
-
-
- 1 withdrawal
-
-
24/01/2037
-
-378โฌ
-
-
-
In
-
0000โฌ
-
Out
-
0000โฌ
-
Interest
-
0000โฌ
-
↓ SORT
-
-
Transfer money
-
-
-
-
-
-
Request loan
-
-
-
-
-
-
Close account
-
-
-
-
-
- You will be logged out in 05:00
-
-
-
-
-
-
-
-
diff --git a/12-Numbers-Dates-Timers-Bankist/starter/logo.png b/12-Numbers-Dates-Timers-Bankist/starter/logo.png
deleted file mode 100644
index f437ac24f3..0000000000
Binary files a/12-Numbers-Dates-Timers-Bankist/starter/logo.png and /dev/null differ
diff --git a/12-Numbers-Dates-Timers-Bankist/starter/script.js b/12-Numbers-Dates-Timers-Bankist/starter/script.js
deleted file mode 100644
index 7fd35920a2..0000000000
--- a/12-Numbers-Dates-Timers-Bankist/starter/script.js
+++ /dev/null
@@ -1,253 +0,0 @@
-'use strict';
-
-/////////////////////////////////////////////////
-/////////////////////////////////////////////////
-// BANKIST APP
-
-/////////////////////////////////////////////////
-// Data
-
-// DIFFERENT DATA! Contains movement dates, currency and locale
-
-const account1 = {
- owner: 'Jonas Schmedtmann',
- movements: [200, 455.23, -306.5, 25000, -642.21, -133.9, 79.97, 1300],
- interestRate: 1.2, // %
- pin: 1111,
-
- movementsDates: [
- '2019-11-18T21:31:17.178Z',
- '2019-12-23T07:42:02.383Z',
- '2020-01-28T09:15:04.904Z',
- '2020-04-01T10:17:24.185Z',
- '2020-05-08T14:11:59.604Z',
- '2020-05-27T17:01:17.194Z',
- '2020-07-11T23:36:17.929Z',
- '2020-07-12T10:51:36.790Z',
- ],
- currency: 'EUR',
- locale: 'pt-PT', // de-DE
-};
-
-const account2 = {
- owner: 'Jessica Davis',
- movements: [5000, 3400, -150, -790, -3210, -1000, 8500, -30],
- interestRate: 1.5,
- pin: 2222,
-
- movementsDates: [
- '2019-11-01T13:15:33.035Z',
- '2019-11-30T09:48:16.867Z',
- '2019-12-25T06:04:23.907Z',
- '2020-01-25T14:18:46.235Z',
- '2020-02-05T16:33:06.386Z',
- '2020-04-10T14:43:26.374Z',
- '2020-06-25T18:49:59.371Z',
- '2020-07-26T12:01:20.894Z',
- ],
- currency: 'USD',
- locale: 'en-US',
-};
-
-const accounts = [account1, account2];
-
-/////////////////////////////////////////////////
-// Elements
-const labelWelcome = document.querySelector('.welcome');
-const labelDate = document.querySelector('.date');
-const labelBalance = document.querySelector('.balance__value');
-const labelSumIn = document.querySelector('.summary__value--in');
-const labelSumOut = document.querySelector('.summary__value--out');
-const labelSumInterest = document.querySelector('.summary__value--interest');
-const labelTimer = document.querySelector('.timer');
-
-const containerApp = document.querySelector('.app');
-const containerMovements = document.querySelector('.movements');
-
-const btnLogin = document.querySelector('.login__btn');
-const btnTransfer = document.querySelector('.form__btn--transfer');
-const btnLoan = document.querySelector('.form__btn--loan');
-const btnClose = document.querySelector('.form__btn--close');
-const btnSort = document.querySelector('.btn--sort');
-
-const inputLoginUsername = document.querySelector('.login__input--user');
-const inputLoginPin = document.querySelector('.login__input--pin');
-const inputTransferTo = document.querySelector('.form__input--to');
-const inputTransferAmount = document.querySelector('.form__input--amount');
-const inputLoanAmount = document.querySelector('.form__input--loan-amount');
-const inputCloseUsername = document.querySelector('.form__input--user');
-const inputClosePin = document.querySelector('.form__input--pin');
-
-/////////////////////////////////////////////////
-// Functions
-
-const displayMovements = function (movements, sort = false) {
- containerMovements.innerHTML = '';
-
- const movs = sort ? movements.slice().sort((a, b) => a - b) : movements;
-
- movs.forEach(function (mov, i) {
- const type = mov > 0 ? 'deposit' : 'withdrawal';
-
- const html = `
-
-
${
- i + 1
- } ${type}
-
${mov}โฌ
-
-
-
-activity
-
-
-airplay
-
-
-alert-circle
-
-
-alert-octagon
-
-
-alert-triangle
-
-
-align-center
-
-
-align-justify
-
-
-align-left
-
-
-align-right
-
-
-anchor
-
-
-aperture
-
-
-archive
-
-
-arrow-down
-
-
-arrow-down-circle
-
-
-arrow-down-left
-
-
-arrow-down-right
-
-
-arrow-left
-
-
-arrow-left-circle
-
-
-arrow-right
-
-
-arrow-right-circle
-
-
-arrow-up
-
-
-arrow-up-circle
-
-
-arrow-up-left
-
-
-arrow-up-right
-
-
-at-sign
-
-
-award
-
-
-bar-chart
-
-
-bar-chart-2
-
-
-battery
-
-
-battery-charging
-
-
-bell
-
-
-bell-off
-
-
-bluetooth
-
-
-bold
-
-
-book
-
-
-book-open
-
-
-bookmark
-
-
-box
-
-
-briefcase
-
-
-calendar
-
-
-camera
-
-
-camera-off
-
-
-cast
-
-
-check
-
-
-check-circle
-
-
-check-square
-
-
-chevron-down
-
-
-chevron-left
-
-
-chevron-right
-
-
-chevron-up
-
-
-chevrons-down
-
-
-chevrons-left
-
-
-chevrons-right
-
-
-chevrons-up
-
-
-chrome
-
-
-circle
-
-
-clipboard
-
-
-clock
-
-
-cloud
-
-
-cloud-drizzle
-
-
-cloud-lightning
-
-
-cloud-off
-
-
-cloud-rain
-
-
-cloud-snow
-
-
-code
-
-
-codepen
-
-
-command
-
-
-compass
-
-
-copy
-
-
-corner-down-left
-
-
-corner-down-right
-
-
-corner-left-down
-
-
-corner-left-up
-
-
-corner-right-down
-
-
-corner-right-up
-
-
-corner-up-left
-
-
-corner-up-right
-
-
-cpu
-
-
-credit-card
-
-
-crop
-
-
-crosshair
-
-
-database
-
-
-delete
-
-
-disc
-
-
-dollar-sign
-
-
-download
-
-
-download-cloud
-
-
-droplet
-
-
-edit
-
-
-edit-2
-
-
-edit-3
-
-
-external-link
-
-
-eye
-
-
-eye-off
-
-
-facebook
-
-
-fast-forward
-
-
-feather
-
-
-file
-
-
-file-minus
-
-
-file-plus
-
-
-file-text
-
-
-film
-
-
-filter
-
-
-flag
-
-
-folder
-
-
-folder-minus
-
-
-folder-plus
-
-
-gift
-
-
-git-branch
-
-
-git-commit
-
-
-git-merge
-
-
-git-pull-request
-
-
-github
-
-
-gitlab
-
-
-globe
-
-
-grid
-
-
-hard-drive
-
-
-hash
-
-
-headphones
-
-
-heart
-
-
-help-circle
-
-
-home
-
-
-image
-
-
-inbox
-
-
-info
-
-
-instagram
-
-
-italic
-
-
-layers
-
-
-layout
-
-
-life-buoy
-
-
-link
-
-
-link-2
-
-
-linkedin
-
-
-list
-
-
-loader
-
-
-lock
-
-
-log-in
-
-
-log-out
-
-
-mail
-
-
-map
-
-
-map-pin
-
-
-maximize
-
-
-maximize-2
-
-
-
-message-circle
-
-
-message-square
-
-
-mic
-
-
-mic-off
-
-
-minimize
-
-
-minimize-2
-
-
-minus
-
-
-minus-circle
-
-
-minus-square
-
-
-monitor
-
-
-moon
-
-
-more-horizontal
-
-
-more-vertical
-
-
-move
-
-
-music
-
-
-navigation
-
-
-navigation-2
-
-
-octagon
-
-
-package
-
-
-paperclip
-
-
-pause
-
-
-pause-circle
-
-
-percent
-
-
-phone
-
-
-phone-call
-
-
-phone-forwarded
-
-
-phone-incoming
-
-
-phone-missed
-
-
-phone-off
-
-
-phone-outgoing
-
-
-pie-chart
-
-
-play
-
-
-play-circle
-
-
-plus
-
-
-plus-circle
-
-
-plus-square
-
-
-pocket
-
-
-power
-
-
-printer
-
-
-radio
-
-
-refresh-ccw
-
-
-refresh-cw
-
-
-repeat
-
-
-rewind
-
-
-rotate-ccw
-
-
-rotate-cw
-
-
-
-save
-
-
-scissors
-
-
-search
-
-
-send
-
-
-server
-
-
-settings
-
-
-share
-
-
-share-2
-
-
-shield
-
-
-shield-off
-
-
-shopping-bag
-
-
-shopping-cart
-
-
-shuffle
-
-
-
-skip-back
-
-
-skip-forward
-
-
-slack
-
-
-slash
-
-
-sliders
-
-
-smartphone
-
-
-speaker
-
-
-square
-
-
-star
-
-
-stop-circle
-
-
-sun
-
-
-sunrise
-
-
-sunset
-
-
-tablet
-
-
-tag
-
-
-target
-
-
-terminal
-
-
-thermometer
-
-
-thumbs-down
-
-
-thumbs-up
-
-
-toggle-left
-
-
-toggle-right
-
-
-trash
-
-
-trash-2
-
-
-trending-down
-
-
-trending-up
-
-
-triangle
-
-
-truck
-
-
-tv
-
-
-
-type
-
-
-umbrella
-
-
-underline
-
-
-unlock
-
-
-upload
-
-
-upload-cloud
-
-
-user
-
-
-user-check
-
-
-user-minus
-
-
-user-plus
-
-
-user-x
-
-
-users
-
-
-video
-
-
-video-off
-
-
-voicemail
-
-
-volume
-
-
-volume-1
-
-
-volume-2
-
-
-volume-x
-
-
-watch
-
-
-wifi
-
-
-wifi-off
-
-
-wind
-
-
-x
-
-
-x-circle
-
-
-x-square
-
-
-youtube
-
-
-zap
-
-
-zap-off
-
-
-zoom-in
-
-
-zoom-out
-
-
-
diff --git a/13-Advanced-DOM-Bankist/final/img/img-1.jpg b/13-Advanced-DOM-Bankist/final/img/img-1.jpg
deleted file mode 100644
index af42481ce0..0000000000
Binary files a/13-Advanced-DOM-Bankist/final/img/img-1.jpg and /dev/null differ
diff --git a/13-Advanced-DOM-Bankist/final/img/img-2.jpg b/13-Advanced-DOM-Bankist/final/img/img-2.jpg
deleted file mode 100644
index 56b1f167e8..0000000000
Binary files a/13-Advanced-DOM-Bankist/final/img/img-2.jpg and /dev/null differ
diff --git a/13-Advanced-DOM-Bankist/final/img/img-3.jpg b/13-Advanced-DOM-Bankist/final/img/img-3.jpg
deleted file mode 100644
index 475c40d05c..0000000000
Binary files a/13-Advanced-DOM-Bankist/final/img/img-3.jpg and /dev/null differ
diff --git a/13-Advanced-DOM-Bankist/final/img/img-4.jpg b/13-Advanced-DOM-Bankist/final/img/img-4.jpg
deleted file mode 100644
index beb70d6f77..0000000000
Binary files a/13-Advanced-DOM-Bankist/final/img/img-4.jpg and /dev/null differ
diff --git a/13-Advanced-DOM-Bankist/final/img/logo.png b/13-Advanced-DOM-Bankist/final/img/logo.png
deleted file mode 100644
index 39b5de76f4..0000000000
Binary files a/13-Advanced-DOM-Bankist/final/img/logo.png and /dev/null differ
diff --git a/13-Advanced-DOM-Bankist/final/img/user-1.jpg b/13-Advanced-DOM-Bankist/final/img/user-1.jpg
deleted file mode 100644
index 3fd68e3bdc..0000000000
Binary files a/13-Advanced-DOM-Bankist/final/img/user-1.jpg and /dev/null differ
diff --git a/13-Advanced-DOM-Bankist/final/img/user-2.jpg b/13-Advanced-DOM-Bankist/final/img/user-2.jpg
deleted file mode 100644
index a6b47fd123..0000000000
Binary files a/13-Advanced-DOM-Bankist/final/img/user-2.jpg and /dev/null differ
diff --git a/13-Advanced-DOM-Bankist/final/img/user-3.jpg b/13-Advanced-DOM-Bankist/final/img/user-3.jpg
deleted file mode 100644
index d0754c3640..0000000000
Binary files a/13-Advanced-DOM-Bankist/final/img/user-3.jpg and /dev/null differ
diff --git a/13-Advanced-DOM-Bankist/final/index.html b/13-Advanced-DOM-Bankist/final/index.html
deleted file mode 100644
index 7dc87c7d9b..0000000000
--- a/13-Advanced-DOM-Bankist/final/index.html
+++ /dev/null
@@ -1,356 +0,0 @@
-
-
-
- Bankist | When Banking meets Minimalist
-
-
-
-
-
-
-
-
-
Features
-
-
-
-
-
-
-
-
-
-
-
-
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde alias
- sint quos? Accusantium a fugiat porro reiciendis saepe quibusdam
- debitis ducimus.
-
-
-
-
-
-
-
-
-
-
- Nesciunt quos autem dolorum voluptates cum dolores dicta fuga
- inventore ab? Nulla incidunt eius numquam sequi iste pariatur
- quibusdam!
-
-
-
-
-
-
-
-
-
-
-
-
- Quasi, fugit in cumque cupiditate reprehenderit debitis animi enim
- eveniet consequatur odit quam quos possimus assumenda dicta fuga
- inventore ab.
-
-
-
-
-
-
-
Operations
-
-
-
-
-
-
- 01 Instant Transfers
-
-
- 02 Instant Loans
-
-
- 03 Instant Closing
-
-
-
-
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
- eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
- ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
- aliquip ex ea commodo consequat.
-
-
-
-
-
-
-
-
-
-
- Duis aute irure dolor in reprehenderit in voluptate velit esse
- cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
- cupidatat non proident, sunt in culpa qui officia deserunt mollit
- anim id est laborum.
-
-
-
-
-
-
-
-
-
- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
- officia deserunt mollit anim id est laborum. Ut enim ad minim
- veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
- ea commodo consequat.
-
-
-
-
-
-
-
Not sure yet?
-
-
-
-
-
-
-
-
- Lorem ipsum dolor sit, amet consectetur adipisicing elit.
- Accusantium quas quisquam non? Quas voluptate nulla minima
- deleniti optio ullam nesciunt, numquam corporis et asperiores
- laboriosam sunt, praesentium suscipit blanditiis. Necessitatibus
- id alias reiciendis, perferendis facere pariatur dolore veniam
- autem esse non voluptatem saepe provident nihil molestiae.
-
-
- Aarav Lynn
- San Francisco, USA
-
-
-
-
-
-
-
-
- Quisquam itaque deserunt ullam, quia ea repellendus provident,
- ducimus neque ipsam modi voluptatibus doloremque, corrupti
- laborum. Incidunt numquam perferendis veritatis neque repellendus.
- Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illo
- deserunt exercitationem deleniti.
-
-
- Miyah Miles
- London, UK
-
-
-
-
-
-
-
-
- Debitis, nihil sit minus suscipit magni aperiam vel tenetur
- incidunt commodi architecto numquam omnis nulla autem,
- necessitatibus blanditiis modi similique quidem. Odio aliquam
- culpa dicta beatae quod maiores ipsa minus consequatur error sunt,
- deleniti saepe aliquid quos inventore sequi. Necessitatibus id
- alias reiciendis, perferendis facere.
-
-
- Francisco Gomes
- Lisbon, Portugal
-
-
-
-
-
←
-
→
-
-
-
-
-
-
-
- Open your free account today!
-
-
-
-
-
- ×
-
-
-
-
-
-
-
-
diff --git a/13-Advanced-DOM-Bankist/final/script.js b/13-Advanced-DOM-Bankist/final/script.js
deleted file mode 100644
index a0015c55ee..0000000000
--- a/13-Advanced-DOM-Bankist/final/script.js
+++ /dev/null
@@ -1,509 +0,0 @@
-'use strict';
-
-const modal = document.querySelector('.modal');
-const overlay = document.querySelector('.overlay');
-const btnCloseModal = document.querySelector('.btn--close-modal');
-const btnsOpenModal = document.querySelectorAll('.btn--show-modal');
-const btnScrollTo = document.querySelector('.btn--scroll-to');
-const section1 = document.querySelector('#section--1');
-const nav = document.querySelector('.nav');
-const tabs = document.querySelectorAll('.operations__tab');
-const tabsContainer = document.querySelector('.operations__tab-container');
-const tabsContent = document.querySelectorAll('.operations__content');
-
-///////////////////////////////////////
-// Modal window
-
-const openModal = function (e) {
- e.preventDefault();
- modal.classList.remove('hidden');
- overlay.classList.remove('hidden');
-};
-
-const closeModal = function () {
- modal.classList.add('hidden');
- overlay.classList.add('hidden');
-};
-
-btnsOpenModal.forEach(btn => btn.addEventListener('click', openModal));
-
-btnCloseModal.addEventListener('click', closeModal);
-overlay.addEventListener('click', closeModal);
-
-document.addEventListener('keydown', function (e) {
- if (e.key === 'Escape' && !modal.classList.contains('hidden')) {
- closeModal();
- }
-});
-
-///////////////////////////////////////
-// Button scrolling
-btnScrollTo.addEventListener('click', function (e) {
- const s1coords = section1.getBoundingClientRect();
- console.log(s1coords);
-
- console.log(e.target.getBoundingClientRect());
-
- console.log('Current scroll (X/Y)', window.pageXOffset, window.pageYOffset);
-
- console.log(
- 'height/width viewport',
- document.documentElement.clientHeight,
- document.documentElement.clientWidth
- );
-
- // Scrolling
- // window.scrollTo(
- // s1coords.left + window.pageXOffset,
- // s1coords.top + window.pageYOffset
- // );
-
- // window.scrollTo({
- // left: s1coords.left + window.pageXOffset,
- // top: s1coords.top + window.pageYOffset,
- // behavior: 'smooth',
- // });
-
- section1.scrollIntoView({ behavior: 'smooth' });
-});
-
-///////////////////////////////////////
-// Page navigation
-
-// document.querySelectorAll('.nav__link').forEach(function (el) {
-// el.addEventListener('click', function (e) {
-// e.preventDefault();
-// const id = this.getAttribute('href');
-// console.log(id);
-// document.querySelector(id).scrollIntoView({ behavior: 'smooth' });
-// });
-// });
-
-// 1. Add event listener to common parent element
-// 2. Determine what element originated the event
-
-document.querySelector('.nav__links').addEventListener('click', function (e) {
- e.preventDefault();
-
- // Matching strategy
- if (e.target.classList.contains('nav__link')) {
- const id = e.target.getAttribute('href');
- document.querySelector(id).scrollIntoView({ behavior: 'smooth' });
- }
-});
-
-///////////////////////////////////////
-// Tabbed component
-
-tabsContainer.addEventListener('click', function (e) {
- const clicked = e.target.closest('.operations__tab');
-
- // Guard clause
- if (!clicked) return;
-
- // Remove active classes
- tabs.forEach(t => t.classList.remove('operations__tab--active'));
- tabsContent.forEach(c => c.classList.remove('operations__content--active'));
-
- // Activate tab
- clicked.classList.add('operations__tab--active');
-
- // Activate content area
- document
- .querySelector(`.operations__content--${clicked.dataset.tab}`)
- .classList.add('operations__content--active');
-});
-
-///////////////////////////////////////
-// Menu fade animation
-const handleHover = function (e) {
- if (e.target.classList.contains('nav__link')) {
- const link = e.target;
- const siblings = link.closest('.nav').querySelectorAll('.nav__link');
- const logo = link.closest('.nav').querySelector('img');
-
- siblings.forEach(el => {
- if (el !== link) el.style.opacity = this;
- });
- logo.style.opacity = this;
- }
-};
-
-// Passing "argument" into handler
-nav.addEventListener('mouseover', handleHover.bind(0.5));
-nav.addEventListener('mouseout', handleHover.bind(1));
-
-///////////////////////////////////////
-// Sticky navigation: Intersection Observer API
-
-const header = document.querySelector('.header');
-const navHeight = nav.getBoundingClientRect().height;
-
-const stickyNav = function (entries) {
- const [entry] = entries;
- // console.log(entry);
-
- if (!entry.isIntersecting) nav.classList.add('sticky');
- else nav.classList.remove('sticky');
-};
-
-const headerObserver = new IntersectionObserver(stickyNav, {
- root: null,
- threshold: 0,
- rootMargin: `-${navHeight}px`,
-});
-
-headerObserver.observe(header);
-
-///////////////////////////////////////
-// Reveal sections
-const allSections = document.querySelectorAll('.section');
-
-const revealSection = function (entries, observer) {
- const [entry] = entries;
-
- if (!entry.isIntersecting) return;
-
- entry.target.classList.remove('section--hidden');
- observer.unobserve(entry.target);
-};
-
-const sectionObserver = new IntersectionObserver(revealSection, {
- root: null,
- threshold: 0.15,
-});
-
-allSections.forEach(function (section) {
- sectionObserver.observe(section);
- section.classList.add('section--hidden');
-});
-
-// Lazy loading images
-const imgTargets = document.querySelectorAll('img[data-src]');
-
-const loadImg = function (entries, observer) {
- const [entry] = entries;
-
- if (!entry.isIntersecting) return;
-
- // Replace src with data-src
- entry.target.src = entry.target.dataset.src;
-
- entry.target.addEventListener('load', function () {
- entry.target.classList.remove('lazy-img');
- });
-
- observer.unobserve(entry.target);
-};
-
-const imgObserver = new IntersectionObserver(loadImg, {
- root: null,
- threshold: 0,
- rootMargin: '200px',
-});
-
-imgTargets.forEach(img => imgObserver.observe(img));
-
-///////////////////////////////////////
-// Slider
-const slider = function () {
- const slides = document.querySelectorAll('.slide');
- const btnLeft = document.querySelector('.slider__btn--left');
- const btnRight = document.querySelector('.slider__btn--right');
- const dotContainer = document.querySelector('.dots');
-
- let curSlide = 0;
- const maxSlide = slides.length;
-
- // Functions
- const createDots = function () {
- slides.forEach(function (_, i) {
- dotContainer.insertAdjacentHTML(
- 'beforeend',
- `Got it! ';
-
-// header.prepend(message);
-header.append(message);
-// header.append(message.cloneNode(true));
-
-// header.before(message);
-// header.after(message);
-
-// Delete elements
-document
- .querySelector('.btn--close-cookie')
- .addEventListener('click', function () {
- // message.remove();
- message.parentElement.removeChild(message);
- });
-
-
-///////////////////////////////////////
-// Styles, Attributes and Classes
-
-// Styles
-message.style.backgroundColor = '#37383d';
-message.style.width = '120%';
-
-console.log(message.style.color);
-console.log(message.style.backgroundColor);
-
-console.log(getComputedStyle(message).color);
-console.log(getComputedStyle(message).height);
-
-message.style.height =
- Number.parseFloat(getComputedStyle(message).height, 10) + 30 + 'px';
-
-document.documentElement.style.setProperty('--color-primary', 'orangered');
-
-// Attributes
-const logo = document.querySelector('.nav__logo');
-console.log(logo.alt);
-console.log(logo.className);
-
-logo.alt = 'Beautiful minimalist logo';
-
-// Non-standard
-console.log(logo.designer);
-console.log(logo.getAttribute('designer'));
-logo.setAttribute('company', 'Bankist');
-
-console.log(logo.src);
-console.log(logo.getAttribute('src'));
-
-const link = document.querySelector('.nav__link--btn');
-console.log(link.href);
-console.log(link.getAttribute('href'));
-
-// Data attributes
-console.log(logo.dataset.versionNumber);
-
-// Classes
-logo.classList.add('c', 'j');
-logo.classList.remove('c', 'j');
-logo.classList.toggle('c');
-logo.classList.contains('c'); // not includes
-
-// Don't use
-logo.clasName = 'jonas';
-
-
-///////////////////////////////////////
-// Types of Events and Event Handlers
-const h1 = document.querySelector('h1');
-
-const alertH1 = function (e) {
- alert('addEventListener: Great! You are reading the heading :D');
-};
-
-h1.addEventListener('mouseenter', alertH1);
-
-setTimeout(() => h1.removeEventListener('mouseenter', alertH1), 3000);
-
-// h1.onmouseenter = function (e) {
-// alert('onmouseenter: Great! You are reading the heading :D');
-// };
-
-
-///////////////////////////////////////
-// Event Propagation in Practice
-const randomInt = (min, max) =>
- Math.floor(Math.random() * (max - min + 1) + min);
-const randomColor = () =>
- `rgb(${randomInt(0, 255)},${randomInt(0, 255)},${randomInt(0, 255)})`;
-
-document.querySelector('.nav__link').addEventListener('click', function (e) {
- this.style.backgroundColor = randomColor();
- console.log('LINK', e.target, e.currentTarget);
- console.log(e.currentTarget === this);
-
- // Stop propagation
- // e.stopPropagation();
-});
-
-document.querySelector('.nav__links').addEventListener('click', function (e) {
- this.style.backgroundColor = randomColor();
- console.log('CONTAINER', e.target, e.currentTarget);
-});
-
-document.querySelector('.nav').addEventListener('click', function (e) {
- this.style.backgroundColor = randomColor();
- console.log('NAV', e.target, e.currentTarget);
-});
-
-
-///////////////////////////////////////
-// DOM Traversing
-const h1 = document.querySelector('h1');
-
-// Going downwards: child
-console.log(h1.querySelectorAll('.highlight'));
-console.log(h1.childNodes);
-console.log(h1.children);
-h1.firstElementChild.style.color = 'white';
-h1.lastElementChild.style.color = 'orangered';
-
-// Going upwards: parents
-console.log(h1.parentNode);
-console.log(h1.parentElement);
-
-h1.closest('.header').style.background = 'var(--gradient-secondary)';
-
-h1.closest('h1').style.background = 'var(--gradient-primary)';
-
-// Going sideways: siblings
-console.log(h1.previousElementSibling);
-console.log(h1.nextElementSibling);
-
-console.log(h1.previousSibling);
-console.log(h1.nextSibling);
-
-console.log(h1.parentElement.children);
-[...h1.parentElement.children].forEach(function (el) {
- if (el !== h1) el.style.transform = 'scale(0.5)';
-});
-
-///////////////////////////////////////
-// Sticky navigation
-const initialCoords = section1.getBoundingClientRect();
-console.log(initialCoords);
-
-window.addEventListener('scroll', function () {
- console.log(window.scrollY);
-
- if (window.scrollY > initialCoords.top) nav.classList.add('sticky');
- else nav.classList.remove('sticky');
-});
-
-///////////////////////////////////////
-// Sticky navigation: Intersection Observer API
-
-const obsCallback = function (entries, observer) {
- entries.forEach(entry => {
- console.log(entry);
- });
-};
-
-const obsOptions = {
- root: null,
- threshold: [0, 0.2],
-};
-
-const observer = new IntersectionObserver(obsCallback, obsOptions);
-observer.observe(section1);
-
-
-///////////////////////////////////////
-// Lifecycle DOM Events
-document.addEventListener('DOMContentLoaded', function (e) {
- console.log('HTML parsed and DOM tree built!', e);
-});
-
-window.addEventListener('load', function (e) {
- console.log('Page fully loaded', e);
-});
-
-window.addEventListener('beforeunload', function (e) {
- e.preventDefault();
- console.log(e);
- e.returnValue = '';
-});
-*/
diff --git a/13-Advanced-DOM-Bankist/final/style.css b/13-Advanced-DOM-Bankist/final/style.css
deleted file mode 100644
index caf3a4a635..0000000000
--- a/13-Advanced-DOM-Bankist/final/style.css
+++ /dev/null
@@ -1,674 +0,0 @@
-/* The page is NOT responsive. You can implement responsiveness yourself if you wanna have some fun ๐ */
-
-:root {
- --color-primary: #5ec576;
- --color-secondary: #ffcb03;
- --color-tertiary: #ff585f;
- --color-primary-darker: #4bbb7d;
- --color-secondary-darker: #ffbb00;
- --color-tertiary-darker: #fd424b;
- --color-primary-opacity: #5ec5763a;
- --color-secondary-opacity: #ffcd0331;
- --color-tertiary-opacity: #ff58602d;
- --gradient-primary: linear-gradient(to top left, #39b385, #9be15d);
- --gradient-secondary: linear-gradient(to top left, #ffb003, #ffcb03);
-}
-
-* {
- margin: 0;
- padding: 0;
- box-sizing: inherit;
-}
-
-html {
- font-size: 62.5%;
- box-sizing: border-box;
-}
-
-body {
- font-family: 'Poppins', sans-serif;
- font-weight: 300;
- color: #444;
- line-height: 1.9;
- background-color: #f3f3f3;
-}
-
-/* GENERAL ELEMENTS */
-.section {
- padding: 15rem 3rem;
- border-top: 1px solid #ddd;
-
- transition: transform 1s, opacity 1s;
-}
-
-.section--hidden {
- opacity: 0;
- transform: translateY(8rem);
-}
-
-.section__title {
- max-width: 80rem;
- margin: 0 auto 8rem auto;
-}
-
-.section__description {
- font-size: 1.8rem;
- font-weight: 600;
- text-transform: uppercase;
- color: var(--color-primary);
- margin-bottom: 1rem;
-}
-
-.section__header {
- font-size: 4rem;
- line-height: 1.3;
- font-weight: 500;
-}
-
-.btn {
- display: inline-block;
- background-color: var(--color-primary);
- font-size: 1.6rem;
- font-family: inherit;
- font-weight: 500;
- border: none;
- padding: 1.25rem 4.5rem;
- border-radius: 10rem;
- cursor: pointer;
- transition: all 0.3s;
-}
-
-.btn:hover {
- background-color: var(--color-primary-darker);
-}
-
-.btn--text {
- display: inline-block;
- background: none;
- font-size: 1.7rem;
- font-family: inherit;
- font-weight: 500;
- color: var(--color-primary);
- border: none;
- border-bottom: 1px solid currentColor;
- padding-bottom: 2px;
- cursor: pointer;
- transition: all 0.3s;
-}
-
-p {
- color: #666;
-}
-
-/* This is BAD for accessibility! Don't do in the real world! */
-button:focus {
- outline: none;
-}
-
-img {
- transition: filter 0.5s;
-}
-
-.lazy-img {
- filter: blur(20px);
-}
-
-/* NAVIGATION */
-.nav {
- display: flex;
- justify-content: space-between;
- align-items: center;
- height: 9rem;
- width: 100%;
- padding: 0 6rem;
- z-index: 100;
-}
-
-/* nav and stickly class at the same time */
-.nav.sticky {
- position: fixed;
- background-color: rgba(255, 255, 255, 0.95);
-}
-
-.nav__logo {
- height: 4.5rem;
- transition: all 0.3s;
-}
-
-.nav__links {
- display: flex;
- align-items: center;
- list-style: none;
-}
-
-.nav__item {
- margin-left: 4rem;
-}
-
-.nav__link:link,
-.nav__link:visited {
- font-size: 1.7rem;
- font-weight: 400;
- color: inherit;
- text-decoration: none;
- display: block;
- transition: all 0.3s;
-}
-
-.nav__link--btn:link,
-.nav__link--btn:visited {
- padding: 0.8rem 2.5rem;
- border-radius: 3rem;
- background-color: var(--color-primary);
- color: #222;
-}
-
-.nav__link--btn:hover,
-.nav__link--btn:active {
- color: inherit;
- background-color: var(--color-primary-darker);
- color: #333;
-}
-
-/* HEADER */
-.header {
- padding: 0 3rem;
- height: 100vh;
- display: flex;
- flex-direction: column;
- align-items: center;
-}
-
-.header__title {
- flex: 1;
-
- max-width: 115rem;
- display: grid;
- grid-template-columns: 3fr 2fr;
- row-gap: 3rem;
- align-content: center;
- justify-content: center;
-
- align-items: start;
- justify-items: start;
-}
-
-h1 {
- font-size: 5.5rem;
- line-height: 1.35;
-}
-
-h4 {
- font-size: 2.4rem;
- font-weight: 500;
-}
-
-.header__img {
- width: 100%;
- grid-column: 2 / 3;
- grid-row: 1 / span 4;
- transform: translateY(-6rem);
-}
-
-.highlight {
- position: relative;
-}
-
-.highlight::after {
- display: block;
- content: '';
- position: absolute;
- bottom: 0;
- left: 0;
- height: 100%;
- width: 100%;
- z-index: -1;
- opacity: 0.7;
- transform: scale(1.07, 1.05) skewX(-15deg);
- background-image: var(--gradient-primary);
-}
-
-/* FEATURES */
-.features {
- display: grid;
- grid-template-columns: 1fr 1fr;
- gap: 4rem;
- margin: 0 12rem;
-}
-
-.features__img {
- width: 100%;
-}
-
-.features__feature {
- align-self: center;
- justify-self: center;
- width: 70%;
- font-size: 1.5rem;
-}
-
-.features__icon {
- display: flex;
- align-items: center;
- justify-content: center;
- background-color: var(--color-primary-opacity);
- height: 5.5rem;
- width: 5.5rem;
- border-radius: 50%;
- margin-bottom: 2rem;
-}
-
-.features__icon svg {
- height: 2.5rem;
- width: 2.5rem;
- fill: var(--color-primary);
-}
-
-.features__header {
- font-size: 2rem;
- margin-bottom: 1rem;
-}
-
-/* OPERATIONS */
-.operations {
- max-width: 100rem;
- margin: 12rem auto 0 auto;
-
- background-color: #fff;
-}
-
-.operations__tab-container {
- display: flex;
- justify-content: center;
-}
-
-.operations__tab {
- margin-right: 2.5rem;
- transform: translateY(-50%);
-}
-
-.operations__tab span {
- margin-right: 1rem;
- font-weight: 600;
- display: inline-block;
-}
-
-.operations__tab--1 {
- background-color: var(--color-secondary);
-}
-
-.operations__tab--1:hover {
- background-color: var(--color-secondary-darker);
-}
-
-.operations__tab--3 {
- background-color: var(--color-tertiary);
- margin: 0;
-}
-
-.operations__tab--3:hover {
- background-color: var(--color-tertiary-darker);
-}
-
-.operations__tab--active {
- transform: translateY(-66%);
-}
-
-.operations__content {
- display: none;
-
- /* JUST PRESENTATIONAL */
- font-size: 1.7rem;
- padding: 2.5rem 7rem 6.5rem 7rem;
-}
-
-.operations__content--active {
- display: grid;
- grid-template-columns: 7rem 1fr;
- column-gap: 3rem;
- row-gap: 0.5rem;
-}
-
-.operations__header {
- font-size: 2.25rem;
- font-weight: 500;
- align-self: center;
-}
-
-.operations__icon {
- display: flex;
- align-items: center;
- justify-content: center;
- height: 7rem;
- width: 7rem;
- border-radius: 50%;
-}
-
-.operations__icon svg {
- height: 2.75rem;
- width: 2.75rem;
-}
-
-.operations__content p {
- grid-column: 2;
-}
-
-.operations__icon--1 {
- background-color: var(--color-secondary-opacity);
-}
-.operations__icon--2 {
- background-color: var(--color-primary-opacity);
-}
-.operations__icon--3 {
- background-color: var(--color-tertiary-opacity);
-}
-.operations__icon--1 svg {
- fill: var(--color-secondary-darker);
-}
-.operations__icon--2 svg {
- fill: var(--color-primary);
-}
-.operations__icon--3 svg {
- fill: var(--color-tertiary);
-}
-
-/* SLIDER */
-.slider {
- max-width: 100rem;
- height: 50rem;
- margin: 0 auto;
- position: relative;
-
- /* IN THE END */
- overflow: hidden;
-}
-
-.slide {
- position: absolute;
- top: 0;
- width: 100%;
- height: 50rem;
-
- display: flex;
- align-items: center;
- justify-content: center;
-
- /* THIS creates the animation! */
- transition: transform 1s;
-}
-
-.slide > img {
- /* Only for images that have different size than slide */
- width: 100%;
- height: 100%;
- object-fit: cover;
-}
-
-.slider__btn {
- position: absolute;
- top: 50%;
- z-index: 10;
-
- border: none;
- background: rgba(255, 255, 255, 0.7);
- font-family: inherit;
- color: #333;
- border-radius: 50%;
- height: 5.5rem;
- width: 5.5rem;
- font-size: 3.25rem;
- cursor: pointer;
-}
-
-.slider__btn--left {
- left: 6%;
- transform: translate(-50%, -50%);
-}
-
-.slider__btn--right {
- right: 6%;
- transform: translate(50%, -50%);
-}
-
-.dots {
- position: absolute;
- bottom: 5%;
- left: 50%;
- transform: translateX(-50%);
- display: flex;
-}
-
-.dots__dot {
- border: none;
- background-color: #b9b9b9;
- opacity: 0.7;
- height: 1rem;
- width: 1rem;
- border-radius: 50%;
- margin-right: 1.75rem;
- cursor: pointer;
- transition: all 0.5s;
-
- /* Only necessary when overlying images */
- /* box-shadow: 0 0.6rem 1.5rem rgba(0, 0, 0, 0.7); */
-}
-
-.dots__dot:last-child {
- margin: 0;
-}
-
-.dots__dot--active {
- /* background-color: #fff; */
- background-color: #888;
- opacity: 1;
-}
-
-/* TESTIMONIALS */
-.testimonial {
- width: 65%;
- position: relative;
-}
-
-.testimonial::before {
- content: '\201C';
- position: absolute;
- top: -5.7rem;
- left: -6.8rem;
- line-height: 1;
- font-size: 20rem;
- font-family: inherit;
- color: var(--color-primary);
- z-index: -1;
-}
-
-.testimonial__header {
- font-size: 2.25rem;
- font-weight: 500;
- margin-bottom: 1.5rem;
-}
-
-.testimonial__text {
- font-size: 1.7rem;
- margin-bottom: 3.5rem;
- color: #666;
-}
-
-.testimonial__author {
- margin-left: 3rem;
- font-style: normal;
-
- display: grid;
- grid-template-columns: 6.5rem 1fr;
- column-gap: 2rem;
-}
-
-.testimonial__photo {
- grid-row: 1 / span 2;
- width: 6.5rem;
- border-radius: 50%;
-}
-
-.testimonial__name {
- font-size: 1.7rem;
- font-weight: 500;
- align-self: end;
- margin: 0;
-}
-
-.testimonial__location {
- font-size: 1.5rem;
-}
-
-.section__title--testimonials {
- margin-bottom: 4rem;
-}
-
-/* SIGNUP */
-.section--sign-up {
- background-color: #37383d;
- border-top: none;
- border-bottom: 1px solid #444;
- text-align: center;
- padding: 10rem 3rem;
-}
-
-.section--sign-up .section__header {
- color: #fff;
- text-align: center;
-}
-
-.section--sign-up .section__title {
- margin-bottom: 6rem;
-}
-
-.section--sign-up .btn {
- font-size: 1.9rem;
- padding: 2rem 5rem;
-}
-
-/* FOOTER */
-.footer {
- padding: 10rem 3rem;
- background-color: #37383d;
-}
-
-.footer__nav {
- list-style: none;
- display: flex;
- justify-content: center;
- margin-bottom: 5rem;
-}
-
-.footer__item {
- margin-right: 4rem;
-}
-
-.footer__link {
- font-size: 1.6rem;
- color: #eee;
- text-decoration: none;
-}
-
-.footer__logo {
- height: 5rem;
- display: block;
- margin: 0 auto;
- margin-bottom: 5rem;
-}
-
-.footer__copyright {
- font-size: 1.4rem;
- color: #aaa;
- text-align: center;
-}
-
-.footer__copyright .footer__link {
- font-size: 1.4rem;
-}
-
-/* MODAL WINDOW */
-.modal {
- position: fixed;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- max-width: 60rem;
- background-color: #f3f3f3;
- padding: 5rem 6rem;
- box-shadow: 0 4rem 6rem rgba(0, 0, 0, 0.3);
- z-index: 1000;
- transition: all 0.5s;
-}
-
-.overlay {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background-color: rgba(0, 0, 0, 0.5);
- backdrop-filter: blur(4px);
- z-index: 100;
- transition: all 0.5s;
-}
-
-.modal__header {
- font-size: 3.25rem;
- margin-bottom: 4.5rem;
- line-height: 1.5;
-}
-
-.modal__form {
- margin: 0 3rem;
- display: grid;
- grid-template-columns: 1fr 2fr;
- align-items: center;
- gap: 2.5rem;
-}
-
-.modal__form label {
- font-size: 1.7rem;
- font-weight: 500;
-}
-
-.modal__form input {
- font-size: 1.7rem;
- padding: 1rem 1.5rem;
- border: 1px solid #ddd;
- border-radius: 0.5rem;
-}
-
-.modal__form button {
- grid-column: 1 / span 2;
- justify-self: center;
- margin-top: 1rem;
-}
-
-.btn--close-modal {
- font-family: inherit;
- color: inherit;
- position: absolute;
- top: 0.5rem;
- right: 2rem;
- font-size: 4rem;
- cursor: pointer;
- border: none;
- background: none;
-}
-
-.hidden {
- visibility: hidden;
- opacity: 0;
-}
-
-/* COOKIE MESSAGE */
-.cookie-message {
- display: flex;
- align-items: center;
- justify-content: space-evenly;
- width: 100%;
- background-color: white;
- color: #bbb;
- font-size: 1.5rem;
- font-weight: 400;
-}
diff --git a/13-Advanced-DOM-Bankist/starter/.prettierrc b/13-Advanced-DOM-Bankist/starter/.prettierrc
deleted file mode 100644
index b4f8e6a6a1..0000000000
--- a/13-Advanced-DOM-Bankist/starter/.prettierrc
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "singleQuote": true,
- "arrowParens": "avoid"
-}
diff --git a/13-Advanced-DOM-Bankist/starter/img/card-lazy.jpg b/13-Advanced-DOM-Bankist/starter/img/card-lazy.jpg
deleted file mode 100644
index 367e2f9256..0000000000
Binary files a/13-Advanced-DOM-Bankist/starter/img/card-lazy.jpg and /dev/null differ
diff --git a/13-Advanced-DOM-Bankist/starter/img/card.jpg b/13-Advanced-DOM-Bankist/starter/img/card.jpg
deleted file mode 100644
index 5f8c606314..0000000000
Binary files a/13-Advanced-DOM-Bankist/starter/img/card.jpg and /dev/null differ
diff --git a/13-Advanced-DOM-Bankist/starter/img/digital-lazy.jpg b/13-Advanced-DOM-Bankist/starter/img/digital-lazy.jpg
deleted file mode 100644
index fa78f86756..0000000000
Binary files a/13-Advanced-DOM-Bankist/starter/img/digital-lazy.jpg and /dev/null differ
diff --git a/13-Advanced-DOM-Bankist/starter/img/digital.jpg b/13-Advanced-DOM-Bankist/starter/img/digital.jpg
deleted file mode 100644
index 87a319b6f3..0000000000
Binary files a/13-Advanced-DOM-Bankist/starter/img/digital.jpg and /dev/null differ
diff --git a/13-Advanced-DOM-Bankist/starter/img/grow-lazy.jpg b/13-Advanced-DOM-Bankist/starter/img/grow-lazy.jpg
deleted file mode 100644
index 6055cdc1f7..0000000000
Binary files a/13-Advanced-DOM-Bankist/starter/img/grow-lazy.jpg and /dev/null differ
diff --git a/13-Advanced-DOM-Bankist/starter/img/grow.jpg b/13-Advanced-DOM-Bankist/starter/img/grow.jpg
deleted file mode 100644
index 19e7f85dbf..0000000000
Binary files a/13-Advanced-DOM-Bankist/starter/img/grow.jpg and /dev/null differ
diff --git a/13-Advanced-DOM-Bankist/starter/img/hero.png b/13-Advanced-DOM-Bankist/starter/img/hero.png
deleted file mode 100644
index 964f65ba62..0000000000
Binary files a/13-Advanced-DOM-Bankist/starter/img/hero.png and /dev/null differ
diff --git a/13-Advanced-DOM-Bankist/starter/img/icon.png b/13-Advanced-DOM-Bankist/starter/img/icon.png
deleted file mode 100644
index d00606eab8..0000000000
Binary files a/13-Advanced-DOM-Bankist/starter/img/icon.png and /dev/null differ
diff --git a/13-Advanced-DOM-Bankist/starter/img/icons.svg b/13-Advanced-DOM-Bankist/starter/img/icons.svg
deleted file mode 100644
index 9076bfd8b1..0000000000
--- a/13-Advanced-DOM-Bankist/starter/img/icons.svg
+++ /dev/null
@@ -1,1324 +0,0 @@
-
-
-
-activity
-
-
-airplay
-
-
-alert-circle
-
-
-alert-octagon
-
-
-alert-triangle
-
-
-align-center
-
-
-align-justify
-
-
-align-left
-
-
-align-right
-
-
-anchor
-
-
-aperture
-
-
-archive
-
-
-arrow-down
-
-
-arrow-down-circle
-
-
-arrow-down-left
-
-
-arrow-down-right
-
-
-arrow-left
-
-
-arrow-left-circle
-
-
-arrow-right
-
-
-arrow-right-circle
-
-
-arrow-up
-
-
-arrow-up-circle
-
-
-arrow-up-left
-
-
-arrow-up-right
-
-
-at-sign
-
-
-award
-
-
-bar-chart
-
-
-bar-chart-2
-
-
-battery
-
-
-battery-charging
-
-
-bell
-
-
-bell-off
-
-
-bluetooth
-
-
-bold
-
-
-book
-
-
-book-open
-
-
-bookmark
-
-
-box
-
-
-briefcase
-
-
-calendar
-
-
-camera
-
-
-camera-off
-
-
-cast
-
-
-check
-
-
-check-circle
-
-
-check-square
-
-
-chevron-down
-
-
-chevron-left
-
-
-chevron-right
-
-
-chevron-up
-
-
-chevrons-down
-
-
-chevrons-left
-
-
-chevrons-right
-
-
-chevrons-up
-
-
-chrome
-
-
-circle
-
-
-clipboard
-
-
-clock
-
-
-cloud
-
-
-cloud-drizzle
-
-
-cloud-lightning
-
-
-cloud-off
-
-
-cloud-rain
-
-
-cloud-snow
-
-
-code
-
-
-codepen
-
-
-command
-
-
-compass
-
-
-copy
-
-
-corner-down-left
-
-
-corner-down-right
-
-
-corner-left-down
-
-
-corner-left-up
-
-
-corner-right-down
-
-
-corner-right-up
-
-
-corner-up-left
-
-
-corner-up-right
-
-
-cpu
-
-
-credit-card
-
-
-crop
-
-
-crosshair
-
-
-database
-
-
-delete
-
-
-disc
-
-
-dollar-sign
-
-
-download
-
-
-download-cloud
-
-
-droplet
-
-
-edit
-
-
-edit-2
-
-
-edit-3
-
-
-external-link
-
-
-eye
-
-
-eye-off
-
-
-facebook
-
-
-fast-forward
-
-
-feather
-
-
-file
-
-
-file-minus
-
-
-file-plus
-
-
-file-text
-
-
-film
-
-
-filter
-
-
-flag
-
-
-folder
-
-
-folder-minus
-
-
-folder-plus
-
-
-gift
-
-
-git-branch
-
-
-git-commit
-
-
-git-merge
-
-
-git-pull-request
-
-
-github
-
-
-gitlab
-
-
-globe
-
-
-grid
-
-
-hard-drive
-
-
-hash
-
-
-headphones
-
-
-heart
-
-
-help-circle
-
-
-home
-
-
-image
-
-
-inbox
-
-
-info
-
-
-instagram
-
-
-italic
-
-
-layers
-
-
-layout
-
-
-life-buoy
-
-
-link
-
-
-link-2
-
-
-linkedin
-
-
-list
-
-
-loader
-
-
-lock
-
-
-log-in
-
-
-log-out
-
-
-mail
-
-
-map
-
-
-map-pin
-
-
-maximize
-
-
-maximize-2
-
-
-
-message-circle
-
-
-message-square
-
-
-mic
-
-
-mic-off
-
-
-minimize
-
-
-minimize-2
-
-
-minus
-
-
-minus-circle
-
-
-minus-square
-
-
-monitor
-
-
-moon
-
-
-more-horizontal
-
-
-more-vertical
-
-
-move
-
-
-music
-
-
-navigation
-
-
-navigation-2
-
-
-octagon
-
-
-package
-
-
-paperclip
-
-
-pause
-
-
-pause-circle
-
-
-percent
-
-
-phone
-
-
-phone-call
-
-
-phone-forwarded
-
-
-phone-incoming
-
-
-phone-missed
-
-
-phone-off
-
-
-phone-outgoing
-
-
-pie-chart
-
-
-play
-
-
-play-circle
-
-
-plus
-
-
-plus-circle
-
-
-plus-square
-
-
-pocket
-
-
-power
-
-
-printer
-
-
-radio
-
-
-refresh-ccw
-
-
-refresh-cw
-
-
-repeat
-
-
-rewind
-
-
-rotate-ccw
-
-
-rotate-cw
-
-
-
-save
-
-
-scissors
-
-
-search
-
-
-send
-
-
-server
-
-
-settings
-
-
-share
-
-
-share-2
-
-
-shield
-
-
-shield-off
-
-
-shopping-bag
-
-
-shopping-cart
-
-
-shuffle
-
-
-
-skip-back
-
-
-skip-forward
-
-
-slack
-
-
-slash
-
-
-sliders
-
-
-smartphone
-
-
-speaker
-
-
-square
-
-
-star
-
-
-stop-circle
-
-
-sun
-
-
-sunrise
-
-
-sunset
-
-
-tablet
-
-
-tag
-
-
-target
-
-
-terminal
-
-
-thermometer
-
-
-thumbs-down
-
-
-thumbs-up
-
-
-toggle-left
-
-
-toggle-right
-
-
-trash
-
-
-trash-2
-
-
-trending-down
-
-
-trending-up
-
-
-triangle
-
-
-truck
-
-
-tv
-
-
-
-type
-
-
-umbrella
-
-
-underline
-
-
-unlock
-
-
-upload
-
-
-upload-cloud
-
-
-user
-
-
-user-check
-
-
-user-minus
-
-
-user-plus
-
-
-user-x
-
-
-users
-
-
-video
-
-
-video-off
-
-
-voicemail
-
-
-volume
-
-
-volume-1
-
-
-volume-2
-
-
-volume-x
-
-
-watch
-
-
-wifi
-
-
-wifi-off
-
-
-wind
-
-
-x
-
-
-x-circle
-
-
-x-square
-
-
-youtube
-
-
-zap
-
-
-zap-off
-
-
-zoom-in
-
-
-zoom-out
-
-
-
diff --git a/13-Advanced-DOM-Bankist/starter/img/img-1.jpg b/13-Advanced-DOM-Bankist/starter/img/img-1.jpg
deleted file mode 100644
index af42481ce0..0000000000
Binary files a/13-Advanced-DOM-Bankist/starter/img/img-1.jpg and /dev/null differ
diff --git a/13-Advanced-DOM-Bankist/starter/img/img-2.jpg b/13-Advanced-DOM-Bankist/starter/img/img-2.jpg
deleted file mode 100644
index 56b1f167e8..0000000000
Binary files a/13-Advanced-DOM-Bankist/starter/img/img-2.jpg and /dev/null differ
diff --git a/13-Advanced-DOM-Bankist/starter/img/img-3.jpg b/13-Advanced-DOM-Bankist/starter/img/img-3.jpg
deleted file mode 100644
index 475c40d05c..0000000000
Binary files a/13-Advanced-DOM-Bankist/starter/img/img-3.jpg and /dev/null differ
diff --git a/13-Advanced-DOM-Bankist/starter/img/img-4.jpg b/13-Advanced-DOM-Bankist/starter/img/img-4.jpg
deleted file mode 100644
index beb70d6f77..0000000000
Binary files a/13-Advanced-DOM-Bankist/starter/img/img-4.jpg and /dev/null differ
diff --git a/13-Advanced-DOM-Bankist/starter/img/logo.png b/13-Advanced-DOM-Bankist/starter/img/logo.png
deleted file mode 100644
index 39b5de76f4..0000000000
Binary files a/13-Advanced-DOM-Bankist/starter/img/logo.png and /dev/null differ
diff --git a/13-Advanced-DOM-Bankist/starter/img/user-1.jpg b/13-Advanced-DOM-Bankist/starter/img/user-1.jpg
deleted file mode 100644
index 3fd68e3bdc..0000000000
Binary files a/13-Advanced-DOM-Bankist/starter/img/user-1.jpg and /dev/null differ
diff --git a/13-Advanced-DOM-Bankist/starter/img/user-2.jpg b/13-Advanced-DOM-Bankist/starter/img/user-2.jpg
deleted file mode 100644
index a6b47fd123..0000000000
Binary files a/13-Advanced-DOM-Bankist/starter/img/user-2.jpg and /dev/null differ
diff --git a/13-Advanced-DOM-Bankist/starter/img/user-3.jpg b/13-Advanced-DOM-Bankist/starter/img/user-3.jpg
deleted file mode 100644
index d0754c3640..0000000000
Binary files a/13-Advanced-DOM-Bankist/starter/img/user-3.jpg and /dev/null differ
diff --git a/13-Advanced-DOM-Bankist/starter/index.html b/13-Advanced-DOM-Bankist/starter/index.html
deleted file mode 100644
index 6999b1ccef..0000000000
--- a/13-Advanced-DOM-Bankist/starter/index.html
+++ /dev/null
@@ -1,355 +0,0 @@
-
-
-
- Bankist | When Banking meets Minimalist
-
-
-
-
-
-
-
Features
-
-
-
-
-
-
-
-
-
-
-
-
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde alias
- sint quos? Accusantium a fugiat porro reiciendis saepe quibusdam
- debitis ducimus.
-
-
-
-
-
-
-
-
-
-
- Nesciunt quos autem dolorum voluptates cum dolores dicta fuga
- inventore ab? Nulla incidunt eius numquam sequi iste pariatur
- quibusdam!
-
-
-
-
-
-
-
-
-
-
-
-
- Quasi, fugit in cumque cupiditate reprehenderit debitis animi enim
- eveniet consequatur odit quam quos possimus assumenda dicta fuga
- inventore ab.
-
-
-
-
-
-
-
Operations
-
-
-
-
-
-
- 01 Instant Transfers
-
-
- 02 Instant Loans
-
-
- 03 Instant Closing
-
-
-
-
-
-
-
-
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
- eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
- ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
- aliquip ex ea commodo consequat.
-
-
-
-
-
-
-
-
-
-
- Duis aute irure dolor in reprehenderit in voluptate velit esse
- cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
- cupidatat non proident, sunt in culpa qui officia deserunt mollit
- anim id est laborum.
-
-
-
-
-
-
-
-
-
- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
- officia deserunt mollit anim id est laborum. Ut enim ad minim
- veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
- ea commodo consequat.
-
-
-
-
-
-
-
Not sure yet?
-
-
-
-
-
-
-
-
- Lorem ipsum dolor sit, amet consectetur adipisicing elit.
- Accusantium quas quisquam non? Quas voluptate nulla minima
- deleniti optio ullam nesciunt, numquam corporis et asperiores
- laboriosam sunt, praesentium suscipit blanditiis. Necessitatibus
- id alias reiciendis, perferendis facere pariatur dolore veniam
- autem esse non voluptatem saepe provident nihil molestiae.
-
-
- Aarav Lynn
- San Francisco, USA
-
-
-
-
-
-
-
-
- Quisquam itaque deserunt ullam, quia ea repellendus provident,
- ducimus neque ipsam modi voluptatibus doloremque, corrupti
- laborum. Incidunt numquam perferendis veritatis neque repellendus.
- Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illo
- deserunt exercitationem deleniti.
-
-
- Miyah Miles
- London, UK
-
-
-
-
-
-
-
-
- Debitis, nihil sit minus suscipit magni aperiam vel tenetur
- incidunt commodi architecto numquam omnis nulla autem,
- necessitatibus blanditiis modi similique quidem. Odio aliquam
- culpa dicta beatae quod maiores ipsa minus consequatur error sunt,
- deleniti saepe aliquid quos inventore sequi. Necessitatibus id
- alias reiciendis, perferendis facere.
-
-
- Francisco Gomes
- Lisbon, Portugal
-
-
-
-
-
-
←
-
→
-
-
-
-
-
-
-
- Open your free account today!
-
-
-
-
-
- ×
-
-
-
-
-
-
-
-
diff --git a/13-Advanced-DOM-Bankist/starter/script.js b/13-Advanced-DOM-Bankist/starter/script.js
deleted file mode 100644
index c51ec0afbe..0000000000
--- a/13-Advanced-DOM-Bankist/starter/script.js
+++ /dev/null
@@ -1,31 +0,0 @@
-'use strict';
-
-///////////////////////////////////////
-// Modal window
-
-const modal = document.querySelector('.modal');
-const overlay = document.querySelector('.overlay');
-const btnCloseModal = document.querySelector('.btn--close-modal');
-const btnsOpenModal = document.querySelectorAll('.btn--show-modal');
-
-const openModal = function () {
- modal.classList.remove('hidden');
- overlay.classList.remove('hidden');
-};
-
-const closeModal = function () {
- modal.classList.add('hidden');
- overlay.classList.add('hidden');
-};
-
-for (let i = 0; i < btnsOpenModal.length; i++)
- btnsOpenModal[i].addEventListener('click', openModal);
-
-btnCloseModal.addEventListener('click', closeModal);
-overlay.addEventListener('click', closeModal);
-
-document.addEventListener('keydown', function (e) {
- if (e.key === 'Escape' && !modal.classList.contains('hidden')) {
- closeModal();
- }
-});
diff --git a/13-Advanced-DOM-Bankist/starter/style.css b/13-Advanced-DOM-Bankist/starter/style.css
deleted file mode 100644
index caf3a4a635..0000000000
--- a/13-Advanced-DOM-Bankist/starter/style.css
+++ /dev/null
@@ -1,674 +0,0 @@
-/* The page is NOT responsive. You can implement responsiveness yourself if you wanna have some fun ๐ */
-
-:root {
- --color-primary: #5ec576;
- --color-secondary: #ffcb03;
- --color-tertiary: #ff585f;
- --color-primary-darker: #4bbb7d;
- --color-secondary-darker: #ffbb00;
- --color-tertiary-darker: #fd424b;
- --color-primary-opacity: #5ec5763a;
- --color-secondary-opacity: #ffcd0331;
- --color-tertiary-opacity: #ff58602d;
- --gradient-primary: linear-gradient(to top left, #39b385, #9be15d);
- --gradient-secondary: linear-gradient(to top left, #ffb003, #ffcb03);
-}
-
-* {
- margin: 0;
- padding: 0;
- box-sizing: inherit;
-}
-
-html {
- font-size: 62.5%;
- box-sizing: border-box;
-}
-
-body {
- font-family: 'Poppins', sans-serif;
- font-weight: 300;
- color: #444;
- line-height: 1.9;
- background-color: #f3f3f3;
-}
-
-/* GENERAL ELEMENTS */
-.section {
- padding: 15rem 3rem;
- border-top: 1px solid #ddd;
-
- transition: transform 1s, opacity 1s;
-}
-
-.section--hidden {
- opacity: 0;
- transform: translateY(8rem);
-}
-
-.section__title {
- max-width: 80rem;
- margin: 0 auto 8rem auto;
-}
-
-.section__description {
- font-size: 1.8rem;
- font-weight: 600;
- text-transform: uppercase;
- color: var(--color-primary);
- margin-bottom: 1rem;
-}
-
-.section__header {
- font-size: 4rem;
- line-height: 1.3;
- font-weight: 500;
-}
-
-.btn {
- display: inline-block;
- background-color: var(--color-primary);
- font-size: 1.6rem;
- font-family: inherit;
- font-weight: 500;
- border: none;
- padding: 1.25rem 4.5rem;
- border-radius: 10rem;
- cursor: pointer;
- transition: all 0.3s;
-}
-
-.btn:hover {
- background-color: var(--color-primary-darker);
-}
-
-.btn--text {
- display: inline-block;
- background: none;
- font-size: 1.7rem;
- font-family: inherit;
- font-weight: 500;
- color: var(--color-primary);
- border: none;
- border-bottom: 1px solid currentColor;
- padding-bottom: 2px;
- cursor: pointer;
- transition: all 0.3s;
-}
-
-p {
- color: #666;
-}
-
-/* This is BAD for accessibility! Don't do in the real world! */
-button:focus {
- outline: none;
-}
-
-img {
- transition: filter 0.5s;
-}
-
-.lazy-img {
- filter: blur(20px);
-}
-
-/* NAVIGATION */
-.nav {
- display: flex;
- justify-content: space-between;
- align-items: center;
- height: 9rem;
- width: 100%;
- padding: 0 6rem;
- z-index: 100;
-}
-
-/* nav and stickly class at the same time */
-.nav.sticky {
- position: fixed;
- background-color: rgba(255, 255, 255, 0.95);
-}
-
-.nav__logo {
- height: 4.5rem;
- transition: all 0.3s;
-}
-
-.nav__links {
- display: flex;
- align-items: center;
- list-style: none;
-}
-
-.nav__item {
- margin-left: 4rem;
-}
-
-.nav__link:link,
-.nav__link:visited {
- font-size: 1.7rem;
- font-weight: 400;
- color: inherit;
- text-decoration: none;
- display: block;
- transition: all 0.3s;
-}
-
-.nav__link--btn:link,
-.nav__link--btn:visited {
- padding: 0.8rem 2.5rem;
- border-radius: 3rem;
- background-color: var(--color-primary);
- color: #222;
-}
-
-.nav__link--btn:hover,
-.nav__link--btn:active {
- color: inherit;
- background-color: var(--color-primary-darker);
- color: #333;
-}
-
-/* HEADER */
-.header {
- padding: 0 3rem;
- height: 100vh;
- display: flex;
- flex-direction: column;
- align-items: center;
-}
-
-.header__title {
- flex: 1;
-
- max-width: 115rem;
- display: grid;
- grid-template-columns: 3fr 2fr;
- row-gap: 3rem;
- align-content: center;
- justify-content: center;
-
- align-items: start;
- justify-items: start;
-}
-
-h1 {
- font-size: 5.5rem;
- line-height: 1.35;
-}
-
-h4 {
- font-size: 2.4rem;
- font-weight: 500;
-}
-
-.header__img {
- width: 100%;
- grid-column: 2 / 3;
- grid-row: 1 / span 4;
- transform: translateY(-6rem);
-}
-
-.highlight {
- position: relative;
-}
-
-.highlight::after {
- display: block;
- content: '';
- position: absolute;
- bottom: 0;
- left: 0;
- height: 100%;
- width: 100%;
- z-index: -1;
- opacity: 0.7;
- transform: scale(1.07, 1.05) skewX(-15deg);
- background-image: var(--gradient-primary);
-}
-
-/* FEATURES */
-.features {
- display: grid;
- grid-template-columns: 1fr 1fr;
- gap: 4rem;
- margin: 0 12rem;
-}
-
-.features__img {
- width: 100%;
-}
-
-.features__feature {
- align-self: center;
- justify-self: center;
- width: 70%;
- font-size: 1.5rem;
-}
-
-.features__icon {
- display: flex;
- align-items: center;
- justify-content: center;
- background-color: var(--color-primary-opacity);
- height: 5.5rem;
- width: 5.5rem;
- border-radius: 50%;
- margin-bottom: 2rem;
-}
-
-.features__icon svg {
- height: 2.5rem;
- width: 2.5rem;
- fill: var(--color-primary);
-}
-
-.features__header {
- font-size: 2rem;
- margin-bottom: 1rem;
-}
-
-/* OPERATIONS */
-.operations {
- max-width: 100rem;
- margin: 12rem auto 0 auto;
-
- background-color: #fff;
-}
-
-.operations__tab-container {
- display: flex;
- justify-content: center;
-}
-
-.operations__tab {
- margin-right: 2.5rem;
- transform: translateY(-50%);
-}
-
-.operations__tab span {
- margin-right: 1rem;
- font-weight: 600;
- display: inline-block;
-}
-
-.operations__tab--1 {
- background-color: var(--color-secondary);
-}
-
-.operations__tab--1:hover {
- background-color: var(--color-secondary-darker);
-}
-
-.operations__tab--3 {
- background-color: var(--color-tertiary);
- margin: 0;
-}
-
-.operations__tab--3:hover {
- background-color: var(--color-tertiary-darker);
-}
-
-.operations__tab--active {
- transform: translateY(-66%);
-}
-
-.operations__content {
- display: none;
-
- /* JUST PRESENTATIONAL */
- font-size: 1.7rem;
- padding: 2.5rem 7rem 6.5rem 7rem;
-}
-
-.operations__content--active {
- display: grid;
- grid-template-columns: 7rem 1fr;
- column-gap: 3rem;
- row-gap: 0.5rem;
-}
-
-.operations__header {
- font-size: 2.25rem;
- font-weight: 500;
- align-self: center;
-}
-
-.operations__icon {
- display: flex;
- align-items: center;
- justify-content: center;
- height: 7rem;
- width: 7rem;
- border-radius: 50%;
-}
-
-.operations__icon svg {
- height: 2.75rem;
- width: 2.75rem;
-}
-
-.operations__content p {
- grid-column: 2;
-}
-
-.operations__icon--1 {
- background-color: var(--color-secondary-opacity);
-}
-.operations__icon--2 {
- background-color: var(--color-primary-opacity);
-}
-.operations__icon--3 {
- background-color: var(--color-tertiary-opacity);
-}
-.operations__icon--1 svg {
- fill: var(--color-secondary-darker);
-}
-.operations__icon--2 svg {
- fill: var(--color-primary);
-}
-.operations__icon--3 svg {
- fill: var(--color-tertiary);
-}
-
-/* SLIDER */
-.slider {
- max-width: 100rem;
- height: 50rem;
- margin: 0 auto;
- position: relative;
-
- /* IN THE END */
- overflow: hidden;
-}
-
-.slide {
- position: absolute;
- top: 0;
- width: 100%;
- height: 50rem;
-
- display: flex;
- align-items: center;
- justify-content: center;
-
- /* THIS creates the animation! */
- transition: transform 1s;
-}
-
-.slide > img {
- /* Only for images that have different size than slide */
- width: 100%;
- height: 100%;
- object-fit: cover;
-}
-
-.slider__btn {
- position: absolute;
- top: 50%;
- z-index: 10;
-
- border: none;
- background: rgba(255, 255, 255, 0.7);
- font-family: inherit;
- color: #333;
- border-radius: 50%;
- height: 5.5rem;
- width: 5.5rem;
- font-size: 3.25rem;
- cursor: pointer;
-}
-
-.slider__btn--left {
- left: 6%;
- transform: translate(-50%, -50%);
-}
-
-.slider__btn--right {
- right: 6%;
- transform: translate(50%, -50%);
-}
-
-.dots {
- position: absolute;
- bottom: 5%;
- left: 50%;
- transform: translateX(-50%);
- display: flex;
-}
-
-.dots__dot {
- border: none;
- background-color: #b9b9b9;
- opacity: 0.7;
- height: 1rem;
- width: 1rem;
- border-radius: 50%;
- margin-right: 1.75rem;
- cursor: pointer;
- transition: all 0.5s;
-
- /* Only necessary when overlying images */
- /* box-shadow: 0 0.6rem 1.5rem rgba(0, 0, 0, 0.7); */
-}
-
-.dots__dot:last-child {
- margin: 0;
-}
-
-.dots__dot--active {
- /* background-color: #fff; */
- background-color: #888;
- opacity: 1;
-}
-
-/* TESTIMONIALS */
-.testimonial {
- width: 65%;
- position: relative;
-}
-
-.testimonial::before {
- content: '\201C';
- position: absolute;
- top: -5.7rem;
- left: -6.8rem;
- line-height: 1;
- font-size: 20rem;
- font-family: inherit;
- color: var(--color-primary);
- z-index: -1;
-}
-
-.testimonial__header {
- font-size: 2.25rem;
- font-weight: 500;
- margin-bottom: 1.5rem;
-}
-
-.testimonial__text {
- font-size: 1.7rem;
- margin-bottom: 3.5rem;
- color: #666;
-}
-
-.testimonial__author {
- margin-left: 3rem;
- font-style: normal;
-
- display: grid;
- grid-template-columns: 6.5rem 1fr;
- column-gap: 2rem;
-}
-
-.testimonial__photo {
- grid-row: 1 / span 2;
- width: 6.5rem;
- border-radius: 50%;
-}
-
-.testimonial__name {
- font-size: 1.7rem;
- font-weight: 500;
- align-self: end;
- margin: 0;
-}
-
-.testimonial__location {
- font-size: 1.5rem;
-}
-
-.section__title--testimonials {
- margin-bottom: 4rem;
-}
-
-/* SIGNUP */
-.section--sign-up {
- background-color: #37383d;
- border-top: none;
- border-bottom: 1px solid #444;
- text-align: center;
- padding: 10rem 3rem;
-}
-
-.section--sign-up .section__header {
- color: #fff;
- text-align: center;
-}
-
-.section--sign-up .section__title {
- margin-bottom: 6rem;
-}
-
-.section--sign-up .btn {
- font-size: 1.9rem;
- padding: 2rem 5rem;
-}
-
-/* FOOTER */
-.footer {
- padding: 10rem 3rem;
- background-color: #37383d;
-}
-
-.footer__nav {
- list-style: none;
- display: flex;
- justify-content: center;
- margin-bottom: 5rem;
-}
-
-.footer__item {
- margin-right: 4rem;
-}
-
-.footer__link {
- font-size: 1.6rem;
- color: #eee;
- text-decoration: none;
-}
-
-.footer__logo {
- height: 5rem;
- display: block;
- margin: 0 auto;
- margin-bottom: 5rem;
-}
-
-.footer__copyright {
- font-size: 1.4rem;
- color: #aaa;
- text-align: center;
-}
-
-.footer__copyright .footer__link {
- font-size: 1.4rem;
-}
-
-/* MODAL WINDOW */
-.modal {
- position: fixed;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- max-width: 60rem;
- background-color: #f3f3f3;
- padding: 5rem 6rem;
- box-shadow: 0 4rem 6rem rgba(0, 0, 0, 0.3);
- z-index: 1000;
- transition: all 0.5s;
-}
-
-.overlay {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background-color: rgba(0, 0, 0, 0.5);
- backdrop-filter: blur(4px);
- z-index: 100;
- transition: all 0.5s;
-}
-
-.modal__header {
- font-size: 3.25rem;
- margin-bottom: 4.5rem;
- line-height: 1.5;
-}
-
-.modal__form {
- margin: 0 3rem;
- display: grid;
- grid-template-columns: 1fr 2fr;
- align-items: center;
- gap: 2.5rem;
-}
-
-.modal__form label {
- font-size: 1.7rem;
- font-weight: 500;
-}
-
-.modal__form input {
- font-size: 1.7rem;
- padding: 1rem 1.5rem;
- border: 1px solid #ddd;
- border-radius: 0.5rem;
-}
-
-.modal__form button {
- grid-column: 1 / span 2;
- justify-self: center;
- margin-top: 1rem;
-}
-
-.btn--close-modal {
- font-family: inherit;
- color: inherit;
- position: absolute;
- top: 0.5rem;
- right: 2rem;
- font-size: 4rem;
- cursor: pointer;
- border: none;
- background: none;
-}
-
-.hidden {
- visibility: hidden;
- opacity: 0;
-}
-
-/* COOKIE MESSAGE */
-.cookie-message {
- display: flex;
- align-items: center;
- justify-content: space-evenly;
- width: 100%;
- background-color: white;
- color: #bbb;
- font-size: 1.5rem;
- font-weight: 400;
-}
diff --git a/14-OOP/final/.prettierrc b/14-OOP/final/.prettierrc
deleted file mode 100644
index b4f8e6a6a1..0000000000
--- a/14-OOP/final/.prettierrc
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "singleQuote": true,
- "arrowParens": "avoid"
-}
diff --git a/14-OOP/final/index.html b/14-OOP/final/index.html
deleted file mode 100644
index 1d3f550d6d..0000000000
--- a/14-OOP/final/index.html
+++ /dev/null
@@ -1,30 +0,0 @@
-
-
-
- Object Oriented Programming (OOP) With JavaScript
-
-
-
-
- Object Oriented Programming (OOP) With JavaScript
-
-
diff --git a/14-OOP/final/script.js b/14-OOP/final/script.js
deleted file mode 100644
index ca569b44d8..0000000000
--- a/14-OOP/final/script.js
+++ /dev/null
@@ -1,647 +0,0 @@
-'use strict';
-
-/*
-///////////////////////////////////////
-// Constructor Functions and the new Operator
-const Person = function (firstName, birthYear) {
- // Instance properties
- this.firstName = firstName;
- this.birthYear = birthYear;
-
- // Never to this!
- // this.calcAge = function () {
- // console.log(2037 - this.birthYear);
- // };
-};
-
-const jonas = new Person('Jonas', 1991);
-console.log(jonas);
-
-// 1. New {} is created
-// 2. function is called, this = {}
-// 3. {} linked to prototype
-// 4. function automatically return {}
-
-const matilda = new Person('Matilda', 2017);
-const jack = new Person('Jack', 1975);
-
-console.log(jonas instanceof Person);
-
-Person.hey = function () {
- console.log('Hey there ๐');
- console.log(this);
-};
-Person.hey();
-
-///////////////////////////////////////
-// Prototypes
-console.log(Person.prototype);
-
-Person.prototype.calcAge = function () {
- console.log(2037 - this.birthYear);
-};
-
-jonas.calcAge();
-matilda.calcAge();
-
-console.log(jonas.__proto__);
-console.log(jonas.__proto__ === Person.prototype);
-
-console.log(Person.prototype.isPrototypeOf(jonas));
-console.log(Person.prototype.isPrototypeOf(matilda));
-console.log(Person.prototype.isPrototypeOf(Person));
-
-// .prototyeOfLinkedObjects
-
-Person.prototype.species = 'Homo Sapiens';
-console.log(jonas.species, matilda.species);
-
-console.log(jonas.hasOwnProperty('firstName'));
-console.log(jonas.hasOwnProperty('species'));
-
-
-///////////////////////////////////////
-// Prototypal Inheritance on Built-In Objects
-console.log(jonas.__proto__);
-// Object.prototype (top of prototype chain)
-console.log(jonas.__proto__.__proto__);
-console.log(jonas.__proto__.__proto__.__proto__);
-
-console.dir(Person.prototype.constructor);
-
-const arr = [3, 6, 6, 5, 6, 9, 9]; // new Array === []
-console.log(arr.__proto__);
-console.log(arr.__proto__ === Array.prototype);
-
-console.log(arr.__proto__.__proto__);
-
-Array.prototype.unique = function () {
- return [...new Set(this)];
-};
-
-console.log(arr.unique());
-
-const h1 = document.querySelector('h1');
-console.dir(x => x + 1);
-*/
-
-///////////////////////////////////////
-// Coding Challenge #1
-
-/*
-1. 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;
-2. Implement an 'accelerate' method that will increase the car's speed by 10, and log the new speed to the console;
-3. Implement a 'brake' method that will decrease the car's speed by 5, and log the new speed to the console;
-4. Create 2 car objects and experiment with calling 'accelerate' and 'brake' multiple times on each of them.
-
-DATA CAR 1: 'BMW' going at 120 km/h
-DATA CAR 2: 'Mercedes' going at 95 km/h
-
-GOOD LUCK ๐
-*/
-
-/*
-const Car = function (make, speed) {
- this.make = make;
- this.speed = speed;
-};
-
-Car.prototype.accelerate = function () {
- this.speed += 10;
- console.log(`${this.make} is going at ${this.speed} km/h`);
-};
-
-Car.prototype.brake = function () {
- this.speed -= 5;
- console.log(`${this.make} is going at ${this.speed} km/h`);
-};
-
-const bmw = new Car('BMW', 120);
-const mercedes = new Car('Mercedes', 95);
-
-bmw.accelerate();
-bmw.accelerate();
-bmw.brake();
-bmw.accelerate();
-
-
-///////////////////////////////////////
-// ES6 Classes
-
-// Class expression
-// const PersonCl = class {}
-
-// Class declaration
-class PersonCl {
- constructor(fullName, birthYear) {
- this.fullName = fullName;
- this.birthYear = birthYear;
- }
-
- // Instance methods
- // Methods will be added to .prototype property
- calcAge() {
- console.log(2037 - this.birthYear);
- }
-
- greet() {
- console.log(`Hey ${this.fullName}`);
- }
-
- get age() {
- return 2037 - this.birthYear;
- }
-
- // Set a property that already exists
- set fullName(name) {
- if (name.includes(' ')) this._fullName = name;
- else alert(`${name} is not a full name!`);
- }
-
- get fullName() {
- return this._fullName;
- }
-
- // Static method
- static hey() {
- console.log('Hey there ๐');
- console.log(this);
- }
-}
-
-const jessica = new PersonCl('Jessica Davis', 1996);
-console.log(jessica);
-jessica.calcAge();
-console.log(jessica.age);
-
-console.log(jessica.__proto__ === PersonCl.prototype);
-
-// PersonCl.prototype.greet = function () {
-// console.log(`Hey ${this.firstName}`);
-// };
-jessica.greet();
-
-// 1. Classes are NOT hoisted
-// 2. Classes are first-class citizes
-// 3. Classes are executed in strict mode
-
-const walter = new PersonCl('Walter White', 1965);
-// PersonCl.hey();
-
-
-///////////////////////////////////////
-// Setters and Getters
-const account = {
- owner: 'Jonas',
- movements: [200, 530, 120, 300],
-
- get latest() {
- return this.movements.slice(-1).pop();
- },
-
- set latest(mov) {
- this.movements.push(mov);
- },
-};
-
-console.log(account.latest);
-
-account.latest = 50;
-console.log(account.movements);
-
-
-///////////////////////////////////////
-// Object.create
-const PersonProto = {
- calcAge() {
- console.log(2037 - this.birthYear);
- },
-
- init(firstName, birthYear) {
- this.firstName = firstName;
- this.birthYear = birthYear;
- },
-};
-
-const steven = Object.create(PersonProto);
-console.log(steven);
-steven.name = 'Steven';
-steven.birthYear = 2002;
-steven.calcAge();
-
-console.log(steven.__proto__ === PersonProto);
-
-const sarah = Object.create(PersonProto);
-sarah.init('Sarah', 1979);
-sarah.calcAge();
-*/
-
-///////////////////////////////////////
-// Coding Challenge #2
-
-/*
-1. Re-create challenge 1, but this time using an ES6 class;
-2. Add a getter called 'speedUS' which returns the current speed in mi/h (divide by 1.6);
-3. 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);
-4. Create a new car and experiment with the accelerate and brake methods, and with the getter and setter.
-
-DATA CAR 1: 'Ford' going at 120 km/h
-
-GOOD LUCK ๐
-*/
-
-/*
-class CarCl {
- constructor(make, speed) {
- this.make = make;
- this.speed = speed;
- }
-
- accelerate() {
- this.speed += 10;
- console.log(`${this.make} is going at ${this.speed} km/h`);
- }
-
- brake() {
- this.speed -= 5;
- console.log(`${this.make} is going at ${this.speed} km/h`);
- }
-
- get speedUS() {
- return this.speed / 1.6;
- }
-
- set speedUS(speed) {
- this.speed = speed * 1.6;
- }
-}
-
-const ford = new CarCl('Ford', 120);
-console.log(ford.speedUS);
-ford.accelerate();
-ford.accelerate();
-ford.brake();
-ford.speedUS = 50;
-console.log(ford);
-
-
-///////////////////////////////////////
-// Inheritance Between "Classes": Constructor Functions
-
-const Person = function (firstName, birthYear) {
- this.firstName = firstName;
- this.birthYear = birthYear;
-};
-
-Person.prototype.calcAge = function () {
- console.log(2037 - this.birthYear);
-};
-
-const Student = function (firstName, birthYear, course) {
- Person.call(this, firstName, birthYear);
- this.course = course;
-};
-
-// Linking prototypes
-Student.prototype = Object.create(Person.prototype);
-
-Student.prototype.introduce = function () {
- console.log(`My name is ${this.firstName} and I study ${this.course}`);
-};
-
-const mike = new Student('Mike', 2020, 'Computer Science');
-mike.introduce();
-mike.calcAge();
-
-console.log(mike.__proto__);
-console.log(mike.__proto__.__proto__);
-
-console.log(mike instanceof Student);
-console.log(mike instanceof Person);
-console.log(mike instanceof Object);
-
-Student.prototype.constructor = Student;
-console.dir(Student.prototype.constructor);
-*/
-
-///////////////////////////////////////
-// Coding Challenge #3
-
-/*
-1. 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);
-2. Implement a 'chargeBattery' method which takes an argument 'chargeTo' and sets the battery charge to 'chargeTo';
-3. 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%';
-4. 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 ๐
-
-DATA CAR 1: 'Tesla' going at 120 km/h, with a charge of 23%
-
-GOOD LUCK ๐
-*/
-
-/*
-const Car = function (make, speed) {
- this.make = make;
- this.speed = speed;
-};
-
-Car.prototype.accelerate = function () {
- this.speed += 10;
- console.log(`${this.make} is going at ${this.speed} km/h`);
-};
-
-Car.prototype.brake = function () {
- this.speed -= 5;
- console.log(`${this.make} is going at ${this.speed} km/h`);
-};
-
-const EV = function (make, speed, charge) {
- Car.call(this, make, speed);
- this.charge = charge;
-};
-
-// Link the prototypes
-EV.prototype = Object.create(Car.prototype);
-
-EV.prototype.chargeBattery = function (chargeTo) {
- this.charge = chargeTo;
-};
-
-EV.prototype.accelerate = function () {
- this.speed += 20;
- this.charge--;
- console.log(
- `${this.make} is going at ${this.speed} km/h, with a charge of ${this.charge}`
- );
-};
-
-const tesla = new EV('Tesla', 120, 23);
-tesla.chargeBattery(90);
-console.log(tesla);
-tesla.brake();
-tesla.accelerate();
-
-
-///////////////////////////////////////
-// Inheritance Between "Classes": ES6 Classes
-
-class PersonCl {
- constructor(fullName, birthYear) {
- this.fullName = fullName;
- this.birthYear = birthYear;
- }
-
- // Instance methods
- calcAge() {
- console.log(2037 - this.birthYear);
- }
-
- greet() {
- console.log(`Hey ${this.fullName}`);
- }
-
- get age() {
- return 2037 - this.birthYear;
- }
-
- set fullName(name) {
- if (name.includes(' ')) this._fullName = name;
- else alert(`${name} is not a full name!`);
- }
-
- get fullName() {
- return this._fullName;
- }
-
- // Static method
- static hey() {
- console.log('Hey there ๐');
- }
-}
-
-class StudentCl extends PersonCl {
- constructor(fullName, birthYear, course) {
- // Always needs to happen first!
- super(fullName, birthYear);
- this.course = course;
- }
-
- introduce() {
- console.log(`My name is ${this.fullName} and I study ${this.course}`);
- }
-
- calcAge() {
- console.log(
- `I'm ${
- 2037 - this.birthYear
- } years old, but as a student I feel more like ${
- 2037 - this.birthYear + 10
- }`
- );
- }
-}
-
-const martha = new StudentCl('Martha Jones', 2012, 'Computer Science');
-martha.introduce();
-martha.calcAge();
-
-
-///////////////////////////////////////
-// Inheritance Between "Classes": Object.create
-
-const PersonProto = {
- calcAge() {
- console.log(2037 - this.birthYear);
- },
-
- init(firstName, birthYear) {
- this.firstName = firstName;
- this.birthYear = birthYear;
- },
-};
-
-const steven = Object.create(PersonProto);
-
-const StudentProto = Object.create(PersonProto);
-StudentProto.init = function (firstName, birthYear, course) {
- PersonProto.init.call(this, firstName, birthYear);
- this.course = course;
-};
-
-StudentProto.introduce = function () {
- console.log(`My name is ${this.fullName} and I study ${this.course}`);
-};
-
-const jay = Object.create(StudentProto);
-jay.init('Jay', 2010, 'Compuetr Science');
-jay.introduce();
-jay.calcAge();
-
-
-///////////////////////////////////////
-// Encapsulation: Protected Properties and Methods
-// Encapsulation: Private Class Fields and Methods
-
-// 1) Public fields
-// 2) Private fields
-// 3) Public methods
-// 4) Private methods
-// (there is also the static version)
-
-class Account {
- // 1) Public fields (instances)
- locale = navigator.language;
-
- // 2) Private fields (instances)
- #movements = [];
- #pin;
-
- constructor(owner, currency, pin) {
- this.owner = owner;
- this.currency = currency;
- this.#pin = pin;
-
- // Protected property
- // this._movements = [];
- // this.locale = navigator.language;
-
- console.log(`Thanks for opening an account, ${owner}`);
- }
-
- // 3) Public methods
-
- // Public interface
- getMovements() {
- return this.#movements;
- }
-
- deposit(val) {
- this.#movements.push(val);
- return this;
- }
-
- withdraw(val) {
- this.deposit(-val);
- return this;
- }
-
- requestLoan(val) {
- // if (this.#approveLoan(val)) {
- if (this._approveLoan(val)) {
- this.deposit(val);
- console.log(`Loan approved`);
- return this;
- }
- }
-
- static helper() {
- console.log('Helper');
- }
-
- // 4) Private methods
- // #approveLoan(val) {
- _approveLoan(val) {
- return true;
- }
-}
-
-const acc1 = new Account('Jonas', 'EUR', 1111);
-
-// acc1._movements.push(250);
-// acc1._movements.push(-140);
-// acc1.approveLoan(1000);
-
-acc1.deposit(250);
-acc1.withdraw(140);
-acc1.requestLoan(1000);
-console.log(acc1.getMovements());
-console.log(acc1);
-Account.helper();
-
-// console.log(acc1.#movements);
-// console.log(acc1.#pin);
-// console.log(acc1.#approveLoan(100));
-
-// Chaining
-acc1.deposit(300).deposit(500).withdraw(35).requestLoan(25000).withdraw(4000);
-console.log(acc1.getMovements());
-*/
-
-///////////////////////////////////////
-// Coding Challenge #4
-
-/*
-1. Re-create challenge #3, but this time using ES6 classes: create an 'EVCl' child class of the 'CarCl' class
-2. Make the 'charge' property private;
-3. 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!
-
-DATA CAR 1: 'Rivian' going at 120 km/h, with a charge of 23%
-
-GOOD LUCK ๐
-*/
-
-/*
-class CarCl {
- constructor(make, speed) {
- this.make = make;
- this.speed = speed;
- }
-
- accelerate() {
- this.speed += 10;
- console.log(`${this.make} is going at ${this.speed} km/h`);
- }
-
- brake() {
- this.speed -= 5;
- console.log(`${this.make} is going at ${this.speed} km/h`);
- return this;
- }
-
- get speedUS() {
- return this.speed / 1.6;
- }
-
- set speedUS(speed) {
- this.speed = speed * 1.6;
- }
-}
-
-class EVCl extends CarCl {
- #charge;
-
- constructor(make, speed, charge) {
- super(make, speed);
- this.#charge = charge;
- }
-
- chargeBattery(chargeTo) {
- this.#charge = chargeTo;
- return this;
- }
-
- accelerate() {
- this.speed += 20;
- this.#charge--;
- console.log(
- `${this.make} is going at ${this.speed} km/h, with a charge of ${
- this.#charge
- }`
- );
- return this;
- }
-}
-
-const rivian = new EVCl('Rivian', 120, 23);
-console.log(rivian);
-// console.log(rivian.#charge);
-rivian
- .accelerate()
- .accelerate()
- .accelerate()
- .brake()
- .chargeBattery(50)
- .accelerate();
-
-console.log(rivian.speedUS);
-*/
-
diff --git a/14-OOP/starter/.prettierrc b/14-OOP/starter/.prettierrc
deleted file mode 100644
index b4f8e6a6a1..0000000000
--- a/14-OOP/starter/.prettierrc
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "singleQuote": true,
- "arrowParens": "avoid"
-}
diff --git a/14-OOP/starter/index.html b/14-OOP/starter/index.html
deleted file mode 100644
index 1d3f550d6d..0000000000
--- a/14-OOP/starter/index.html
+++ /dev/null
@@ -1,30 +0,0 @@
-
-
-
- Object Oriented Programming (OOP) With JavaScript
-
-
-
-
- Object Oriented Programming (OOP) With JavaScript
-
-
diff --git a/14-OOP/starter/script.js b/14-OOP/starter/script.js
deleted file mode 100644
index ad9a93a7c1..0000000000
--- a/14-OOP/starter/script.js
+++ /dev/null
@@ -1 +0,0 @@
-'use strict';
diff --git a/15-Mapty/final/.prettierrc b/15-Mapty/final/.prettierrc
deleted file mode 100644
index b4f8e6a6a1..0000000000
--- a/15-Mapty/final/.prettierrc
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "singleQuote": true,
- "arrowParens": "avoid"
-}
diff --git a/15-Mapty/final/Mapty-architecture-final.png b/15-Mapty/final/Mapty-architecture-final.png
deleted file mode 100644
index 56ad00c113..0000000000
Binary files a/15-Mapty/final/Mapty-architecture-final.png and /dev/null differ
diff --git a/15-Mapty/final/Mapty-architecture-part-1.png b/15-Mapty/final/Mapty-architecture-part-1.png
deleted file mode 100644
index 9e2159e83c..0000000000
Binary files a/15-Mapty/final/Mapty-architecture-part-1.png and /dev/null differ
diff --git a/15-Mapty/final/Mapty-flowchart.png b/15-Mapty/final/Mapty-flowchart.png
deleted file mode 100644
index c0f24c002e..0000000000
Binary files a/15-Mapty/final/Mapty-flowchart.png and /dev/null differ
diff --git a/15-Mapty/final/icon.png b/15-Mapty/final/icon.png
deleted file mode 100644
index d2f503119a..0000000000
Binary files a/15-Mapty/final/icon.png and /dev/null differ
diff --git a/15-Mapty/final/index.html b/15-Mapty/final/index.html
deleted file mode 100644
index 134a9dd712..0000000000
--- a/15-Mapty/final/index.html
+++ /dev/null
@@ -1,138 +0,0 @@
-
-
-
- mapty // Map your workouts
-
-
-
-
-
-
-
diff --git a/15-Mapty/final/logo.png b/15-Mapty/final/logo.png
deleted file mode 100644
index 50a9cba8ee..0000000000
Binary files a/15-Mapty/final/logo.png and /dev/null differ
diff --git a/15-Mapty/final/other.js b/15-Mapty/final/other.js
deleted file mode 100644
index ae83f31a4d..0000000000
--- a/15-Mapty/final/other.js
+++ /dev/null
@@ -1,2 +0,0 @@
-const firstName = 'Jonas';
-console.log(months);
diff --git a/15-Mapty/final/script.js b/15-Mapty/final/script.js
deleted file mode 100644
index 1a9bbd1147..0000000000
--- a/15-Mapty/final/script.js
+++ /dev/null
@@ -1,325 +0,0 @@
-'use strict';
-
-class Workout {
- date = new Date();
- id = (Date.now() + '').slice(-10);
- clicks = 0;
-
- constructor(coords, distance, duration) {
- // this.date = ...
- // this.id = ...
- this.coords = coords; // [lat, lng]
- this.distance = distance; // in km
- this.duration = duration; // in min
- }
-
- _setDescription() {
- // prettier-ignore
- const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
-
- this.description = `${this.type[0].toUpperCase()}${this.type.slice(1)} on ${
- months[this.date.getMonth()]
- } ${this.date.getDate()}`;
- }
-
- click() {
- this.clicks++;
- }
-}
-
-class Running extends Workout {
- type = 'running';
-
- constructor(coords, distance, duration, cadence) {
- super(coords, distance, duration);
- this.cadence = cadence;
- this.calcPace();
- this._setDescription();
- }
-
- calcPace() {
- // min/km
- this.pace = this.duration / this.distance;
- return this.pace;
- }
-}
-
-class Cycling extends Workout {
- type = 'cycling';
-
- constructor(coords, distance, duration, elevationGain) {
- super(coords, distance, duration);
- this.elevationGain = elevationGain;
- // this.type = 'cycling';
- this.calcSpeed();
- this._setDescription();
- }
-
- calcSpeed() {
- // km/h
- this.speed = this.distance / (this.duration / 60);
- return this.speed;
- }
-}
-
-// const run1 = new Running([39, -12], 5.2, 24, 178);
-// const cycling1 = new Cycling([39, -12], 27, 95, 523);
-// console.log(run1, cycling1);
-
-///////////////////////////////////////
-// APPLICATION ARCHITECTURE
-const form = document.querySelector('.form');
-const containerWorkouts = document.querySelector('.workouts');
-const inputType = document.querySelector('.form__input--type');
-const inputDistance = document.querySelector('.form__input--distance');
-const inputDuration = document.querySelector('.form__input--duration');
-const inputCadence = document.querySelector('.form__input--cadence');
-const inputElevation = document.querySelector('.form__input--elevation');
-
-class App {
- #map;
- #mapZoomLevel = 13;
- #mapEvent;
- #workouts = [];
-
- constructor() {
- // Get user's position
- this._getPosition();
-
- // Get data from local storage
- this._getLocalStorage();
-
- // Attach event handlers
- form.addEventListener('submit', this._newWorkout.bind(this));
- inputType.addEventListener('change', this._toggleElevationField);
- containerWorkouts.addEventListener('click', this._moveToPopup.bind(this));
- }
-
- _getPosition() {
- if (navigator.geolocation)
- navigator.geolocation.getCurrentPosition(
- this._loadMap.bind(this),
- function () {
- alert('Could not get your position');
- }
- );
- }
-
- _loadMap(position) {
- const { latitude } = position.coords;
- const { longitude } = position.coords;
- // console.log(`https://www.google.pt/maps/@${latitude},${longitude}`);
-
- const coords = [latitude, longitude];
-
- this.#map = L.map('map').setView(coords, this.#mapZoomLevel);
-
- L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/%7Bz%7D/%7Bx%7D/%7By%7D.png', {
- attribution:
- '© OpenStreetMap contributors',
- }).addTo(this.#map);
-
- // Handling clicks on map
- this.#map.on('click', this._showForm.bind(this));
-
- this.#workouts.forEach(work => {
- this._renderWorkoutMarker(work);
- });
- }
-
- _showForm(mapE) {
- this.#mapEvent = mapE;
- form.classList.remove('hidden');
- inputDistance.focus();
- }
-
- _hideForm() {
- // Empty inputs
- inputDistance.value = inputDuration.value = inputCadence.value = inputElevation.value =
- '';
-
- form.style.display = 'none';
- form.classList.add('hidden');
- setTimeout(() => (form.style.display = 'grid'), 1000);
- }
-
- _toggleElevationField() {
- inputElevation.closest('.form__row').classList.toggle('form__row--hidden');
- inputCadence.closest('.form__row').classList.toggle('form__row--hidden');
- }
-
- _newWorkout(e) {
- const validInputs = (...inputs) =>
- inputs.every(inp => Number.isFinite(inp));
- const allPositive = (...inputs) => inputs.every(inp => inp > 0);
-
- e.preventDefault();
-
- // Get data from form
- const type = inputType.value;
- const distance = +inputDistance.value;
- const duration = +inputDuration.value;
- const { lat, lng } = this.#mapEvent.latlng;
- let workout;
-
- // If workout running, create running object
- if (type === 'running') {
- const cadence = +inputCadence.value;
-
- // Check if data is valid
- if (
- // !Number.isFinite(distance) ||
- // !Number.isFinite(duration) ||
- // !Number.isFinite(cadence)
- !validInputs(distance, duration, cadence) ||
- !allPositive(distance, duration, cadence)
- )
- return alert('Inputs have to be positive numbers!');
-
- workout = new Running([lat, lng], distance, duration, cadence);
- }
-
- // If workout cycling, create cycling object
- if (type === 'cycling') {
- const elevation = +inputElevation.value;
-
- if (
- !validInputs(distance, duration, elevation) ||
- !allPositive(distance, duration)
- )
- return alert('Inputs have to be positive numbers!');
-
- workout = new Cycling([lat, lng], distance, duration, elevation);
- }
-
- // Add new object to workout array
- this.#workouts.push(workout);
-
- // Render workout on map as marker
- this._renderWorkoutMarker(workout);
-
- // Render workout on list
- this._renderWorkout(workout);
-
- // Hide form + clear input fields
- this._hideForm();
-
- // Set local storage to all workouts
- this._setLocalStorage();
- }
-
- _renderWorkoutMarker(workout) {
- L.marker(workout.coords)
- .addTo(this.#map)
- .bindPopup(
- L.popup({
- maxWidth: 250,
- minWidth: 100,
- autoClose: false,
- closeOnClick: false,
- className: `${workout.type}-popup`,
- })
- )
- .setPopupContent(
- `${workout.type === 'running' ? '๐โโ๏ธ' : '๐ดโโ๏ธ'} ${workout.description}`
- )
- .openPopup();
- }
-
- _renderWorkout(workout) {
- let html = `
-
- ${workout.description}
-
- ${
- workout.type === 'running' ? '๐โโ๏ธ' : '๐ดโโ๏ธ'
- }
- ${workout.distance}
- km
-
-
- โฑ
- ${workout.duration}
- min
-
- `;
-
- if (workout.type === 'running')
- html += `
-
- โก๏ธ
- ${workout.pace.toFixed(1)}
- min/km
-
-
- ๐ฆถ๐ผ
- ${workout.cadence}
- spm
-
-
- `;
-
- if (workout.type === 'cycling')
- html += `
-
- โก๏ธ
- ${workout.speed.toFixed(1)}
- km/h
-
-
- โฐ
- ${workout.elevationGain}
- m
-
-
- `;
-
- form.insertAdjacentHTML('afterend', html);
- }
-
- _moveToPopup(e) {
- // BUGFIX: When we click on a workout before the map has loaded, we get an error. But there is an easy fix:
- if (!this.#map) return;
-
- const workoutEl = e.target.closest('.workout');
-
- if (!workoutEl) return;
-
- const workout = this.#workouts.find(
- work => work.id === workoutEl.dataset.id
- );
-
- this.#map.setView(workout.coords, this.#mapZoomLevel, {
- animate: true,
- pan: {
- duration: 1,
- },
- });
-
- // using the public interface
- // workout.click();
- }
-
- _setLocalStorage() {
- localStorage.setItem('workouts', JSON.stringify(this.#workouts));
- }
-
- _getLocalStorage() {
- const data = JSON.parse(localStorage.getItem('workouts'));
-
- if (!data) return;
-
- this.#workouts = data;
-
- this.#workouts.forEach(work => {
- this._renderWorkout(work);
- });
- }
-
- reset() {
- localStorage.removeItem('workouts');
- location.reload();
- }
-}
-
-const app = new App();
diff --git a/15-Mapty/final/style.css b/15-Mapty/final/style.css
deleted file mode 100644
index 5388f646f4..0000000000
--- a/15-Mapty/final/style.css
+++ /dev/null
@@ -1,220 +0,0 @@
-:root {
- --color-brand--1: #ffb545;
- --color-brand--2: #00c46a;
-
- --color-dark--1: #2d3439;
- --color-dark--2: #42484d;
- --color-light--1: #aaa;
- --color-light--2: #ececec;
- --color-light--3: rgb(214, 222, 224);
-}
-
-* {
- margin: 0;
- padding: 0;
- box-sizing: inherit;
-}
-
-html {
- font-size: 62.5%;
- box-sizing: border-box;
-}
-
-body {
- font-family: 'Manrope', sans-serif;
- color: var(--color-light--2);
- font-weight: 400;
- line-height: 1.6;
- height: 100vh;
- overscroll-behavior-y: none;
-
- background-color: #fff;
- padding: 2.5rem;
-
- display: flex;
-}
-
-/* GENERAL */
-a:link,
-a:visited {
- color: var(--color-brand--1);
-}
-
-/* SIDEBAR */
-.sidebar {
- flex-basis: 50rem;
- background-color: var(--color-dark--1);
- padding: 3rem 5rem 4rem 5rem;
- display: flex;
- flex-direction: column;
-}
-
-.logo {
- height: 5.2rem;
- align-self: center;
- margin-bottom: 4rem;
-}
-
-.workouts {
- list-style: none;
- height: 77vh;
- overflow-y: scroll;
- overflow-x: hidden;
-}
-
-.workouts::-webkit-scrollbar {
- width: 0;
-}
-
-.workout {
- background-color: var(--color-dark--2);
- border-radius: 5px;
- padding: 1.5rem 2.25rem;
- margin-bottom: 1.75rem;
- cursor: pointer;
-
- display: grid;
- grid-template-columns: 1fr 1fr 1fr 1fr;
- gap: 0.75rem 1.5rem;
-}
-.workout--running {
- border-left: 5px solid var(--color-brand--2);
-}
-.workout--cycling {
- border-left: 5px solid var(--color-brand--1);
-}
-
-.workout__title {
- font-size: 1.7rem;
- font-weight: 600;
- grid-column: 1 / -1;
-}
-
-.workout__details {
- display: flex;
- align-items: baseline;
-}
-
-.workout__icon {
- font-size: 1.8rem;
- margin-right: 0.2rem;
- height: 0.28rem;
-}
-
-.workout__value {
- font-size: 1.5rem;
- margin-right: 0.5rem;
-}
-
-.workout__unit {
- font-size: 1.1rem;
- color: var(--color-light--1);
- text-transform: uppercase;
- font-weight: 800;
-}
-
-.form {
- background-color: var(--color-dark--2);
- border-radius: 5px;
- padding: 1.5rem 2.75rem;
- margin-bottom: 1.75rem;
-
- display: grid;
- grid-template-columns: 1fr 1fr;
- gap: 0.5rem 2.5rem;
-
- /* Match height and activity boxes */
- height: 9.25rem;
- transition: all 0.5s, transform 1ms;
-}
-
-.form.hidden {
- transform: translateY(-30rem);
- height: 0;
- padding: 0 2.25rem;
- margin-bottom: 0;
- opacity: 0;
-}
-
-.form__row {
- display: flex;
- align-items: center;
-}
-
-.form__row--hidden {
- display: none;
-}
-
-.form__label {
- flex: 0 0 50%;
- font-size: 1.5rem;
- font-weight: 600;
-}
-
-.form__input {
- width: 100%;
- padding: 0.3rem 1.1rem;
- font-family: inherit;
- font-size: 1.4rem;
- border: none;
- border-radius: 3px;
- background-color: var(--color-light--3);
- transition: all 0.2s;
-}
-
-.form__input:focus {
- outline: none;
- background-color: #fff;
-}
-
-.form__btn {
- display: none;
-}
-
-.copyright {
- margin-top: auto;
- font-size: 1.3rem;
- text-align: center;
- color: var(--color-light--1);
-}
-
-.twitter-link:link,
-.twitter-link:visited {
- color: var(--color-light--1);
- transition: all 0.2s;
-}
-
-.twitter-link:hover,
-.twitter-link:active {
- color: var(--color-light--2);
-}
-
-/* MAP */
-#map {
- flex: 1;
- height: 100%;
- background-color: var(--color-light--1);
-}
-
-/* Popup width is defined in JS using options */
-.leaflet-popup .leaflet-popup-content-wrapper {
- background-color: var(--color-dark--1);
- color: var(--color-light--2);
- border-radius: 5px;
- padding-right: 0.6rem;
-}
-
-.leaflet-popup .leaflet-popup-content {
- font-size: 1.5rem;
-}
-
-.leaflet-popup .leaflet-popup-tip {
- background-color: var(--color-dark--1);
-}
-
-.running-popup .leaflet-popup-content-wrapper {
- border-left: 5px solid var(--color-brand--2);
-}
-.cycling-popup .leaflet-popup-content-wrapper {
- border-left: 5px solid var(--color-brand--1);
-}
diff --git a/15-Mapty/starter/.prettierrc b/15-Mapty/starter/.prettierrc
deleted file mode 100644
index b4f8e6a6a1..0000000000
--- a/15-Mapty/starter/.prettierrc
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "singleQuote": true,
- "arrowParens": "avoid"
-}
diff --git a/15-Mapty/starter/Mapty-architecture-final.png b/15-Mapty/starter/Mapty-architecture-final.png
deleted file mode 100644
index 56ad00c113..0000000000
Binary files a/15-Mapty/starter/Mapty-architecture-final.png and /dev/null differ
diff --git a/15-Mapty/starter/Mapty-architecture-part-1.png b/15-Mapty/starter/Mapty-architecture-part-1.png
deleted file mode 100644
index 9e2159e83c..0000000000
Binary files a/15-Mapty/starter/Mapty-architecture-part-1.png and /dev/null differ
diff --git a/15-Mapty/starter/Mapty-flowchart.png b/15-Mapty/starter/Mapty-flowchart.png
deleted file mode 100644
index c0f24c002e..0000000000
Binary files a/15-Mapty/starter/Mapty-flowchart.png and /dev/null differ
diff --git a/15-Mapty/starter/icon.png b/15-Mapty/starter/icon.png
deleted file mode 100644
index d2f503119a..0000000000
Binary files a/15-Mapty/starter/icon.png and /dev/null differ
diff --git a/15-Mapty/starter/index.html b/15-Mapty/starter/index.html
deleted file mode 100644
index 234c87fb55..0000000000
--- a/15-Mapty/starter/index.html
+++ /dev/null
@@ -1,123 +0,0 @@
-
-
-
- mapty // Map your workouts
-
-
-
-
-
-
-
diff --git a/15-Mapty/starter/logo.png b/15-Mapty/starter/logo.png
deleted file mode 100644
index 50a9cba8ee..0000000000
Binary files a/15-Mapty/starter/logo.png and /dev/null differ
diff --git a/15-Mapty/starter/script.js b/15-Mapty/starter/script.js
deleted file mode 100644
index 9ba12287f8..0000000000
--- a/15-Mapty/starter/script.js
+++ /dev/null
@@ -1,12 +0,0 @@
-'use strict';
-
-// prettier-ignore
-const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
-
-const form = document.querySelector('.form');
-const containerWorkouts = document.querySelector('.workouts');
-const inputType = document.querySelector('.form__input--type');
-const inputDistance = document.querySelector('.form__input--distance');
-const inputDuration = document.querySelector('.form__input--duration');
-const inputCadence = document.querySelector('.form__input--cadence');
-const inputElevation = document.querySelector('.form__input--elevation');
diff --git a/15-Mapty/starter/style.css b/15-Mapty/starter/style.css
deleted file mode 100644
index 5388f646f4..0000000000
--- a/15-Mapty/starter/style.css
+++ /dev/null
@@ -1,220 +0,0 @@
-:root {
- --color-brand--1: #ffb545;
- --color-brand--2: #00c46a;
-
- --color-dark--1: #2d3439;
- --color-dark--2: #42484d;
- --color-light--1: #aaa;
- --color-light--2: #ececec;
- --color-light--3: rgb(214, 222, 224);
-}
-
-* {
- margin: 0;
- padding: 0;
- box-sizing: inherit;
-}
-
-html {
- font-size: 62.5%;
- box-sizing: border-box;
-}
-
-body {
- font-family: 'Manrope', sans-serif;
- color: var(--color-light--2);
- font-weight: 400;
- line-height: 1.6;
- height: 100vh;
- overscroll-behavior-y: none;
-
- background-color: #fff;
- padding: 2.5rem;
-
- display: flex;
-}
-
-/* GENERAL */
-a:link,
-a:visited {
- color: var(--color-brand--1);
-}
-
-/* SIDEBAR */
-.sidebar {
- flex-basis: 50rem;
- background-color: var(--color-dark--1);
- padding: 3rem 5rem 4rem 5rem;
- display: flex;
- flex-direction: column;
-}
-
-.logo {
- height: 5.2rem;
- align-self: center;
- margin-bottom: 4rem;
-}
-
-.workouts {
- list-style: none;
- height: 77vh;
- overflow-y: scroll;
- overflow-x: hidden;
-}
-
-.workouts::-webkit-scrollbar {
- width: 0;
-}
-
-.workout {
- background-color: var(--color-dark--2);
- border-radius: 5px;
- padding: 1.5rem 2.25rem;
- margin-bottom: 1.75rem;
- cursor: pointer;
-
- display: grid;
- grid-template-columns: 1fr 1fr 1fr 1fr;
- gap: 0.75rem 1.5rem;
-}
-.workout--running {
- border-left: 5px solid var(--color-brand--2);
-}
-.workout--cycling {
- border-left: 5px solid var(--color-brand--1);
-}
-
-.workout__title {
- font-size: 1.7rem;
- font-weight: 600;
- grid-column: 1 / -1;
-}
-
-.workout__details {
- display: flex;
- align-items: baseline;
-}
-
-.workout__icon {
- font-size: 1.8rem;
- margin-right: 0.2rem;
- height: 0.28rem;
-}
-
-.workout__value {
- font-size: 1.5rem;
- margin-right: 0.5rem;
-}
-
-.workout__unit {
- font-size: 1.1rem;
- color: var(--color-light--1);
- text-transform: uppercase;
- font-weight: 800;
-}
-
-.form {
- background-color: var(--color-dark--2);
- border-radius: 5px;
- padding: 1.5rem 2.75rem;
- margin-bottom: 1.75rem;
-
- display: grid;
- grid-template-columns: 1fr 1fr;
- gap: 0.5rem 2.5rem;
-
- /* Match height and activity boxes */
- height: 9.25rem;
- transition: all 0.5s, transform 1ms;
-}
-
-.form.hidden {
- transform: translateY(-30rem);
- height: 0;
- padding: 0 2.25rem;
- margin-bottom: 0;
- opacity: 0;
-}
-
-.form__row {
- display: flex;
- align-items: center;
-}
-
-.form__row--hidden {
- display: none;
-}
-
-.form__label {
- flex: 0 0 50%;
- font-size: 1.5rem;
- font-weight: 600;
-}
-
-.form__input {
- width: 100%;
- padding: 0.3rem 1.1rem;
- font-family: inherit;
- font-size: 1.4rem;
- border: none;
- border-radius: 3px;
- background-color: var(--color-light--3);
- transition: all 0.2s;
-}
-
-.form__input:focus {
- outline: none;
- background-color: #fff;
-}
-
-.form__btn {
- display: none;
-}
-
-.copyright {
- margin-top: auto;
- font-size: 1.3rem;
- text-align: center;
- color: var(--color-light--1);
-}
-
-.twitter-link:link,
-.twitter-link:visited {
- color: var(--color-light--1);
- transition: all 0.2s;
-}
-
-.twitter-link:hover,
-.twitter-link:active {
- color: var(--color-light--2);
-}
-
-/* MAP */
-#map {
- flex: 1;
- height: 100%;
- background-color: var(--color-light--1);
-}
-
-/* Popup width is defined in JS using options */
-.leaflet-popup .leaflet-popup-content-wrapper {
- background-color: var(--color-dark--1);
- color: var(--color-light--2);
- border-radius: 5px;
- padding-right: 0.6rem;
-}
-
-.leaflet-popup .leaflet-popup-content {
- font-size: 1.5rem;
-}
-
-.leaflet-popup .leaflet-popup-tip {
- background-color: var(--color-dark--1);
-}
-
-.running-popup .leaflet-popup-content-wrapper {
- border-left: 5px solid var(--color-brand--2);
-}
-.cycling-popup .leaflet-popup-content-wrapper {
- border-left: 5px solid var(--color-brand--1);
-}
diff --git a/16-Asynchronous/final/.prettierrc b/16-Asynchronous/final/.prettierrc
deleted file mode 100644
index b4f8e6a6a1..0000000000
--- a/16-Asynchronous/final/.prettierrc
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "singleQuote": true,
- "arrowParens": "avoid"
-}
diff --git a/16-Asynchronous/final/img/img-1.jpg b/16-Asynchronous/final/img/img-1.jpg
deleted file mode 100644
index 9627ba5572..0000000000
Binary files a/16-Asynchronous/final/img/img-1.jpg and /dev/null differ
diff --git a/16-Asynchronous/final/img/img-2.jpg b/16-Asynchronous/final/img/img-2.jpg
deleted file mode 100644
index 70cb723446..0000000000
Binary files a/16-Asynchronous/final/img/img-2.jpg and /dev/null differ
diff --git a/16-Asynchronous/final/img/img-3.jpg b/16-Asynchronous/final/img/img-3.jpg
deleted file mode 100644
index 45d23a3081..0000000000
Binary files a/16-Asynchronous/final/img/img-3.jpg and /dev/null differ
diff --git a/16-Asynchronous/final/index.html b/16-Asynchronous/final/index.html
deleted file mode 100644
index 2b0e434dd3..0000000000
--- a/16-Asynchronous/final/index.html
+++ /dev/null
@@ -1,31 +0,0 @@
-
-
-
- Asynchronous JavaScript
-
-
-
-
-
-
-
-
-
-
-
diff --git a/16-Asynchronous/final/script.js b/16-Asynchronous/final/script.js
deleted file mode 100644
index cdc1efd230..0000000000
--- a/16-Asynchronous/final/script.js
+++ /dev/null
@@ -1,744 +0,0 @@
-'use strict';
-
-const btn = document.querySelector('.btn-country');
-const countriesContainer = document.querySelector('.countries');
-
-const renderCountry = function (data, className = '') {
- const html = `
-
-
-
${data.name}
-
${data.region}
-
๐ซ ${(
- +data.population / 1000000
- ).toFixed(1)} people
-
๐ฃ๏ธ ${data.languages[0].name}
-
๐ฐ ${data.currencies[0].name}
-
- `;
- countriesContainer.insertAdjacentHTML('beforeend', html);
- countriesContainer.style.opacity = 1;
-};
-
-const renderError = function (msg) {
- countriesContainer.insertAdjacentText('beforeend', msg);
- countriesContainer.style.opacity = 1;
-};
-
-const getJSON = function (url, errorMsg = 'Something went wrong') {
- return fetch(url).then(response => {
- if (!response.ok) throw new Error(`${errorMsg} (${response.status})`);
-
- return response.json();
- });
-};
-
-/*
-///////////////////////////////////////
-// Our First AJAX Call: XMLHttpRequest
-
-const getCountryData = function (country) {
- const request = new XMLHttpRequest();
- request.open('GET', `https://restcountries.eu/rest/v2/name/${country}`);
- request.send();
-
- request.addEventListener('load', function () {
- const [data] = JSON.parse(this.responseText);
- console.log(data);
-
- const html = `
-
-
-
${data.name}
-
${data.region}
-
๐ซ ${(
- +data.population / 1000000
- ).toFixed(1)} people
-
๐ฃ๏ธ ${data.languages[0].name}
-
๐ฐ ${data.currencies[0].name}
-
- `;
- countriesContainer.insertAdjacentHTML('beforeend', html);
- countriesContainer.style.opacity = 1;
- });
-};
-
-getCountryData('portugal');
-getCountryData('usa');
-getCountryData('germany');
-*/
-
-///////////////////////////////////////
-// Welcome to Callback Hell
-
-/*
-const getCountryAndNeighbour = function (country) {
- // AJAX call country 1
- const request = new XMLHttpRequest();
- request.open('GET', `https://restcountries.eu/rest/v2/name/${country}`);
- request.send();
-
- request.addEventListener('load', function () {
- const [data] = JSON.parse(this.responseText);
- console.log(data);
-
- // Render country 1
- renderCountry(data);
-
- // Get neighbour country (2)
- const [neighbour] = data.borders;
-
- if (!neighbour) return;
-
- // AJAX call country 2
- const request2 = new XMLHttpRequest();
- request2.open('GET', `https://restcountries.eu/rest/v2/alpha/${neighbour}`);
- request2.send();
-
- request2.addEventListener('load', function () {
- const data2 = JSON.parse(this.responseText);
- console.log(data2);
-
- renderCountry(data2, 'neighbour');
- });
- });
-};
-
-// getCountryAndNeighbour('portugal');
-getCountryAndNeighbour('usa');
-
-setTimeout(() => {
- console.log('1 second passed');
- setTimeout(() => {
- console.log('2 seconds passed');
- setTimeout(() => {
- console.log('3 second passed');
- setTimeout(() => {
- console.log('4 second passed');
- }, 1000);
- }, 1000);
- }, 1000);
-}, 1000);
-
-
-///////////////////////////////////////
-// Consuming Promises
-// Chaining Promises
-// Handling Rejected Promises
-// Throwing Errors Manually
-
-// const getCountryData = function (country) {
-// fetch(`https://restcountries.eu/rest/v2/name/${country}`)
-// .then(function (response) {
-// console.log(response);
-// return response.json();
-// })
-// .then(function (data) {
-// console.log(data);
-// renderCountry(data[0]);
-// });
-// };
-
-// const getCountryData = function (country) {
-// // Country 1
-// fetch(`https://restcountries.eu/rest/v2/name/${country}`)
-// .then(response => {
-// console.log(response);
-
-// if (!response.ok)
-// throw new Error(`Country not found (${response.status})`);
-
-// return response.json();
-// })
-// .then(data => {
-// renderCountry(data[0]);
-// // const neighbour = data[0].borders[0];
-// const neighbour = 'dfsdfdef';
-
-// if (!neighbour) return;
-
-// // Country 2
-// return fetch(`https://restcountries.eu/rest/v2/alpha/${neighbour}`);
-// })
-// .then(response => {
-// if (!response.ok)
-// throw new Error(`Country not found (${response.status})`);
-
-// return response.json();
-// })
-// .then(data => renderCountry(data, 'neighbour'))
-// .catch(err => {
-// console.error(`${err} ๐ฅ๐ฅ๐ฅ`);
-// renderError(`Something went wrong ๐ฅ๐ฅ ${err.message}. Try again!`);
-// })
-// .finally(() => {
-// countriesContainer.style.opacity = 1;
-// });
-// };
-
-const getCountryData = function (country) {
- // Country 1
- getJSON(
- `https://restcountries.eu/rest/v2/name/${country}`,
- 'Country not found'
- )
- .then(data => {
- renderCountry(data[0]);
- const neighbour = data[0].borders[0];
-
- if (!neighbour) throw new Error('No neighbour found!');
-
- // Country 2
- return getJSON(
- `https://restcountries.eu/rest/v2/alpha/${neighbour}`,
- 'Country not found'
- );
- })
-
- .then(data => renderCountry(data, 'neighbour'))
- .catch(err => {
- console.error(`${err} ๐ฅ๐ฅ๐ฅ`);
- renderError(`Something went wrong ๐ฅ๐ฅ ${err.message}. Try again!`);
- })
- .finally(() => {
- countriesContainer.style.opacity = 1;
- });
-};
-
-btn.addEventListener('click', function () {
- getCountryData('portugal');
-});
-
-// getCountryData('australia');
-*/
-
-///////////////////////////////////////
-// Coding Challenge #1
-
-/*
-In 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.
-
-Here are your tasks:
-
-PART 1
-1. Create a function 'whereAmI' which takes as inputs a latitude value (lat) and a longitude value (lng) (these are GPS coordinates, examples are below).
-2. 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://geocode.xyz/api.
-The AJAX call will be done to a URL with this format: https://geocode.xyz/52.508,13.381?geoit=json. Use the fetch API and promises to get the data. Do NOT use the getJSON function we created, that is cheating ๐
-3. 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'
-4. Chain a .catch method to the end of the promise chain and log errors to the console
-5. 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.
-
-PART 2
-6. 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.
-7. 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)
-
-TEST COORDINATES 1: 52.508, 13.381 (Latitude, Longitude)
-TEST COORDINATES 2: 19.037, 72.873
-TEST COORDINATES 2: -33.933, 18.474
-
-GOOD LUCK ๐
-*/
-
-/*
-const whereAmI = function (lat, lng) {
- fetch(`https://geocode.xyz/${lat},${lng}?geoit=json`)
- .then(res => {
- if (!res.ok) throw new Error(`Problem with geocoding ${res.status}`);
- return res.json();
- })
- .then(data => {
- console.log(data);
- console.log(`You are in ${data.city}, ${data.country}`);
-
- return fetch(`https://restcountries.eu/rest/v2/name/${data.country}`);
- })
- .then(res => {
- if (!res.ok) throw new Error(`Country not found (${res.status})`);
-
- return res.json();
- })
- .then(data => renderCountry(data[0]))
- .catch(err => console.error(`${err.message} ๐ฅ`));
-};
-whereAmI(52.508, 13.381);
-whereAmI(19.037, 72.873);
-whereAmI(-33.933, 18.474);
-
-
-///////////////////////////////////////
-// The Event Loop in Practice
-console.log('Test start');
-setTimeout(() => console.log('0 sec timer'), 0);
-Promise.resolve('Resolved promise 1').then(res => console.log(res));
-
-Promise.resolve('Resolved promise 2').then(res => {
- for (let i = 0; i < 1000000000; i++) {}
- console.log(res);
-});
-
-console.log('Test end');
-
-
-///////////////////////////////////////
-// Building a Simple Promise
-const lotteryPromise = new Promise(function (resolve, reject) {
- console.log('Lotter draw is happening ๐ฎ');
- setTimeout(function () {
- if (Math.random() >= 0.5) {
- resolve('You WIN ๐ฐ');
- } else {
- reject(new Error('You lost your money ๐ฉ'));
- }
- }, 2000);
-});
-
-lotteryPromise.then(res => console.log(res)).catch(err => console.error(err));
-
-// Promisifying setTimeout
-const wait = function (seconds) {
- return new Promise(function (resolve) {
- setTimeout(resolve, seconds * 1000);
- });
-};
-
-wait(1)
- .then(() => {
- console.log('1 second passed');
- return wait(1);
- })
- .then(() => {
- console.log('2 second passed');
- return wait(1);
- })
- .then(() => {
- console.log('3 second passed');
- return wait(1);
- })
- .then(() => console.log('4 second passed'));
-
-// setTimeout(() => {
-// console.log('1 second passed');
-// setTimeout(() => {
-// console.log('2 seconds passed');
-// setTimeout(() => {
-// console.log('3 second passed');
-// setTimeout(() => {
-// console.log('4 second passed');
-// }, 1000);
-// }, 1000);
-// }, 1000);
-// }, 1000);
-
-Promise.resolve('abc').then(x => console.log(x));
-Promise.reject(new Error('Problem!')).catch(x => console.error(x));
-
-
-///////////////////////////////////////
-// Promisifying the Geolocation API
-const getPosition = function () {
- return new Promise(function (resolve, reject) {
- // navigator.geolocation.getCurrentPosition(
- // position => resolve(position),
- // err => reject(err)
- // );
- navigator.geolocation.getCurrentPosition(resolve, reject);
- });
-};
-// getPosition().then(pos => console.log(pos));
-
-const whereAmI = function () {
- getPosition()
- .then(pos => {
- const { latitude: lat, longitude: lng } = pos.coords;
-
- return fetch(`https://geocode.xyz/${lat},${lng}?geoit=json`);
- })
- .then(res => {
- if (!res.ok) throw new Error(`Problem with geocoding ${res.status}`);
- return res.json();
- })
- .then(data => {
- console.log(data);
- console.log(`You are in ${data.city}, ${data.country}`);
-
- return fetch(`https://restcountries.eu/rest/v2/name/${data.country}`);
- })
- .then(res => {
- if (!res.ok) throw new Error(`Country not found (${res.status})`);
-
- return res.json();
- })
- .then(data => renderCountry(data[0]))
- .catch(err => console.error(`${err.message} ๐ฅ`));
-};
-
-btn.addEventListener('click', whereAmI);
-*/
-
-///////////////////////////////////////
-// Coding Challenge #2
-
-/*
-Build the image loading functionality that I just showed you on the screen.
-
-Tasks are not super-descriptive this time, so that you can figure out some stuff on your own. Pretend you're working on your own ๐
-
-PART 1
-1. 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.
-
-If this part is too tricky for you, just watch the first part of the solution.
-
-PART 2
-2. Comsume the promise using .then and also add an error handler;
-3. After the image has loaded, pause execution for 2 seconds using the wait function we created earlier;
-4. 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 ๐);
-5. After the second image has loaded, pause execution for 2 seconds again;
-6. After the 2 seconds have passed, hide the current image.
-
-TEST 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.
-
-GOOD LUCK ๐
-*/
-
-/*
-const wait = function (seconds) {
- return new Promise(function (resolve) {
- setTimeout(resolve, seconds * 1000);
- });
-};
-
-const imgContainer = document.querySelector('.images');
-
-const createImage = function (imgPath) {
- return new Promise(function (resolve, reject) {
- const img = document.createElement('img');
- img.src = imgPath;
-
- img.addEventListener('load', function () {
- imgContainer.append(img);
- resolve(img);
- });
-
- img.addEventListener('error', function () {
- reject(new Error('Image not found'));
- });
- });
-};
-
-let currentImg;
-
-createImage('img/img-1.jpg')
- .then(img => {
- currentImg = img;
- console.log('Image 1 loaded');
- return wait(2);
- })
- .then(() => {
- currentImg.style.display = 'none';
- return createImage('img/img-2.jpg');
- })
- .then(img => {
- currentImg = img;
- console.log('Image 2 loaded');
- return wait(2);
- })
- .then(() => {
- currentImg.style.display = 'none';
- })
- .catch(err => console.error(err));
-
-
-///////////////////////////////////////
-// Consuming Promises with Async/Await
-// Error Handling With try...catch
-
-const getPosition = function () {
- return new Promise(function (resolve, reject) {
- navigator.geolocation.getCurrentPosition(resolve, reject);
- });
-};
-
-// fetch(`https://restcountries.eu/rest/v2/name/${country}`).then(res => console.log(res))
-
-const whereAmI = async function () {
- try {
- // Geolocation
- const pos = await getPosition();
- const { latitude: lat, longitude: lng } = pos.coords;
-
- // Reverse geocoding
- const resGeo = await fetch(`https://geocode.xyz/${lat},${lng}?geoit=json`);
- if (!resGeo.ok) throw new Error('Problem getting location data');
-
- const dataGeo = await resGeo.json();
- console.log(dataGeo);
-
- // Country data
- const res = await fetch(
- `https://restcountries.eu/rest/v2/name/${dataGeo.country}`
- );
- if (!resGeo.ok) throw new Error('Problem getting country');
-
- const data = await res.json();
- console.log(data);
- renderCountry(data[0]);
- } catch (err) {
- console.error(`${err} ๐ฅ`);
- renderError(`๐ฅ ${err.message}`);
- }
-};
-whereAmI();
-whereAmI();
-whereAmI();
-console.log('FIRST');
-
-// try {
-// let y = 1;
-// const x = 2;
-// y = 3;
-// } catch (err) {
-// alert(err.message);
-// }
-
-
-///////////////////////////////////////
-// Returning Values from Async Functions
-const getPosition = function () {
- return new Promise(function (resolve, reject) {
- navigator.geolocation.getCurrentPosition(resolve, reject);
- });
-};
-
-const whereAmI = async function () {
- try {
- // Geolocation
- const pos = await getPosition();
- const { latitude: lat, longitude: lng } = pos.coords;
-
- // Reverse geocoding
- const resGeo = await fetch(`https://geocode.xyz/${lat},${lng}?geoit=json`);
- if (!resGeo.ok) throw new Error('Problem getting location data');
- const dataGeo = await resGeo.json();
-
- // Country data
- const res = await fetch(
- `https://restcountries.eu/rest/v2/name/${dataGeo.country}`
- );
- if (!resGeo.ok) throw new Error('Problem getting country');
- const data = await res.json();
- renderCountry(data[0]);
-
- return `You are in ${dataGeo.city}, ${dataGeo.country}`;
- } catch (err) {
- console.error(`${err} ๐ฅ`);
- renderError(`๐ฅ ${err.message}`);
-
- // Reject promise returned from async function
- throw err;
- }
-};
-
-console.log('1: Will get location');
-// const city = whereAmI();
-// console.log(city);
-
-// whereAmI()
-// .then(city => console.log(`2: ${city}`))
-// .catch(err => console.error(`2: ${err.message} ๐ฅ`))
-// .finally(() => console.log('3: Finished getting location'));
-
-(async function () {
- try {
- const city = await whereAmI();
- console.log(`2: ${city}`);
- } catch (err) {
- console.error(`2: ${err.message} ๐ฅ`);
- }
- console.log('3: Finished getting location');
-})();
-
-
-///////////////////////////////////////
-// Running Promises in Parallel
-const get3Countries = async function (c1, c2, c3) {
- try {
- // const [data1] = await getJSON(
- // `https://restcountries.eu/rest/v2/name/${c1}`
- // );
- // const [data2] = await getJSON(
- // `https://restcountries.eu/rest/v2/name/${c2}`
- // );
- // const [data3] = await getJSON(
- // `https://restcountries.eu/rest/v2/name/${c3}`
- // );
- // console.log([data1.capital, data2.capital, data3.capital]);
-
- const data = await Promise.all([
- getJSON(`https://restcountries.eu/rest/v2/name/${c1}`),
- getJSON(`https://restcountries.eu/rest/v2/name/${c2}`),
- getJSON(`https://restcountries.eu/rest/v2/name/${c3}`),
- ]);
- console.log(data.map(d => d[0].capital));
- } catch (err) {
- console.error(err);
- }
-};
-get3Countries('portugal', 'canada', 'tanzania');
-
-
-///////////////////////////////////////
-// Other Promise Combinators: race, allSettled and any
-// Promise.race
-(async function () {
- const res = await Promise.race([
- getJSON(`https://restcountries.eu/rest/v2/name/italy`),
- getJSON(`https://restcountries.eu/rest/v2/name/egypt`),
- getJSON(`https://restcountries.eu/rest/v2/name/mexico`),
- ]);
- console.log(res[0]);
-})();
-
-const timeout = function (sec) {
- return new Promise(function (_, reject) {
- setTimeout(function () {
- reject(new Error('Request took too long!'));
- }, sec * 1000);
- });
-};
-
-Promise.race([
- getJSON(`https://restcountries.eu/rest/v2/name/tanzania`),
- timeout(5),
-])
- .then(res => console.log(res[0]))
- .catch(err => console.error(err));
-
-// Promise.allSettled
-Promise.allSettled([
- Promise.resolve('Success'),
- Promise.reject('ERROR'),
- Promise.resolve('Another success'),
-]).then(res => console.log(res));
-
-Promise.all([
- Promise.resolve('Success'),
- Promise.reject('ERROR'),
- Promise.resolve('Another success'),
-])
- .then(res => console.log(res))
- .catch(err => console.error(err));
-
-// Promise.any [ES2021]
-Promise.any([
- Promise.resolve('Success'),
- Promise.reject('ERROR'),
- Promise.resolve('Another success'),
-])
- .then(res => console.log(res))
- .catch(err => console.error(err));
-*/
-
-///////////////////////////////////////
-// Coding Challenge #3
-
-/*
-PART 1
-Write 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.
-Don't forget to test the error handler, and to set the network speed to 'Fast 3G' in the dev tools Network tab.
-
-PART 2
-1. Create an async function 'loadAll' that receives an array of image paths 'imgArr';
-2. Use .map to loop over the array, to load all the images with the 'createImage' function (call the resulting array 'imgs')
-3. Check out the 'imgs' array in the console! Is it like you expected?
-4. Use a promise combinator function to actually get the images from the array ๐
-5. Add the 'paralell' class to all the images (it has some CSS styles).
-
-TEST DATA: ['img/img-1.jpg', 'img/img-2.jpg', 'img/img-3.jpg']. To test, turn off the 'loadNPause' function.
-
-GOOD LUCK ๐
-*/
-
-/*
-const wait = function (seconds) {
- return new Promise(function (resolve) {
- setTimeout(resolve, seconds * 1000);
- });
-};
-
-const imgContainer = document.querySelector('.images');
-
-const createImage = function (imgPath) {
- return new Promise(function (resolve, reject) {
- const img = document.createElement('img');
- img.src = imgPath;
-
- img.addEventListener('load', function () {
- imgContainer.append(img);
- resolve(img);
- });
-
- img.addEventListener('error', function () {
- reject(new Error('Image not found'));
- });
- });
-};
-
-let currentImg;
-
-// createImage('img/img-1.jpg')
-// .then(img => {
-// currentImg = img;
-// console.log('Image 1 loaded');
-// return wait(2);
-// })
-// .then(() => {
-// currentImg.style.display = 'none';
-// return createImage('img/img-2.jpg');
-// })
-// .then(img => {
-// currentImg = img;
-// console.log('Image 2 loaded');
-// return wait(2);
-// })
-// .then(() => {
-// currentImg.style.display = 'none';
-// })
-// .catch(err => console.error(err));
-
-// PART 1
-const loadNPause = async function () {
- try {
- // Load image 1
- let img = await createImage('img/img-1.jpg');
- console.log('Image 1 loaded');
- await wait(2);
- img.style.display = 'none';
-
- // Load image 1
- img = await createImage('img/img-2.jpg');
- console.log('Image 2 loaded');
- await wait(2);
- img.style.display = 'none';
- } catch (err) {
- console.error(err);
- }
-};
-// loadNPause();
-
-// PART 2
-const loadAll = async function (imgArr) {
- try {
- const imgs = imgArr.map(async img => await createImage(img));
- const imgsEl = await Promise.all(imgs);
- console.log(imgsEl);
- imgsEl.forEach(img => img.classList.add('parallel'));
- } catch (err) {
- console.error(err);
- }
-};
-loadAll(['img/img-1.jpg', 'img/img-2.jpg', 'img/img-3.jpg']);
-*/
diff --git a/16-Asynchronous/final/style.css b/16-Asynchronous/final/style.css
deleted file mode 100644
index 6a10dac8b6..0000000000
--- a/16-Asynchronous/final/style.css
+++ /dev/null
@@ -1,126 +0,0 @@
-* {
- margin: 0;
- padding: 0;
- box-sizing: inherit;
-}
-
-html {
- font-size: 62.5%;
- box-sizing: border-box;
-}
-
-body {
- font-family: system-ui;
- color: #555;
- background-color: #f7f7f7;
- min-height: 100vh;
-
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-.container {
- display: flex;
- flex-flow: column;
- align-items: center;
-}
-
-.countries {
- /* margin-bottom: 8rem; */
- display: flex;
-
- font-size: 2rem;
- opacity: 0;
- transition: opacity 1s;
-}
-
-.country {
- background-color: #fff;
- box-shadow: 0 2rem 5rem 1rem rgba(0, 0, 0, 0.1);
- font-size: 1.8rem;
- width: 30rem;
- border-radius: 0.7rem;
- margin: 0 3rem;
- /* overflow: hidden; */
-}
-
-.neighbour::before {
- content: 'Neighbour country';
- width: 100%;
- position: absolute;
- top: -4rem;
-
- text-align: center;
- font-size: 1.8rem;
- font-weight: 600;
- text-transform: uppercase;
- color: #888;
-}
-
-.neighbour {
- transform: scale(0.8) translateY(1rem);
- margin-left: 0;
-}
-
-.country__img {
- width: 30rem;
- height: 17rem;
- object-fit: cover;
- background-color: #eee;
- border-top-left-radius: 0.7rem;
- border-top-right-radius: 0.7rem;
-}
-
-.country__data {
- padding: 2.5rem 3.75rem 3rem 3.75rem;
-}
-
-.country__name {
- font-size: 2.7rem;
- margin-bottom: 0.7rem;
-}
-
-.country__region {
- font-size: 1.4rem;
- margin-bottom: 2.5rem;
- text-transform: uppercase;
- color: #888;
-}
-
-.country__row:not(:last-child) {
- margin-bottom: 1rem;
-}
-
-.country__row span {
- display: inline-block;
- margin-right: 2rem;
- font-size: 2.4rem;
-}
-
-.btn-country {
- border: none;
- font-size: 2rem;
- padding: 2rem 5rem;
- border-radius: 0.7rem;
- color: white;
- background-color: orangered;
- cursor: pointer;
-}
-
-.images {
- display: flex;
-}
-
-.images img {
- display: block;
- width: 80rem;
- margin: 4rem;
-}
-
-.images img.parallel {
- width: 40rem;
- margin: 2rem;
- border: 3rem solid white;
- box-shadow: 0 2rem 5rem 1rem rgba(0, 0, 0, 0.1);
-}
diff --git a/16-Asynchronous/starter/.prettierrc b/16-Asynchronous/starter/.prettierrc
deleted file mode 100644
index b4f8e6a6a1..0000000000
--- a/16-Asynchronous/starter/.prettierrc
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "singleQuote": true,
- "arrowParens": "avoid"
-}
diff --git a/16-Asynchronous/starter/img/img-1.jpg b/16-Asynchronous/starter/img/img-1.jpg
deleted file mode 100644
index 9627ba5572..0000000000
Binary files a/16-Asynchronous/starter/img/img-1.jpg and /dev/null differ
diff --git a/16-Asynchronous/starter/img/img-2.jpg b/16-Asynchronous/starter/img/img-2.jpg
deleted file mode 100644
index 70cb723446..0000000000
Binary files a/16-Asynchronous/starter/img/img-2.jpg and /dev/null differ
diff --git a/16-Asynchronous/starter/img/img-3.jpg b/16-Asynchronous/starter/img/img-3.jpg
deleted file mode 100644
index 45d23a3081..0000000000
Binary files a/16-Asynchronous/starter/img/img-3.jpg and /dev/null differ
diff --git a/16-Asynchronous/starter/index.html b/16-Asynchronous/starter/index.html
deleted file mode 100644
index 2b0e434dd3..0000000000
--- a/16-Asynchronous/starter/index.html
+++ /dev/null
@@ -1,31 +0,0 @@
-
-
-
- Asynchronous JavaScript
-
-
-
-
-
-
-
-
-
-
-
diff --git a/16-Asynchronous/starter/script.js b/16-Asynchronous/starter/script.js
deleted file mode 100644
index 47bd2e81ba..0000000000
--- a/16-Asynchronous/starter/script.js
+++ /dev/null
@@ -1,6 +0,0 @@
-'use strict';
-
-const btn = document.querySelector('.btn-country');
-const countriesContainer = document.querySelector('.countries');
-
-///////////////////////////////////////
diff --git a/16-Asynchronous/starter/style.css b/16-Asynchronous/starter/style.css
deleted file mode 100644
index 6a10dac8b6..0000000000
--- a/16-Asynchronous/starter/style.css
+++ /dev/null
@@ -1,126 +0,0 @@
-* {
- margin: 0;
- padding: 0;
- box-sizing: inherit;
-}
-
-html {
- font-size: 62.5%;
- box-sizing: border-box;
-}
-
-body {
- font-family: system-ui;
- color: #555;
- background-color: #f7f7f7;
- min-height: 100vh;
-
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-.container {
- display: flex;
- flex-flow: column;
- align-items: center;
-}
-
-.countries {
- /* margin-bottom: 8rem; */
- display: flex;
-
- font-size: 2rem;
- opacity: 0;
- transition: opacity 1s;
-}
-
-.country {
- background-color: #fff;
- box-shadow: 0 2rem 5rem 1rem rgba(0, 0, 0, 0.1);
- font-size: 1.8rem;
- width: 30rem;
- border-radius: 0.7rem;
- margin: 0 3rem;
- /* overflow: hidden; */
-}
-
-.neighbour::before {
- content: 'Neighbour country';
- width: 100%;
- position: absolute;
- top: -4rem;
-
- text-align: center;
- font-size: 1.8rem;
- font-weight: 600;
- text-transform: uppercase;
- color: #888;
-}
-
-.neighbour {
- transform: scale(0.8) translateY(1rem);
- margin-left: 0;
-}
-
-.country__img {
- width: 30rem;
- height: 17rem;
- object-fit: cover;
- background-color: #eee;
- border-top-left-radius: 0.7rem;
- border-top-right-radius: 0.7rem;
-}
-
-.country__data {
- padding: 2.5rem 3.75rem 3rem 3.75rem;
-}
-
-.country__name {
- font-size: 2.7rem;
- margin-bottom: 0.7rem;
-}
-
-.country__region {
- font-size: 1.4rem;
- margin-bottom: 2.5rem;
- text-transform: uppercase;
- color: #888;
-}
-
-.country__row:not(:last-child) {
- margin-bottom: 1rem;
-}
-
-.country__row span {
- display: inline-block;
- margin-right: 2rem;
- font-size: 2.4rem;
-}
-
-.btn-country {
- border: none;
- font-size: 2rem;
- padding: 2rem 5rem;
- border-radius: 0.7rem;
- color: white;
- background-color: orangered;
- cursor: pointer;
-}
-
-.images {
- display: flex;
-}
-
-.images img {
- display: block;
- width: 80rem;
- margin: 4rem;
-}
-
-.images img.parallel {
- width: 40rem;
- margin: 2rem;
- border: 3rem solid white;
- box-shadow: 0 2rem 5rem 1rem rgba(0, 0, 0, 0.1);
-}
diff --git a/17-Modern-JS-Modules-Tooling/final/.prettierrc b/17-Modern-JS-Modules-Tooling/final/.prettierrc
deleted file mode 100644
index b4f8e6a6a1..0000000000
--- a/17-Modern-JS-Modules-Tooling/final/.prettierrc
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "singleQuote": true,
- "arrowParens": "avoid"
-}
diff --git a/17-Modern-JS-Modules-Tooling/final/clean.js b/17-Modern-JS-Modules-Tooling/final/clean.js
deleted file mode 100644
index 23e0caf1e1..0000000000
--- a/17-Modern-JS-Modules-Tooling/final/clean.js
+++ /dev/null
@@ -1,44 +0,0 @@
-const shoppingCart = [
- { product: 'bread', quantity: 6 },
- { product: 'pizza', quantity: 2 },
- { product: 'milk', quantity: 4 },
- { product: 'water', quantity: 10 },
-];
-
-const allowedProducts = {
- lisbon: 5,
- others: 7,
-};
-
-const checkCorrectAllowedProducts = function (cart, numAllowed, city) {
- if (!cart.length) return [];
-
- // const allowed = numAllowed[city] > 0 ? numAllowed[city] : numAllowed.others;
- const allowed = numAllowed?.[city] ?? allowedProducts.others;
-
- const newCart = cart.map(item => {
- const { product, quantity } = item;
- return {
- product,
- quantity: quantity > allowed ? allowed : quantity,
- };
- });
-
- return newCart;
-};
-const allowedShoppingCart = checkCorrectAllowedProducts(
- shoppingCart,
- allowedProducts,
- 'lisbon'
- // 'faro'
-);
-console.log(allowedShoppingCart);
-
-const createOrderDescription = function (cart) {
- const [{ product: p, quantity: q }] = cart;
-
- return `Order with ${q} ${p}${cart.length > 1 ? ', etc...' : '.'}`;
-};
-const orderDescription = createOrderDescription(allowedShoppingCart);
-
-console.log(orderDescription);
diff --git a/17-Modern-JS-Modules-Tooling/final/dist/index.html b/17-Modern-JS-Modules-Tooling/final/dist/index.html
deleted file mode 100644
index a58cbb6307..0000000000
--- a/17-Modern-JS-Modules-Tooling/final/dist/index.html
+++ /dev/null
@@ -1,30 +0,0 @@
-
-
-
- Modern JavaScript Development: Modules and Tooling
-
-
-
- Modern JavaScript Development: Modules and Tooling
-
-
diff --git a/17-Modern-JS-Modules-Tooling/final/dist/index.js b/17-Modern-JS-Modules-Tooling/final/dist/index.js
deleted file mode 100644
index bb62101ac5..0000000000
--- a/17-Modern-JS-Modules-Tooling/final/dist/index.js
+++ /dev/null
@@ -1,392 +0,0 @@
-// modules are defined as an array
-// [ module function, map of requires ]
-//
-// map of requires is short require name -> numeric require
-//
-// anything defined in a previous bundle is accessed via the
-// orig method which is the require for previous bundles
-parcelRequire = (function (modules, cache, entry, globalName) {
- // Save the require from previous bundle to this closure if any
- var previousRequire = typeof parcelRequire === 'function' && parcelRequire;
- var nodeRequire = typeof require === 'function' && require;
-
- function newRequire(name, jumped) {
- if (!cache[name]) {
- if (!modules[name]) {
- // if we cannot find the module within our internal map or
- // cache jump to the current global require ie. the last bundle
- // that was added to the page.
- var currentRequire = typeof parcelRequire === 'function' && parcelRequire;
- if (!jumped && currentRequire) {
- return currentRequire(name, true);
- }
-
- // If there are other bundles on this page the require from the
- // previous one is saved to 'previousRequire'. Repeat this as
- // many times as there are bundles until the module is found or
- // we exhaust the require chain.
- if (previousRequire) {
- return previousRequire(name, true);
- }
-
- // Try the node require function if it exists.
- if (nodeRequire && typeof name === 'string') {
- return nodeRequire(name);
- }
-
- var err = new Error('Cannot find module \'' + name + '\'');
- err.code = 'MODULE_NOT_FOUND';
- throw err;
- }
-
- localRequire.resolve = resolve;
- localRequire.cache = {};
-
- var module = cache[name] = new newRequire.Module(name);
-
- modules[name][0].call(module.exports, localRequire, module, module.exports, this);
- }
-
- return cache[name].exports;
-
- function localRequire(x){
- return newRequire(localRequire.resolve(x));
- }
-
- function resolve(x){
- return modules[name][1][x] || x;
- }
- }
-
- function Module(moduleName) {
- this.id = moduleName;
- this.bundle = newRequire;
- this.exports = {};
- }
-
- newRequire.isParcelRequire = true;
- newRequire.Module = Module;
- newRequire.modules = modules;
- newRequire.cache = cache;
- newRequire.parent = previousRequire;
- newRequire.register = function (id, exports) {
- modules[id] = [function (require, module) {
- module.exports = exports;
- }, {}];
- };
-
- var error;
- for (var i = 0; i < entry.length; i++) {
- try {
- newRequire(entry[i]);
- } catch (e) {
- // Save first error but execute all entries
- if (!error) {
- error = e;
- }
- }
- }
-
- if (entry.length) {
- // Expose entry point to Node, AMD or browser globals
- // Based on https://github.com/ForbesLindesay/umd/blob/master/template.js
- var mainExports = newRequire(entry[entry.length - 1]);
-
- // CommonJS
- if (typeof exports === "object" && typeof module !== "undefined") {
- module.exports = mainExports;
-
- // RequireJS
- } else if (typeof define === "function" && define.amd) {
- define(function () {
- return mainExports;
- });
-
- //
-
- Modern JavaScript Development: Modules and Tooling
-
-
-
- Modern JavaScript Development: Modules and Tooling
-
- 
-
-
-
-
diff --git a/04-HTML-CSS/final/style.css b/04-HTML-CSS/final/style.css
deleted file mode 100644
index d9730f2116..0000000000
--- a/04-HTML-CSS/final/style.css
+++ /dev/null
@@ -1,56 +0,0 @@
-* {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
-}
-
-body {
- background-color: rgb(255, 247, 201);
- font-family: Arial;
- font-size: 20px;
- padding: 50px;
-}
-
-h1 {
- font-size: 35px;
- margin-bottom: 25px;
-}
-
-h2 {
- margin-bottom: 20px;
- text-align: center;
-}
-
-p {
- margin-bottom: 20px;
-}
-
-.first {
- color: red;
-}
-
-#your-name {
- background-color: rgb(255, 220, 105);
- border: 5px solid #444;
- width: 400px;
- padding: 25px;
- margin-top: 30px;
-}
-
-input,
-button {
- padding: 10px;
- font-size: 16px;
-}
-
-a {
- background-color: yellowgreen;
-}
-
-#course-image {
- width: 300px;
-}
-
-#your-name h2 {
- color: olivedrab;
-}
diff --git a/05-Guess-My-Number/final/.prettierrc b/05-Guess-My-Number/final/.prettierrc
deleted file mode 100644
index b4f8e6a6a1..0000000000
--- a/05-Guess-My-Number/final/.prettierrc
+++ /dev/null
@@ -1,4 +0,0 @@
-{
- "singleQuote": true,
- "arrowParens": "avoid"
-}
diff --git a/05-Guess-My-Number/final/index.html b/05-Guess-My-Number/final/index.html
deleted file mode 100644
index b25c17540a..0000000000
--- a/05-Guess-My-Number/final/index.html
+++ /dev/null
@@ -1,32 +0,0 @@
-
-
-
-
-
-
-
- 
-
-
-
- 
- 
- 
-
- 
- 
- 
- 
- 
-
-