@ -208,7 +208,7 @@ console.log(Math.max(-5, 3, 20, 4, 5, 10)) // 20, returns the maximum value
const randNum = Math.random() // creates random number between 0 to 0.999999
console.log(randNum)
// Let us create random number between 0 to 10
// Let us create a random number between 0 to 10
const num = Math.floor(Math.random () * 11) // creates random number between 0 and 10
console.log(num)
@ -245,7 +245,7 @@ Math.cos(60)
#### Random Number Generator
The JavaScript Math Object has a random() method number generator which generates number from 0 to 0.999999999...
The JavaScript Math Object has a random() method number generator which generates a number from 0 to 0.999999999...
```js
let randomNum = Math.random() // generates 0 to 0.999...
@ -331,9 +331,9 @@ A string could be a single character or paragraph or a page. If the string lengt
const paragraph = "My name is Asabeneh Yetayeh. I live in Finland, Helsinki.\
I am a teacher and I love teaching. I teach HTML, CSS, JavaScript, React, Redux, \
Node.js, Python, Data Analysis and D3.js for anyone who is interested to learn. \
In the end of 2019, I was thinking to expand my teaching and to reach \
At the end of 2019, I was thinking to expand my teaching and to reach \
to global audience and I started a Python challenge from November 20 - December 19.\
It was one of the most rewarding and inspiring experience.\
It was one of the most rewarding and inspiring experiences.\
Now, we are in 2020. I am enjoying preparing the 30DaysOfJavaScript challenge and \
I hope you are enjoying too."
@ -965,7 +965,7 @@ console.log(numInt) // 9
### Exercises: Level 3
1. 'Love is the best thing in this world. Some found their love and some are still looking for their love.' Count the number of word __love__ in this sentence.
1. 'Love is the best thing in this world. Some found their love and some are still looking for their love.' Count the number of words__love__ in this sentence.
2. Use __match()__ to count the number of all __because__ in the following sentence:__'You cannot end a sentence with because because because is a conjunction'__
3. Clean the following text and find the most frequent word (hint, use replace and regular expressions).
@ -86,7 +86,7 @@ We agreed that boolean values are either true or false.
- the boolean false
- '', "", ``, empty string
It is good to remember those truthy values and falsy values. In later section, we will use them with conditions to make decisions.
It's important to remember truthy and falsy values. In later section, we will use them with conditions to make decisions.
## Undefined
@ -108,7 +108,7 @@ console.log(empty) // -> null , means no value
### Assignment operators
An equal sign in JavaScript is an assignment operator. It uses to assign a variable.
An equal sign in JavaScript is an assignment operator. It is used to assign a value to a variable.
```js
let firstName = 'Asabeneh'
@ -164,7 +164,7 @@ const boilingPoint = 100 // temperature in oC, boiling point of water
const bodyTemp = 37 // body temperature in oC
// Concatenating string with numbers using string interpolation
// Concatenating strings with numbers using string interpolation
/*
The boiling point of water is 100 oC.
Human body temperature is 37 oC.
@ -177,7 +177,7 @@ console.log(
### Comparison Operators
In programming we compare values, we use comparison operators to compare two values. We check if a value is greater or less or equal to other value.
In programming we compare values, we use a comparison operator to compare two values. We check if a value is greater or less or equal to another value.
Try to understand the above comparisons with some logic. Remembering without any logic might be difficult.
JavaScript is somehow a wired kind of programming language. JavaScript code run and give you a result but unless you are good at it may not be the desired result.
JavaScript is somehow a wired kind of programming language. JavaScript code runs and gives you a result but unless you are good at it may not give the desired result.
As rule of thumb, if a value is not true with == it will not be equal with ===. Using === is safer than using ==. The following [link](https://dorey.github.io/JavaScript-Equality-Table/) has an exhaustive list of comparison of data types.
As a rule of thumb, if a value is not considered true with == it won't be equal with ===. Using === is safer than using ==. The following [link](https://dorey.github.io/JavaScript-Equality-Table/) has an exhaustive list of comparisons of data types.
### Logical Operators
The following symbols are the common logical operators:
&&(ampersand) , ||(pipe) and !(negation).
The && operator gets true only if the two operands are true.
The || operator gets true either of the operand is true.
The ! operator negates true to false and false to true.
_&&_(ampersand) , ||(pipe) and !(negation).
The _&&_ operator evaluates to true only if the two operands are true.
The _||_ operator evaluates to true if either of the operand is true.
The _!_ operator converts true to false and false to true through negation.
```js
// && ampersand operator example
@ -254,7 +254,7 @@ let isMarried = !false // true
### Increment Operator
In JavaScript we use the increment operator to increase a value stored in a variable. The increment could be pre or postincrement. Let us see each of them:
In JavaScript we use the increment operator to increase a value stored in a variable. The increment could be pre or post-increment. Let us see each of them:
1. Pre-increment
@ -272,11 +272,11 @@ console.log(count++) // 0
console.log(count) // 1
```
We use most of the time post-increment. At least you should remember how to use post-increment operator.
We use most of the time the post-increment. At least you should remember how to use the post-increment operator.
### Decrement Operator
In JavaScript we use the decrement operator to decrease a value stored in a variable. The decrement could be pre or postdecrement. Let us see each of them:
In JavaScript we use the decrement operator to decrease a value stored in a variable. The decrement could be pre or post-decrement. Let us see each of them:
1. Pre-decrement
@ -335,13 +335,13 @@ number > 0
### Operator Precedence
I would like to recommend you to read about operator precedence from this [link](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence)
I recommend reading about operator precedence from this [link](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence)
## Window Methods
### Window alert() method
As you have seen at very beginning alert() method displays an alert box with a specified message and an OK button. It is a builtin method and it takes on argument.
As you have seen, at very beginning the _alert()_ method displays an alert box with a specified message and an OK button. It is a built-in method and it takes one argument.
```js
alert(message)
@ -351,11 +351,11 @@ alert(message)
alert('Welcome to 30DaysOfJavaScript')
```
Do not use too much alert because it is destructing and annoying, use it just to test.
Do not use too much alerts because it is destructing and annoying, use it just to test.
### Window prompt() method
The window prompt methods display a prompt box with an input on your browser to take input values and the input data can be stored in a variable. The prompt() method takes two arguments. The second argument is optional.
The window.prompt method displays an input prompt box in your browser, allowing you to gather input values that can be stored in variables. The _prompt()_ method requires two arguments, with the second one being optional.
```js
prompt('required text', 'optional text')
@ -368,8 +368,8 @@ console.log(number)
### Window confirm() method
The confirm() method displays a dialog box with a specified message, along with an OK and a Cancel button.
A confirm box is often used to ask permission from a user to execute something. Window confirm() takes a string as an argument.
The _confirm()_ method displays a dialog box with a specified message, along with an OK and a Cancel button.
A confirm box is often used to ask permission from a user to execute something. _Window.confirm()_ takes a string as argument.
Clicking the OK yields true value, whereas clicking the Cancel button yields false value.
```js
@ -377,25 +377,25 @@ const agree = confirm('Are you sure you like to delete? ')
console.log(agree) // result will be true or false based on what you click on the dialog box
```
These are not all the window methods we will have a separate section to go deep into window methods.
These are not all the window methods, we will have a separate section to go deep into window methods.
## Date Object
Time is an important thing. We like to know the time a certain activity or event. In JavaScript current time and date is created using JavaScript Date Object. The object we create using Date object provides many methods to work with date and time.The methods we use to get date and time information from a date object values are started with a word _get_ because it provide the information.
Time is an important thing. We like to know the time a certain activity or event. In JavaScript the current time and date are created using the JavaScript Date Object. The object created using the Date object offers numerous methods for handling dates and times. The methods employed to extract date and time details from date object values are prefixed with the word 'get' because they provide this information.
🌕 You have boundless energy. You have just completed day 3 challenges and you are three steps ahead in to your way to greatness. Now do some exercises for your brain and for your muscle.
🌕 You have boundless energy. You have just completed day 3's challenges and you are three steps ahead in to your way to greatness. Now do some exercises for your brain and for your muscle.
## 💻 Day 3: Exercises
### Exercises: Level 1
1. Declare firstName, lastName, country, city, age, isMarried, year variable and assign value to it and use the typeof operator to check different data types.
1. Declare _firstName_, _lastName_, _country_, _city_, _age_, _isMarried_, _year_ variables and assign values to them and use the _typeof_ operator to check the different data types.
2. Check if type of '10' is equal to 10
3. Check if parseInt('9.8') is equal to 10
3. Check if _parseInt('9.8')_ is equal to 10
4. Boolean value is either true or false.
1. Write three JavaScript statement which provide truthy value.
2. Write three JavaScript statement which provide falsy value.
1. Write three JavaScript statements which provide truthy value.
2. Write three JavaScript statements which provide falsy value.
5. Figure out the result of the following comparison expression first without using console.log(). After you decide the result confirm it using console.log()
5. First, determine the result of the following comparison expression without using _console.log()_. Once you've made your decision, confirm the result using _console.log()_.
12. Find the length of python and jargon and make a falsy comparison statement.
12. Find the length of 'python' and 'jargon' and make a falsy comparison statement.
6. Figure out the result of the following expressions first without using console.log(). After you decide the result confirm it by using console.log()
6. First, determine the result of the following comparison expression without using _console.log()_. Once you've made your decision, confirm the result using _console.log()_.
1. Write a script that prompt the user to enter side a, side b, and side c of the triangle and and calculate the perimeter of triangle (perimeter = a + b + c)
1. Write a script that prompts the user to enter side a, side b, and side c of the triangle and calculate the perimeter of a triangle (perimeter = a + b + c)
1. Get length and width using prompt and calculate an area of rectangle (area = length x width and the perimeter of rectangle (perimeter = 2 x (length + width))
1. Get radius using prompt and calculate the area of a circle (area = pi x r x r) and circumference of a circle(c = 2 x pi x r) where pi = 3.14.
1. Get a length and a width using prompt and calculate an area of rectangle (area = length x width and the perimeter of rectangle (perimeter = 2 x (length + width))
1. Get a radius using prompt and calculate the area of a circle (area = pi x r x r) and circumference of a circle(c = 2 x pi x r) where pi = 3.14.
1. Calculate the slope, x-intercept and y-intercept of y = 2x -2
1. Slope is m = (y<sub>2</sub>-y<sub>1</sub>)/(x<sub>2</sub>-x<sub>1</sub>). Find the slope between point (2, 2) and point(6,10)
1. Compare the slope of above two questions.
1. Compare the slope of the above two questions.
1. Calculate the value of y (y = x<sup>2</sup> + 6x + 9). Try to use different x values and figure out at what x value y is 0.
1. Writ a script that prompt a user to enter hours and rate per hour. Calculate pay of the person?
1. Writ a script that prompts a user to enter hours and rate per hour. Calculate pay of the person?
1. Using prompt get the year the user was born and if the user is 18 or above allow the user to drive if not tell the user to wait a certain amount of years.
1. Using the prompt, get the year the user was born and if the user is 18 or above allow the user to drive, if not tell the user to wait a certain amount of years.
You are 15. You will be allowed to drive after 3 years.
```
1. Write a script that prompt the user to enter number of years. Calculate the number of seconds a person can live. Assume some one lives just hundred years
1. Create a script that prompts the user to input a number of years and calculates the total number of seconds a person can live, assuming a lifespan of one hundred years.
Conditional statements are used for make decisions based on different conditions.
By default, statements in JavaScript script executed sequentially from top to bottom. If the processing logic require so, the sequential flow of execution can be altered in two ways:
Conditional statements are used to make decisions based on different conditions.
By default, statements in JavaScript's scripts are executed sequentially from top to bottom. If the processing logic requires so, the sequential flow of execution can be altered in two ways:
- Conditional execution: a block of one or more statements will be executed if a certain expression is true
- Repetitive execution: a block of one or more statements will be repetitively executed as long as a certain expression is true. In this section, we will cover _if_, _else_ , _else if_ statements. The comparison and logical operators we learned in the previous sections will be useful in here.
- Conditional execution: a block of one or more statements will be executed if a certain expression is true.
- Repetitive execution: a block of one or more statements will be repetitively executed as long as a certain expression is true. In this section, we will cover _if_, _else_ , _else if_ statements. The comparison and logical operators we learned in the previous sections will be useful here.
Conditions can be implementing using the following ways:
@ -49,7 +49,7 @@ Conditions can be implementing using the following ways:
### If
In JavaScript and other programming languages the key word _if_ is to used check if a condition is true and to execute the block code. To create an if condition, we need _if_ keyword, condition inside a parenthesis and block of code inside a curly bracket({}).
In JavaScript and other programming languages, the key word _if_ is used to check if a condition is true and to execute the block code. To create an if condition, we need the _if_ keyword, place the condition within parentheses, and enclose the block of code within curly brackets ({}).
```js
// syntax
@ -68,7 +68,7 @@ if (num > 0) {
// 3 is a positive number
```
As you can see in the condition example above, 3 is greater than 0, so it is a positive number. The condition was true and the block of code was executed. However, if the condition is false, we won't see any results.
As you can see in the condition example above, 3 is greater than 0, so it is a positive number. The condition was true and the block of code was executed. However, if the condition is false, we won't see any results.
```js
let isRaining = true
@ -77,7 +77,7 @@ if (isRaining) {
}
```
The same goes for the second condition, if isRaining is false the if block will not be executed and we do not see any output. In order to see the result of a falsy condition, we should have another block, which is going to be _else_.
The same goes for the second condition, if _isRaining_ is false the if block will not be executed and we do not see any output. In order to see the result of a falsy condition, we should have another block, which is going to be _else_.
### If Else
@ -128,11 +128,11 @@ if (isRaining) {
// No need for a rain coat.
```
The last condition is false, therefore the else block was executed. What if we have more than two conditions? In that case, we would use *else if* conditions.
The last condition is false, therefore the else block was executed. What if we have more than two conditions? In that case, we would use *else if* conditions.
### If Else if Else
On our daily life, we make decisions on daily basis. We make decisions not by checking one or two conditions instead we make decisions based on multiple conditions. As similar to our daily life, programming is also full of conditions. We use *else if* when we have multiple conditions.
In our daily life, we make decisions on daily basis. We make decisions not by checking one or two conditions, instead we make decisions based on multiple conditions. Similarly to our daily life, programming is also full of conditions. We use *else if* when we have multiple conditions.
```js
// syntax
@ -178,7 +178,7 @@ if (weather === 'rainy') {
### Switch
Switch is an alternative for **if else if else else**.
The switch statement starts with a *switch* keyword followed by a parenthesis and code block. Inside the code block we will have different cases. Case block runs if the value in the switch statement parenthesis matches with the case value. The break statement is to terminate execution so the code execution does not go down after the condition is satisfied. The default block runs if all the cases don't satisfy the condition.
The switch statement starts with a *switch* keyword followed by a parenthesis and a code block. Inside the code block we will have different cases. The case block runs when the value in the switch statement's parentheses matches the case value. The break statement is used to terminate execution so that code execution does not continue after the condition is satisfied. The default block runs when none of the cases satisfy the condition.
```js
switch(caseValue){
@ -274,30 +274,30 @@ isRaining
: console.log('No need for a rain coat.')
```
🌕 You are extraordinary and you have a remarkable potential. You have just completed day 4 challenges and you are four steps ahead to your way to greatness. Now do some exercises for your brain and muscle.
🌕 You are extraordinary and you have a remarkable potential. You have just completed day 4's challenges and you are four steps ahead to your way to greatness. Now do some exercises for your brain and muscles.
## 💻 Exercises
### Exercises: Level 1
1. Get user input using prompt(“Enter your age:”). If user is 18 or older , give feedback:'You are old enough to drive' but if not 18 give another feedback stating to wait for the number of years he needs to turn 18.
1. Get the user input using the prompt(“Enter your age:”). If the user is 18 or older, provide feedback:'You are old enough to drive' Otherwise, if the user is not 18, provide feedback indicating how many years they need to wait until they turn 18.
```sh
Enter your age: 30
You are old enough to drive.
Enter your age:15
You are left with 3 years to drive.
You have 3 years left before you can drive.
```
1. Compare the values of myAge and yourAge using if … else. Based on the comparison and log the result to console stating who is older (me or you). Use prompt(“Enter your age:”) to get the age as input.
1. Compare the values of _myAge_ and _yourAge_ using if … else. Based on the comparison log the result to console stating who is older (me or you). Use prompt(“Enter your age:”) to get the age as input.
```sh
Enter your age: 30
You are 5 years older than me.
```
1. If a is greater than b return 'a is greater than b' else 'a is less than b'. Try to implement it in to ways
1. If _a_ is greater than _b_ return 'a is greater than b' else 'a is less than b'. Try to implement it in two ways.
- using if else
- ternary operator.
@ -323,7 +323,7 @@ isRaining
### Exercises: Level 2
1. Write a code which can give grades to students according to theirs scores:
1. Write a code that assigns grades to students based on their scores:
- 80-100, A
- 70-89, B
- 60-69, C
@ -369,7 +369,7 @@ isRaining
February has 28 days.
```
1. Write a program which tells the number of days in a month, now consider leap year.
1. Write a program that calculates the number of days in a given month, taking leap years into account.
In contrast to variables, an array can store _multiple values_. Each value in an array has an _index_, and each index has _a reference in a memory address_. Each value can be accessed by using their _indexes_. The index of an array starts from _zero_, and the index of the last element is less by one from the length of the array.
In contrast to variables, an array can store _multiple values_. Each value in an array has an _index_, and each index has _a reference in a memory address_. Each value can be accessed by using its _index_. The index of an array starts from _zero_, and the index of the last element is one less than the length of the array.
An array is a collection of different data types which are ordered and changeable(modifiable). An array allows storing duplicate elements and different data types. An array can be empty, or it may have different data type values.
An array is a collection of data that is ordered and changeable (modifiable). An array allows storing duplicate elements and may have different data type values. An array can be empty.
### How to create an empty array
In JavaScript, we can create an array in different ways. Let us see different ways to create an array.
It is very common to use _const_ instead of _let_ to declare an array variable. If you ar using const it means you do not use that variable name again.
It is very common to use _const_ instead of _let_ to declare an array variable. If you ar using const it means that you do not use that variable name again.
- Using Array constructor
@ -306,7 +306,7 @@ There are different methods to manipulate an array. These are some of the availa
#### Array Constructor
Array:To create an array.
Array:To create an array.
```js
const arr = Array() // creates an an empty array
@ -318,7 +318,7 @@ console.log(eightEmptyValues) // [empty x 8]
#### Creating static values with fill
fill: Fill all the array elements with a static value
Fill: Fill all the array elements with a static value
join: It is used to join the elements of the array, the argument we passed in the join method will be joined in the array and return as a string. By default, it joins with a comma, but we can pass different string parameter which can be joined between the items.
Join: It is used to join the elements of the array, the argument we passed in the join method will be joined in the array and return as a string. By default, it joins with a comma, but we can pass different string parameter which can be joined between the items.
```js
const numbers = [1, 2, 3, 4, 5]
@ -517,7 +517,7 @@ Slice: To cut out a multiple items in range. It takes two parameters:starting an
#### Splice method in array
Splice: It takes three parameters:Starting position, number of times to be removed and number of items to be added.
Splice: It takes three parameters:Starting position, number of times to be removed, and number of items to be added.
```js
const numbers = [1, 2, 3, 4, 5]
@ -540,7 +540,7 @@ Splice: It takes three parameters:Starting position, number of times to be remov
#### Adding item to an array using push
Push: adding item in the end. To add item to the end of an existing array we use the push method.
Push: adding an item at the end. To add an item to the end of an existing array, we use the push method.
sort: arrange array elements in ascending order. Sort takes a call back function, we will see how we use sort with a call back function in the coming sections.
Sort: arrange array elements in ascending order. Sort takes a call back function, we will see how we use sort with a call back function in the coming sections.
🌕 You are diligent and you have already achieved quite a lot. You have just completed day 5 challenges and you are 5 steps ahead in to your way to greatness. Now do some exercises for your brain and for your muscle.
🌕 You are diligent and you have already achieved quite a lot. You have just completed day 5's challenges and you are 5 steps ahead in to your way to greatness. Now do some exercises for your brain and for your muscles.
## 💻 Exercise
@ -686,21 +686,21 @@ const webTechs = [
```
1. Declare an _empty_ array;
2. Declare an array with more than 5 number of elements
2. Declare an array with more than 5 elements
3. Find the length of your array
4. Get the first item, the middle item and the last item of the array
5. Declare an array called _mixedDataTypes_, put different data types in the array and find the length of the array. The array size should be greater than 5
6. Declare an array variable name itCompanies and assign initial values Facebook, Google, Microsoft, Apple, IBM, Oracle and Amazon
6. Declare an array variable named_itCompanies_ and assign initial values Facebook, Google, Microsoft, Apple, IBM, Oracle and Amazon
7. Print the array using _console.log()_
8. Print the number of companies in the array
9. Print the first company, middle and last company
9. Print the first, middle and last company
10. Print out each company
11. Change each company name to uppercase one by one and print them out
12. Print the array like as a sentence: Facebook, Google, Microsoft, Apple, IBM,Oracle and Amazon are big IT companies.
13. Check if a certain company exists in the itCompanies array. If it exist return the company else return a company is _not found_
11. Change each company name to uppercase one by one and print them out
12. Print the array like as a sentence: Facebook, Google, Microsoft, Apple, IBM,Oracle and Amazon are big IT companies
13. Check if a certain company exists in the _itCompanies_ array. If it exists, return the company; else, return 'company not found'
14. Filter out companies which have more than one 'o' without the filter method
15. Sort the array using _sort()_ method
16. Reverse the array using _reverse()_ method
15. Sort the array using the _sort()_ method
16. Reverse the array using the _reverse()_ method
17. Slice out the first 3 companies from the array
18. Slice out the last 3 companies from the array
19. Slice out the middle IT company or companies from the array
@ -711,8 +711,8 @@ const webTechs = [
### Exercise: Level 2
1. Create a separate countries.js file and store the countries array into this file, create a separate file web_techs.js and store the webTechs array into this file. Access both file in main.js file
1. First remove all the punctuations and change the string to array and count the number of words in the array
1. Create a separate countries.js file and store the countries array into this file, create a separate web_techs.js file and store the _webTechs_ array into this file. Access both file in main.js file
1. First remove all the punctuations and change the string to an array and count the number of words in the array
```js
let text =
@ -727,19 +727,19 @@ const webTechs = [
13
```
1. In the following shopping cart add, remove, edit items
1. Perform the following operations in the shopping cart: add items, remove items, and edit items
- add 'Meat' in the beginning of your shopping cart if it has not been already added
- add Sugar at the end of you shopping cart if it has not been already added
- add 'Meat' at the beginning of your shopping cart, if it has not been already added
- add Sugar at the end of you shopping cart, if it has not been already added
- remove 'Honey' if you are allergic to honey
- modify Tea to 'Green Tea'
1. In countries array check if 'Ethiopia' exists in the array if it exists print 'ETHIOPIA'. If it does not exist add to the countries list.
1. In the webTechs array check if Sass exists in the array and if it exists print 'Sass is a CSS preprocess'. If it does not exist add Sass to the array and print the array.
1. Concatenate the following two variables and store it in a fullStack variable.
1. In countries array check if 'Ethiopia' exists in the array, if it exists print 'ETHIOPIA'. If it does not exist add it to the countries list.
1. In the _webTechs_ array check if 'Sass' exists in the array and if it exists print 'Sass is a CSS preprocess'. If it does not exist, add 'Sass' to the array and print the array.
1. Concatenate the following two variables and store it in the _fullStack_ variable.
- Find the median age(one middle item or two middle items divided by two)
- Find the average age(all items divided by number of items)
- Find the range of the ages(max minus min)
- Find the median age(one middle item or two middle items divided by two)
- Find the average age(all items divided by number of items)
- Find the range of the ages(max minus min)
- Compare the value of (min - average) and (max - average), use _abs()_ method
1.Slice the first ten countries from the [countries array](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js)
1. Find the middle country(ies) in the [countries array](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js)
2. Divide the countries array into two equal arrays if it is even. If countries array is not even , one more country for the first half.
2. If the countries array contains an even number of countries, divide it into two equal arrays. If the countries array contains an odd number of countries, include one more country in the first half
Most of the activities we do in life are full of repetitions. Imagine if I ask you to print out from 0 to 100 using console.log(). To implement this simple task it may take you 2 to 5 minutes, such kind of tedious and repetitive task can be carried out using loop. If you prefer watching the videos, you can checkout the [video tutorials](https://www.youtube.com/channel/UCM4xOopkYiPwJqyKsSqL9mw)
Most of the activities we do in life are full of repetitions. Imagine if I ask you to print out numbers from 0 to 100 using console.log(). To implement this simple task it may take you 2 to 5 minutes, such kind of tedious and repetitive task can be carried out using loops. If you prefer watching the videos, you can checkout the [video tutorials](https://www.youtube.com/channel/UCM4xOopkYiPwJqyKsSqL9mw)
In programming languages to carry out repetitive task we use different kinds of loops. The following examples are the commonly used loops in JavaScript and other programming languages.
@ -351,8 +351,8 @@ for(let i = 0; i <= 5; i++){
[2550, 2500]
```
13. Develop a small script which generate array of 5 random numbers
14. Develop a small script which generate array of 5 random numbers and the numbers must be unique
13. Develop a small script which generate an array of 5 random numbers
14. Develop a small script which generate an array of 5 random numbers and the numbers must be unique
15. Develop a small script which generate a six characters random id:
```sh
@ -361,7 +361,7 @@ for(let i = 0; i <= 5; i++){
### Exercises: Level 2
1. Develop a small script which generate any number of characters random id:
1. Develop a small script that generates a random ID with any number of characters:
1. Using the above countries array, create an array for countries length'.
1. Using the above countries array, create an array for the countries length'.
```sh
[7, 7, 6, 7, 8, 7, 7, 7, 7, 5, 5]
@ -414,13 +414,13 @@ for(let i = 0; i <= 5; i++){
]
```
2. In above countries array, check if there is a country or countries containing the word 'land'. If there are countries containing 'land', print it as array. If there is no country containing the word 'land', print 'All these countries are without land'.
2. In the above countries array, check if there is a country or countries containing the word 'land'. If there are countries containing 'land', print it as array. If there is no country containing the word 'land', print 'All these countries are without land'.
```sh
['Finland','Ireland', 'Iceland']
```
3. In above countries array, check if there is a country or countries end with a substring 'ia'. If there are countries end with, print it as array. If there is no country containing the word 'ai', print 'These are countries ends without ia'.
3. In the above countries array, check if there is a country or countries ending with a substring 'ia'. If there are countries that end with it, print them as an array. If there are no countries containing the word 'ai', print 'These are countries that do not end with 'ia'.
```sh
['Albania', 'Bolivia','Ethiopia']
@ -474,10 +474,10 @@ for(let i = 0; i <= 5; i++){
1. Sort the webTechs array and mernStack array
1. Extract all the countries contain the word 'land' from the [countries array](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js) and print it as array
1. Find the country containing the hightest number of characters in the [countries array](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js)
1. Extract all the countries contain the word 'land' from the [countries array](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js) and print it as array
1. Extract all the countries containing the word 'land' from the [countries array](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js) and print it as an array
1. Extract all the countries containing only four characters from the [countries array](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js) and print it as array
1. Extract all the countries containing two or more words from the [countries array](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js) and print it as array
1. Reverse the [countries array](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js) and capitalize each country and stored it as an array
1. Reverse the [countries array](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js) and capitalize each country and store it as an array
So far we have seen many builtin JavaScript functions. In this section, we will focus on custom functions. What is a function? Before we start making functions, lets understand what function is and why we need function?
So far we have seen many builtin JavaScript functions. In this section, we will focus on custom functions. What is a function? Before we start making functions, let's understand what function is and why we need functions?
A function is a reusable block of code or programming statements designed to perform a certain task.
A function is declared by a function key word followed by a name, followed by parentheses (). A parentheses can take a parameter. If a function take a parameter it will be called with argument. A function can also take a default parameter. To store a data to a function, a function has to return certain data types. To get the value we call or invoke a function.
A function is declared by the function key word followed by a name, followed by parentheses (). A parentheses can take a parameter. If a function take a parameter it will be called with an argument. A function can also take a default parameter. To store data in a function, a function has to return certain data types. To get the value we call or invoke a function.
Function makes code:
- clean and easy to read
@ -114,7 +114,7 @@ printFullName() // calling a function
### Function returning value
Function can also return values, if a function does not return values the value of the function is undefined. Let us write the above functions with return. From now on, we return value to a function instead of printing it.
Functions can also return values, if a function does not return values the value of the function is undefined. Let us write the above functions to include return statements. From now on, we return value to a function instead of printing it.
Sometimes we do not know how many arguments the user going to pass. Therefore, we should know how to write a function which can take unlimited number of arguments. The way we do it has a significant difference between a function declaration(regular function) and arrow function. Let us see examples both in function declaration and arrow function.
Sometimes we do not know how many arguments the user is going to pass. Therefore, we should know how to write a function which can take unlimited number of arguments. This approach highlights a significant difference between a function declaration(regular function) and an arrow function. Let us see examples both using function declaration and arrow function.
#### Unlimited number of parameters in regular function
A function declaration provides a function scoped arguments array like object. Any thing we passed as argument in the function can be accessed from arguments object inside the functions. Let us see an example
A function declaration provides a function scoped arguments array like objects. Anything we pass as an argument to the function can be accessed using the arguments object inside the function. Let us see an example
#### Unlimited number of parameters in arrow function
Arrow function does not have the function scoped arguments object. To implement a function which takes unlimited number of arguments in an arrow function we use spread operator followed by any parameter name. Any thing we passed as argument in the function can be accessed as array in the arrow function. Let us see an example
Arrow function does not have the function scoped arguments object. To implement a function that takes an unlimited number of arguments in an arrow function, we use the spread operator followed by any parameter name. Anything we pass as an argument to the function can be accessed as an array within the arrow function. Let us see an example
Expression functions are anonymous functions. After we create a function without a name and we assign it to a variable. To return a value from the function we should call the variable. Look at the example below.
Expression functions are anonymous functions. We create a function without a name and assign it to a variable. To return a value from the function, we can then call the variable. Look at the example below.
```js
@ -322,7 +322,7 @@ console.log(square(2)) // -> 4
### Self Invoking Functions
Self invoking functions are anonymous functions which do not need to be called to return a value.
Self invoking functions are anonymous functions that do not need to be called to return a value.
```js
(function(n) {
@ -338,9 +338,9 @@ console.log(squaredNum)
### Arrow Function
Arrow function is an alternative to write a function, however function declaration and arrow function have some minor differences.
An arrow function is an alternative way to write a function, although function declaration and arrow function have some minor differences.
Arrow function uses arrow instead of the keyword *function* to declare a function. Let us see both function declaration and arrow function.
An arrow function uses an arrow instead of the keyword *function* to declare a function. Let us see both function declaration and arrow function.
```js
// This is how we write normal or declaration function
Sometimes we pass default values to parameters, when we invoke the function if we do not pass an argument the default value will be used. Both function declaration and arrow function can have a default value or values.
Sometimes we pass default values to parameters, when we invoke the function if we do not pass an argument, the default value will be used. Both function declaration and arrow function can have a default value or values.
```js
// syntax
@ -504,7 +504,7 @@ console.log('Weight of an object in Newton: ', weightOfObject(100, 1.62)) // gra
It Will be covered in other section.
🌕 You are a rising star, now you knew function . Now, you are super charged with the power of functions. You have just completed day 7 challenges and you are 7 steps ahead in to your way to greatness. Now do some exercises for your brain and for your muscle.
🌕 You are a rising star, now you know what a function is. Now you are super charged with the power of functions. You have just completed day 7's challenges and you are 7 steps ahead in to your way to greatness. Now do some exercises for your brain and for your muscle.
@ -512,13 +512,13 @@ It Will be covered in other section.
### Exercises: Level 1
1. Declare a function _fullName_ and it print out your full name.
2. Declare a function _fullName_ and now it takes firstName, lastName as a parameter and it returns your full - name.
3. Declare a function _addNumbers_ and it takes two two parameters and it returns sum.
4. An area of a rectangle is calculated as follows: _area = length x width_. Write a function which calculates _areaOfRectangle_.
5. A perimeter of a rectangle is calculated as follows: _perimeter= 2x(length + width)_. Write a function which calculates _perimeterOfRectangle_.
6. A volume of a rectangular prism is calculated as follows: _volume = length x width x height_. Write a function which calculates _volumeOfRectPrism_.
7. Area of a circle is calculated as follows: _area = π x r x r_. Write a function which calculates _areaOfCircle_
1. Declare a function _fullName_ and print out your full name.
2. Declare a function _fullName_that takes firstName, lastName as parameters, and returns your full - name.
3. Declare a function _addNumbers_that takes two parameters and returns their sum.
4. The area of a rectangle is calculated as follows: _area = length x width_. Write a function which calculates _areaOfRectangle_.
5. The perimeter of a rectangle is calculated as follows: _perimeter= 2x(length + width)_. Write a function which calculates _perimeterOfRectangle_.
6. The volume of a rectangular prism is calculated as follows: _volume = length x width x height_. Write a function which calculates _volumeOfRectPrism_.
7. The area of a circle is calculated as follows: _area = π x r x r_. Write a function which calculates _areaOfCircle_
8. Circumference of a circle is calculated as follows: _circumference = 2πr_. Write a function which calculates _circumOfCircle_
9. Density of a substance is calculated as follows:_density= mass/volume_. Write a function which calculates _density_.
10. Speed is calculated by dividing the total distance covered by a moving object divided by the total amount of time taken. Write a function which calculates a speed of a moving object, _speed_.
@ -532,8 +532,8 @@ It Will be covered in other section.
- _Overweight_: BMI is 25 to 29.9
- _Obese_: BMI is 30 or more
14. Write a function called _checkSeason_, it takes a month parameter and returns the season:Autumn, Winter, Spring or Summer.
15. Math.max returns its largest argument. Write a function findMax that takes three arguments and returns their maximum without using Math.max method.
14. Write a function called _checkSeason_, that takes a month parameter and returns the season: Autumn, Winter, Spring or Summer.
15. Math.max returns its largest argument. Write a function findMax that takes three arguments and returns their maximum without using Math.max method.
```js
console.log(findMax(0, 10, 5))
@ -545,7 +545,7 @@ It Will be covered in other section.
### Exercises: Level 2
1. Linear equation is calculated as follows: _ax + by + c = 0_. Write a function which calculates value of a linear equation, _solveLinEquation_.
1. Quadratic equation is calculated as follows: _ax2 + bx + c = 0_. Write a function which calculates value or values of a quadratic equation, _solveQuadEquation_.
1. Quadratic equation is calculated as follows: _ax2 + bx + c = 0_. Write a function that calculates the value or values of a quadratic equation, _solveQuadEquation_.
```js
console.log(solveQuadratic()) // {0}
@ -556,22 +556,22 @@ It Will be covered in other section.
console.log(solveQuadratic(1, -1, 0)) //{1, 0}
```
1. Declare a function name _printArray_. It takes array as a parameter and it prints out each value of the array.
1. Write a function name _showDateTime_which shows time in this format: 08/01/2020 04:08 using the Date object.
1. Declare a function name _printArray_ that takes an array as parameter and it prints out each value of the array.
1. Write a function name _showDateTime_that shows time in this format: 08/01/2020 04:08 using the Date object.
```sh
showDateTime()
08/01/2020 04:08
```
1. Declare a function name _swapValues_. This function swaps value of x to y.
1. Declare a function name _swapValues_. This function swaps value of x with y.
```js
swapValues(3, 4) // x => 4, y=>3
swapValues(4, 5) // x = 5, y = 4
```
1. Declare a function name _reverseArray_. It takes array as a parameter and it returns the reverse of the array (don't use method).
1. Declare a function name _reverseArray_. It takes an array as a parameter and it returns the reverse of the array (don't use the reverse method).
```js
console.log(reverseArray([1, 2, 3, 4, 5]))
@ -580,13 +580,13 @@ It Will be covered in other section.
//['C', 'B', 'A']
```
1. Declare a function name_capitalizeArray_. It takes array as a parameter and it returns the - capitalizedarray.
1. Declare a function name_addItem_. It takes an item parameter and it returns an array after adding the item
1. Declare a function name_removeItem_. It takes an index parameter and it returns an array after removing an item
1. Declare a function name_sumOfNumbers_. It takes a number parameter and it adds all the numbers in that range.
1. Declare a function name_sumOfOdds_. It takes a number parameter and it adds all the odd numbers in that - range.
1. Declare a function name_sumOfEven_. It takes a number parameter and it adds all the even numbers in that - range.
1. Declare a function name evensAndOdds . It takes a positive integer as parameter and it counts number of evens and odds in the number.
1. Declare a function named _capitalizeArray_ that takes an array as parameter and returns the - capitalizedarray.
1. Declare a function named _addItem_ that takes an item parameter and returns an array after adding the item.
1. Declare a function named _removeItem_ that takes an index parameter and returns an array after removing an item.
1. Declare a function named _sumOfNumbers_ that takes a number parameter and it adds all the numbers in that range.
1. Declare a function named _sumOfOdds_ that takes a number parameter and it adds all the odd numbers in that range.
1. Declare a function named _sumOfEven_ that takes a number parameter and it adds all the even numbers in that range.
1. Declare a function named _evensAndOdds_ that takes a positive integer as parameter and icounts number of evens and odds in the number.
```sh
evensAndOdds(100);
@ -594,15 +594,15 @@ It Will be covered in other section.
The number of evens are 51.
```
1. Write a function which takes any number of arguments and return the sum of the arguments
1. Write a function which takes any number of arguments and returns the sum of the arguments.
```js
sum(1, 2, 3) // -> 6
sum(1, 2, 3, 4) // -> 10
```
1. Writ a function which generates a _randomUserIp_.
1. Write a function which generates a _randomMacAddress_
1. Writ a function that generates a _randomUserIp_.
1. Write a function that generates a _randomMacAddress_
1. Declare a function name _randomHexaNumberGenerator_. When this function is called it generates a random hexadecimal number. The function return the hexadecimal number.
```sh
@ -610,7 +610,7 @@ It Will be covered in other section.
'#ee33df'
```
1. Declare a function name _userIdGenerator_. When this function is called it generates seven character id. The function return the id.
1. Declare a function named_userIdGenerator_. When this function is called, it generates a seven-character ID and returns the ID.
```sh
console.log(userIdGenerator());
@ -619,7 +619,7 @@ It Will be covered in other section.
### Exercises: Level 3
1. Modify the _userIdGenerator_ function. Declare a function name _userIdGeneratedByUser_. It doesn’t take any parameter but it takes two inputs using prompt(). One of the input is the number of characters and the second input is the number of ids which are supposed to be generated.
1. Modify the _userIdGenerator_ function. Declare a function named_userIdGeneratedByUser_. It doesn’t take any parameters but it takes two inputs using prompt(). One of the input is the number of characters and the second input is the number of IDs which are supposed to be generated.
```sh
userIdGeneratedByUser()
@ -638,18 +638,18 @@ It Will be covered in other section.
'
```
1. Write a function name _rgbColorGenerator_ and it generates rgb colors.
1. Write a function named_rgbColorGenerator_that generates rgb colors.
```sh
rgbColorGenerator()
rgb(125,244,255)
```
1. Write a function **_arrayOfHexaColors_** which return any number of hexadecimal colors in an array.
1. Write a function **_arrayOfRgbColors_** which return any number of RGB colors in an array.
1. Write a function **_convertHexaToRgb_** which converts hexa color to rgb and it returns an rgb color.
1. Write a function **_convertRgbToHexa_** which converts rgb to hexa color and it returns an hexa color.
1. Write a function **_generateColors_** which can generate any number of hexa or rgb colors.
1. Write a function **_arrayOfHexaColors_** which returns any number of hexadecimal colors in an array.
1. Write a function **_arrayOfRgbColors_** which returns any number of RGB colors in an array.
1. Write a function **_convertHexaToRgb_** which converts hexadecimal format to rgb and returns an rgb color.
1. Write a function **_convertRgbToHexa_** which converts rgb to hexadecimal format and returns an hexadecimal color.
1. Write a function **_generateColors_** which can generate any number of hexadecimal or rgb colors.
@ -662,9 +662,9 @@ It Will be covered in other section.
1. Call your function _factorial_, it takes a whole number as a parameter and it return a factorial of the number
1. Call your function _isEmpty_, it takes a parameter and it checks if it is empty or not
1. Call your function _sum_, it takes any number of arguments and it returns the sum.
1. Write a function called _sumOfArrayItems_, it takes an array parameter and return the sum of all the items. Check if all the array items are number types. If not give return reasonable feedback.
1. Write a function called _average_, it takes an array parameter and returns the average of the items. Check if all the array items are number types. If not give return reasonable feedback.
1. Write a function called _modifyArray_ takes array as parameter and modifies the fifth item of the array and return the array. If the array length is less than five it return 'item not found'.
1. Write a function called _sumOfArrayItems_, it takes an array as parameter and returns the sum of all the items. Check if all the array items are of number type. If not give a reasonable feedback.
1. Write a function called _average_, it takes an array parameter and returns the average of the items. Check if all the array items are number types. If not give a reasonable feedback.
1. Write a function called _modifyArray_ that takes an array as parameter and modifies the fifth item of the array and return the array. If the array length is less than five returns 'item not found'.
@ -690,18 +690,18 @@ It Will be covered in other section.
'Not Found'
```
1. Write a function called _isPrime_, which checks if a number is prime number.
1. Write a functions which checks if all items are unique in the array.
1. Write a function called _isPrime_, which checks if a number is a prime number.
1. Write a functions which checks if all items in the array are unique.
1. Write a function which checks if all the items of the array are the same data type.
1. JavaScript variable name does not support special characters or symbols except \$ or \_. Write a function **isValidVariable** which check if a variable is valid or invalid variable.
1. Write a function which returns array of seven random numbers in a range of 0-9. All the numbers must be unique.
1. JavaScript variable names do not support special characters or symbols except \$ or \_. Write a function **isValidVariable** which check if a variable is valid or invalid.
1. Write a function which returns an array of seven random numbers in a range of 0-9. All the numbers must be unique.
```js
sevenRandomNumbers()
[(1, 4, 5, 7, 9, 8, 0)]
```
1. Write a function called reverseCountries, it takes countries array and first it copy the array and returns the reverse of the original array
1. Write a function called _reverseCountries_ that takes a _countries_ array as parameter. First, it copies the array and then returns the reverse of the original array.
Programming languages are similar to human languages. English or many other language uses words, phrases, sentences, compound sentences and other more to convey a meaningful message. The English meaning of syntax is _the arrangement of words and phrases to create well-formed sentences in a language_. The technical definition of syntax is the structure of statements in a computer language. Programming languages have syntax. JavaScript is a programming language and like other programming languages it has its own syntax. If we do not write a syntax that JavaScript understands, it will raise different types of errors. We will explore different kinds of JavaScript errors later. For now, let us see syntax errors.
Programming languages are similar to human languages. English or many other languages uses words, phrases, sentences, compound sentences and other more to convey a meaningful message. The English meaning of syntax is _the arrangement of words and phrases to create well-formed sentences in a language_. The technical definition of syntax is the structure of statements in a computer language. Programming languages have syntax. JavaScript is a programming language and like other programming languages, it has its own syntax. If we do not write a syntax that JavaScript understands, it will raise different types of errors. We will explore different kinds of JavaScript errors later. For now, let us see syntax errors.
@ -279,7 +279,7 @@ console.log(`Hello, World!`)
Now, let us practice more writing JavaScript codes using _`console.log()`_ on Google Chrome console for number data types.
In addition to the text, we can also do mathematical calculations using JavaScript. Let us do the following simple calculations.
It is possible to write JavaScript code on Google Chrome console can directly without the **_`console.log()`_** function. However, it is included in this introduction because most of this challenge would be taking place in a text editor where the usage of the function would be mandatory. You can play around directly with instructions on the console.
It is possible to write JavaScript code on the Google Chrome console directly without the **_`console.log()`_** function. However, it is included in this introduction because most of this challenge would be taking place in a text editor where the usage of the function would be mandatory. You can play around directly with instructions on the console.
@ -458,7 +458,7 @@ _Your main.js file should be below all other scripts_. It is very important to r
## Introduction to Data types
In JavaScript and also other programming languages, there are different types of data types. The following are JavaScript primitive data types: _String, Number, Boolean, undefined, Null_, and _Symbol_.
In JavaScript and other programming languages, there are different types of data types. The following are JavaScript primitive data types: _String, Number, Boolean, undefined, Null_, and _Symbol_.
### Numbers
@ -490,7 +490,7 @@ A collection of one or more characters between two single quotes, double quotes,
### Booleans
A boolean value is either True or False. Any comparisons returns a boolean value, which is either true or false.
A boolean value is either True or False. Any comparison returns a boolean value, which is either true or false.
A boolean data type is either a true or false value.
@ -592,7 +592,7 @@ year2020
year_2020
```
The first and second variables on the list follows the camelCase convention of declaring in JavaScript. In this material, we will use camelCase variables(camelWithOneHump). We use CamelCase(CamelWithTwoHump) to declare classes, we will discuss about classes and objects in other section.
The first and second variables on the list follow the camelCase convention of declaring in JavaScript. In this material, we will use camelCase variables(camelWithOneHump). We use CamelCase(CamelWithTwoHump) to declare classes, we will discuss classes and objects in another section.
Bernardo Martelli
3 years ago