├── LearnByDoing ├── Fundamentals -01 │ ├── 01.Values and Variables.js │ ├── 02.Data Types.js │ ├── 03.variable Declaration.js │ ├── 04.Operators.js │ ├── 05.Strings and Template Literals.js │ ├── 06.Taking Decisions.js │ ├── 07.Type Conversion and Coercion.js │ ├── 08.Equality Operators.js │ ├── 09.Logical Operators.js │ ├── 10.The switch Statement.js │ ├── 11.Ternary Operator.js │ └── README.md ├── Fundamentals -02 │ ├── 01.Function1.js │ ├── 02.Function2.js │ ├── 03.Function3.js │ ├── 04.FunctionsCalling.js │ ├── 05.Array.js │ ├── 06.ArraysMethod.js │ ├── 07.objects.js │ ├── 08.Objects2.js │ ├── 09.ObjectsMethod.js │ ├── 10.Loops.js │ ├── 11.Loops2.js │ └── 12.Loops3.js └── README.md ├── README.md └── jQuery ├── README.md └── Resources.md /LearnByDoing/Fundamentals -01/01.Values and Variables.js: -------------------------------------------------------------------------------- 1 | /*************************************************************************** 2 | 3 | @Program : Value and variables 4 | 5 | @problem_Statement : 6 | 1. Declare variables called 'country', 'continent' and 'population' and 7 | assign their values according to your own country (population in millions) 8 | 2. Log their values to the console 9 | 10 | ******************************************************************************/ 11 | 12 | // Declare a variable 13 | let country = 'India'; 14 | let continent = 'Asia'; 15 | let population = 10; 16 | 17 | // Output 18 | console.log(country); 19 | console.log(continent); 20 | console.log(population); 21 | 22 | 23 | // contributed by aj7t -------------------------------------------------------------------------------- /LearnByDoing/Fundamentals -01/02.Data Types.js: -------------------------------------------------------------------------------- 1 | /*************************************************************************** 2 | 3 | @Program : Data Types 4 | 5 | @problem_Statement : 6 | 1. Declare a variable called 'isIsland' and set its value according to your 7 | country. The variable should hold a Boolean value. Also declare a variable 8 | 'language', but don't assign it any value yet 9 | 2. Log the types of 'isIsland', 'population', 'country' and 'language' 10 | to the console 11 | 12 | ******************************************************************************/ 13 | 14 | // Declare variable 15 | let isIsland = false; 16 | let language; 17 | let country = 'India'; 18 | let population = 10000; 19 | 20 | // typeof() datatype 21 | 22 | console.log(typeof isIsland); 23 | console.log(typeof language); 24 | console.log(typeof population); 25 | console.log(typeof country); 26 | 27 | //Null datatype 28 | 29 | // contributed by aj7t -------------------------------------------------------------------------------- /LearnByDoing/Fundamentals -01/03.variable Declaration.js: -------------------------------------------------------------------------------- 1 | /*************************************************************************** 2 | 3 | @Program : let, const and var 4 | 5 | @problem_Statement : 6 | 1. Set the value of 'language' to the language spoken where you live (some 7 | countries have multiple languages, but just choose one) 8 | 2. Think about which variables should be const variables (which values will never 9 | change, and which might change?). Then, change these variables to const. 10 | 3. Try to change one of the changed variables now, and observe what happens 11 | 12 | ******************************************************************************/ 13 | 14 | // Declare variable 15 | let language = "Hindi"; 16 | const isIsland = false; 17 | const country = 'India'; 18 | const continent='Asia'; 19 | 20 | console.log(language,country,continent,isIsland); 21 | 22 | // contributed by @_aj7t -------------------------------------------------------------------------------- /LearnByDoing/Fundamentals -01/04.Operators.js: -------------------------------------------------------------------------------- 1 | /*************************************************************************** 2 | 3 | @Program : Basic Operators 4 | 5 | @problem_Statement : 6 | 1. If your country split in half, and each half would contain half the population, 7 | then how many people would live in each half? 8 | 2. Increase the population of your country by 1 and log the result to the console 9 | 3. Finland has a population of 6 million. Does your country have more people than 10 | Finland? 11 | 4. The average population of a country is 33 million people. Does your country 12 | have less people than the average country? 13 | 5. Based on the variables you created, create a new variable 'description' 14 | which contains a string with this format: 'Portugal is in Europe, and its 11 million 15 | people speak portuguese' 16 | 17 | ******************************************************************************/ 18 | 19 | let population = 10; 20 | // 1.split into half by Arithmetic operators 21 | console.log(population / 2); 22 | 23 | // 2.increase population by 1 using increment operator 24 | population++; 25 | console.log(population); 26 | 27 | // 3. Comparing my country population with Finland 28 | console.log(population>6) 29 | 30 | // 4. comparing my country population with avg country population 31 | console.log(population < 33); 32 | 33 | // Describe 34 | let country = 'India'; 35 | let continent = 'Asia'; 36 | let language = 'Hindi'; 37 | 38 | const description = country + ' is in '+ continent +' and its '+ population + 39 | ' million people speaks '+language; 40 | console.log(description); 41 | 42 | 43 | 44 | 45 | // contributed by @_aj7t -------------------------------------------------------------------------------- /LearnByDoing/Fundamentals -01/05.Strings and Template Literals.js: -------------------------------------------------------------------------------- 1 | /*************************************************************************** 2 | 3 | @Program : Strings and Template Literals 4 | 5 | @problem_satement : 6 | 1. Recreate the 'description' variable from the last assignment, this time 7 | using the template literal syntax 8 | 9 | ******************************************************************************/ 10 | 11 | let country = 'India'; 12 | let continent = 'Asia'; 13 | let language = 'Hindi'; 14 | let population= 10; 15 | 16 | 17 | const description = `${country} is in ${continent}, and its ${population} million people speaks ${language}`; 18 | 19 | console.log(description); 20 | 21 | 22 | 23 | // contributed by @_aj7t -------------------------------------------------------------------------------- /LearnByDoing/Fundamentals -01/06.Taking Decisions.js: -------------------------------------------------------------------------------- 1 | /*************************************************************************** 2 | 3 | @Program : 4 | Taking Decisions: if / else Statements 5 | 6 | @problem_satement : 7 | 8 | 1. If your country's population is greater that 33 million, log a string like this 9 | to the console: 'Portugal's population is above average'. Otherwise, log a string 10 | like'Portugal's population is 22 million below average' (the 22 is the average of 11 | 33 minus the country's population) 12 | 2. After checking the result, change the population temporarily to 13 and then to 13 | 130. See the different results, and set the population back to original 14 | 15 | ********************************************************************************/ 16 | 17 | let country = 'India'; 18 | let population=10; 19 | // let population =13; 20 | //let population =130; 21 | 22 | if(population > 33){ 23 | console.log(`${country}'s population is above average`) 24 | } 25 | else { 26 | console.log(`${country}'s population is ${33-population} million below average`); 27 | } 28 | 29 | 30 | // contributed by @_aj7t -------------------------------------------------------------------------------- /LearnByDoing/Fundamentals -01/07.Type Conversion and Coercion.js: -------------------------------------------------------------------------------- 1 | /***************************************************************************** 2 | 3 | @Program : 4 | Type Conversion and Coercion 5 | 6 | @problem_satement : 7 | 1. Predict the result of these 5 operations without executing them: 8 | '9' - '5'; 9 | '19' - '13' + '17'; 10 | '19' - '13' + 17; 11 | '123' < 57; 12 | 5 + 6 + '4' + 9 - 4 - 2; 13 | 2. Execute the operations to check if you were right 14 | 15 | ********************************************************************************/ 16 | 17 | 18 | console.log('9' - '5'); 19 | //strings 20 | 21 | console.log('19' - '13' + '17'); 22 | //left to right ('19'-'13'=6 +'17' === 617) 23 | 24 | 25 | console.log('19' - '13' + 17); 26 | // ('19'-'13'=6 +17 === 23) 27 | 28 | 29 | console.log('123' < 57); 30 | // false 31 | 32 | console.log(5 + 6 + '4' + 9 - 4 - 2); 33 | //left to right(11+'4'+3) 1143 34 | 35 | 36 | // contributed by @_aj7t -------------------------------------------------------------------------------- /LearnByDoing/Fundamentals -01/08.Equality Operators.js: -------------------------------------------------------------------------------- 1 | 2 | /***************************************************************************** 3 | 4 | @Program : Equality Operators: == vs. === 5 | 6 | @problem_satement : 7 | 1. Declare a variable 'numNeighbours' based on a prompt input like this: 8 | prompt('How many neighbour countries does your country 9 | have?'); 10 | 2. If there is only 1 neighbour, log to the console 'Only 1 border!' (use loose equality 11 | == for now) 12 | 3. Use an else-if block to log 'More than 1 border' in case 'numNeighbours' 13 | is greater than 1 14 | 4. Use an else block to log 'No borders' (this block will be executed when 15 | 'numNeighbours' is 0 or any other value) 16 | 5. Test the code with different values of 'numNeighbours', including 1 and 0. 17 | 6. Change == to ===, and test the code again, with the same values of 18 | 'numNeighbours'. Notice what happens when there is exactly 1 border! Why 19 | is this happening? 20 | 7. Finally, convert 'numNeighbours' to a number, and watch what happens now 21 | when you input 1 22 | 8. Reflect on why we should use the === operator and type conversion in this 23 | situation 24 | 25 | @Hint : 26 | === Equality 27 | == Equality with coercion 28 | 29 | ********************************************************************************/ 30 | 31 | //let numNeighbours = prompt('How many neighbour countries does your country have?'); 32 | let numNeighbours = 1; 33 | 34 | if(numNeighbours==1){ 35 | console.log('Only 1 border!'); 36 | } 37 | else if (numNeighbours>1) { 38 | console.log('More than 1 border'); 39 | } 40 | else { 41 | console.log('No Border'); 42 | } 43 | 44 | 45 | // contributed by @_aj7t 46 | 47 | 48 | -------------------------------------------------------------------------------- /LearnByDoing/Fundamentals -01/09.Logical Operators.js: -------------------------------------------------------------------------------- 1 | /***************************************************************************** 2 | 3 | @Program : 4 | Logical Operators 5 | 6 | @problem_satement : 7 | 8 | 1. Comment out the previous code so the prompt doesn't get in the way 9 | 2. Let's say Sarah is looking for a new country to live in. She wants to live in a 10 | country that speaks english, has less than 50 million people and is not an 11 | island. 12 | 3. Write an if statement to help Sarah figure out if your country is right for her. 13 | You will need to write a condition that accounts for all of Sarah's criteria. Take 14 | your time with this, and check part of the solution if necessary. 15 | 4. If yours is the right country, log a string like this: 'You should live in Portugal :)'. If 16 | not, log 'Portugal does not meet your criteria :(' 17 | 5. Probably your country does not meet all the criteria. So go back and temporarily 18 | change some variables in order to make the condition true (unless you live in 19 | Canada :D) 20 | 21 | ********************************************************************************/ 22 | let country = 'India'; 23 | let language = 'english'; 24 | let population =10; 25 | let isIsland = false; 26 | 27 | if(language === "english" && population < 50 && !isIsland){ 28 | console.log(`you should live in ${country} :)`); 29 | } 30 | else { 31 | console.log (`${country} does not meet your criteria :(`) 32 | } 33 | 34 | console.log(`Hello, sarah welcome! to ${country}`) 35 | 36 | // contributed by @_aj7t -------------------------------------------------------------------------------- /LearnByDoing/Fundamentals -01/10.The switch Statement.js: -------------------------------------------------------------------------------- 1 | /***************************************************************************** 2 | 3 | @Program : 4 | The switch Statement 5 | 6 | @problem_satement : 7 | 1. Use a switch statement to log the following string for the given 'language': 8 | chinese or mandarin: 'MOST number of native speakers!' 9 | spanish: '2nd place in number of native speakers' 10 | english: '3rd place' 11 | hindi: 'Number 4' 12 | arabic: '5th most spoken language' 13 | for all other simply log 'Great language too :D 14 | 15 | ********************************************************************************/ 16 | 17 | let language = 'english'; 18 | 19 | switch (language) { 20 | case 'chinese': 21 | case 'mandarin': 22 | console.log('MOST number of native speakers!'); 23 | break; 24 | case 'spanish': 25 | console.log('2nd place in number of native speakers'); 26 | break; 27 | case 'english': 28 | console.log('3rd place'); 29 | break; 30 | case 'hindi': 31 | console.log('Number 4'); 32 | break; 33 | case 'arabic': 34 | console.log('5th most spoken language'); 35 | break; 36 | default: 37 | console.log('Great language too :D'); 38 | } 39 | 40 | 41 | // contributed by @_aj7t -------------------------------------------------------------------------------- /LearnByDoing/Fundamentals -01/11.Ternary Operator.js: -------------------------------------------------------------------------------- 1 | /***************************************************************************** 2 | 3 | @Program : 4 | The Conditional (Ternary) Operator 5 | 6 | @problem_satement : 7 | 8 | 1. If your country's population is greater than 33 million, use the ternary operator 9 | to log a string like this to the console: 'Portugal's population is above average'. 10 | Otherwise, simply log 'Portugal's population is below average'. Notice how only 11 | one word changes between these two sentences! 12 | 2. After checking the result, change the population temporarily to 13 and then to 13 | 130. See the different results, and set the population back to original 14 | 15 | ********************************************************************************/ 16 | 17 | let population = 130; 18 | let country="India"; 19 | 20 | //ternary operator 21 | let result = (population>33)? `${country}'s population is above average`: `population is below average`; 22 | console.log(result); 23 | 24 | // contributed by @_aj7t -------------------------------------------------------------------------------- /LearnByDoing/Fundamentals -01/README.md: -------------------------------------------------------------------------------- 1 | ## 2 | -------------------------------------------------------------------------------- /LearnByDoing/Fundamentals -02/01.Function1.js: -------------------------------------------------------------------------------- 1 | /* 2 | @Functions 3 | 1. Write a function called 'describeCountry' which takes three parameters: 4 | 'country', 'population' and 'capitalCity'. Based on this input, the 5 | function returns a string with this format: 'Finland has 6 million people and its 6 | capital city is Helsinki' 7 | 8 | 2. Call this function 3 times, with input data for 3 different countries. Store the 9 | returned values in 3 different variables, and log them to the console 10 | 11 | */ 12 | 13 | // function declarations 14 | function describeCountry(country, population, capitalCity) 15 | { 16 | return `${country} has ${population} million people and its capital city is ${capitalCity}`; 17 | } 18 | 19 | // call the function 20 | const descPortugal = describeCountry('Portugal', 10,'Lisbon'); 21 | const descGermany = describeCountry('Germany', 83, 'Berlin'); 22 | const descFinland = describeCountry('Finland', 6, 'Helsinki'); 23 | 24 | //print into the console 25 | console.log(descPortugal); 26 | console.log(descGermany); 27 | console.log(descFinland); 28 | -------------------------------------------------------------------------------- /LearnByDoing/Fundamentals -02/02.Function2.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | @Function expression and declaration 4 | 5 | 1. The world population is 7900 million people. Create a function declaration 6 | called 'percentageOfWorld1' which receives a 'population' value, and 7 | returns the percentage of the world population that the given population 8 | represents. For example, China has 1441 million people, so it's about 18.2% of 9 | the world population 10 | 2. To calculate the percentage, divide the given 'population' value by 7900 11 | and then multiply by 100 12 | 3. Call 'percentageOfWorld1' for 3 populations of countries of your choice, 13 | store the results into variables, and log them to the console 14 | 4. Create a function expression which does the exact same thing, called 15 | 'percentageOfWorld2', and also call it with 3 country populations (can be 16 | the same populations 17 | 18 | */ 19 | 20 | // function declaration 21 | function percentageOfWorld (population, value){ 22 | return ((value/population) *100); 23 | } 24 | 25 | //function expression 26 | 27 | const percentageOfWorld2= function (population, value){ 28 | return ((value/population)*100); 29 | 30 | } 31 | 32 | 33 | // call the function 34 | const perIndia = percentageOfWorld(80000, 20000); 35 | const perchina= percentageOfWorld2(80000, 20000 ); 36 | 37 | 38 | console.log(perIndia+ '%'); 39 | console.log(perIndia); -------------------------------------------------------------------------------- /LearnByDoing/Fundamentals -02/03.Function3.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | @Arrow function 4 | Recreate the last assignment, but this time create an arrow function called 5 | 'percentageOfWorld3 6 | 7 | */ 8 | 9 | 10 | // function declaration 11 | function percentageOfWorld (population, value){ 12 | return ((value/population) *100); 13 | } 14 | 15 | //function expression 16 | function percentageOfWorld2 (population, value){ 17 | return ((value/population)*100); 18 | } 19 | 20 | 21 | //arrow function 22 | const percentageOfWorld3 = population => (population/80000)*100; 23 | 24 | 25 | // call all the functions 26 | const perNepal=percentageOfWorld3(20000); 27 | const perIndia = percentageOfWorld(80000, 40000); 28 | const perchina= percentageOfWorld2(80000, 20000 ); 29 | 30 | // print out 31 | console.log(perNepal, perIndia, perchina); -------------------------------------------------------------------------------- /LearnByDoing/Fundamentals -02/04.FunctionsCalling.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | @Functions Calling Other Functions 4 | 1. Create a function called 'describePopulation'. Use the function type you like the most. This function takes in two arguments: 'country' and 5 | 'population', and returns a string like this: 'China has 1441 million people, which is about 18.2% of the world.' 6 | 7 | 2. To calculate the percentage, 'describePopulation' call the 'percentageOfWorld1' you created earlier 8 | 3. Call 'describePopulation' with data for 3 countries of your choice 9 | 10 | */ 11 | 12 | 13 | // declare function 1 14 | function describePopulation (country, population){ 15 | 16 | //calling function 2 17 | const percentagePopulation = percentageOfWorld(population); 18 | 19 | const description = `${country} has ${population} million people, which is about ${percentagePopulation} % of the world`; 20 | console.log(description); 21 | } 22 | 23 | // declare function 2 24 | 25 | function percentageOfWorld (population){ 26 | return ((80000/population) *100); 27 | } 28 | 29 | 30 | 31 | // call the function 'describePopulation' 32 | describePopulation('china', 50000); 33 | describePopulation('Nepal', 24000); 34 | 35 | 36 | -------------------------------------------------------------------------------- /LearnByDoing/Fundamentals -02/05.Array.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | @Introduction to Arrays 4 | 1. Create an array containing 4 population values of 4 countries of your choice. 5 | You may use the values you have been using previously. Store this array into a 6 | variable called 'populations' 7 | 2. Log to the console whether the array has 4 elements or not (true or false) 8 | 3. Create an array called 'percentages' containing the percentages of the 9 | world population for these 4 population values. Use the function 10 | 'percentageOfWorld1' that you created earlier to compute the 4 11 | percentage values 12 | 13 | */ 14 | 15 | // create an array 16 | const population = [2000,5000,8000,3000]; 17 | 18 | //check length of the array 19 | console.log(population.length===4); 20 | 21 | function percentageOfWorld (population){ 22 | return ((80000/population) *100); 23 | } 24 | 25 | // create an array called 'percentages' 26 | // and find the %popilation of all elements from arrays 27 | const percentage = [ 28 | percentageOfWorld(population[0]), 29 | percentageOfWorld(population[1]), 30 | percentageOfWorld(population[2]), 31 | percentageOfWorld(population[3]) 32 | ]; 33 | 34 | console.log(percentage); -------------------------------------------------------------------------------- /LearnByDoing/Fundamentals -02/06.ArraysMethod.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | @Array Operations (Methods) 4 | 1. Create an array containing all the neighbouring countries of a country of your 5 | choice. Choose a country which has at least 2 or 3 neighbours. Store the array 6 | into a variable called 'neighbours' 7 | 2. At some point, a new country called 'Utopia' is created in the neighbourhood of 8 | your selected country. So add it to the end of the 'neighbours' array 9 | 3. Unfortunately, after some time, the new country is dissolved. So remove it from 10 | the end of the array 11 | 4. If the 'neighbours' array does not include the country ‘Germany’, log to the 12 | console: 'Probably not a central European country :D' 13 | 5. Change the name of one of your neighbouring countries. To do that, find the 14 | index of the country in the 'neighbours' array, and then use that index to 15 | change the array at that index position. For example, you can search for 16 | 'Sweden' in the array, and then replace it with 'Republic of Sweden' 17 | 18 | */ 19 | 20 | // arrays containing country 21 | let neighbours=['india', 'BD', 'Nepal', 'pakistan', 'srilanka']; 22 | 23 | //add new country to the array 24 | neighbours.push('Bharat'); 25 | 26 | // remove country from the array 27 | neighbours.pop(); 28 | 29 | //print the array 30 | console.log(neighbours); 31 | 32 | 33 | //change name of your neighbour countriy 34 | neighbours[neighbours.indexOf("BD")]= 'Bangladesh'; 35 | console.log(neighbours); 36 | 37 | -------------------------------------------------------------------------------- /LearnByDoing/Fundamentals -02/07.objects.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | @Introduction to Objects 4 | 1. Create an object called 'myCountry' for a country of your choice, containing 5 | properties 'country', 'capital', 'language', 'population' and 6 | 'neighbours' (an array like we used in previous assignments) 7 | 8 | */ 9 | 10 | const myCountry = { 11 | country : 'India', 12 | language : 'Hindi', 13 | neighbours: ['bd', 'Nepal', 'bhutan'] 14 | }; 15 | 16 | 17 | console.log(myCountry); -------------------------------------------------------------------------------- /LearnByDoing/Fundamentals -02/08.Objects2.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | @Dot vs. Bracket Notation 4 | 1. Using the object from the previous assignment, log a string like this to the 5 | console: 'Finland has 6 million finnish-speaking people, 3 neighbouring countries 6 | and a capital called Helsinki.' 7 | 2. Increase the country's population by two million using dot notation, and then 8 | decrease it by two million using brackets notation. 9 | 10 | */ 11 | 12 | const myCountry= { 13 | country : 'India', 14 | population : 120, 15 | language : 'Hindi', 16 | neighbours: ['Bd', 'Nepal', 'Korea'], 17 | capital : 'Delhi' 18 | }; 19 | 20 | console.log(`${myCountry.country} has ${myCountry.population} million ${myCountry.language}-speaking people,${myCountry.neighbours.length} and a capital called ${myCountry.capital}`); 21 | 22 | //Increase the country's population by two million using dot notation 23 | 24 | myCountry.population +=2; 25 | console.log(myCountry.population); 26 | -------------------------------------------------------------------------------- /LearnByDoing/Fundamentals -02/09.ObjectsMethod.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | @Object Methods 4 | 1. Add a method called 'describe' to the 'myCountry' object. This method 5 | will log a string to the console, similar to the string logged in the previous 6 | assignment, but this time using the 'this' keyword. 7 | 2. Call the 'describe' method 8 | 3. Add a method called 'checkIsland' to the 'myCountry' object. This 9 | method will set a new property on the object, called 'isIsland'. 10 | 'isIsland' will be true if there are no neighbouring countries, and false if 11 | there are. Use the ternary operator to set the property 12 | 13 | */ 14 | 15 | 16 | // object myCountry 17 | const myCountry= 18 | { 19 | country : 'India', //string 20 | population : 120, //number 21 | language : 'Hindi', 22 | neighbours: ['Bd', 'Nepal', 'Korea'], //arrays 23 | capital : 'Delhi', 24 | 25 | describe : function() //function 26 | { 27 | console.log( 28 | `${this.country} has ${this.population} million ${this.language}-speaking people, ${this.neighbours.length} neighbouring countries and a capital of ${this.capital}.` 29 | ); 30 | }, 31 | 32 | isIsland : function(){ 33 | this.isIsland=!Boolean(this.neighbours.length); 34 | //this.isIsland= this.neighbours.length===0 ? true: false; 35 | } 36 | }; 37 | 38 | console.log(myCountry.isIsland()); 39 | 40 | console.log(myCountry.describe()); 41 | console.log(myCountry); -------------------------------------------------------------------------------- /LearnByDoing/Fundamentals -02/10.Loops.js: -------------------------------------------------------------------------------- 1 | /* 2 | @ Loop 3 | 1. There are elections in your country! In a small town, there are only 50 voters. 4 | Use a for loop to simulate the 50 people voting, by logging a string like this to 5 | the console (for numbers 1 to 50): 'Voter number 1 is currently voting' 6 | 7 | */ 8 | 9 | for(var i = 0; i <50; i++) { 10 | console.log(`voters number ${i} is currently voting`); 11 | } 12 | 13 | 14 | 15 | /* 16 | 17 | @while loop 18 | 1. Recreate the challenge from the lecture 'Looping Arrays, Breaking and Continuing', 19 | but this time using a while loop (call the array 'percentages3') 20 | 2. Reflect on what solution you like better for this task: the for loop or the while 21 | loop? 22 | 23 | */ 24 | 25 | 26 | -------------------------------------------------------------------------------- /LearnByDoing/Fundamentals -02/11.Loops2.js: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | 1. Let's bring back the 'populations' array from a previous assignment 4 | 2. Use a for loop to compute an array called 'percentages2' containing the 5 | percentages of the world population for the 4 population values. Use the 6 | function 'percentageOfWorld1' that you created earlier 7 | 3. Confirm that 'percentages2' contains exactly the same values as the 8 | 'percentages' array that we created manually in the previous assignment, 9 | and reflect on how much better this solution is 10 | 11 | */ 12 | 13 | // function ercentageOfWorld 14 | function percentageOfWorld (population){ 15 | return ((800/population)*100); 16 | } 17 | 18 | // populations array 19 | const populations = [120, 120, 132, 83]; 20 | 21 | 22 | // create new array 23 | const percentages2 = []; 24 | 25 | //cal %population and store it into NEW array with 26 | for( var i = 0; i 8 | JavaScript Fundamentals – 01 9 |

