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 c966226c88..0000000000 --- a/01-Fundamentals-Part-1/final/script.js +++ /dev/null @@ -1,468 +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'); - -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}`); -*/ diff --git a/01-Fundamentals-Part-1/starter/index.html b/01-Fundamentals-Part-1/starter/index.html index 59529c7923..ccf0f9a72c 100755 --- a/01-Fundamentals-Part-1/starter/index.html +++ b/01-Fundamentals-Part-1/starter/index.html @@ -1,29 +1,34 @@ - - - - - JavaScript Fundamentals – Part 1 - - - -

JavaScript Fundamentals – Part 1

- + + + + + + JavaScript Fundamentals – Part 1 + + + + +

JavaScript Fundamentals – Part 1

+ + + diff --git a/01-Fundamentals-Part-1/starter/script.js b/01-Fundamentals-Part-1/starter/script.js new file mode 100644 index 0000000000..7138e00911 --- /dev/null +++ b/01-Fundamentals-Part-1/starter/script.js @@ -0,0 +1,283 @@ +/* +//////////////////////////////////// +// 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; // undifined +x = y = 25 - 10 - 5; // x = y = 10, x = 10 +console.log(x, y); + +const averageAge = (ageJonas + ageSarah) / 2; // precisou colocar em parenteses +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). +Your tasks: +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: +§ Data 1: Marks weights 78 kg and is 1.69 m tall. John weights 92 kg and is 1.95 +m tall. +§ Data 2: Marks weights 95 kg and is 1.88 m tall. John weights 85 kg and is 1.76 +m tall. +*/ + +// const markMass = 78; +// const markHeight = 1.69; +// const johnMass = 91; +// const johnHeight = 1.95; + + +/* +const markMass = 95; +const markHeight = 1.88; +const johnMass = 85; +const johnHeight = 1.76; + +let markMBI = markMass / (markHeight ** 2); +let johnMBI = johnMass / (johnHeight ** 2); +console.log(markMBI); +console.log(johnMBI); + +markHigherBMI = markMBI > johnMBI; // **** vc nao precisa colocar primeiro let markMBI = true... pode colocar direto isso q ele vai entender que se for maior é true +console.log(markHigherBMI); +*/ + +/* +// *string and Template Literals -- aspas e como utilizar* +const firstName = 'Erica'; +const job = 'teacher'; +const birthYear = 1992; +const year = 2037; + +const erica = "I'm " + firstName + ', a ' + (year - birthYear) + ' years old ' + job + '!'; +console.log(erica); + +const ericaNew = `I'm ${firstName}, a ${year - birthYear} years old ${job}`; +console.log(ericaNew); + +console.log('String with \n\ +multiple \n\ +lines'); // esse *\n\ é para dar enter ou.... só dar enter + +console.log(`String with +multiple +lines`); // esse tem o `` e da enter e funciona da mesma forma que a de cima +*/ + + +// *if else* +// const age = 19; +// const isOldEnough = age >= 18; + +// if (isOldEnough) { +// console.log('Sarah can start driving!'); +// } + +/* +// *forma simplificada* +const age = 15; + +if (age >= 18) { + console.log('Sarah can start driving!'); +} else { + const yearsLeft = 18 - age; + console.log(`Sarah is too young, Wait another ${yearsLeft} years !`); +} + +const birthYear = 2013; + +let century; +if (birthYear <= 2000) { + century = 20; +} else { + century = 21; +} +console.log(`Born in ${century} century`); +*/ + + +/* +**** Coding Challenge #2 +Use the BMI example from Challenge #1, and the code you already wrote, and +improve it. +Your tasks: +1. Print a nice output to the console, saying who has the higher BMI. The message +is 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 +*/ + +// const markMass = 78; +// const markHeight = 1.69; +// const johnMass = 91; +// const johnHeight = 1.95; + +/* +const markMass = 95; +const markHeight = 1.88; +const johnMass = 85; +const johnHeight = 1.76; + +let markMBI = markMass / (markHeight ** 2); +let johnMBI = johnMass / (johnHeight ** 2); + +if (markMBI > johnMBI) { + console.log(`Mark's BMI (${markMBI}) is higher than John's ${johnMBI}!`); +} else { + console.log(`John's (${johnMBI}) is higher than Mark's BMI ${markMBI}!`); +} +*/ + +/* +/// Type Conversion +const inputYear = '1991'; +console.log(Number(inputYear), inputYear); // primeiro é um numero e o segundo é uma string +console.log(Number(inputYear) + 18); + + +console.log(Number('Erica')); +console.log(typeof NaN); + +console.log(String(30), 30); // the first one is a string and second one is a number +*/ + +///and Coercion +console.log('I am' + 30 + 'years old'); // fica string com "+" +console.log('23' - '10' - 3); // fica um number com "-" +console.log('23' / '2'); + +let n = '1' + 1; // = 11 because is a string +n = n - 1; +console.log(n); // the result is 10 cause + is a string 11 and - make +// transform in number 11 -1 ... + +/// Boolean :) true or false +// 5 maneiras de ser FALSE VALUE : 0, "undefined", null, Nan, "", +const money = 0; +if (money) { + console.log("Dont spend it all"); +} else { + console.log("you should get a job"); +} + +// como o número é zero ele é falso !! ou seja ele vai aparecer como a 2 resposta 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/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/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 @@ - - - - - - - - Guess My Number! - - -
-

Guess My Number!

-

(Between 1 and 20)

- -
?
-
-
-
- - -
-
-

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/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 - - - - - - - - - - - - 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/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/dice-1.png b/07-Pig-Game/final/dice-1.png deleted file mode 100755 index 0d911ca113..0000000000 Binary files a/07-Pig-Game/final/dice-1.png and /dev/null differ diff --git a/07-Pig-Game/final/dice-2.png b/07-Pig-Game/final/dice-2.png deleted file mode 100755 index f3c32af445..0000000000 Binary files a/07-Pig-Game/final/dice-2.png and /dev/null differ diff --git a/07-Pig-Game/final/dice-3.png b/07-Pig-Game/final/dice-3.png deleted file mode 100755 index e3ef2b5c33..0000000000 Binary files a/07-Pig-Game/final/dice-3.png and /dev/null differ diff --git a/07-Pig-Game/final/dice-4.png b/07-Pig-Game/final/dice-4.png deleted file mode 100755 index 0c785f753e..0000000000 Binary files a/07-Pig-Game/final/dice-4.png and /dev/null differ diff --git a/07-Pig-Game/final/dice-5.png b/07-Pig-Game/final/dice-5.png deleted file mode 100755 index b4b41e3433..0000000000 Binary files a/07-Pig-Game/final/dice-5.png and /dev/null differ diff --git a/07-Pig-Game/final/dice-6.png b/07-Pig-Game/final/dice-6.png deleted file mode 100755 index 6f4d9b3890..0000000000 Binary files a/07-Pig-Game/final/dice-6.png and /dev/null differ 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 - - -
-
-

Player 1

-

43

-
-

Current

-

0

-
-
-
-

Player 2

-

24

-
-

Current

-

0

-
-
- - Playing dice - - - -
- - - 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; -}