31 |
32 |
33 |
34 |
35 |
36 |
--------------------------------------------------------------------------------
/Section_02_-_The_Fondamentals/16_Coding_Challenge_03/script.js:
--------------------------------------------------------------------------------
1 | /*
2 | Coding Challenge #3
3 |
4 | There are two gymnastics teams, Dolphins and Koalas. They compete against each
5 | other 3 times. The winner with the highest average score wins a trophy!
6 |
7 | Your tasks:
8 | 1. Calculate the average score for each team, using the test data below
9 | 2. Compare the team's average scores to determine the winner of the competition,
10 | and print it to the console. Don't forget that there can be a draw, so test for that
11 | as well (draw means they have the same average score)
12 | 3. Bonus 1: Include a requirement for a minimum score of 100. With this rule, a
13 | team only wins if it has a higher score than the other team, and the same time a
14 | score of at least 100 points. Hint: Use a logical operator to test for minimum
15 | score, as well as multiple else-if blocks 😉
16 | 4. Bonus 2: Minimum score also applies to a draw! So a draw only happens when
17 | both teams have the same score and both have a score greater or equal 100
18 | points. Otherwise, no team wins the trophy
19 |
20 | Test data:
21 | § Data 1: Dolphins score 96, 108 and 89. Koalas score 88, 91 and 110
22 | § Data Bonus 1: Dolphins score 97, 112 and 101. Koalas score 109, 95 and 123
23 | § Data Bonus 2: Dolphins score 97, 112 and 101. Koalas score 109, 95 and 106
24 | GOOD LUCK 😀
25 | */
26 |
27 | const dolphinsScores = [96, 108, 89];
28 | const koalasScores = [88, 91, 110];
29 |
30 | const averageScoreDolphins = (dolphinsScores.reduce((a, b) => a + b, 0) / dolphinsScores.length) || 0;
31 | const averageScoreKoalas = (koalasScores.reduce((a, b) => a + b, 0) / koalasScores.length) || 0;
32 |
33 | console.log("Average score of the Dolphins = " + averageScoreDolphins + ".");
34 | console.log("Average score of the Koalas = " + averageScoreKoalas + ".");
35 |
36 | console.log(averageScoreDolphins === averageScoreKoalas ? ("Draw! Average score = " + averageScoreDolphins + ".") : ("The winners are the " + (averageScoreDolphins > averageScoreKoalas ? "Dolphins with an average score of = " + averageScoreDolphins : "Koalas with an average score of = " + averageScoreKoalas) + "."));
37 |
38 | // BONUS 1
39 | console.log("\nBonus 1");
40 |
41 | const dolphinsScoresBonus1 = [97, 112, 101];
42 | const koalasScoresBonus1 = [109, 95, 123];
43 |
44 | const averageScoreDolphinsBonus1 = (dolphinsScoresBonus1.reduce((a, b) => a + b, 0) / dolphinsScoresBonus1.length) || 0;
45 | const averageScoreKoalasBonus1 = (koalasScoresBonus1.reduce((a, b) => a + b, 0) / koalasScoresBonus1.length) || 0;
46 |
47 | console.log("Average score of the Dolphins = " + averageScoreDolphinsBonus1 + ".");
48 | console.log("Average score of the Koalas = " + averageScoreKoalasBonus1 + ".");
49 |
50 | if (averageScoreDolphinsBonus1 === averageScoreKoalasBonus1) {
51 | console.log("Draw! Average score = " + averageScoreDolphinsBonus1 + ".")
52 | } else if (averageScoreDolphinsBonus1 >= 100 && averageScoreKoalasBonus1 >= 100) {
53 | console.log("The winners are the " + (averageScoreDolphinsBonus1 > averageScoreKoalasBonus1 ? ("Dolphins with an average score of = " + averageScoreDolphinsBonus1) : ("Koalas with an average score of = " + averageScoreKoalasBonus1)) + ".");
54 | } else if (averageScoreDolphinsBonus1 >= 100) {
55 | console.log("The winners are the Dolphins with an average score of " + averageScoreDolphinsBonus1 + ".");
56 | } else if (averageScoreKoalasBonus1 >= 100) {
57 | console.log("The winners are the Koalas with an average score of " + averageScoreKoalasBonus1 + ".");
58 | } else {
59 | console.log("No winners. Both the Dolphins and the Koalas have an average score of less than 100 and the scores aren't equal.");
60 | }
61 |
62 | // BONUS 2
63 | console.log("\nBonus 2");
64 |
65 | const dolphinsScoresBonus2 = [97, 112, 101];
66 | const koalasScoresBonus2 = [109, 95, 106];
67 |
68 | const averageScoreDolphinsBonus2 = (dolphinsScoresBonus2.reduce((a, b) => a + b, 0) / dolphinsScores.length) || 0;
69 | const averageScoreKoalasBonus2 = (koalasScoresBonus2.reduce((a, b) => a + b, 0) / koalasScores.length) || 0;
70 |
71 | console.log("Average score of the Dolphins = " + averageScoreDolphinsBonus2 + ".");
72 | console.log("Average score of the Koalas = " + averageScoreKoalasBonus2 + ".");
73 |
74 | if (averageScoreDolphinsBonus2 >= 100 && averageScoreKoalasBonus2 >= 100) {
75 | if (averageScoreDolphinsBonus2 === averageScoreKoalasBonus2) {
76 | console.log("Draw! Average score = " + averageScoreDolphinsBonus2 + ".")
77 | } else {
78 | console.log("The winners are the " + (averageScoreDolphinsBonus2 > averageScoreDolphinsBonus2 ? ("Dolphins with an average score of = " + averageScoreDolphinsBonus2) : ("Koalas with an average score of = " + averageScoreDolphinsBonus2)) + ".");
79 | }
80 | } else if (averageScoreDolphinsBonus2 >= 100) {
81 | console.log("The winners are the Dolphins with an average score of " + averageScoreDolphinsBonus2 + ".");
82 | } else if (averageScoreKoalasBonus2 >= 100) {
83 | console.log("The winners are the Koalas with an average score of " + averageScoreKoalasBonus2 + ".");
84 | } else {
85 | console.log("No winners or draws. Both the Dolphins and the Koalas have an average score of less than 100.");
86 | }
87 |
--------------------------------------------------------------------------------
/Section_02_-_The_Fondamentals/17_The_Switch_Statement/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | JavaScript Fundamentals - Part 1
9 |
27 |
28 |
29 |
30 |
JavaScript Fundamentals - Part 1
31 |
32 |
33 |
34 |
35 |
36 |
--------------------------------------------------------------------------------
/Section_02_-_The_Fondamentals/17_The_Switch_Statement/script.js:
--------------------------------------------------------------------------------
1 | let day = 'monday';
2 |
3 | switch (day) {
4 | case 'monday': // day === 'monday'
5 | console.log('Plan course structure');
6 | console.log('Go to coding meetup');
7 | break;
8 | case 'tuesday': // day === 'tuesday'
9 | console.log('Prepare theory videos');
10 | break;
11 | case 'wednesday': // day === 'wednesday'
12 | case 'thursday': // day === 'thursday'
13 | console.log('Write code examples');
14 | break;
15 | case 'friday': // day === 'friday'
16 | console.log('Record videos');
17 | break;
18 | case 'saturday': // day === 'saturday'
19 | case 'sunday': // day === 'sunday'
20 | console.log('Enjoy the weekend :D');
21 | default: // not a valid day
22 | console.log('Not a valid day!');
23 | }
24 |
25 | day = 'wednesday';
26 |
27 | switch (day) {
28 | case 'monday': // day === 'monday'
29 | console.log('Plan course structure');
30 | console.log('Go to coding meetup');
31 | break;
32 | case 'tuesday': // day === 'tuesday'
33 | console.log('Prepare theory videos');
34 | break;
35 | case 'wednesday': // day === 'wednesday'
36 | case 'thursday': // day === 'thursday'
37 | console.log('Write code examples');
38 | // break;
39 | case 'friday': // day === 'friday'
40 | console.log('Record videos');
41 | break;
42 | case 'saturday': // day === 'saturday'
43 | case 'sunday': // day === 'sunday'
44 | console.log('Enjoy the weekend :D');
45 | break;
46 | default: // not a valid day
47 | console.log('Not a valid day!');
48 | }
49 |
50 | day = 'holiday';
51 |
52 | switch (day) {
53 | case 'monday': // day === 'monday'
54 | console.log('Plan course structure');
55 | console.log('Go to coding meetup');
56 | break;
57 | case 'tuesday': // day === 'tuesday'
58 | console.log('Prepare theory videos');
59 | break;
60 | case 'wednesday': // day === 'wednesday'
61 | case 'thursday': // day === 'thursday'
62 | console.log('Write code examples');
63 | break;
64 | case 'friday': // day === 'friday'
65 | console.log('Record videos');
66 | break;
67 | case 'saturday': // day === 'saturday'
68 | case 'sunday': // day === 'sunday'
69 | console.log('Enjoy the weekend :D');
70 | break;
71 | default: // not a valid day
72 | console.log('Not a valid day!');
73 | }
74 |
75 | if (day === 'monday') {
76 | console.log('Plan course structure');
77 | console.log('Go to coding meetup');
78 | } else if (day === 'tuesday') {
79 | console.log('Prepare theory videos');
80 | } else if (day === 'wednesday' || day === 'thursday') {
81 | console.log('Write code examples');
82 | } else if (day === 'friday') {
83 | console.log('Record videos');
84 | } else if (day === 'saturday' || day === 'sunday') {
85 | console.log('Enjoy the weekend :D');
86 | } else {
87 | console.log('Not a valid day!');
88 | }
--------------------------------------------------------------------------------
/Section_02_-_The_Fondamentals/18_Statements_and_Expressions/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | JavaScript Fundamentals - Part 1
9 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
--------------------------------------------------------------------------------
/Section_02_-_The_Fondamentals/20_Coding_Challenge_04/script.js:
--------------------------------------------------------------------------------
1 | /*
2 | Steven wants to build a very simple tip calculator for whenever he goes eating in a restaurant.
3 | In his country, it's usual to tip 15% if the bill value is between 50 and 300.
4 | If the value is different, the tip is 20%.
5 |
6 | Your tasks:
7 | 1. Calculate the tip, depending on the bill value.
8 | Create a variable called 'tip' for this.
9 | It's not allowed to use an if/else statement 😅
10 | (If it's easier for you, you can start with an if/else statement, and then try to convert it to a ternary
11 | operator!)
12 |
13 | 2. Print a string to the console containing the bill value, the tip, and the final value (bill + tip).
14 | Example: “The bill was 275, the tip was 41.25, and the total value 316.25”
15 |
16 | Test data:
17 | Data 1: Test for bill values 275, 40 and 430
18 |
19 | Hints:
20 | To calculate 20% of a value, simply multiply it by 20/100 = 0.2
21 |
22 | Value X is between 50 and 300, if it's >= 50 && <= 300 😉
23 | GOOD LUCK 😀
24 | */
25 |
26 | let bill = 40;
27 | let tip = bill >= 50 && bill <= 300 ? bill * 0.15 : bill * 0.2;
28 | console.log(`The bill was ${bill}, the tip was ${tip} (which is ${tip / bill * 100}%), and the total value is ${bill + tip}.`);
29 |
30 | bill = 49;
31 | tip = bill >= 50 && bill <= 300 ? bill * 0.15 : bill * 0.2;
32 | console.log(`The bill was ${bill}, the tip was ${tip} (which is ${tip / bill * 100}%), and the total value is ${bill + tip}.`);
33 |
34 | bill = 50;
35 | tip = bill >= 50 && bill <= 300 ? bill * 0.15 : bill * 0.2;
36 | console.log(`The bill was ${bill}, the tip was ${tip} (which is ${tip / bill * 100}%), and the total value is ${bill + tip}.`);
37 |
38 | bill = 51;
39 | tip = bill >= 50 && bill <= 300 ? bill * 0.15 : bill * 0.2;
40 | console.log(`The bill was ${bill}, the tip was ${tip} (which is ${tip / bill * 100}%), and the total value is ${bill + tip}.`);
41 |
42 | bill = 275;
43 | tip = bill >= 50 && bill <= 300 ? bill * 0.15 : bill * 0.2;
44 | console.log(`The bill was ${bill}, the tip was ${tip} (which is ${tip / bill * 100}%), and the total value is ${bill + tip}.`);
45 |
46 | bill = 299;
47 | tip = bill >= 50 && bill <= 300 ? bill * 0.15 : bill * 0.2;
48 | console.log(`The bill was ${bill}, the tip was ${tip} (which is ${tip / bill * 100}%), and the total value is ${bill + tip}.`);
49 |
50 | bill = 300;
51 | tip = bill >= 50 && bill <= 300 ? bill * 0.15 : bill * 0.2;
52 | console.log(`The bill was ${bill}, the tip was ${tip} (which is ${tip / bill * 100}%), and the total value is ${bill + tip}.`);
53 |
54 | bill = 301;
55 | tip = bill >= 50 && bill <= 300 ? bill * 0.15 : bill * 0.2;
56 | console.log(`The bill was ${bill}, the tip was ${tip} (which is ${tip / bill * 100}%), and the total value is ${bill + tip}.`);
57 |
58 | bill = 430;
59 | tip = bill >= 50 && bill <= 300 ? bill * 0.15 : bill * 0.2;
60 | console.log(`The bill was ${bill}, the tip was ${tip} (which is ${tip / bill * 100}%), and the total value is ${bill + tip}.`);
61 |
--------------------------------------------------------------------------------
/Section_03_-_The_Fondamentals/01_Activating_Strict_Mode/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | JavaScript Fundamentals - Part 2
9 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
--------------------------------------------------------------------------------
/Section_03_-_The_Fondamentals/07_Coding_Challenge_01/script.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | /*
4 | Back to the two gymnastics teams, the Dolphins and the Koalas! There is a new gymnastics discipline, which works differently.
5 | Each team competes 3 times, and then the average of the 3 scores is calculated (so one average score per team).
6 | A team ONLY wins if it has at least DOUBLE the average score of the other team. Otherwise, no team wins!
7 |
8 | Your tasks:
9 | 1. Create an arrow function 'calcAverage' to calculate the average of 3 scores
10 | 2. Use the function to calculate the average for both teams
11 | 3. Create a function 'checkWinner' that takes the average score of each team as parameters ('avgDolphins' 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)".
12 | 4. Use the 'checkWinner' function to determine the winner for both DATA 1 and DATA 2.
13 | 5. Ignore draws this time.
14 |
15 | TEST DATA 1: Dolphins score 44, 23 and 71. Koalas score 65, 54 and 49
16 | TEST DATA 2: Dolphins score 85, 54 and 41. Koalas score 23, 34 and 27
17 | HINT: To calculate average of 3 values, add them all together and divide by 3
18 | 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 😉
19 | GOOD LUCK 😀
20 | */
21 |
22 | const dolphinsScores1 = [44, 23, 71];
23 | const koalasScores1 = [65, 54, 49];
24 |
25 | const calcAverage = (arr) => (arr.reduce((a, b) => a + b, 0) / arr.length) || 0;
26 |
27 | const checkWinner = function (avgDolphins, avgKoalas) {
28 | if (avgDolphins >= 2 * avgKoalas) {
29 | console.log(`Dolphins win (${avgDolphins} vs. ${avgKoalas})`);
30 | } else if (avgKoalas >= 2 * avgDolphins) {
31 | console.log(`Koalas win (${avgKoalas} vs. ${avgDolphins})`);
32 | } else {
33 | console.log('No team wins...');
34 | }
35 | }
36 |
37 | let scoreDolphins1 = calcAverage(dolphinsScores1);
38 | let scoreKoalas1 = calcAverage(koalasScores1);
39 | console.log("Score of Dolphins 1: ", scoreDolphins1, "\nScore of Koalas 1: ", scoreKoalas1);
40 |
41 | checkWinner(scoreDolphins1, scoreKoalas1);
42 |
43 | const dolphinsScores2 = [85, 54, 41];
44 | const koalasScores2 = [23, 34, 27];
45 |
46 | let scoreDolphins2 = calcAverage(dolphinsScores2);
47 | let scoreKoalas2 = calcAverage(koalasScores2);
48 | console.log("Score of Dolphins 1: ", scoreDolphins2, "\nScore of Koalas 1: ", scoreKoalas2);
49 |
50 | checkWinner(scoreDolphins2, scoreKoalas2);
51 |
--------------------------------------------------------------------------------
/Section_03_-_The_Fondamentals/08_Introduction_to_Arrays/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | JavaScript Fundamentals - Part 2
9 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
--------------------------------------------------------------------------------
/Section_03_-_The_Fondamentals/10_Coding_Challenge_02/script.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | /*
4 | Back to the two gymnastics teams, the Dolphins and the Koalas! There is a new gymnastics discipline, which works differently.
5 | /*
6 | 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%.
7 | 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.
8 | 2. And now let's use arrays! So create an array 'bills' containing the test data below.
9 | 3. Create an array 'tips' containing the tip value for each bill, calculated from the function you created before.
10 | 4. BONUS: Create an array 'total' containing the total values, so the bill + tip.
11 | TEST DATA: 125, 555 and 44
12 | 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) 😉
13 | GOOD LUCK 😀
14 | */
15 |
16 | const calcTip = function (bill) {
17 | return bill >= 50 && bill <= 300 ? bill * 0.15 : bill * 0.2;
18 | }
19 | const bills = [125, 555, 44];
20 | const tips = [calcTip(bills[0]), calcTip(bills[1]), calcTip(bills[2])];
21 | const totals = [bills[0] + tips[0], bills[1] + tips[1], bills[2] + tips[2]];
22 | console.log(bills, tips, totals);
23 |
--------------------------------------------------------------------------------
/Section_03_-_The_Fondamentals/11_Introduction_to_Objects/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | JavaScript Fundamentals - Part 2
9 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
--------------------------------------------------------------------------------
/Section_03_-_The_Fondamentals/13_Coding_Challenge_03/script.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | /*
4 | 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)
5 | 1. For each of them, create an object with properties for their full name, mass, and height (Mark Miller and John Smith)
6 | 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.
7 | 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)!"
8 | TEST DATA: Marks weights 78 kg and is 1.69 m tall. John weights 92 kg and is 1.95 m tall.
9 | GOOD LUCK 😀
10 | */
11 |
12 | const mark = {
13 | fullName: 'Mark Miller',
14 | mass: 78,
15 | height: 1.69,
16 |
17 | calcBMI: function () {
18 | this.bmi = this.mass / this.height ** 2;
19 | return this.bmi;
20 | },
21 | };
22 |
23 | const john = {
24 | fullName: 'John Smith',
25 | mass: 92,
26 | height: 1.95,
27 |
28 | calcBMI: function () {
29 | this.bmi = this.mass / this.height ** 2;
30 | return this.bmi;
31 | },
32 | };
33 |
34 | mark.calcBMI();
35 | john.calcBMI();
36 |
37 | console.log(
38 | `${mark.fullName}'s BMI: ${mark.bmi}\n` +
39 | `${mark.fullName}'s MBI: ${john.bmi}`
40 | );
41 |
42 | // "John Smith's BMI (28.3) is higher than Mark Miller's (23.9)!"
43 | if (mark.bmi > john.bmi) {
44 | console.log(
45 | `${mark.fullName}'s BMI (${mark.bmi}) is higher than ${john.fullName}'s BMI (${john.bmi})`
46 | );
47 | } else if (john.bmi > mark.bmi) {
48 | console.log(
49 | `${john.fullName}'s BMI (${john.bmi}) is higher than ${mark.fullName}'s BMI (${mark.bmi})`
50 | );
51 | }
52 |
--------------------------------------------------------------------------------
/Section_03_-_The_Fondamentals/14_Iteration_Loops/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | JavaScript Fundamentals - Part 2
9 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
--------------------------------------------------------------------------------
/Section_03_-_The_Fondamentals/15_Coding_Challenge_04/script.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | // Coding Challenge #4
4 |
5 | /*
6 | Let's improve Steven's tip calculator even more, this time using loops!
7 | 1. Create an array 'bills' containing all 10 test bill values
8 | 2. Create empty arrays for the tips and the totals ('tips' and 'totals')
9 | 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!
10 | TEST DATA: 22, 295, 176, 440, 37, 105, 10, 1100, 86 and 52
11 | HINT: Call calcTip in the loop and use the push method to add values to the tips and totals arrays 😉
12 | 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:
13 | 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
14 | 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)
15 | 4.3. Call the function with the 'totals' array
16 | GOOD LUCK 😀
17 | */
18 |
19 |
20 | // Solution
21 | const calcTip = function (bill) {
22 | return bill >= 50 && bill <= 300 ? bill * 0.15 : bill * 0.2;
23 | }
24 |
25 | const bills = [22, 295, 176, 440, 37, 105, 10, 1100, 86, 52];
26 | const tips = [];
27 | const totals = [];
28 |
29 | for (let i = 0; i < bills.length; i++) {
30 | const tip = calcTip(bills[i]);
31 | tips.push(tip);
32 | totals.push(tip + bills[i]);
33 | }
34 |
35 | console.log(bills, tips, totals);
36 |
37 | const calcAverage = function (arr) {
38 | let sum = 0;
39 |
40 | for (let i = 0; i < arr.length; i++) {
41 | // sum = sum + arr[i];
42 | sum += arr[i];
43 | }
44 |
45 | return sum / arr.length;
46 | }
47 |
48 | console.log(calcAverage([2, 3, 7]));
49 | console.log(calcAverage(totals));
50 | console.log(calcAverage(tips));
51 |
--------------------------------------------------------------------------------
/Section_04_-_How_to_Navigate_this_Course/README.md:
--------------------------------------------------------------------------------
1 | No code in this section
2 |
--------------------------------------------------------------------------------
/Section_05_-_Developer_Skills_and_Editor_Setup/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Developer Skills & Editor Setup
8 |
25 |
26 |
27 |
Developer Skills & Editor Setup
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/Section_05_-_Developer_Skills_and_Editor_Setup/script.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const x = 23;
4 | if (x === 23) console.log('x is 23');
5 |
6 | const calcAge = (birthYear) => 2037 - birthYear;
7 |
8 | // Using Google, StackOverflow and MDN
9 |
10 | // PROBLEM 1:
11 | // 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."
12 | const temperatures = [3, -2, -6, -1, 'error', 9, 13, 17, 15, 14, 9, 5];
13 | // 1) Understanding the problem
14 | // - What is temp amplitude? Answer: difference between highest and lowest temp
15 | // - How to compute max and min temperatures?
16 | // - What's a sensor error? And what do do?
17 | // 2) Breaking up into sub-problems
18 | // - How to ignore errors?
19 | // - Find max value in temp array
20 | // - Find min value in temp array
21 | // - Subtract min from max (amplitude) and return it
22 | const calcTempAmplitude = function (temps) {
23 | let max = temps[0];
24 | let min = temps[0];
25 | for (let i = 0; i < temps.length; i++) {
26 | if (typeof temps[i] !== 'number') continue;
27 | if (temps[i] > max) max = temps[i];
28 | if (temps[i] < min) min = temps[i];
29 | }
30 | console.log(max, min);
31 | return max - min;
32 | };
33 |
34 | const amplitude = calcTempAmplitude(temperatures);
35 | console.log(amplitude);
36 |
37 | // PROBLEM 2:
38 | // Function should now receive 2 arrays of temps
39 | // 1) Understanding the problem
40 | // - With 2 arrays, should we implement functionality twice? NO! Just merge two arrays
41 | // 2) Breaking up into sub-problems
42 | // - Merge 2 arrays
43 | const calcTempAmplitudeNew = function (t1, t2) {
44 | const temps = t1.concat(t2);
45 | console.log(temps);
46 | let max = temps[0];
47 | let min = temps[0];
48 | for (let i = 0; i < temps.length; i++) {
49 | if (typeof temps[i] !== 'number') continue;
50 | if (temps[i] > max) max = temps[i];
51 | if (temps[i] < min) min = temps[i];
52 | }
53 | console.log(max, min);
54 | return max - min;
55 | };
56 | const amplitudeNew = calcTempAmplitudeNew([3, 5, 1], [9, 0, 5]);
57 | console.log(amplitudeNew);
58 |
59 | // Debugging with the Console and Breakpoints
60 | const measureKelvin = function () {
61 | const measurement = {
62 | type: 'temp',
63 | unit: 'celsius',
64 | // C) FIX
65 | // value: Number(prompt('Degrees celsius:')),
66 | value: 10,
67 | };
68 | // B) FIND
69 | console.table(measurement);
70 | // console.log(measurement.value);
71 | // console.warn(measurement.value);
72 | // console.error(measurement.value);
73 | const kelvin = measurement.value + 273;
74 | return kelvin;
75 | };
76 | // A) IDENTIFY
77 | console.log(measureKelvin());
78 | // Using a debugger
79 | const calcTempAmplitudeBug = function (t1, t2) {
80 | const temps = t1.concat(t2);
81 | console.log(temps);
82 | let max = 0;
83 | let min = 0;
84 | for (let i = 0; i < temps.length; i++) {
85 | if (typeof temps[i] !== 'number') continue;
86 | if (temps[i] > max) max = temps[i];
87 | debugger;
88 | if (temps[i] < min) min = temps[i];
89 | }
90 | console.log(max, min);
91 | return max - min;
92 | };
93 | const amplitudeBug = calcTempAmplitudeBug([3, 5, 1], [9, 4, 5]);
94 | // A) IDENTIFY
95 | console.log(amplitudeBug);
96 |
97 | ///////////////////////////////////////
98 | // Coding Challenge #1
99 |
100 | /*
101 | Given an array of forecasted maximum temperatures, the thermometer displays a string with these temperatures.
102 | Example: [17, 21, 23] will print "... 17ºC in 1 days ... 21ºC in 2 days ... 23ºC in 3 days ..."
103 | Create a function 'printForecast' which takes in an array 'arr' and logs a string like the above to the console.
104 | Use the problem-solving framework: Understand the problem and break it up into sub-problems!
105 | TEST DATA 1: [17, 21, 23]
106 | TEST DATA 2: [12, 5, -5, 0, 4]
107 | */
108 |
109 | // 1) Understanding the problem
110 | // - Array transformed to string, separated by ...
111 | // - What is the X days? Answer: index + 1
112 | // 2) Breaking up into sub-problems
113 | // - Transform array into string
114 | // - Transform each element to string with ºC
115 | // - Strings needs to contain day (index + 1)
116 | // - Add ... between elements and start and end of string
117 | // - Log string to console
118 | const data1 = [17, 21, 23];
119 | const data2 = [12, 5, -5, 0, 4];
120 | console.log(`... ${data1[0]}ºC ... ${data1[1]}ºC ... ${data1[2]}ºC ...`);
121 | const printForecast = function (arr) {
122 | let str = '';
123 | for (let i = 0; i < arr.length; i++) {
124 | str += `${arr[i]}ºC in ${i + 1} days ... `;
125 | }
126 | console.log('...' + str);
127 | };
128 | printForecast(data1);
129 |
--------------------------------------------------------------------------------
/Section_06_-_HTML_and_CSS_Crash_Course/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
13 |
14 | Learning HTML & CSS
15 |
16 |
17 |
JavaScript is fun, but so is HTML & CSS
18 |
19 | You can learn JavaScript without HTML and CSS, but for DOM manipulation
20 | it's useful to have some basic ideas of HTML & CSS. You can learn more
21 | about it
22 | here.
23 |