10 | 
11 | 
12 | 1.Values and Variables... 
13 | 2.Data Types ... 
14 | 3.let, const and var ... 
15 | 4.Basic Operators ... 
16 | 5.Strings and Template Literals... 
17 | 6.Taking Decisions: if / else Statements...
18 | 7.Type Conversion and Coercion...  
19 | 8.Equality Operators: == vs. ===...
20 | 9.Logical Operators ... 
21 | 10.The switch Statement ... 
22 | 11.The Conditional (Ternary) Operator...
23 |
24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 💛A Tour of JavaScript 2 | > This Repository consist of Daily learning, Assignments, coding challenge, projects, references, tutorial.👩‍💻👨‍💻 3 | 4 | ``` 5 | 6 | alert('Welcome! to A tour of JavaScript') 7 | 8 | ``` 9 | 10 | 11 | | # | Topics | 12 | |-----------|:-------------------------------------------------------------------------------------------------------------: | 13 | | 01 | [LearnByDoing](https://github.com/Aj7t/A-Tour-of-JavaScript/tree/main/LearnByDoing) | 14 | | 02 | [CodingChallenges](https://github.com/Aj7t/A-Tour-of-JavaScript/tree/main/CodingChallenge) | 15 | | 03 | [Project_based Learning](https://github.com/Aj7t/Project-Based-Learning) | 16 | | 04 | [Visual_handcrafted_notes](https://github.com/Aj7t/A-Tour-of-JavaScript/tree/main/Notes) | 17 | 18 | 19 | 20 | 21 | 22 | 23 | ## Resources 📚🧾 24 | 25 | 📔 [Complete Learning Resources](https://github.com/Aj7t/A-Tour-of-JavaScript/blob/main/jQuery/Resources.md)
26 | 27 | 28 | 29 | ![image](https://user-images.githubusercontent.com/67835881/126159084-8dc60be9-e851-46a6-baba-1dff0cb34e4f.png) 30 | -------------------------------------------------------------------------------- /jQuery/README.md: -------------------------------------------------------------------------------- 1 | 2 | ## Adding jQuery to Web Page using Google CDN 3 | 4 | ``` 5 | 6 | 7 | 8 | ``` 9 | 10 | ## Syntax ⚡⚡ 11 | 12 | **$(selector).action( )** 13 | ``` 14 | $("p").hide() 15 | 16 | $("p").click(function(){ 17 | $(this).hide("slow"); 18 | }); 19 | ``` 20 | 21 | ### Common jQuery methods 💌 22 | 23 | 24 | jQuery gives us access to tons of different methods to add dynamic behavior to our sites, some methods you’ll see and use often including effects, events, and DOM manipulation: 25 | 26 | **effect methods:** 27 | ``` 28 | .animate() 29 | .delay() 30 | .fadeIn()/.fadeOut()/.fadeTo()/.fadeToggle 31 | .hide()/.show() 32 | .toggle() 33 | .slideUp/.slideDown/.slideToggle 34 | .animate()/ 35 | ``` 36 | ---------------------- 37 | 38 | **event methods:** 39 | ``` 40 | .change() 41 | .focus() 42 | .hover() 43 | .click()/.dblclick() 44 | .keydown()/.keyup()/.keypress() 45 | .mouseenter()/.mouseleave() 46 | .on() 47 | .ready() 48 | ``` 49 | ------------------------- 50 | 51 | **DOM manipulation methods:** 52 | ``` 53 | .addClass()/.toggleClass() 54 | .after()/.before() 55 | .append()/.prepend() 56 | .remove() 57 | .val() 58 | ``` 59 | ----------------------------- 60 | 61 | 62 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /jQuery/Resources.md: -------------------------------------------------------------------------------- 1 | # Resources 📚💻 2 | 3 | ## Guide✨ 4 | [front-end-handbook](https://frontendmasters.com/books/front-end-handbook/2019/#4.8) || 5 | [frontendmastersBootcamp](https://frontendmasters.github.io/bootcamp/) || 6 | [codingheroes Resources](https://codingheroes.io/resources/) 7 | 8 | ### Learn JavaScript📚 9 | 📗w3schools - [click here](https://www.w3schools.com/js/)
10 | 📗Udemy-js - [click here](https://www.udemy.com/course/the-complete-javascript-course/)
11 | 📗FreeCodeCamp - [click here](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/)
12 | 📗Youtube - [Code with Harry](https://www.codewithharry.com/videos/javascript-tutorials-in-hindi-1) 13 | 14 | **Free Js Courses**📚
15 | 📗Codecademy - [Click here](https://www.codecademy.com/catalog/language/javascript)
16 | 📗javascript.info - [Click here](https://javascript.info/)
17 | 📗Mozilla Developer Network - [Click here](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
18 | 19 | 20 | 21 | **Quick References**📖
22 | 📔Cheatsheet - [Click here](https://html-css-js.com/js/)
23 | 📔CheatSheet DOM - [click here](https://drive.google.com/file/d/1HLCR04r39VQAbPDATKlHAXGDUXr3vpQ0/view?usp=sharing)
24 | 📔Interactive cheatsheet - [click here](https://htmlcheatsheet.com/js/) 25 | 26 | **Learn through Blogs**🧾
27 | 📘[JavaScript Fundamentals](https://www.freecodecamp.org/news/javascript-example/)
28 | 📘[Tutorial- Theory notes](https://drive.google.com/file/d/1IF37kegYt_sLTMBTh1bCoWHUopcTtO9X/view?usp=sharing)
29 | 📘[Project based Learning](https://drive.google.com/file/d/1IMnMPPcjwRENh3HDSDxQATRwUdKbSm1Q/view?usp=sharing)
30 | 📘[Javascript Resources Ref](https://www.freecodecamp.org/news/30-free-resources-for-learning-javascript-fundamentals/)
31 | 📘[Javascript Interview Questions](https://www.interviewbit.com/javascript-interview-questions/)
32 | 33 | 34 | **#LearnByDoing**👩‍💻
35 | 📕[Learn by Coding](https://www.interviewbit.com/courses/fast-track-js/)
36 | 📕[Build 30 js ptojects](https://javascript30.com/)
37 | 38 | 39 | ## Extra resources 40 | 📚[JS_Theory](https://wesbos.com/javascript) 41 | 42 | ## Awesome GitHub Repositories ✨✨ 43 | 1. [wtfjs](https://github.com/denysdovhan/wtfjs) 44 | 1. [javascript30](https://github.com/wesbos/JavaScript30) 45 | 1. [es6-cheatsheet](https://github.com/DrkSephy/es6-cheatsheet) 46 | 1. [javascript-questions](https://github.com/lydiahallie/javascript-questions) 47 | 1. [front-end-interview-handbook](https://github.com/xitu/front-end-interview-handbook) 48 | 49 | 50 | 51 | ## 50 Great Websites For Web Developers 🖥 52 | 53 | 1. Hidden Tools - 54 | https://hiddentools.dev/ 55 | 56 | 2. Music For Programming - 57 | https://musicforprogramming.net/ 58 | 59 | 3. Programming Language Convertor - 60 | https://ide.onelang.io/ 61 | 62 | 4. HTTP Cat - 63 | https://http.cat/ 64 | 65 | 5. Iconscout - 66 | https://iconscout.com/ 67 | 68 | 6. CSS Zen Garden - 69 | http://www.csszengarden.com/ 70 | 71 | 7. A List Apart - 72 | https://alistapart.com/ 73 | 74 | 8. Code Project - 75 | https://www.codeproject.com/ 76 | 77 | 9. Scotch - 78 | https://scotch.io/ 79 | 80 | 10. TutsPlus - 81 | https://tutsplus.com/ 82 | 83 | 11. Creative Blog - 84 | https://www.creativebloq.com/ 85 | 86 | 12. Codrops - 87 | https://tympanus.net/codrops/ 88 | 89 | 13. MDN Web Docs - 90 | https://developer.mozilla.org/zh-CN/ 91 | 92 | 14. The Odin Project - 93 | https://www.theodinproject.com/ 94 | 95 | 15. Code Wars - 96 | https://www.codewars.com/ 97 | 98 | 16. WpSessions - 99 | https://wpsessions.com/ 100 | 101 | 17. CSS Autor - 102 | https://cssauthor.com/ 103 | 104 | 18. Laracasts - 105 | https://laracasts.com/ 106 | 107 | 19. Web Design News - 108 | https://www.webdesignernews.com/ 109 | 110 | 20. UX Movement - 111 | https://uxmovement.com/ 112 | 113 | 21. Gradient Magic - 114 | https://www.gradientmagic.com/ 115 | 116 | 22. Trianglify - 117 | https://trianglify.io/ 118 | 119 | 23. CSS Tricks - 120 | https://css-tricks.com/ 121 | 122 | 24. Free Frontend - 123 | https://freefrontend.com/ 124 | 125 | 25. Code My UI - 126 | https://codemyui.com/ 127 | 128 | 26. CSS Reference - 129 | https://cssreference.io/ 130 | 131 | 27. HTML Reference - 132 | https://htmlreference.io/ 133 | 134 | 28. Frontend Mentor - 135 | https://www.frontendmentor.io/ 136 | 137 | 29. Site Point - 138 | https://www.sitepoint.com/ 139 | 140 | 30. Free CSS - 141 | https://www.free-css.com/ 142 | 143 | 31. Awesome Python - 144 | https://pythonawesome.com/ 145 | 146 | 32. Fun JavaScript Projects - 147 | https://fun-javascript-projects.com/ 148 | 149 | 33. Daily Dev - 150 | https://daily.dev/ 151 | 152 | 34. Dev Docs - 153 | https://devdocs.io/ 154 | 155 | 35. ShortCode Dev - 156 | https://shortcode.dev/ 157 | 158 | 36. What Runs - 159 | https://www.whatruns.com/ 160 | 161 | 37. 1LOC - 162 | https://1loc.dev/ 163 | 164 | 38. Web Code Tools - 165 | https://webcode.tools/ 166 | 167 | 39. Am i Responsive - 168 | http://ami.responsivedesign.is/ 169 | 170 | 40. Shape Divider - 171 | https://www.shapedivider.app/ 172 | 173 | 41. Fancy Border Radius - 174 | https://9elements.github.io/fancy-border-radius/ 175 | 176 | 42. CSS Gradient - 177 | https://cssgradient.io/ 178 | 179 | 43. CSS Clip Path - 180 | https://bennettfeely.com/clippy/ 181 | 182 | 44. CSS Layout - 183 | https://csslayout.io/ 184 | 185 | 45. 30 Seconds Of Code - 186 | https://www.30secondsofcode.org/ 187 | 188 | 46. Undraw - 189 | https://undraw.co/ 190 | 191 | 47. Humaaans - 192 | https://www.humaaans.com/ 193 | 194 | 48. W3 Layouts - 195 | https://w3layouts.com/ 196 | 197 | 49. Templatemo - 198 | https://templatemo.com/ 199 | 200 | 50. Tooplate - 201 | https://www.tooplate.com/ 202 | --------------------------------------------------------------------------------