/javascript_udemy_course

Primary LanguageJavaScript

Udemy The Complete JavaScript Course 2022: From Zero to Expert!

Udemy Course Link: https://www.udemy.com/course/the-complete-javascript-course/ Git hub Course complete code: https://github.com/jonasschmedtmann/complete-javascript-course Discord Community: https://discord.gg/uhMkpf4 Resources page: https://codingheroes.io/resources/

Assigments

LECTURE: Values and Variables

  1. Declare variables called 'country', 'continent' and 'population' and assign their values according to your own country (population in millions)
  2. Log their values to the console

LECTURE: Data Types

  1. Declare a variable called 'isIsland' and set its value according to your country. The variable should hold a Boolean value. Also declare a variable 'language', but don't assign it any value yet
  2. Log the types of 'isIsland', 'population', 'country' and 'language' to the consol

LECTURE: let, const and var (Declaring variables)

  1. Set the value of 'language' to the language spoken where you live (some countries have multiple languages, but just choose one)
  2. Think about which variables should be const variables (which values will never change, and which might change?). Then, change these variables to const.
  3. Try to change one of the changed variables now, and observe what happen

LECTURE: Basic Operators

  1. If your country split in half, and each half would contain half the population, then how many people would live in each half?
  2. Increase the population of your country by 1 and log the result to the console
  3. Finland has a population of 6 million. Does your country have more people than Finland?
  4. The average population of a country is 33 million people. Does your country have less people than the average country?
  5. Based on the variables you created, create a new variable 'description' which contains a string with this format: 'Portugal is in Europe, and its 11 million people speak portuguese

LECTURE: Strings and Template Literals

  1. Recreate the 'description' variable from the last assignment, this time using the template literal syntax LECTURE: Taking Decisions: if / else Statements
  2. If your country's population is greater that 33 million, log a string like this to the console: 'Portugal's population is above average'. Otherwise, log a string like 'Portugal's population is 22 million below average' (the 22 is the average of 33 minus the country's population)
  3. After checking the result, change the population temporarily to 13 and then to
  4. See the different results, and set the population back to original LECTURE: Type Conversion and Coercion
  5. Predict the result of these 5 operations without executing them: '9' - '5'; '19' - '13' + '17'; '19' - '13' + 17; '123' < 57; 5 + 6 + '4' + 9 - 4 - 2;
  6. Execute the operations to check if you were right The Complete JavaScript Course 7 LECTURE: Equality Operators: == vs. ===
  7. Declare a variable 'numNeighbours' based on a prompt input like this: prompt('How many neighbour countries does your country have?');
  8. If there is only 1 neighbour, log to the console 'Only 1 border!' (use loose equality == for now)
  9. Use an else-if block to log 'More than 1 border' in case 'numNeighbours' is greater than 1
  10. Use an else block to log 'No borders' (this block will be executed when 'numNeighbours' is 0 or any other value)
  11. Test the code with different values of 'numNeighbours', including 1 and 0.
  12. Change == to ===, and test the code again, with the same values of 'numNeighbours'. Notice what happens when there is exactly 1 border! Why is this happening?
  13. Finally, convert 'numNeighbours' to a number, and watch what happens now when you input 1
  14. Reflect on why we should use the === operator and type conversion in this situation

