diff --git a/.gitignore b/.gitignore index 35b0e83..91a80f9 100644 --- a/.gitignore +++ b/.gitignore @@ -11,4 +11,12 @@ day7.md day8.md day9.md day10.md -01_02_03_days_backup.md \ No newline at end of file +01_02_03_days_backup.md +test.md +06_Day +07_Day +08_Day +09_Day +10_Day +11_Day +12_Day \ No newline at end of file diff --git a/01_Day/helloworld.js b/01_Day/01_day_starter/helloworld.js similarity index 100% rename from 01_Day/helloworld.js rename to 01_Day/01_day_starter/helloworld.js diff --git a/01_Day/index.html b/01_Day/01_day_starter/index.html similarity index 100% rename from 01_Day/index.html rename to 01_Day/01_day_starter/index.html diff --git a/01_Day/introduction.js b/01_Day/01_day_starter/introduction.js similarity index 100% rename from 01_Day/introduction.js rename to 01_Day/01_day_starter/introduction.js diff --git a/01_Day/main.js b/01_Day/01_day_starter/main.js similarity index 100% rename from 01_Day/main.js rename to 01_Day/01_day_starter/main.js diff --git a/01_Day/varaible.js b/01_Day/01_day_starter/varaible.js similarity index 100% rename from 01_Day/varaible.js rename to 01_Day/01_day_starter/varaible.js diff --git a/02_Day/02_day_data_types.md b/02_Day/02_day_data_types.md index bc8c7c1..17f3f1f 100644 --- a/02_Day/02_day_data_types.md +++ b/02_Day/02_day_data_types.md @@ -502,7 +502,7 @@ console.log(country.substring(3)) // land 7. *split()*: The split method splits a string at a specified place. ```js -let string = '30 Days Of JavaScipt' +let string = '30 Days Of JavaScript' console.log(string.split()) // ["30 Days Of JavaScript"] console.log(string.split(' ')) // ["30", "Days", "Of", "JavaScript"] diff --git a/02_Day/index.html b/02_Day/02_day_starter/index.html similarity index 100% rename from 02_Day/index.html rename to 02_Day/02_day_starter/index.html diff --git a/02_Day/main.js b/02_Day/02_day_starter/main.js similarity index 100% rename from 02_Day/main.js rename to 02_Day/02_day_starter/main.js diff --git a/03_Day/03_booleans_operators_date.md b/03_Day/03_booleans_operators_date.md index 91989ea..508cec1 100644 --- a/03_Day/03_booleans_operators_date.md +++ b/03_Day/03_booleans_operators_date.md @@ -1,6 +1,7 @@ ## Table of Contents [<< Day 2](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/02_Day/02_day_data_types.md) | [Day 4 >>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/04_Day/04_day_conditionals.md) +-- ![Thirty Days Of JavaScript](./day_1_3.png) diff --git a/03_Day/03_day_starter/index.html b/03_Day/03_day_starter/index.html new file mode 100644 index 0000000..feb3027 --- /dev/null +++ b/03_Day/03_day_starter/index.html @@ -0,0 +1,15 @@ + + + + + 30DaysOfJavaScript: 03 Day + + + + + + + + + + \ No newline at end of file diff --git a/03_Day/03_day_starter/scripts/main.js b/03_Day/03_day_starter/scripts/main.js new file mode 100644 index 0000000..7762908 --- /dev/null +++ b/03_Day/03_day_starter/scripts/main.js @@ -0,0 +1 @@ +// this is your main.js script \ No newline at end of file diff --git a/04_Day/04_day_conditionals.md b/04_Day/04_day_conditionals.md index 8a76a33..624505a 100644 --- a/04_Day/04_day_conditionals.md +++ b/04_Day/04_day_conditionals.md @@ -1,6 +1,6 @@ ## Table of Contents -[<< Day 3](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/03_Day/03_booleans_operators_date.md) | [Day 5 >>](#) +[<< Day 3](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/03_Day/03_booleans_operators_date.md) | [Day 5 >>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/05_Day/05_day_arrays.md) -- ![Thirty Days Of JavaScript](./day_1_4.png) @@ -9,10 +9,10 @@ - [Conditionals](#conditionals) - [if](#if) - [if else](#if-else) - - [if else if else](#if-else-if-else) + - [if else if else else](#if-else-if-else-else) - [Switch](#switch) - [Ternary Operators](#ternary-operators) -- [πŸ’» Exercise - 8 : Conditionals](#%f0%9f%92%bb-exercise---8--conditionals) +- [πŸ’» Exercise : Conditionals](#%f0%9f%92%bb-exercise--conditionals) # πŸ“” Day 4 @@ -113,7 +113,7 @@ if (isRaining) { The above condition is false, therefore the else block was executed. How about if our condition is more than two, we will use *else if* conditions. -### if else if else +### if else if else else On our daily life, we make decision on daily basis. We make decision 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 conditions. We use *else if* when we have multiple conditions. @@ -237,7 +237,7 @@ isRaining πŸŒ• You are extraordinary and you have a remarkable potential. You have just completed day 4 challenge and you are four steps a head in to your way to greatness. Now do some exercises for your brain and for your muscle. -# πŸ’» Exercise - 8 : Conditionals +# πŸ’» Exercise : Conditionals 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 feedback to wait for the years he supposed to wait for. @@ -255,8 +255,11 @@ isRaining 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. Do it both using if else and ternary operator. + +1. If a is greater than b return 'a is greater than b' else 'a is less than b'. Try to implement in to ways + + - using if else + - ternary operator. ```js let a = 4 @@ -306,7 +309,7 @@ isRaining Friday is a work day. ``` -8. Write a program which tells the number days in a month. +1. Write a program which tells the number days in a month. ```sh Enter month: January @@ -325,4 +328,4 @@ isRaining πŸŽ‰ CONGRATULATIONS ! πŸŽ‰ -[<< Day 3](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/03_Day/03_booleans_operators_date.md) | [Day 5 >>](#) \ No newline at end of file +[<< Day 3](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/03_Day/03_booleans_operators_date.md) | [Day 5 >>](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/05_Day/05_day_arrays.md) \ No newline at end of file diff --git a/04_Day/04_day_starter/04_day_starter/index.html b/04_Day/04_day_starter/04_day_starter/index.html new file mode 100644 index 0000000..30d37fc --- /dev/null +++ b/04_Day/04_day_starter/04_day_starter/index.html @@ -0,0 +1,15 @@ + + + + + 30DaysOfJavaScript + + + + + + + + + + \ No newline at end of file diff --git a/04_Day/04_day_starter/04_day_starter/scripts/main.js b/04_Day/04_day_starter/04_day_starter/scripts/main.js new file mode 100644 index 0000000..7762908 --- /dev/null +++ b/04_Day/04_day_starter/04_day_starter/scripts/main.js @@ -0,0 +1 @@ +// this is your main.js script \ No newline at end of file diff --git a/04_Day/04_day_starter/index.html b/04_Day/04_day_starter/index.html new file mode 100644 index 0000000..3936631 --- /dev/null +++ b/04_Day/04_day_starter/index.html @@ -0,0 +1,15 @@ + + + + + 30DaysOfJavaScript:04 Day + + + + + + + + + + \ No newline at end of file diff --git a/04_Day/04_day_starter/scripts/main.js b/04_Day/04_day_starter/scripts/main.js new file mode 100644 index 0000000..7762908 --- /dev/null +++ b/04_Day/04_day_starter/scripts/main.js @@ -0,0 +1 @@ +// this is your main.js script \ No newline at end of file diff --git a/05_Day/05_day_arrays.md b/05_Day/05_day_arrays.md new file mode 100644 index 0000000..cc0d815 --- /dev/null +++ b/05_Day/05_day_arrays.md @@ -0,0 +1,724 @@ +## Table of Contents + +[<< Day 4](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/04_Day/04_day_conditionals.md) | [Day 6 >>](#) +-- +![Day 5](../images/banners/day_1_5.png) + +- [πŸ“” Day 5](#%f0%9f%93%94-day-5) + - [Arrays](#arrays) + - [How to create an empty array](#how-to-create-an-empty-array) + - [How to create an array with values](#how-to-create-an-array-with-values) + - [Creating an array using split](#creating-an-array-using-split) + - [Accessing array items using index](#accessing-array-items-using-index) + - [Modifying array element](#modifying-array-element) + - [Methods to manipulate array](#methods-to-manipulate-array) + - [Array Constructor](#array-constructor) + - [Creating static values with fill](#creating-static-values-with-fill) + - [Concatenating array using concat](#concatenating-array-using-concat) + - [Getting array length](#getting-array-length) + - [Getting index an element in arr array](#getting-index-an-element-in-arr-array) + - [Getting last index of an element in array](#getting-last-index-of-an-element-in-array) + - [Checking array](#checking-array) + - [Converting array to string](#converting-array-to-string) + - [Joining array elements](#joining-array-elements) + - [Slice array elements](#slice-array-elements) + - [Splice method in array](#splice-method-in-array) + - [Adding item to an array using push](#adding-item-to-an-array-using-push) + - [Removing the end element using pop](#removing-the-end-element-using-pop) + - [Removing an element from the beginning](#removing-an-element-from-the-beginning) + - [Add an element from the beginning](#add-an-element-from-the-beginning) + - [Reversing array order](#reversing-array-order) + - [Sorting elements in array](#sorting-elements-in-array) + - [πŸ’» Exercise](#%f0%9f%92%bb-exercise) + +# πŸ“” Day 5 + +## Arrays + +In contrast to variables 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 last element is less by one from the length of the array. + +Array is a collection of different data types which are ordered and changeable(modifiable). Allows duplicate element and different data types. An array can be empty or it may have different data type values + +### How to create an empty array + +In JavaScript we can create array in different ways. Let us different ways to create an array. + +- Using Array constructor + +```js +// syntax +const arr = Array() +// or +// let arr = new Array() +console.log(arr) // [] +``` + +- Using square brackets([]) + +```js +// syntax +// This the most recommended way to create an empty list +const arr = [] +console.log(arr) +``` + +### How to create an array with values + +Array with initial values. We use _length_ property to find the length of an array. + +```js +const numbers = [0, 3.14, 9.81, 37, 98.6, 100] // array of numbers +const fruits = ['banana', 'orange', 'mango', 'lemon'] // array of strings, fruits +const vegetables = ['Tomato', 'Potato', 'Cabbage', 'Onion', 'Carrot'] // array of strings, vegetables +const animalProducts = ['milk', 'meat', 'butter', 'yoghurt'] // array of strings, products +const webTechs = ['HTML', 'CSS', 'JS', 'React', 'Redux', 'Node', 'MongDB'] // array of web technologies +const countries = ['Finland', 'Denmark', 'Sweden', 'Norway', 'Iceland'] // array of strings, countries + +// Print the array and its length + +console.log('Numbers:', numbers) +console.log('Number of numbers:', numbers.length) + +console.log('Fruits:', fruits) +console.log('Number of fruits:', fruits.length) + +console.log('Vegetables:', vegetables) +console.log('Number of vegetables:', vegetables.length) + +console.log('Animal products:', animalProducts) +console.log('Number of animal products:', animalProducts.length) + +console.log('Web technologies:', webTechs) +console.log('Number of web technologies:', webTechs.length) + +console.log('Countries:', countries) +console.log('Number of countries:', countries.length) +``` + +```sh +Numbers: [0, 3.14, 9.81, 37, 98.6, 100] +Number of numbers: 6 +Fruits: ['banana', 'orange', 'mango', 'lemon'] +Number of fruits: 4 +Vegetables: ['Tomato', 'Potato', 'Cabbage', 'Onion', 'Carrot'] +Number of vegetables: 5 +Animal products: ['milk', 'meat', 'butter', 'yoghurt'] +Number of animal products: 4 +Web technologies: ['HTML', 'CSS', 'JS', 'React', 'Redux', 'Node', 'MongDB'] +Number of web technologies: 7 +Countries: ['Finland', 'Estonia', 'Denmark', 'Sweden', 'Norway'] +Number of countries: 5 +``` + +- Array can have items of different data types + +```js +const arr = [ + 'Asabeneh', + 250, + true, + { country: 'Finland', city: 'Helsinki' }, + { skills: ['HTML', 'CSS', 'JS', 'React', 'Python'] } +] // arr containing different data types +console.log(arr) +``` + +### Creating an array using split + +As we have seen in earlier section, we can split a string at different position and we can change to an array. Let us see the examples blow. + +```js +let js = 'JavaScript' +const charsInJavaScript = js.split('') + +console.log(charsInJavaScript) // ["J", "a", "v", "a", "S", "c", "r", "i", "p", "t"] + +let companiesString = 'Facebook, Google, Microsoft, Apple, IBM, Oracle, Amazon' +const companies = companiesString.split(',') + +console.log(companies) // ["Facebook", " Google", " Microsoft", " Apple", " IBM", " Oracle", " Amazon"] +let txt = + 'I love teaching and empowering people. I teach HTML, CSS, JS, React, Python.' +const words = txt.split(' ') + +console.log(words) +// the text has special characters think how you can just get only the words +// ["I", "love", "teaching", "and", "empowering", "people.", "I", "teach", "HTML,", "CSS,", "JS,", "React,", "Python"] +``` + +### Accessing array items using index + +We access each element in an array using their index. An array index start from 0. The picture below show clearly the starting of the index. + +![arr index](../images/array_index.png) + +```js +const fruits = ['banana', 'orange', 'mango', 'lemon'] +let firstFruit = fruits[0] // we are accessing the first item using its index + +console.log(firstFruit) // banana + +secondFruit = fruits[1] +console.log(secondFruit) // orange + +let lastFruit = fruits[3] +console.log(lastFruit) // lemon +// Last index can be calculated as follows + +let lastIndex = fruits.length - 1 +lastFruit = fruits[lastIndex] +console.log(lastFruit) // lemon +``` + +```js +const numbers = [0, 3.14, 9.81, 37, 98.6, 100] // set of numbers + +console.log(numbers.length) // => to know the size of the array, which is 6 +console.log(numbers) // -> [0, 3.14, 9.81, 37, 98.6, 100] +console.log(numbers[0]) // -> 0 +console.log(numbers[5]) // -> 100 + +let lastIndex = numbers.length - 1; +console.log(numbers[lastIndex]) // -> 100 +``` + +```js +const webTechs = [ + 'HTML', + 'CSS', + 'JavaScript', + 'React', + 'Redux', + 'Node', + 'MongoDB' +] // List of web technologies + +console.log(webTechs) // all the array items +console.log(webTechs.length) // => to know the size of the array, which is 7 +console.log(webTechs[0]) // -> HTML +console.log(webTechs[6]) // -> MongoDB + +let lastIndex = webTechs.length - 1 +console.log(webTechs[lastIndex]) // -> MongoDB +``` + +```js +const countries = [ + 'Albania', + 'Bolivia', + 'Canada', + 'Denmark', + 'Ethiopia', + 'Finland', + 'Germany', + 'Hungary', + 'Ireland', + 'Japan', + 'Kenya' +] // List of countries + +console.log(countries) // -> all countries in array +console.log(countries[0]) // -> Albania +console.log(countries[10]) // -> Kenya + +let lastIndex = countries.length - 1; +console.log(countries[lastIndex]) // -> Kenya +``` + +```js +const shoppingCart = [ + 'Milk', + 'Mango', + 'Tomato', + 'Potato', + 'Avocado', + 'Meat', + 'Eggs', + 'Sugar' +] // List of food products + +console.log(shoppingCart) // -> all shoppingCart in array +console.log(shoppingCart[0]) // -> Milk +console.log(shoppingCart[7]) // -> Sugar + +let lastIndex = shoppingCart.length - 1; +console.log(shoppingCart[lastIndex]) // -> Sugar +``` + +### Modifying array element + +An array is mutable(modifiable). Once an array is created we can modify the contents or the array elements. + +```js +const numbers = [1, 2, 3, 4, 5] +numbers[0] = 10 // changing 1 at index 0 to 10 +numbers[1] = 20 // changing 2 at index 1 to 20 + +console.log(numbers) // [10, 20, 3, 4, 5] + +const countries = [ + 'Albania', + 'Bolivia', + 'Canada', + 'Denmark', + 'Ethiopia', + 'Finland', + 'Germany', + 'Hungary', + 'Ireland', + 'Japan', + 'Kenya' +] + +countries[0] = 'Afghanistan' // Replacing Albania by Afghanistan +let lastIndex = countries.length - 1 +countries[lastIndex] = 'Korea' // Replacing Kenya by Korea + +console.log(countries) +``` + +```sh +["Afghanistan", "Bolivia", "Canada", "Denmark", "Ethiopia", "Finland", "Germany", "Hungary", "Ireland", "Japan", "Korea"] +``` + +### Methods to manipulate array + +There are different methods to manipulate an array. These are some of the available methods to deal with arrays:_Array,length, concat, indexOf, slice, splice, join, toString, includes, lastIndexOf, isArray, fill, push, pop, shift, unshift_ + +#### Array Constructor + +Array:To create an array. + +```js +const arr = Array() // creates an an empty array +console.log(arr) + +const eightEmptyValues = Array(8) // it creates eight empty values +console.log(eightEmptyValues) // [empty x 8] +``` + +#### Creating static values with fill + +fill: Fill all the array elements with a static value + +```js +const arr = Array() // creates an an empty array +console.log(arr) + +const eightXvalues = Array(8).fill('X') // it creates eight element values +console.log(eightXvalues) // ['X', 'X','X','X','X','X','X','X'] + +const eight0values = Array(8).fill(0) // it creates eight element values +console.log(eight0values) // [0, 0, 0, 0, 0, 0, 0, 0] + +const four4values = Array(4).fill(4) // it creates 4 element values +console.log(four4values) // [4, 4, 4, 4, 4, 4, 4, 4] +``` + +#### Concatenating array using concat + +concat:To concatenate two arrays. + +```js +const firstList = [1, 2, 3] +const secondList = [4, 5, 6] +const thirdList = firstList.concat(secondList) + +console.log(thirdList) // [1, 2, 3, 4, 5, 6] +``` + +```js +const fruits = ['banana', 'orange', 'mango', 'lemon'] // array of fruits +const vegetables = ['Tomato', 'Potato', 'Cabbage', 'Onion', 'Carrot'] // array of vegetables +const fruitsAndVegetables = fruits.concat(vegetables) + +console.log(fruitsAndVegetables) +``` + +```sh +["banana", "orange", "mango", "lemon", "Tomato", "Potato", "Cabbage", "Onion", "Carrot"] +``` + +#### Getting array length + +Length:To know the size of the array + +```js +const numbers = [1, 2, 3, 4, 5] +console.log(numbers.length) // -> 5 +``` + +#### Getting index an element in arr array + +indexOf:To check if an item exist in an array. If it exists it returns the index else it returns -1. + +```js +const numbers = [1, 2, 3, 4, 5] + +console.log(numbers.indexOf(5)) // -> 4 +console.log(numbers.indexOf(0)) // -> -1 +console.log(numbers.indexOf(1)) // -> 0 +console.log(numbers.indexOf(6)) // -> -1 +``` + +Check an element if it exist in an array + +- Check items in a list + +```js +// let us check if a banana exist in the array + +const fruits = ['banana', 'orange', 'mango', 'lemon'] +let index = fruits.indexOf('banana') // 0 + +if(index != -1){ + console.log('This fruit does exist in the array') +} else { + console.log('This fruit does not exist in the array') +} +// This fruit does exist in the array + +// we can use also ternary here +index != -1 ? console.log('This fruit does exist in the array'): console.log('This fruit does not exist in the array') + +// let us check if a avocado exist in the array +let indexOfAvocado = fruits.indexOf('avocado') // -1 +if(indexOfAvocado!= -1){ + console.log('This fruit does exist in the array') +} else { + console.log('This fruit does not exist in the array') +} +// This fruit does not exist in the array +``` + +#### Getting last index of an element in array + +lastIndexOf:Give the position of the last item in the array. If it exist it returns the index else it returns -1. + +```js +const numbers = [1, 2, 3, 4, 5, 3, 1, 2] + +console.log(numbers.lastIndexOf(2)) // -7 +console.log(numbers.lastIndexOf(0)) // -1 +console.log(numbers.lastIndexOf(1)) // 6 +console.log(numbers.lastIndexOf(4)) // 3 +console.log(numbers.lastIndexOf(6)) // -1 +``` + +includes:To check if an item exist in an array. If it exist it returns the true else it returns false. + +```js +const numbers = [1, 2, 3, 4, 5] + +console.log(numbers.includes(5)) // true +console.log(numbers.includes(0)) // false +console.log(numbers.includes(1)) // true +console.log(numbers.includes(6)) // false + +const webTechs = [ + 'HTML', + 'CSS', + 'JavaScript', + 'React', + 'Redux', + 'Node', + 'MongoDB' +] // List of web technologies + +console.log(webTechs.includes('Node')) // true +console.log(webTechs.includes('C')) // false +``` + +#### Checking array + +Array.isArray:To check if the data type is an array + +```js +const numbers = [1, 2, 3, 4, 5] +console.log(Array.isArray(numbers)) // true + +const number = 100 +console.log(Array.isArray(number)) // false +``` + +#### Converting array to string + +toString:Converts array to string + +```js +const numbers = [1, 2, 3, 4, 5] +console.log(numbers.toString()) // 1,2,3,4,5 + +const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook'] +console.log(names.toString()) // Asabeneh,Mathias,Elias,Brook +``` + +#### Joining array elements + +join:To join the elements of the array, the argument 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] +console.log(numbers.join()) // 1,2,3,4,5 + +const names = ['Asabeneh', 'Mathias', 'Elias', 'Brook'] + +console.log(names.join()) // Asabeneh,Mathias,Elias,Brook +console.log(names.join('')) //AsabenehMathiasEliasBrook +console.log(names.join(' ')) //Asabeneh Mathias Elias Brook +console.log(names.join(', ')) //Asabeneh, Mathias, Elias, Brook +console.log(names.join(' # ')) //Asabeneh # Mathias # Elias # Brook + +const webTechs = [ + 'HTML', + 'CSS', + 'JavaScript', + 'React', + 'Redux', + 'Node', + 'MongoDB' +] // List of web technologies + +console.log(webTechs.join()) // "HTML,CSS,JavaScript,React,Redux,Node,MongoDB" +console.log(webTechs.join(' # ')) // "HTML # CSS # JavaScript # React # Redux # Node # MongoDB" +``` + +#### Slice array elements + +Slice: To cut out a multiple items in range. It takes two parameters:starting and ending position. It doesn't include the ending position + +```js + const numbers = [1,2,3,4,5] + + console.log(numbers.slice()) // -> it copies all item + console.log(numbers.slice(0)) // -> it copies all item + console.log(numbers.slice(0, numbers.length)) // it copies all item + console.log(numbers.slice(1,4)) // -> [2,3,4] // it doesn't include the ending position +``` + +#### Splice method in array + +Splice: It takes three parameters:Starting position, number of times to be removed and number items to be added. + +```js + const numbers = [1, 2, 3, 4, 5]; + + console.log(numbers.splice()) // -> remove all items + console.log(numbers.splice(0,1)) // remove the first item + console.log(numbers.splice(3, 3, 6, 7, 8)) // -> [1,2,6,7,8] //it removes two item and replace three items + +``` + +#### 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 + +```js +// syntax +const arr = ['item1', 'item2','item3'] +arr.push('new item') + +console.log(arr) +// ['item1', 'item2','item3','new item'] +``` + +```js +const numbers = [1, 2, 3, 4, 5] +numbers.push(6) + +console.log(numbers) // -> [1,2,3,4,5,6] + +numbers.pop() // -> remove one item from the end +console.log(numbers) // -> [1,2,3,4,5] +``` + +```js +let fruits = ['banana', 'orange', 'mango', 'lemon'] +fruits.push('apple') + +console.log(fruits) // ['banana', 'orange', 'mango', 'lemon', 'apple'] + +fruits.push('lime') +console.log(fruits) // ['banana', 'orange', 'mango', 'lemon', 'apple', 'lime'] +``` + +#### Removing the end element using pop + +Pop: Removing item in the end + +```js +const numbers = [1, 2, 3, 4, 5] +numbers.pop() // -> remove one item from the end + +console.log(numbers) // -> [1,2,3,4] +``` + +#### Removing an element from the beginning + +shift: Removing one array element in the beginning of the array + +```js +const numbers = [1, 2, 3, 4, 5] +numbers.shift() // -> remove one item from the beginning + +console.log(numbers) // -> [2,3,4,5] +``` + +#### Add an element from the beginning + +unshift: Adding array element in the beginning of the array + +```js +const numbers = [1, 2, 3, 4, 5] +numbers.unshift(0) // -> add one item from the beginning + +console.log(numbers) // -> [0,1,2,3,4,5] +``` + +#### Reversing array order + +reverse: reverse the order of an array + +```js +const numbers = [1, 2, 3, 4, 5] +numbers.reverse() // -> reverse array order + +console.log(numbers) // [5, 4, 3, 2, 1] + +numbers.reverse() +console.log(numbers) // [1, 2, 3, 4, 5] +``` + +#### Sorting elements in array + +sort: arrange array elements in ascending order. Sort takes a call back function, we wil see how we use sort with call back function in the coming sections. + +```js +const webTechs = [ + 'HTML', + 'CSS', + 'JavaScript', + 'React', + 'Redux', + 'Node', + 'MongoDB' +] + +webTechs.sort() +console.log(webTechs) // ["CSS", "HTML", "JavaScript", "MongoDB", "Node", "React", "Redux"] + +webTechs.reverse() // after sorting we can reverse it +console.log(webTechs) // ["Redux", "React", "Node", "MongoDB", "JavaScript", "HTML", "CSS"] +``` + +πŸŒ• You are diligent and you have already achieved quite a lot. You have just completed day 5 challenge and you are 5 steps a head in to your way to greatness. Now do some exercises for your brain and for your muscle. + +## πŸ’» Exercise + +```js +const countries = [ + 'Albania', + 'Bolivia', + 'Canada', + 'Denmark', + 'Ethiopia', + 'Finland', + 'Germany', + 'Hungary', + 'Ireland', + 'Japan', + 'Kenya' +] + +const webTechs = [ + 'HTML', + 'CSS', + 'JavaScript', + 'React', + 'Redux', + 'Node', + 'MongoDB' +] +``` + +1. Declare an _empty_ array; +1. Declare an array with more than 5 number of elements +1. Find the length of your array +1. Get the first item, the middle item and the last item of the array +1. Declare an array called _mixedDataTypes_,put different data types in your array and find length of the array. You are should size be greater than 5 +1. Declare an array variable name itCompanies and assign initial values Facebook, Google, Microsoft, Apple, IBM, Oracle and Amazon +1. Print the array using _console.log()_ +1. Print the number of companies in the array +1. Print the first company, middle and last company +1. Print out each company +1. Change each company name to uppercase one by one and print them out +1. Print the array like as a sentence: Facebook, Google, Microsoft, Apple, IBM,Oracle and Amazon are big IT companies. +1. Check if a certain company exists in the itCompanies array. If it exist return the company else return a company is _not found_ +1. Filter out companies which have more than one 'o' without the filter method +1. Sort the array using _sort()_ method +1. Reverse the array using _reverse()_ method +1. Slice out the first 3 companies from the array +1. Slice out the last 3 companies from the array +1. Slice out the middle IT company or companies from the array +1. Remove the first IT company from the array +1. Remove the middle IT company or companies from the array +1. Remove the last IT company from the array +1. Remove all IT companies +1. Create a separate countries.js file and store the countries array in to this file, create a separate file web_techs.js ans store the webTechs array in to this file. Access both file in main.js file +1. First remove all the functions and change the string to array and count the number of words in the array + + ```js + let text = + 'I love teaching and empowering people. I teach HTML, CSS, JS, React, Python.' + console.log(words) + console.log(words.length) + ``` + + ```sh + ["I", "love", "teaching", "and", "empowering", "people", "I", "teach", "HTML", "CSS", "JS", "React", "Python"] + 13 + ``` + +1. In the following shopping cart add, remove, edit items + + ```js + const shoppingCart = ['Milk', 'Coffee', 'Tea', 'Honey'] + ``` + + - add 'Meat' in the beginning of your shopping cart if if it has not be 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 if it exists print 'Sass is a CSS preprocess'. If it does not exist add Sass to the array. +1. Concatenate the following two variables and store it in a fullStack variable. + + ```js + const frontEnd = ['HTML', 'CSS', 'JS', 'React', 'Redux'] + const backEnd = ['Node','Express', 'MongoDB'] + + console.log(fullStack) + ``` + + ```sh + ["HTML", "CSS", "JS", "React", "Redux", "Node", "Express", "MongoDB"] + ``` + +1. The following is a list of 10 students ages: + + ```js + const ages = [19, 22, 19, 24, 20, 25, 26, 24, 25, 24] + ``` + + - Sort the array and find the min and max age + - Find the min age and the max age + - 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. Find the middle country(ies) in the [countries list](https://github.com/Asabeneh/30DaysOfJavaScript/tree/master/data/countries.js) +1. Divide the countries list into two equal lists if it is even. If countries array is not even one more country for the first half. + +πŸŽ‰ CONGRATULATIONS ! πŸŽ‰ + +[<< Day 4](https://github.com/Asabeneh/30DaysOfJavaScript/blob/master/04_Day/04_day_conditionals.md) | [Day 6 >>](#) diff --git a/05_Day/05_day_starter/data/countries.js b/05_Day/05_day_starter/data/countries.js new file mode 100644 index 0000000..e57b005 --- /dev/null +++ b/05_Day/05_day_starter/data/countries.js @@ -0,0 +1,195 @@ +const countries = [ + 'Afghanistan', + 'Albania', + 'Algeria', + 'Andorra', + 'Angola', + 'Antigua and Barbuda', + 'Argentina', + 'Armenia', + 'Australia', + 'Austria', + 'Azerbaijan', + 'Bahamas', + 'Bahrain', + 'Bangladesh', + 'Barbados', + 'Belarus', + 'Belgium', + 'Belize', + 'Benin', + 'Bhutan', + 'Bolivia', + 'Bosnia and Herzegovina', + 'Botswana', + 'Brazil', + 'Brunei', + 'Bulgaria', + 'Burkina Faso', + 'Burundi', + 'Cambodia', + 'Cameroon', + 'Canada', + 'Cape Verde', + 'Central African Republic', + 'Chad', + 'Chile', + 'China', + 'Colombi', + 'Comoros', + 'Congo (Brazzaville)', + 'Congo', + 'Costa Rica', + "Cote d'Ivoire", + 'Croatia', + 'Cuba', + 'Cyprus', + 'Czech Republic', + 'Denmark', + 'Djibouti', + 'Dominica', + 'Dominican Republic', + 'East Timor (Timor Timur)', + 'Ecuador', + 'Egypt', + 'El Salvador', + 'Equatorial Guinea', + 'Eritrea', + 'Estonia', + 'Ethiopia', + 'Fiji', + 'Finland', + 'France', + 'Gabon', + 'Gambia, The', + 'Georgia', + 'Germany', + 'Ghana', + 'Greece', + 'Grenada', + 'Guatemala', + 'Guinea', + 'Guinea-Bissau', + 'Guyana', + 'Haiti', + 'Honduras', + 'Hungary', + 'Iceland', + 'India', + 'Indonesia', + 'Iran', + 'Iraq', + 'Ireland', + 'Israel', + 'Italy', + 'Jamaica', + 'Japan', + 'Jordan', + 'Kazakhstan', + 'Kenya', + 'Kiribati', + 'Korea, North', + 'Korea, South', + 'Kuwait', + 'Kyrgyzstan', + 'Laos', + 'Latvia', + 'Lebanon', + 'Lesotho', + 'Liberia', + 'Libya', + 'Liechtenstein', + 'Lithuania', + 'Luxembourg', + 'Macedonia', + 'Madagascar', + 'Malawi', + 'Malaysia', + 'Maldives', + 'Mali', + 'Malta', + 'Marshall Islands', + 'Mauritania', + 'Mauritius', + 'Mexico', + 'Micronesia', + 'Moldova', + 'Monaco', + 'Mongolia', + 'Morocco', + 'Mozambique', + 'Myanmar', + 'Namibia', + 'Nauru', + 'Nepal', + 'Netherlands', + 'New Zealand', + 'Nicaragua', + 'Niger', + 'Nigeria', + 'Norway', + 'Oman', + 'Pakistan', + 'Palau', + 'Panama', + 'Papua New Guinea', + 'Paraguay', + 'Peru', + 'Philippines', + 'Poland', + 'Portugal', + 'Qatar', + 'Romania', + 'Russia', + 'Rwanda', + 'Saint Kitts and Nevis', + 'Saint Lucia', + 'Saint Vincent', + 'Samoa', + 'San Marino', + 'Sao Tome and Principe', + 'Saudi Arabia', + 'Senegal', + 'Serbia and Montenegro', + 'Seychelles', + 'Sierra Leone', + 'Singapore', + 'Slovakia', + 'Slovenia', + 'Solomon Islands', + 'Somalia', + 'South Africa', + 'Spain', + 'Sri Lanka', + 'Sudan', + 'Suriname', + 'Swaziland', + 'Sweden', + 'Switzerland', + 'Syria', + 'Taiwan', + 'Tajikistan', + 'Tanzania', + 'Thailand', + 'Togo', + 'Tonga', + 'Trinidad and Tobago', + 'Tunisia', + 'Turkey', + 'Turkmenistan', + 'Tuvalu', + 'Uganda', + 'Ukraine', + 'United Arab Emirates', + 'United Kingdom', + 'United States', + 'Uruguay', + 'Uzbekistan', + 'Vanuatu', + 'Vatican City', + 'Venezuela', + 'Vietnam', + 'Yemen', + 'Zambia', + 'Zimbabwe' +] diff --git a/05_Day/05_day_starter/index.html b/05_Day/05_day_starter/index.html new file mode 100644 index 0000000..b7bf583 --- /dev/null +++ b/05_Day/05_day_starter/index.html @@ -0,0 +1,15 @@ + + + + + 30DaysOfJavaScript:05 Day + + + + + + + + + + \ No newline at end of file diff --git a/05_Day/05_day_starter/scripts/main.js b/05_Day/05_day_starter/scripts/main.js new file mode 100644 index 0000000..c6045c8 --- /dev/null +++ b/05_Day/05_day_starter/scripts/main.js @@ -0,0 +1,2 @@ +console.log(countries) +alert('Open the console and check if the countries has been loaded') \ No newline at end of file diff --git a/data/countries.js b/data/countries.js new file mode 100644 index 0000000..e57b005 --- /dev/null +++ b/data/countries.js @@ -0,0 +1,195 @@ +const countries = [ + 'Afghanistan', + 'Albania', + 'Algeria', + 'Andorra', + 'Angola', + 'Antigua and Barbuda', + 'Argentina', + 'Armenia', + 'Australia', + 'Austria', + 'Azerbaijan', + 'Bahamas', + 'Bahrain', + 'Bangladesh', + 'Barbados', + 'Belarus', + 'Belgium', + 'Belize', + 'Benin', + 'Bhutan', + 'Bolivia', + 'Bosnia and Herzegovina', + 'Botswana', + 'Brazil', + 'Brunei', + 'Bulgaria', + 'Burkina Faso', + 'Burundi', + 'Cambodia', + 'Cameroon', + 'Canada', + 'Cape Verde', + 'Central African Republic', + 'Chad', + 'Chile', + 'China', + 'Colombi', + 'Comoros', + 'Congo (Brazzaville)', + 'Congo', + 'Costa Rica', + "Cote d'Ivoire", + 'Croatia', + 'Cuba', + 'Cyprus', + 'Czech Republic', + 'Denmark', + 'Djibouti', + 'Dominica', + 'Dominican Republic', + 'East Timor (Timor Timur)', + 'Ecuador', + 'Egypt', + 'El Salvador', + 'Equatorial Guinea', + 'Eritrea', + 'Estonia', + 'Ethiopia', + 'Fiji', + 'Finland', + 'France', + 'Gabon', + 'Gambia, The', + 'Georgia', + 'Germany', + 'Ghana', + 'Greece', + 'Grenada', + 'Guatemala', + 'Guinea', + 'Guinea-Bissau', + 'Guyana', + 'Haiti', + 'Honduras', + 'Hungary', + 'Iceland', + 'India', + 'Indonesia', + 'Iran', + 'Iraq', + 'Ireland', + 'Israel', + 'Italy', + 'Jamaica', + 'Japan', + 'Jordan', + 'Kazakhstan', + 'Kenya', + 'Kiribati', + 'Korea, North', + 'Korea, South', + 'Kuwait', + 'Kyrgyzstan', + 'Laos', + 'Latvia', + 'Lebanon', + 'Lesotho', + 'Liberia', + 'Libya', + 'Liechtenstein', + 'Lithuania', + 'Luxembourg', + 'Macedonia', + 'Madagascar', + 'Malawi', + 'Malaysia', + 'Maldives', + 'Mali', + 'Malta', + 'Marshall Islands', + 'Mauritania', + 'Mauritius', + 'Mexico', + 'Micronesia', + 'Moldova', + 'Monaco', + 'Mongolia', + 'Morocco', + 'Mozambique', + 'Myanmar', + 'Namibia', + 'Nauru', + 'Nepal', + 'Netherlands', + 'New Zealand', + 'Nicaragua', + 'Niger', + 'Nigeria', + 'Norway', + 'Oman', + 'Pakistan', + 'Palau', + 'Panama', + 'Papua New Guinea', + 'Paraguay', + 'Peru', + 'Philippines', + 'Poland', + 'Portugal', + 'Qatar', + 'Romania', + 'Russia', + 'Rwanda', + 'Saint Kitts and Nevis', + 'Saint Lucia', + 'Saint Vincent', + 'Samoa', + 'San Marino', + 'Sao Tome and Principe', + 'Saudi Arabia', + 'Senegal', + 'Serbia and Montenegro', + 'Seychelles', + 'Sierra Leone', + 'Singapore', + 'Slovakia', + 'Slovenia', + 'Solomon Islands', + 'Somalia', + 'South Africa', + 'Spain', + 'Sri Lanka', + 'Sudan', + 'Suriname', + 'Swaziland', + 'Sweden', + 'Switzerland', + 'Syria', + 'Taiwan', + 'Tajikistan', + 'Tanzania', + 'Thailand', + 'Togo', + 'Tonga', + 'Trinidad and Tobago', + 'Tunisia', + 'Turkey', + 'Turkmenistan', + 'Tuvalu', + 'Uganda', + 'Ukraine', + 'United Arab Emirates', + 'United Kingdom', + 'United States', + 'Uruguay', + 'Uzbekistan', + 'Vanuatu', + 'Vatican City', + 'Venezuela', + 'Vietnam', + 'Yemen', + 'Zambia', + 'Zimbabwe' +] diff --git a/images/array_index.png b/images/array_index.png new file mode 100644 index 0000000..355324e Binary files /dev/null and b/images/array_index.png differ diff --git a/images/banners/Day -1 – 10.png b/images/banners/Day -1 – 10.png new file mode 100644 index 0000000..e063dec Binary files /dev/null and b/images/banners/Day -1 – 10.png differ diff --git a/images/banners/Day -1 – 11.png b/images/banners/Day -1 – 11.png new file mode 100644 index 0000000..0c2d60b Binary files /dev/null and b/images/banners/Day -1 – 11.png differ diff --git a/images/banners/Day -1 – 12.png b/images/banners/Day -1 – 12.png new file mode 100644 index 0000000..232ac85 Binary files /dev/null and b/images/banners/Day -1 – 12.png differ diff --git a/images/banners/Day -1 – 13.png b/images/banners/Day -1 – 13.png new file mode 100644 index 0000000..488f522 Binary files /dev/null and b/images/banners/Day -1 – 13.png differ diff --git a/images/banners/Day -1 – 14.png b/images/banners/Day -1 – 14.png new file mode 100644 index 0000000..4c5a568 Binary files /dev/null and b/images/banners/Day -1 – 14.png differ diff --git a/images/banners/Day -1 – 15.png b/images/banners/Day -1 – 15.png new file mode 100644 index 0000000..e3013f6 Binary files /dev/null and b/images/banners/Day -1 – 15.png differ diff --git a/images/banners/Day -1 – 16.png b/images/banners/Day -1 – 16.png new file mode 100644 index 0000000..d116060 Binary files /dev/null and b/images/banners/Day -1 – 16.png differ diff --git a/images/banners/Day -1 – 17.png b/images/banners/Day -1 – 17.png new file mode 100644 index 0000000..69cf7ae Binary files /dev/null and b/images/banners/Day -1 – 17.png differ diff --git a/images/banners/Day -1 – 18.png b/images/banners/Day -1 – 18.png new file mode 100644 index 0000000..8b69340 Binary files /dev/null and b/images/banners/Day -1 – 18.png differ diff --git a/images/banners/Day -1 – 19.png b/images/banners/Day -1 – 19.png new file mode 100644 index 0000000..2a785c9 Binary files /dev/null and b/images/banners/Day -1 – 19.png differ diff --git a/images/banners/Day -1 – 20.png b/images/banners/Day -1 – 20.png new file mode 100644 index 0000000..befe1fc Binary files /dev/null and b/images/banners/Day -1 – 20.png differ diff --git a/images/banners/Day -1 – 21.png b/images/banners/Day -1 – 21.png new file mode 100644 index 0000000..634d1eb Binary files /dev/null and b/images/banners/Day -1 – 21.png differ diff --git a/images/banners/Day -1 – 22.png b/images/banners/Day -1 – 22.png new file mode 100644 index 0000000..81e33d9 Binary files /dev/null and b/images/banners/Day -1 – 22.png differ diff --git a/images/banners/Day -1 – 23.png b/images/banners/Day -1 – 23.png new file mode 100644 index 0000000..ceb0321 Binary files /dev/null and b/images/banners/Day -1 – 23.png differ diff --git a/images/banners/Day -1 – 24.png b/images/banners/Day -1 – 24.png new file mode 100644 index 0000000..9c8ec46 Binary files /dev/null and b/images/banners/Day -1 – 24.png differ diff --git a/images/banners/Day -1 – 25.png b/images/banners/Day -1 – 25.png new file mode 100644 index 0000000..60a211e Binary files /dev/null and b/images/banners/Day -1 – 25.png differ diff --git a/images/banners/Day -1 – 26.png b/images/banners/Day -1 – 26.png new file mode 100644 index 0000000..f187f2c Binary files /dev/null and b/images/banners/Day -1 – 26.png differ diff --git a/images/banners/Day -1 – 27.png b/images/banners/Day -1 – 27.png new file mode 100644 index 0000000..8637069 Binary files /dev/null and b/images/banners/Day -1 – 27.png differ diff --git a/images/banners/Day -1 – 28.png b/images/banners/Day -1 – 28.png new file mode 100644 index 0000000..1858aca Binary files /dev/null and b/images/banners/Day -1 – 28.png differ diff --git a/images/banners/Day -1 – 29.png b/images/banners/Day -1 – 29.png new file mode 100644 index 0000000..959ee36 Binary files /dev/null and b/images/banners/Day -1 – 29.png differ diff --git a/images/banners/Day -1 – 30.png b/images/banners/Day -1 – 30.png new file mode 100644 index 0000000..18a77c4 Binary files /dev/null and b/images/banners/Day -1 – 30.png differ diff --git a/images/banners/Day -1 – 31.png b/images/banners/Day -1 – 31.png new file mode 100644 index 0000000..d9a9639 Binary files /dev/null and b/images/banners/Day -1 – 31.png differ diff --git a/images/banners/Day -1 – 7.png b/images/banners/Day -1 – 7.png new file mode 100644 index 0000000..eff8dac Binary files /dev/null and b/images/banners/Day -1 – 7.png differ diff --git a/images/banners/Day -1 – 8.png b/images/banners/Day -1 – 8.png new file mode 100644 index 0000000..ddf9007 Binary files /dev/null and b/images/banners/Day -1 – 8.png differ diff --git a/images/banners/Day -1 – 9.png b/images/banners/Day -1 – 9.png new file mode 100644 index 0000000..1cf688b Binary files /dev/null and b/images/banners/Day -1 – 9.png differ diff --git a/images/banners/day_1_1.png b/images/banners/day_1_1.png new file mode 100644 index 0000000..dd583c7 Binary files /dev/null and b/images/banners/day_1_1.png differ diff --git a/images/banners/day_1_2.png b/images/banners/day_1_2.png new file mode 100644 index 0000000..0f6eefb Binary files /dev/null and b/images/banners/day_1_2.png differ diff --git a/images/banners/day_1_3.png b/images/banners/day_1_3.png new file mode 100644 index 0000000..1268d2c Binary files /dev/null and b/images/banners/day_1_3.png differ diff --git a/images/banners/day_1_4.png b/images/banners/day_1_4.png new file mode 100644 index 0000000..d5262c6 Binary files /dev/null and b/images/banners/day_1_4.png differ diff --git a/images/banners/day_1_5.png b/images/banners/day_1_5.png new file mode 100644 index 0000000..21bc08c Binary files /dev/null and b/images/banners/day_1_5.png differ diff --git a/images/banners/day_1_6.png b/images/banners/day_1_6.png new file mode 100644 index 0000000..dbea5fd Binary files /dev/null and b/images/banners/day_1_6.png differ diff --git a/readMe.md b/readMe.md index eb2037c..a55b117 100644 --- a/readMe.md +++ b/readMe.md @@ -558,7 +558,6 @@ When you run the files on 01-Day folder you should get this: 10. Declare two variables _myAge_ and _yourAge_ and assign them initial values and log to the browser console. ```sh - Output: I am 25 years old. You are 30 years old. ```