├── LearnByDoing
    ├── Fundamentals -01
    │   ├── README.md
    │   ├── 01.Values and Variables.js
    │   ├── 05.Strings and Template Literals.js
    │   ├── 03.variable Declaration.js
    │   ├── 02.Data Types.js
    │   ├── 07.Type Conversion and Coercion.js
    │   ├── 11.Ternary Operator.js
    │   ├── 06.Taking Decisions.js
    │   ├── 10.The switch Statement.js
    │   ├── 09.Logical Operators.js
    │   ├── 04.Operators.js
    │   └── 08.Equality Operators.js
    ├── Fundamentals -02
    │   ├── 07.objects.js
    │   ├── 10.Loops.js
    │   ├── 12.Loops3.js
    │   ├── 03.Function3.js
    │   ├── 08.Objects2.js
    │   ├── 01.Function1.js
    │   ├── 05.Array.js
    │   ├── 04.FunctionsCalling.js
    │   ├── 02.Function2.js
    │   ├── 09.ObjectsMethod.js
    │   ├── 06.ArraysMethod.js
    │   └── 11.Loops2.js
    └── README.md
├── README.md
└── jQuery
    ├── README.md
    └── Resources.md


/LearnByDoing/Fundamentals -01/README.md:
--------------------------------------------------------------------------------
1 | ##
2 | 


--------------------------------------------------------------------------------
/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/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # LearnByDoing 👨‍💻👩‍💻
 3 | 
 4 | 
 5 | ### Table of Contents 📚
 6 | 
 7 | <details>
 8 | <summary>JavaScript Fundamentals – 01</summary>
 9 | <br><br>
10 | <pre>
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 | </pre>
24 | </details>
25 |  
26 |  
27 | 


--------------------------------------------------------------------------------
/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/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 -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/12.Loops3.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | 
 3 |  
 4 | Store this array of arrays into a variable called 'listOfNeighbours'
 5 | [['Canada', 'Mexico'], ['Spain'], ['Norway', 'Sweden', 
 6 | 'Russia']];
 7 | 
 8 | 2. Log only the neighbouring countries to the console, one by one, not the entire 
 9 | arrays. Log a string like 'Neighbour: Canada' for each country
10 | 
11 | 3. You will need a loop inside a loop for this. This is actually a bit tricky, so don't 
12 | worry if it's too difficult for you! But you can still try to figure this out anyway
13 | 
14 | */
15 | 
16 | const listOfNeighbours =[['Canada', 'Mexico'], ['Spain'], ['Norway', 'Sweden', 
17 | 'Russia']];
18 | 
19 | for (let i = 0; i < listOfNeighbours.length; i++)
20 | for (let y = 0; y < listOfNeighbours[i].length; y++)
21 | console.log(`Neighbour: ${listOfNeighbours[i][y]}`);


--------------------------------------------------------------------------------
/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 -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/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 -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 -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/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 -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 -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


--------------------------------------------------------------------------------
/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)<br>
26 | 
27 | 
28 | 
29 |  ![image](https://user-images.githubusercontent.com/67835881/126159084-8dc60be9-e851-46a6-baba-1dff0cb34e4f.png)
30 | 


--------------------------------------------------------------------------------
/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/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 -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


--------------------------------------------------------------------------------
/jQuery/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | ## Adding jQuery to Web Page using Google CDN
 3 | 
 4 | ```
 5 | <head>
 6 |    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 7 | </head>
 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 | 


--------------------------------------------------------------------------------
/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/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/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/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 <populations.length; i++){ 
27 |  
28 |     const perc1 = percentageOfWorld(populations[i]);
29 |     //push into new array 
30 |     percentages2.push(perc1);
31 | }
32 | 
33 | 
34 | // create new array 
35 | const percentages3 = [];
36 | 
37 | // cal %population and store it into NEW array 
38 | let j=0; //initialization
39 | while( j<populations.length)        //condition 
40 | { 
41 |     const perc2= percentageOfWorld(populations[j]);
42 |     percentages3.push(perc2);
43 |     j++; //increment
44 | 
45 | }
46 | 
47 | 
48 | console.log(populations);
49 | console.log(percentages2);
50 | console.log(percentages3);


--------------------------------------------------------------------------------
/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/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/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 | 


--------------------------------------------------------------------------------
/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/)<br>
 10 | 📗Udemy-js - [click here](https://www.udemy.com/course/the-complete-javascript-course/)<br>
 11 | 📗FreeCodeCamp - [click here](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/)<br>
 12 | 📗Youtube - [Code with Harry](https://www.codewithharry.com/videos/javascript-tutorials-in-hindi-1)
 13 | 
 14 | **Free Js Courses**📚<br>
 15 | 📗Codecademy - [Click here](https://www.codecademy.com/catalog/language/javascript)<br>
 16 | 📗javascript.info - [Click here](https://javascript.info/)<br>
 17 | 📗Mozilla Developer Network - [Click here](https://developer.mozilla.org/en-US/docs/Web/JavaScript)<br>
 18 | 
 19 | 
 20 | 
 21 | **Quick References**📖<br>
 22 | 📔Cheatsheet - [Click here](https://html-css-js.com/js/) <br>
 23 | 📔CheatSheet DOM - [click here](https://drive.google.com/file/d/1HLCR04r39VQAbPDATKlHAXGDUXr3vpQ0/view?usp=sharing)<br>
 24 | 📔Interactive cheatsheet - [click here](https://htmlcheatsheet.com/js/)
 25 | 
 26 | **Learn through Blogs**🧾<br>
 27 | 📘[JavaScript Fundamentals](https://www.freecodecamp.org/news/javascript-example/)<br>
 28 | 📘[Tutorial- Theory notes](https://drive.google.com/file/d/1IF37kegYt_sLTMBTh1bCoWHUopcTtO9X/view?usp=sharing)<br>
 29 | 📘[Project based Learning](https://drive.google.com/file/d/1IMnMPPcjwRENh3HDSDxQATRwUdKbSm1Q/view?usp=sharing)<br>
 30 | 📘[Javascript Resources Ref](https://www.freecodecamp.org/news/30-free-resources-for-learning-javascript-fundamentals/)<br>
 31 | 📘[Javascript Interview Questions](https://www.interviewbit.com/javascript-interview-questions/)<br>
 32 | 
 33 | 
 34 | **#LearnByDoing**👩‍💻<br>
 35 | 📕[Learn by Coding](https://www.interviewbit.com/courses/fast-track-js/)<br>
 36 | 📕[Build 30 js ptojects](https://javascript30.com/)<br>
 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 | 


--------------------------------------------------------------------------------