LECTURE: Logical Operators

  1. Comment out the previous code so the prompt doesn't get in the way
  2. Let's say Sarah is looking for a new country to live in. She wants to live in a country that speaks english, has less than 50 million people and is not an island.
  3. Write an if statement to help Sarah figure out if your country is right for her. You will need to write a condition that accounts for all of Sarah's criteria. Take your time with this, and check part of the solution if necessary.
  4. If yours is the right country, log a string like this: 'You should live in Portugal :)'. If not, log 'Portugal does not meet your criteria :('
  5. Probably your country does not meet all the criteria. So go back and temporarily change some variables in order to make the condition true (unless you live in Canada :D

LECTURE: The switch Statement

  1. Use a switch statement to log the following string for the given 'language': chinese or mandarin: 'MOST number of native speakers!' spanish: '2nd place in number of native speakers' english: '3rd place' hindi: 'Number 4' arabic: '5th most spoken language' for all other simply log 'Great language too :D'

LECTURE: The Conditional (Ternary) Operator

  1. If your country's population is greater than 33 million, use the ternary operator to log a string like this to the console: 'Portugal's population is above average'. Otherwise, simply log 'Portugal's population is below average'. Notice how only one word changes between these two sentences!
  2. After checking the result, change the population temporarily to 13 and then to
  3. See the different results, and set the population back to original

LECTURE: Functions

  1. Write a function called 'describeCountry' which takes three parameters: 'country', 'population' and 'capitalCity'. Based on this input, the function returns a string with this format: 'Finland has 6 million people and its capital city is Helsinki'
  2. Call this function 3 times, with input data for 3 different countries. Store the returned values in 3 different variables, and log them to the console

LECTURE: Function Declarations vs. Expressions

  1. The world population is 7900 million people. Create a function declaration called 'percentageOfWorld1' which receives a 'population' value, and returns the percentage of the world population that the given population represents. For example, China has 1441 million people, so it's about 18.2% of the world population
  2. To calculate the percentage, divide the given 'population' value by 7900 and then multiply by 100
  3. Call 'percentageOfWorld1' for 3 populations of countries of your choice, store the results into variables, and log them to the console
  4. Create a function expression which does the exact same thing, called 'percentageOfWorld2', and also call it with 3 country populations (can be the same populations)

LECTURE: Arrow Functions

  1. Recreate the last assignment, but this time create an arrow function called 'percentageOfWorld3'

LECTURE: Functions Calling Other Functions

  1. Create a function called 'describePopulation'. Use the function type you like the most. This function takes in two arguments: 'country' and 'population', and returns a string like this: 'China has 1441 million people, which is about 18.2% of the world.'
  2. To calculate the percentage, 'describePopulation' call the 'percentageOfWorld1' you created earlier
  3. Call 'describePopulation' with data for 3 countries of your choice

LECTURE: Introduction to Arrays

  1. Create an array containing 4 population values of 4 countries of your choice. You may use the values you have been using previously. Store this array into a variable called 'populations'
  2. Log to the console whether the array has 4 elements or not (true or false)
  3. Create an array called 'percentages' containing the percentages of the world population for these 4 population values. Use the function 'percentageOfWorld1' that you created earlier to compute the 4 percentage values

LECTURE: Basic Array Operations (Methods)

  1. Create an array containing all the neighbouring countries of a country of your choice. Choose a country which has at least 2 or 3 neighbours. Store the array into a variable called 'neighbours'
  2. At some point, a new country called 'Utopia' is created in the neighbourhood of your selected country. So add it to the end of the 'neighbours' array
  3. Unfortunately, after some time, the new country is dissolved. So remove it from the end of the array
  4. If the 'neighbours' array does not include the country ‘Germany’, log to the console: 'Probably not a central European country :D'
  5. Change the name of one of your neighbouring countries. To do that, find the index of the country in the 'neighbours' array, and then use that index to change the array at that index position. For example, you can search for 'Sweden' in the array, and then replace it with 'Republic of Sweden'

LECTURE: Dot vs. Bracket Notation

  1. Using the object from the previous assignment, log a string like this to the console: 'Finland has 6 million finnish-speaking people, 3 neighbouring countries and a capital called Helsinki.'
  2. Increase the country's population by two million using dot notation, and then decrease it by two million using brackets notation.

LECTURE: Object Methods

  1. Add a method called 'describe' to the 'myCountry' object. This method will log a string to the console, similar to the string logged in the previous assignment, but this time using the 'this' keyword.
  2. Call the 'describe' method
  3. Add a method called 'checkIsland' to the 'myCountry' object. This method will set a new property on the object, called 'isIsland'. 'isIsland' will be true if there are no neighbouring countries, and false if there are. Use the ternary operator to set the property.

LECTURE: Iteration: The for Loop

  1. There are elections in your country! In a small town, there are only 50 voters. Use a for loop to simulate the 50 people voting, by logging a string like this to the console (for numbers 1 to 50): 'Voter number 1 is currently voting'.

LECTURE: Looping Arrays, Breaking and Continuing

  1. Let's bring back the 'populations' array from a previous assignment
  2. Use a for loop to compute an array called 'percentages2' containing the percentages of the world population for the 4 population values. Use the function 'percentageOfWorld1' that you created earlier
  3. Confirm that 'percentages2' contains exactly the same values as the 'percentages' array that we created manually in the previous assignment, and reflect on how much better this solution is

LECTURE: Looping Backwards and Loops in Loops

  1. Store this array of arrays into a variable called 'listOfNeighbours' [['Canada', 'Mexico'], ['Spain'], ['Norway', 'Sweden', 'Russia']];
  2. Log only the neighbouring countries to the console, one by one, not the entire arrays. Log a string like 'Neighbour: Canada' for each country
  3. You will need a loop inside a loop for this. This is actually a bit tricky, so don't worry if it's too difficult for you! But you can still try to figure this out anyway

LECTURE: The while Loop

  1. Recreate the challenge from the lecture 'Looping Arrays, Breaking and Continuing', but this time using a while loop (call the array 'percentages3')
  2. Reflect on what solution you like better for this task: the for loop or the while loop?

Codding Challenges

Fundamentals Part 1

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.

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

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 a trophy! Your tasks:

  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: § Data 1: Dolphins score 96, 108 and 89. Koalas score 88, 91 and 110 § Data Bonus 1: Dolphins score 97, 112 and 101. Koalas score 109, 95 and 123 § Data Bonus 2: Dolphins score 97, 112 and 101. Koalas score 109, 95 and 106

Coding Challenge #4

Steven wants to build a very simple tip calculator for whenever he goes eating in a restaurant. 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%. Your tasks:

  1. Calculate 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:

  • Data 1: Test for bill values 275, 40 and 430

Hints:

  • To calculate 20% of a value, simply multiply it by 20/100 = 0.2
  • Value X is between 50 and 300, if it's >= 50 && <= 300 😉

Fundamentals Part #2

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! Your tasks:

  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:

  • Data 1: Dolphins score 44, 23 and 71. Koalas score 65, 54 and 49
  • Data 2: Dolphins score 85, 54 and 41. Koalas score 23, 34 and 27

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%. Your tasks:

  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)

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) Your tasks:

  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's BMI (28.3) is higher than Mark'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.

Coding Challenge #4

Let's improve Steven's tip calculator even more, this time using loops! Your tasks:

  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 Hints: Call ‘calcTip ‘in the loop and use the push method to add values to the tips and totals arrays Bonus:
  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

Developer Skills & Editor Setup

Coding Challenge #1

Given an array of forecasted maximum temperatures, the thermometer displays a string with the given temperatures. Example: [17, 21, 23] will print "... 17ºC in 1 days ... 21ºC in 2 days ... 23ºC in 3 days ..." Your tasks:

  1. Create a function 'printForecast' which takes in an array 'arr' and logs a string like the above to the console. Try it with both test datasets.
  2. Use the problem-solving framework: Understand the problem and break it up into sub-problems! Test data: § Data 1: [17, 21, 23] § Data 2: [12, 5, -5, 0, 4]

JavaScript in the Browser: DOM and Events

Coding Challenge #1

Implement a game rest functionality, so that the player can make a new guess! Your tasks:

  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 fields
  4. Also restore the original background color (#222) and number width (15rem)

Data Structures, Modern Operators and String

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 ('game' variable on next page). In this challenge we're gonna work with that data. 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.: First, use players 'Davies', 'Muller', 'Lewandowski' and 'Kimmich'. Then, call the function again with players from game.scored.
const game = {
 team1: 'Bayern Munich',
 team2: 'Borrussia Dortmund',
 players: [
 [
 'Neuer',
 'Pavard',
 'Martinez',
 'Alaba',
 'Davies',
 'Kimmich',
 'Goretzka',
 'Coman',
 'Muller',
 'Gnarby',
 'Lewandowski',
 ],
 [
 'Burki',
 'Schulz',
 'Hummels',
 'Akanji',
 'Hakimi',
 'Weigl',
 'Witsel',
 'Hazard',
 'Brandt',
 'Sancho',
 'Gotze',
 ],
 ],
 score: '4:0',
 scored: ['Lewandowski', 'Gnarby', 'Lewandowski',
 'Hummels'],
 date: 'Nov 9th, 2037',
 odds: {
 team1: 1.33,
 x: 3.25,
 team2: 6.5,
 },
 };

Coding Challenge #2

Let's continue with our football betting app! Keep using the 'game' variable from before. Your tasks:

  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, exactly 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
  4. 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 }

All exercises are from Udemy course: https://www.udemy.com/course/the-complete-javascript-course/l