├── part1
    ├── 01.js
    ├── 02.js
    ├── 03.js
    ├── 04.js
    ├── 05.js
    ├── 06.js
    ├── 07.js
    ├── 08.js
    ├── 09.js
    ├── 10.js
    ├── 11.js
    ├── 12.js
    ├── 13.js
    ├── 14.js
    ├── 15.js
    ├── 16.js
    ├── 17.js
    ├── 18.js
    ├── 19.js
    ├── 20.js
    ├── 21.js
    ├── 22.js
    ├── 23.js
    ├── 24.js
    ├── 25.js
    ├── 26.js
    ├── 27.js
    ├── 28.js
    ├── 29.js
    ├── 30.js
    ├── 31.js
    ├── 32.js
    ├── 33.js
    ├── 34.js
    ├── 35.js
    ├── 36.js
    ├── 37.js
    ├── 38.js
    ├── 39.js
    ├── 40.js
    ├── 41.js
    ├── 42.js
    ├── 43.js
    ├── 44.js
    ├── 45.js
    ├── 46.js
    ├── 47.js
    ├── 48.js
    ├── 49.js
    ├── 50.js
    ├── 51.js
    ├── 52.js
    ├── 53.js
    ├── 54.js
    ├── 55.js
    ├── 56.js
    ├── 57.js
    ├── 58.js
    ├── 59.js
    ├── 60.js
    ├── 61.js
    ├── 62.js
    ├── 63.js
    ├── 64.js
    ├── 65.js
    ├── 66.js
    ├── 67.js
    ├── 68.js
    ├── 69.js
    ├── 70.js
    ├── 71.js
    ├── 72.js
    ├── 73.js
    ├── 74.js
    ├── 75.js
    ├── 76.js
    ├── 77.js
    ├── 78.js
    ├── 79.js
    ├── 80.js
    ├── 81.js
    ├── 82.js
    ├── 83.js
    ├── 84.js
    ├── 85.js
    ├── 86.js
    ├── 87.js
    ├── 88.js
    ├── 89.js
    ├── 90.js
    └── 91.js
├── part2
    ├── dom-tutorial
    │   ├── 102.js
    │   ├── 103.js
    │   ├── 104.js
    │   ├── 105.js
    │   ├── 106.js
    │   ├── 107.js
    │   ├── 108.js
    │   ├── 109.js
    │   ├── 110.js
    │   ├── 111.js
    │   ├── 112.js
    │   ├── 113.js
    │   ├── 114.js
    │   ├── 115.js
    │   ├── 116.js
    │   ├── 117.js
    │   ├── 118.js
    │   ├── 119.js
    │   ├── 120.js
    │   ├── 121.js
    │   ├── 122.js
    │   ├── 123.js
    │   ├── 124.js
    │   ├── 125.js
    │   ├── 126.js
    │   ├── 127.js
    │   ├── 128.js
    │   ├── 129.js
    │   ├── bg-image.jpg
    │   ├── clickEvent.html
    │   ├── event-bubbling-capturing.html
    │   ├── evt-bcd.css
    │   ├── index.html
    │   ├── index2.html
    │   ├── little-demo.css
    │   ├── little-demo.html
    │   └── style.css
    └── how-javascript-works
    │   ├── 100.js
    │   ├── 101.js
    │   ├── 96.js
    │   ├── 97.js
    │   ├── 98.js
    │   ├── 99.js
    │   ├── hjw_01.js
    │   ├── hjw_02.js
    │   ├── hjw_03.js
    │   ├── hjw_04.js
    │   ├── hjw_05.js
    │   └── index.html
└── part3
    └── asynchronous-javascript
        ├── 130.js
        ├── 131.js
        ├── 132.js
        ├── 133.js
        ├── 134.js
        ├── 135.js
        ├── 136.js
        ├── 137.js
        ├── 138.js
        ├── 139.js
        ├── 140.js
        ├── 141.js
        ├── 142.js
        ├── 143.js
        ├── 144.js
        ├── async-code.html
        ├── callback-demo.html
        ├── moreAboutPromise.html
        ├── moreAboutPromise.js
        ├── myfile.json
        ├── promise.html
        ├── promise_demo.html
        ├── refactor-with-promise.html
        ├── setInterval.css
        ├── setInterval.html
        └── xhr.html


/part1/01.js:
--------------------------------------------------------------------------------
1 | // console.log can print something on console 
2 | console.log("hello world");


--------------------------------------------------------------------------------
/part1/02.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | // intro to variables
 3 | 
 4 | // variables can store some information
 5 | // we can use that information later
 6 | // we can change that information later
 7 | 
 8 | // declare a variable 
 9 | 
10 | var firstName = "Harshit";
11 | 
12 | // use a variable 
13 | console.log(firstName);
14 | 
15 | // change value 
16 | 
17 | firstName = "Mohit";
18 | 
19 | console.log(firstName);
20 | 


--------------------------------------------------------------------------------
/part1/03.js:
--------------------------------------------------------------------------------
 1 | // rules for naming variables 
 2 | 
 3 | // you cannot start with number 
 4 | // example :- 
 5 | // 1value (invalid)
 6 | // value1 (valid)
 7 | 
 8 | var value1 = 2;
 9 | console.log(value1);
10 | 
11 | // you can use only undersore _ or dollar symbol 
12 | // first_name (valid)
13 | // _firstname (valid) 
14 | 
15 | // first$name (valid)
16 | // $firstname (valid)
17 | 
18 | // you cannot use spaces 
19 | // var first_name = "harshit"; // snake case writing 
20 | // var firstName = "harshit"; // camel case writing 
21 | // first name (invalid)
22 | 
23 | // convention 
24 | // start with small letter and use camelCase 
25 | 


--------------------------------------------------------------------------------
/part1/04.js:
--------------------------------------------------------------------------------
1 | // let keyword 
2 | // declare variable with let keyword 
3 | 
4 | let firstName = "harshit";
5 | firstName = "Mohit";
6 | console.log(firstName);
7 | 
8 | 
9 | // block scope vs funtion scope (covered later in this video)


--------------------------------------------------------------------------------
/part1/05.js:
--------------------------------------------------------------------------------
1 | // declare constants 
2 | 
3 | const pi = 3.14;
4 | console.log(pi);


--------------------------------------------------------------------------------
/part1/06.js:
--------------------------------------------------------------------------------
 1 | // String indexing 
 2 | 
 3 | let firstName = "harshitdfjakldsfdf";
 4 | 
 5 | //  h    a   r   s   h   i   t 
 6 | //  0    1   2   3   4   5   6
 7 | 
 8 | // console.log(firstName[0]);
 9 | // length of string 
10 | // firstName.length 
11 | 
12 | console.log(firstName.length);
13 | 
14 | console.log(firstName[firstName.length-2]);
15 | 
16 | // last Index : length - 1 


--------------------------------------------------------------------------------
/part1/07.js:
--------------------------------------------------------------------------------
 1 | // trim() 
 2 | // toUpperCase()
 3 | // toLowerCase()
 4 | // slice()
 5 | 
 6 | let firstName = "harshit";
 7 | 
 8 | // console.log(firstName.length);
 9 | // firstName = firstName.trim(); // "harshit"
10 | // console.log(firstName)
11 | // console.log(firstName.length);
12 | // firstName = firstName.toUpperCase();
13 | // firstName = firstName.toLowerCase();
14 | // console.log(firstName);
15 | 
16 | // start index 
17 | // end index
18 | 
19 | let newString = firstName.slice(1); // hars
20 | console.log(newString);


--------------------------------------------------------------------------------
/part1/08.js:
--------------------------------------------------------------------------------
 1 | // typeof operator 
 2 | 
 3 | // data types (primitive data types)
 4 | // string "harhit"
 5 | // number 2, 4, 5.6 
 6 | // booleans 
 7 | // undefined
 8 | // null 
 9 | // BigInt
10 | // Symbol
11 | 
12 | // let age = 22; 
13 | // let firstName = "harshit";
14 | 
15 | // // console.log(typeof age);
16 | 
17 | // // 22 -> "22"
18 | // // convert number to string. 
19 | // age = age + "";
20 | // console.log(typeof(age)); "22"
21 | 
22 | 
23 | // // convert string to number. 
24 | 
25 | // let myStr = +"34";
26 | // console.log(typeof myStr);
27 | 
28 | // let age = "18";
29 | // age = Number(age);
30 | // console.log(typeof age);


--------------------------------------------------------------------------------
/part1/09.js:
--------------------------------------------------------------------------------
1 | // string concatenation 
2 | 
3 | let string1 = "17";
4 | let string2 = "10";
5 | 
6 | let newString = +string1 + +string2;
7 | console.log(typeof newString);


--------------------------------------------------------------------------------
/part1/10.js:
--------------------------------------------------------------------------------
 1 | // template string 
 2 | let age = 22;
 3 | let firstName = "harshit"
 4 | 
 5 | // "my name is harshit and my age is 22 "
 6 | // let aboutMe = "my name is " + firstName + " and my age is " + age; 
 7 | 
 8 | let aboutMe = `my name is ${firstName} and my age is ${age}`
 9 | 
10 | console.log(aboutMe);


--------------------------------------------------------------------------------
/part1/11.js:
--------------------------------------------------------------------------------
 1 | // undefined 
 2 | // null
 3 | 
 4 | // let firstName;
 5 | // console.log(typeof firstName);
 6 | // firstName = "Harshit";
 7 | // console.log(typeof firstName, firstName);
 8 | 
 9 | // let myVariable = null;
10 | // console.log(myVariable);
11 | // myVariable = "harshit";
12 | // console.log(myVariable, typeof myVariable);
13 | // console.log(typeof null);
14 | // bug , error 
15 | 
16 | // BigInt
17 | // let myNumber = BigInt(12);
18 | // let sameMyNumber = 123n;
19 | // // console.log(myNumber);
20 | // // console.log(Number.MAX_SAFE_INTEGER);
21 | // console.log(myNumber+ sameMyNumber);
22 | 


--------------------------------------------------------------------------------
/part1/12.js:
--------------------------------------------------------------------------------
 1 | // booleans & comparison operator 
 2 | 
 3 | // booleans 
 4 | // true, false 
 5 | 
 6 | // let num1 = 7;
 7 | // let num2 = "7";
 8 | 
 9 | // console.log(num1<num2);
10 | 
11 | // == vs === 
12 | // console.log(num1 === num2);
13 | 
14 | // != vs !==
15 | 
16 | // console.log(num1 !== num2);
17 | 


--------------------------------------------------------------------------------
/part1/13.js:
--------------------------------------------------------------------------------
 1 | // truthy and falsy values 
 2 | 
 3 | // falsy values 
 4 | 
 5 | 
 6 | // false
 7 | // ""
 8 | // null 
 9 | // undefined
10 | // 0


--------------------------------------------------------------------------------
/part1/14.js:
--------------------------------------------------------------------------------
 1 | // if else condition 
 2 | 
 3 | // let age = 17;
 4 | 
 5 | // if(age>=18){
 6 | //     console.log("User can play ddlc");
 7 | // }else {
 8 | //     console.log("User can play mario");
 9 | // }
10 | 
11 | // let num = 13;
12 | 
13 | // if(num%2===0){
14 | //     console.log("even");
15 | // }else{
16 | //     console.log("odd");
17 | // }
18 | 
19 | // falsy values 
20 | 
21 | 
22 | // false
23 | // ""
24 | // null 
25 | // undefined
26 | // 0
27 | 
28 | // truthy 
29 | // "abc"
30 | // 1, -1
31 | 
32 | // let firstName= 0;
33 | 
34 | // if(firstName){
35 | //     console.log(firstName);
36 | // }else{
37 | //     console.log("firstName is kinda empty");
38 | // }


--------------------------------------------------------------------------------
/part1/15.js:
--------------------------------------------------------------------------------
 1 | // ternary operator 
 2 | 
 3 | // let age = 4;
 4 | // let drink;
 5 | 
 6 | // if(age>=5){
 7 | //     drink = "coffee";
 8 | // }else{
 9 | //     drink = "milk";
10 | // }
11 | 
12 | // console.log(drink);
13 | 
14 | // ternary operator / conditional operator 
15 | 
16 | // let age = 3;
17 | // let drink = age >= 5 ? "coffee" : "milk";
18 | // console.log(drink);


--------------------------------------------------------------------------------
/part1/16.js:
--------------------------------------------------------------------------------
 1 | // and  or operator 
 2 | 
 3 | 
 4 | 
 5 | // if(firstName[0] === "H"){
 6 | //     console.log("your name starts with H")
 7 | // }
 8 | 
 9 | // if(age > 18){
10 | //     console.log("you are above 18");
11 | // }
12 | 
13 | // if(firstName[0] === "H" && age>18){
14 | //     console.log("Name starts with H and above 18");
15 | // }else{
16 | //     console.log("inside else");
17 | // }
18 | let firstName = "arshit";
19 | let age = 16;
20 | 
21 | if(firstName[0] === "H" || age>18){
22 |     console.log("inside if");
23 | }else{
24 |     console.log("inside else");
25 | }


--------------------------------------------------------------------------------
/part1/17.js:
--------------------------------------------------------------------------------
 1 | // nested if else
 2 | 
 3 | // winning number 19 
 4 | 
 5 | // 19 your guess is right 
 6 | // 17 too low 
 7 | // 20 too high 
 8 | 
 9 | let winningNumber = 19;
10 | let userGuess = +prompt("Guess a number");
11 | 
12 | if(userGuess === winningNumber){
13 |     console.log("Your guess is right!!");
14 | }else{
15 |     if(userGuess < winningNumber){
16 |         console.log("too low !!!");
17 |     }else{
18 |         console.log("too high !!!");
19 |     }
20 | }


--------------------------------------------------------------------------------
/part1/18.js:
--------------------------------------------------------------------------------
 1 | // if 
 2 | // else if 
 3 | // else if 
 4 | // else if 
 5 | // else 
 6 | 
 7 | // let tempInDegree = 50;
 8 | 
 9 | 
10 | // if(tempInDegree < 0){
11 | //     console.log("extremely cold outside");
12 | // }else if(tempInDegree < 16){
13 | //     console.log("It is cold outside");
14 | // }else if(tempInDegree < 25){
15 | //     console.log("wheather is okay ");
16 | // }else if(tempInDegree < 35){
17 | //     console.log("lets go for swim");
18 | // }else if(tempInDegree < 45){
19 | //     console.log("turn on AC");
20 | // }else{
21 | //     console.log("too hot!!");
22 | // }
23 | 
24 | // console.log("hello");
25 | 
26 | 
27 | 
28 | 
29 | 
30 | 
31 | 
32 | 
33 | 
34 | 
35 | 
36 | 
37 | 
38 | 
39 | 
40 | 
41 | // let tempInDegree = 50;
42 | 
43 | 
44 | // if(tempInDegree < 0){
45 | //     console.log("extremely cold outside");
46 | // }else if(tempInDegree < 16){
47 | //     console.log("It is cold outside");
48 | // }else if(tempInDegree < 25){
49 | //     console.log("wheather is okay ");
50 | // }else if(tempInDegree < 35){
51 | //     console.log("lets go for swim");
52 | // }else if(tempInDegree < 45){
53 | //     console.log("turn on AC");
54 | // }else{
55 | //     console.log("too hot!!");
56 | // }
57 | 
58 | // console.log("hello there");
59 | 
60 | 
61 | 
62 | let tempInDegree = 4;
63 | 
64 | if(tempInDegree > 40){
65 |     console.log("too hot");
66 | }else if(tempInDegree > 30){
67 |     console.log("lets go for swim");
68 | }else if(tempInDegree > 20){
69 |     console.log("weather is cool");
70 | }else if(tempInDegree > 10){
71 |     console.log("it is very cold outside");
72 | }else{
73 |     console.log("extremely cold");
74 | }
75 | 
76 | console.log("hello");


--------------------------------------------------------------------------------
/part1/19.js:
--------------------------------------------------------------------------------
 1 | 
 2 | // switch statement 
 3 | 
 4 | 
 5 | // let day = 7; 
 6 | 
 7 | 
 8 | // if(day === 0){
 9 | //     console.log("Sunday");
10 | // }else if(day ===1){
11 | //     console.log("Monday");
12 | // }else if(day ===2){
13 | //     console.log("Tuesday");
14 | // }else if(day ===3){
15 | //     console.log("Wednesday");
16 | // }else if(day ===4){
17 | //     console.log("Thrusday");
18 | // }else if(day ===5){
19 | //     console.log("Friday");
20 | // }else if(day ===6){
21 | //     console.log("Saturday");
22 | // }else{
23 | //     console.log("Invalid Day");
24 | // }
25 | 
26 | 
27 | let day = 9;
28 | 
29 | switch(day){
30 |     case 0:
31 |         console.log("Sunday");
32 |         break; 
33 |     case 1:
34 |         console.log("Monday");
35 |         break;
36 |     case 2:
37 |         console.log("Tuesday");
38 |         break;
39 |     case 3:
40 |         console.log("Wednesday");
41 |         break;
42 |     case 4:
43 |         console.log("Thrusday");
44 |         break;
45 |     case 5:
46 |         console.log("Friday");
47 |         break;
48 |     case 6:
49 |         console.log("Saturday");
50 |         break;
51 |     default:
52 |         console.log("Invalid Day");
53 | }


--------------------------------------------------------------------------------
/part1/20.js:
--------------------------------------------------------------------------------
 1 | // while loop 
 2 | 
 3 | // 0 se 9 
 4 | // dry don't repeat yourself
 5 | let i = 0; // 1 2 3 4
 6 | 
 7 | while(i<=9){
 8 |     console.log(i);
 9 |     i++;
10 | }
11 | console.log(`current value of i is ${i}`);
12 | console.log("hello");


--------------------------------------------------------------------------------
/part1/21.js:
--------------------------------------------------------------------------------
 1 | // while loop example 
 2 | let num = 100;
 3 | // let total = 0; //1 + 2 +3
 4 | // let i = 0;
 5 | 
 6 | 
 7 | // while(i<=100){
 8 | //     total = total + i;
 9 | //     i++;
10 | // }
11 | 
12 | 
13 | // console.log(total);
14 | 
15 | // let total = (num*(num+1))/2;
16 | // console.log(total);


--------------------------------------------------------------------------------
/part1/22.js:
--------------------------------------------------------------------------------
1 | // intro to for loop 
2 | // print 0 to 9
3 | 
4 | for(let i = 0;i<=9;i++){
5 |     console.log(i);
6 | }
7 | 
8 | // console.log("value of i is ",i);


--------------------------------------------------------------------------------
/part1/23.js:
--------------------------------------------------------------------------------
 1 | // for loop example 
 2 | 
 3 | let total = 0;
 4 | 
 5 | let num = 100;
 6 | 
 7 | for(let i = 1; i<=num; i++){
 8 |     total = total + i;
 9 | }
10 | 
11 | console.log(total);


--------------------------------------------------------------------------------
/part1/24.js:
--------------------------------------------------------------------------------
 1 | // break keywork
 2 | 
 3 | // continue keyword 
 4 | 
 5 | // for(let i = 1; i<=10; i++){
 6 | //     if(i===4){
 7 | //         break;
 8 | //     }
 9 | //     console.log(i);
10 | // }
11 | 
12 | // for(let i = 1; i<=10; i++){
13 | //     if(i===4){
14 | //         continue;
15 | //     }
16 | //     console.log(i);
17 | // }
18 | console.log("hello there");
19 | 


--------------------------------------------------------------------------------
/part1/25.js:
--------------------------------------------------------------------------------
 1 | // do while loop
 2 | 
 3 | // while(i<=9){
 4 | //     console.log(i);
 5 | //     i++;
 6 | // }
 7 | 
 8 | // let i = 10;
 9 | // do{
10 | //     console.log(i);
11 | //     i++;
12 | // }while(i<=9);
13 | 
14 | // console.log("value of i is ", i);


--------------------------------------------------------------------------------
/part1/26.js:
--------------------------------------------------------------------------------
 1 | // intro to arrays 
 2 | // reference type 
 3 | // how to create arrays
 4 | 
 5 | // ordered collection of items 
 6 | 
 7 | // let fruits = ["apple", "mango", "grapes"];
 8 | // let numbers = [1,2,3,4];
 9 | // let mixed = [1,2,2.3, "string", null, undefined];
10 | // console.log(mixed);
11 | // console.log(numbers);
12 | // console.log(fruits[2]);
13 | let fruits = ["apple", "mango", "grapes"];
14 | let obj = {}; // object literal
15 | // console.log(fruits);
16 | // fruits[1] = "banana";
17 | // console.log(fruits);
18 | console.log(typeof fruits);
19 | console.log(typeof obj);
20 | console.log(Array.isArray(fruits));
21 | console.log(Array.isArray(obj));
22 | 
23 | 
24 | // array indexing 


--------------------------------------------------------------------------------
/part1/27.js:
--------------------------------------------------------------------------------
 1 | // array push pop 
 2 | 
 3 | // array shift unshift 
 4 | 
 5 | let fruits = ["apple", "mango", "grapes"];
 6 | console.log(fruits);
 7 | // push 
 8 | // fruits.push("banana");
 9 | // console.log(fruits);
10 | // pop 
11 | // let poppedFruit = fruits.pop();
12 | // console.log(fruits);
13 | // console.log("popped fruits is", poppedFruit);
14 | 
15 | // unshift 
16 | // fruits.unshift("banana");
17 | // fruits.unshift("myfruit");
18 | // console.log(fruits);
19 | 
20 | // shift 
21 | // let removedFruit = fruits.shift();
22 | // console.log(fruits);
23 | // console.log("removed fruits is ", removedFruit);


--------------------------------------------------------------------------------
/part1/28.js:
--------------------------------------------------------------------------------
 1 | // primitve vs reference data types
 2 | // let num1 = 6;
 3 | // let num2 = num1;
 4 | // console.log("value is num1 is", num1);
 5 | // console.log("value is num2 is", num2);
 6 | // num1++;
 7 | // console.log("after incrementing num1")
 8 | // console.log("value is num1 is", num1);
 9 | // console.log("value is num2 is", num2);
10 | 
11 | 
12 | // reference types 
13 | // array 
14 | let array1 = ["item1", "item2"];
15 | let array2 = array1;
16 | console.log("array1", array1);
17 | console.log("array2", array2);
18 | array1.push("item3");
19 | console.log("after pushing element to array 1");
20 | console.log("array1", array1);
21 | console.log("array2", array2);


--------------------------------------------------------------------------------
/part1/29.js:
--------------------------------------------------------------------------------
 1 | // how to clone array 
 2 | 
 3 | // how to concatenate two arrays
 4 | 
 5 | let array1 = ["item1", "item2"];
 6 | // let array2 = ["item1", "item2"];
 7 | // let array2 = array1.slice(0).concat(["item3", "item4"]);
 8 | // let array2 = [].concat(array1,["item3", "item4"]);
 9 | // new way 
10 | // spread operator
11 | let oneMoreArray = ["item3", "item4"]
12 | let array2 = [...array1, ...oneMoreArray];
13 | 
14 | array1.push("item3");
15 | 
16 | console.log(array1===array2);
17 | console.log(array1)
18 | console.log(array2)
19 | 


--------------------------------------------------------------------------------
/part1/30.js:
--------------------------------------------------------------------------------
 1 | // for loop in array 
 2 | 
 3 | let fruits = ["apple", "mango", "grapes", "banana"];
 4 | 
 5 | // for(let i=0; i<=9;i++){
 6 | //     console.log(i);
 7 | // }
 8 | 
 9 | // console.log(fruits.length);
10 | // console.log(fruits[fruits.length-2]);
11 | let fruits2 = [];
12 | for(let i=0; i < fruits.length; i++){
13 |     fruits2.push(fruits[i].toUpperCase());
14 | }
15 | 
16 | console.log(fruits2);


--------------------------------------------------------------------------------
/part1/31.js:
--------------------------------------------------------------------------------
1 | // use const for creating array
2 | 
3 | // heap memory ["apple", "mango"] 0x11
4 | 
5 | // const fruits = ["apple", "mango"]; // 0x11
6 | // fruits.push("banana");
7 | // console.log(fruits);
8 | 


--------------------------------------------------------------------------------
/part1/32.js:
--------------------------------------------------------------------------------
1 | // while loop in array 
2 | const fruits = ["apple", "mango", "grapes"];
3 | const fruits2 = [];
4 | let i = 0;
5 | while(i<fruits.length){
6 |     fruits2.push(fruits[i].toUpperCase());
7 |     i++;
8 | }
9 | console.log(fruits2);


--------------------------------------------------------------------------------
/part1/33.js:
--------------------------------------------------------------------------------
 1 | // for of loop in array
 2 | const fruits = ["apple", "mango", "grapes", "fruit4", "fruit5"];
 3 | const fruits2 = [];
 4 | 
 5 | // for(let fruit of fruits){
 6 | //     fruits2.push(fruit.toUpperCase());
 7 | // }
 8 | // console.log(fruits2);
 9 | 
10 | for(let i = 0; i<fruits.length; i++){
11 |     console.log(fruits[i]);
12 | }


--------------------------------------------------------------------------------
/part1/34.js:
--------------------------------------------------------------------------------
1 | // for in loop in array
2 | const fruits = ["apple", "mango", "grapes", "fruit4", "fruit5"];
3 | const fruits2 = [];
4 | 
5 | for(let index in fruits){
6 |     fruits2.push(fruits[index].toUpperCase());
7 | }
8 | console.log(fruits2);


--------------------------------------------------------------------------------
/part1/35.js:
--------------------------------------------------------------------------------
 1 | // array destructuring 
 2 | const myArray = ["value1", "value2", "value3","value4"];
 3 | // let myvar1 = myArray[0];
 4 | // let myvar2 = myArray[1];
 5 | // console.log("value of myvar1", myvar1);
 6 | // console.log("value of myvar2", myvar2);
 7 | let [myvar1, myvar2, ...myNewArray] = myArray;
 8 | console.log("value of myvar1", myvar1);
 9 | console.log("value of myvar2", myvar2);
10 | console.log(myNewArray);


--------------------------------------------------------------------------------
/part1/36.js:
--------------------------------------------------------------------------------
 1 | // objects reference type  
 2 | // arrays are good but not sufficient 
 3 | // for real world data 
 4 | // objects store key value pairs 
 5 | // objects don't have index
 6 | 
 7 | // how to create objects 
 8 | 
 9 | // const person = {name:"Harshit",age:22};
10 | const person = {
11 |     name: "harshit",
12 |     age: 22,
13 |     hobbies: ["guitar", "sleeping", "listening music"]
14 | }
15 | console.log(person);
16 | 
17 | // how to access data from objects 
18 | // console.log(person["name"]);
19 | // console.log(person["age"]);
20 | // console.log(person.hobbies);
21 | 
22 | // how to add key value pair to objects
23 | person["person"] = "male";
24 | console.log(person);


--------------------------------------------------------------------------------
/part1/37.js:
--------------------------------------------------------------------------------
 1 | // difference between dot and bracket notaion
 2 | // const key = "email";
 3 | // const person = {
 4 | //     name: "harshit",
 5 | //     age: 22,
 6 | //     "person hobbies": ["guitar", "sleeping", "listening music"]
 7 | 
 8 | // }
 9 | 
10 | // console.log(person["person hobbies"]);
11 | // person[key] = "harshitvashisth@gmail.com";
12 | // console.log(person);
13 | 


--------------------------------------------------------------------------------
/part1/38.js:
--------------------------------------------------------------------------------
 1 | // how to iterate object 
 2 | const person = {
 3 |     name: "harshit",
 4 |     age: 22,
 5 |     "person hobbies": ["guitar", "sleeping", "listening music"]
 6 | }
 7 | 
 8 | // for in loop 
 9 | // Object.keys 
10 | 
11 | // for(let key in person){
12 | //     // console.log(`${key} : ${person[key]}`);
13 | //     console.log(key," : " ,person[key]);
14 | // }
15 | 
16 | // console.log(typeof (Object.keys(person)));
17 | // const val = Array.isArray((Object.keys(person)));
18 | // console.log(val);
19 | 
20 | // for(let key of Object.keys(person)){
21 | //     console.log(person[key]);
22 | // }


--------------------------------------------------------------------------------
/part1/39.js:
--------------------------------------------------------------------------------
 1 | // computed properties
 2 | 
 3 | const key1 = "objkey1";
 4 | const key2 = "objkey2";
 5 | 
 6 | const value1 = "myvalue1";
 7 | const value2 = "myvalue2";
 8 | 
 9 | // const obj = {
10 | //     objkey1 : "myvalue1",
11 | //     objkey2 : "myvalue2",
12 | // }
13 | 
14 | // const obj = {
15 | //     [key1] : value1,
16 | //     [key2] : value2
17 | // }
18 | 
19 | const obj = {};
20 | 
21 | obj[key1] = value1;
22 | obj[key2] = value2;
23 | console.log(obj);
24 | 
25 | 


--------------------------------------------------------------------------------
/part1/40.js:
--------------------------------------------------------------------------------
 1 | // spread operator
 2 | // const array1 = [1, 2, 3];
 3 | // const array2 = [5, 6, 7];
 4 | 
 5 | // // const newArray = [...array1, ...array2, 89, 69];
 6 | // const newArray = [..."123456789"];
 7 | // console.log(newArray);
 8 | 
 9 | // spread operator in objects
10 | const obj1 = {
11 |   key1: "value1",
12 |   key2: "value2",
13 | };
14 | const obj2 = {
15 |   key1: "valueUnique",
16 |   key3: "value3",
17 |   key4: "value4",
18 | };
19 | 
20 | // const newObject = { ...obj2, ...obj1, key69: "value69" };
21 | // const newObject = { ...["item1", "item2"] };
22 | // const newObject = { ..."abcdefghijklmnopqrstuvwxyz" };
23 | // console.log(newObject);
24 | 


--------------------------------------------------------------------------------
/part1/41.js:
--------------------------------------------------------------------------------
 1 | // object destructuring
 2 | const band = {
 3 |   bandName: "led zepplin",
 4 |   famousSong: "stairway to heaven",
 5 |   year: 1968,
 6 |   anotherFamousSong: "kashmir",
 7 | };
 8 | 
 9 | let { bandName, famousSong, ...restProps } = band;
10 | console.log(bandName);
11 | console.log(restProps);
12 | 


--------------------------------------------------------------------------------
/part1/42.js:
--------------------------------------------------------------------------------
 1 | // objects inside array 
 2 | // very useful in real world applications
 3 | 
 4 | const users = [
 5 |     {userId: 1,firstName: 'harshit', gender: 'male'},
 6 |     {userId: 2,firstName: 'mohit', gender: 'male'},
 7 |     {userId: 3,firstName: 'nitish', gender: 'male'},
 8 | ]
 9 | for(let user of users){
10 |     console.log(user.firstName);
11 | }
12 | 


--------------------------------------------------------------------------------
/part1/43.js:
--------------------------------------------------------------------------------
 1 | // nested destructuring 
 2 | const users = [
 3 |     {userId: 1,firstName: 'harshit', gender: 'male'},
 4 |     {userId: 2,firstName: 'mohit', gender: 'male'},
 5 |     {userId: 3,firstName: 'nitish', gender: 'male'},
 6 | ]
 7 | 
 8 | const [{firstName: user1firstName, userId}, , {gender: user3gender}] = users;
 9 | console.log(user1firstName);
10 | console.log(userId);
11 | console.log(user3gender);


--------------------------------------------------------------------------------
/part1/44.js:
--------------------------------------------------------------------------------
 1 | function singHappyBirthday(){
 2 |     console.log("happy birthday to you ......");
 3 | }
 4 | 
 5 | function sumThreeNumbers(number1, number2, number3){
 6 |     return number1 + number2 + number3;
 7 | }
 8 | 
 9 | 
10 | 
11 | // isEven
12 | // input : 1 number 
13 | // output : true , false 
14 | 
15 | // function isEven(number){
16 | //     return number % 2 === 0;
17 | // }
18 | 
19 | // console.log(isEven(4));
20 | 
21 | // function 
22 | // input : string 
23 | // output: firstCharacter 
24 | 
25 | // function firstChar(anyString){
26 | //     return anyString[0];
27 | // }
28 | 
29 | // console.log(firstChar("zbc"));
30 | 
31 | // function 
32 | // input : array, target (number)
33 | // output: index of target if target present in array 
34 | 
35 | function findTarget(array, target){
36 |     for(let i = 0; i<array.length; i++){
37 |         if(array[i]===target){
38 |             return i;
39 |         }
40 |     }
41 |     return -1;
42 | }
43 | const myArray = [1,3,8,90]
44 | const ans = findTarget(myArray, 4);
45 | console.log(ans);


--------------------------------------------------------------------------------
/part1/45.js:
--------------------------------------------------------------------------------
 1 | // function expression 
 2 | // function singHappyBirthday(){
 3 | //     console.log("happy birthday to you ......");
 4 | // }
 5 | 
 6 | const singHappyBirthday = function(){
 7 |     console.log("happy birthday to you ......");
 8 | }
 9 | 
10 | // singHappyBirthday();
11 | 
12 | const sumThreeNumbers = function(number1, number2, number3){
13 |     return number1 + number2 + number3;
14 | }
15 | const ans = sumThreeNumbers(2,3,4);
16 | // console.log(ans);
17 | 
18 | 
19 | // function isEven(number){
20 | //     return number % 2 === 0;
21 | // }
22 | const isEven = function(number){
23 |     return number % 2 === 0;
24 | }
25 | // console.log(isEven(2));
26 | 
27 | const firstChar = function(anyString){
28 |     return anyString[0];
29 | }
30 | 
31 | const findTarget = function(array, target){
32 |     for(let i = 0; i<array.length; i++){
33 |         if(array[i]===target){
34 |             return i;
35 |         }
36 |     }
37 |     return -1;
38 | }


--------------------------------------------------------------------------------
/part1/46.js:
--------------------------------------------------------------------------------
 1 | // arrow functions
 2 | // const singHappyBirthday = function(){
 3 | //     console.log("happy birthday to you ......");
 4 | // }
 5 | 
 6 | const singHappyBirthday = () => {
 7 |     console.log("happy birthday to you ......");
 8 | }
 9 | 
10 | singHappyBirthday();
11 | 
12 | const sumThreeNumbers = (number1, number2, number3) => {
13 |     return number1 + number2 + number3;
14 | }
15 | 
16 | const ans = sumThreeNumbers(2,3,4);
17 | console.log(ans);
18 | 
19 | // const isEven = function(number){
20 | //     return number % 2 === 0;
21 | // }
22 | 
23 | const isEven = number => number % 2 === 0;
24 | 
25 | 
26 | console.log(isEven(4));
27 | 
28 | const firstChar = anyString => anyString[0];
29 | 
30 | console.log(firstChar("harshit"));
31 | 
32 | 
33 | const findTarget = (array, target) => {
34 |     for(let i = 0; i<array.length; i++){
35 |         if(array[i]===target){
36 |             return i;
37 |         }
38 |     }
39 |     return -1;
40 | }


--------------------------------------------------------------------------------
/part1/47.js:
--------------------------------------------------------------------------------
 1 | // hoisting 
 2 | 
 3 | // hello();
 4 | 
 5 | // function hello(){
 6 | //     console.log("hello world");
 7 | // }
 8 | // console.log(hello);
 9 | // const hello = "hello world";
10 | // console.log(hello);


--------------------------------------------------------------------------------
/part1/48.js:
--------------------------------------------------------------------------------
 1 | // functions inside function 
 2 | function app(){
 3 |     const myFunc = () =>{
 4 |         console.log("hello from myFunc")
 5 |     }
 6 |     
 7 |     const addTwo = (num1, num2) =>{
 8 |         return num1 + num2;
 9 |     }
10 | 
11 |     const mul = (num1, num2) => num1* num2;
12 | 
13 |     console.log("inside app");
14 |     myFunc();
15 |     console.log(addTwo(2,3));
16 |     console.log(mul(2,3));
17 | }
18 | app();


--------------------------------------------------------------------------------
/part1/49.js:
--------------------------------------------------------------------------------
 1 | // lexical scope 
 2 | const myVar = "value1";
 3 | 
 4 | function myApp(){
 5 |     
 6 | 
 7 |     function myFunc(){
 8 |         // const myVar = "value59";
 9 |         const myFunc2 = () =>{
10 |             console.log("inside myFunc", myVar);
11 |         }
12 |         myFunc2();
13 |     }
14 | 
15 | 
16 |     console.log(myVar);
17 |     myFunc();
18 | }
19 | 
20 | myApp();


--------------------------------------------------------------------------------
/part1/50.js:
--------------------------------------------------------------------------------
 1 | // block scope vs function scope 
 2 | 
 3 | 
 4 | // let and const are block scope
 5 | // var is function scope 
 6 | 
 7 | // if(true){
 8 | //     var firstName = "harshit";
 9 | //     console.log(firstName);
10 | // }
11 | 
12 | // console.log(firstName);
13 | 
14 | function myApp(){
15 |     if(true){
16 |         var firstName = "harshit";
17 |         console.log(firstName);
18 |     }
19 | 
20 |     if(true){
21 |         console.log(firstName);
22 |     }
23 |     console.log(firstName);
24 | }
25 | 
26 | myApp();


--------------------------------------------------------------------------------
/part1/51.js:
--------------------------------------------------------------------------------
 1 | // default parameters 
 2 | 
 3 | // function addTwo(a,b){
 4 | //     if(typeof b ==="undefined"){
 5 | //         b = 0;
 6 | //     }
 7 | //     return a+b;
 8 | // }
 9 | 
10 | function addTwo(a,b=0){
11 |     return a+b;
12 | }
13 | 
14 | const ans = addTwo(4, 8);
15 | console.log(ans);


--------------------------------------------------------------------------------
/part1/52.js:
--------------------------------------------------------------------------------
 1 | // rest parameters 
 2 | 
 3 | // function myFunc(a,b,...c){
 4 | //     console.log(`a is ${a}`);
 5 | //     console.log(`b is ${b}`);
 6 | //     console.log(`c is`, c);
 7 | // }
 8 | 
 9 | // myFunc(3,4,5,6,7,8,9);
10 | 
11 | function addAll(...numbers){
12 |     let total = 0;
13 |     for(let number of numbers){
14 |         total = total + number;
15 |     }
16 |     return total;
17 | }
18 | 
19 | const ans = addAll(4,5,4,2,10);
20 | console.log(ans);


--------------------------------------------------------------------------------
/part1/53.js:
--------------------------------------------------------------------------------
 1 | // param destructuring 
 2 | 
 3 | // object 
 4 | // react 
 5 | 
 6 | const person = {
 7 |     firstName: "harshit",
 8 |     gender: "male",
 9 |     age: 500
10 | }
11 | 
12 | // function printDetails(obj){
13 | //     console.log(obj.firstName);
14 | //     console.log(obj.gender);
15 | // }
16 | 
17 | 
18 | function printDetails({firstName, gender, age}){
19 |     console.log(firstName);
20 |     console.log(gender);
21 |     console.log(age);
22 | }
23 | 
24 | printDetails(person);


--------------------------------------------------------------------------------
/part1/54.js:
--------------------------------------------------------------------------------
 1 | // callback functions 
 2 | 
 3 | function myFunc2(name){
 4 |     console.log("inside my func 2")
 5 |     console.log(`your name is ${name}`);
 6 | }
 7 | 
 8 | function myFunc(callback){
 9 |     console.log("hello there I am a func and I can..")
10 |     callback("harshit");
11 | }
12 | 
13 | 
14 | myFunc(myFunc2);


--------------------------------------------------------------------------------
/part1/55.js:
--------------------------------------------------------------------------------
 1 | // function returning function 
 2 | 
 3 | function myFunc(){
 4 |     function hello(){
 5 |         return "hello world"
 6 |     }
 7 |     return hello;
 8 | }
 9 | 
10 | const ans = myFunc();
11 | console.log(ans());


--------------------------------------------------------------------------------
/part1/56.js:
--------------------------------------------------------------------------------
 1 | // important array methods 
 2 | 
 3 |  const numbers = [4,2,5,8];
 4 | 
 5 | // function myFunc(number, index){
 6 | //     console.log(`index is ${index} number is ${number}`);
 7 | // }
 8 | 
 9 | // numbers.forEach(function(number,index){
10 | //     console.log(`index is ${index} number is ${number}`);
11 | // });
12 | 
13 | // numbers.forEach(function(number, index){
14 | //     console.log(number*3, index);
15 | // })
16 | 
17 | const users = [
18 |     {firstName: "harshit", age: 23},
19 |     {firstName: "mohit", age: 21},
20 |     {firstName: "nitish", age: 22},
21 |     {firstName: "garima", age: 20},
22 | ]
23 | 
24 | // users.forEach(function(user){
25 | //     console.log(user.firstName);
26 | // });
27 | 
28 | // users.forEach((user, index)=>{
29 | //     console.log(user.firstName, index);
30 | // })
31 | 
32 | // for(let user of users){
33 | //     console.log(user.firstName);
34 | // }
35 | 
36 | 
37 | 


--------------------------------------------------------------------------------
/part1/57.js:
--------------------------------------------------------------------------------
 1 | // map method 
 2 | // const numbers = [3,4,6,1,8];
 3 | 
 4 | // const square = function(number){
 5 | //     return number*number;
 6 | // }
 7 | 
 8 | // const squareNumber = numbers.map((number, index)=>{
 9 | //     return index;
10 | // });
11 | // console.log(squareNumber);
12 | 
13 | const users = [
14 |     {firstName: "harshit", age: 23},
15 |     {firstName: "mohit", age: 21},
16 |     {firstName: "nitish", age: 22},
17 |     {firstName: "garima", age: 20},
18 | ]
19 | 
20 | const userNames = users.map((user)=>{
21 |     return user.firstName;
22 | });
23 | 
24 | console.log(userNames);


--------------------------------------------------------------------------------
/part1/58.js:
--------------------------------------------------------------------------------
 1 | // filter method 
 2 | 
 3 | const numbers = [1,3,2,6,4,8];
 4 | 
 5 | 
 6 | 
 7 | const evenNumbers = numbers.filter((number)=>{
 8 |     return number % 2 === 0;
 9 | });
10 | console.log(evenNumbers);


--------------------------------------------------------------------------------
/part1/59.js:
--------------------------------------------------------------------------------
 1 | // reduce 
 2 | const numbers = [1,2,3,4,5, 10];
 3 | 
 4 | // aim : sum of all the numbers in array 
 5 | 
 6 | // const sum = numbers.reduce((accumulator, currentValue)=>{
 7 | //     return accumulator + currentValue;
 8 | // }, 100);
 9 | 
10 | // console.log(sum);
11 | // accumulator , currentValue,  return 
12 | // 1               2              3 
13 | // 3               3              6
14 | // 6               4              10
15 | // 10              5              15
16 | // 15              10             25
17 | 
18 | 
19 | // const userCart = [
20 | //     {productId: 1, productName: "mobile", price: 12000},
21 | //     {productId: 2, productName: "laptop", price: 22000},
22 | //     {productId: 3, productName: "tv", price: 15000},
23 | // ]
24 | 
25 | // const totalAmount = userCart.reduce((totalPrice, currentProduct)=>{
26 | //     return totalPrice + currentProduct.price;
27 | // }, 0)
28 | 
29 | // console.log(totalAmount);
30 | 
31 | // total price      currentValue     return 
32 | // 0                {}                  12000
33 | // 12000            22000                34000
34 | // 34000            15000                49000


--------------------------------------------------------------------------------
/part1/60.js:
--------------------------------------------------------------------------------
  1 | // sort method 
  2 | // ASCII TABLE 
  3 | //char : ascii value
  4 | 
  5 | 
  6 | // '0' : 48
  7 | // '1' : 49
  8 | // '2' : 50
  9 | // '3' : 51
 10 | // '4' : 52
 11 | // '5' : 53
 12 | // '6' : 54
 13 | // '7' : 55
 14 | // '8' : 56
 15 | // '9' : 57
 16 | 
 17 | 
 18 | // ':' : 58
 19 | // ';' : 59
 20 | // '<' : 60
 21 | // '=' : 61
 22 | // '>' : 62
 23 | // '?' : 63
 24 | // '@' : 64
 25 | 
 26 | 
 27 | // 'A' : 65
 28 | // 'B' : 66
 29 | // 'C' : 67
 30 | // 'D' : 68
 31 | // 'E' : 69
 32 | // 'F' : 70
 33 | // 'G' : 71
 34 | // 'H' : 72
 35 | // 'I' : 73
 36 | // 'J' : 74
 37 | // 'K' : 75
 38 | // 'L' : 76
 39 | // 'M' : 77
 40 | // 'N' : 78
 41 | // 'O' : 79
 42 | // 'P' : 80
 43 | // 'Q' : 81
 44 | // 'R' : 82
 45 | // 'S' : 83
 46 | // 'T' : 84
 47 | // 'U' : 85
 48 | // 'V' : 86
 49 | // 'W' : 87
 50 | // 'X' : 88
 51 | // 'Y' : 89
 52 | // 'Z' : 90
 53 | 
 54 | 
 55 | 
 56 | // '[' : 91
 57 | // '\' : 92
 58 | // ']' : 93
 59 | // '^' : 94
 60 | // '_' : 95
 61 | // '`' : 96
 62 | 
 63 | 
 64 | 
 65 | // 'a' : 97
 66 | // 'b' : 98
 67 | // 'c' : 99
 68 | // 'd' : 100
 69 | // 'e' : 101
 70 | // 'f' : 102
 71 | // 'g' : 103
 72 | // 'h' : 104
 73 | // 'i' : 105
 74 | // 'j' : 106
 75 | // 'k' : 107
 76 | // 'l' : 108
 77 | // 'm' : 109
 78 | // 'n' : 110
 79 | // 'o' : 111
 80 | // 'p' : 112
 81 | // 'q' : 113
 82 | // 'r' : 114
 83 | // 's' : 115
 84 | // 't' : 116
 85 | // 'u' : 117
 86 | // 'v' : 118
 87 | // 'w' : 119
 88 | // 'x' : 120
 89 | // 'y' : 121
 90 | // 'z' : 122
 91 | // '{' : 123
 92 | // '|' : 124
 93 | // '}' : 125
 94 | 
 95 | 
 96 | // sort  
 97 | 
 98 | // 5,9,1200, 400, 3000
 99 | // 5, 9, 400, 1200, 3000 (expected)
100 | 
101 | // ["5", "9", "1210", "410", "3000"] 
102 | // [53, 57, 49, 52, 51]
103 | 
104 | // const userNames = ['harshit', 'abcd', 'mohit', 'nitish', 'aabc', 'ABC', 'Harshit'];
105 | // userNames.sort();
106 | // console.log(userNames);
107 | 
108 | // const numbers = [5,9,1200, 410, 3000];
109 | // numbers.sort((a,b)=>{
110 | //     return b-a;
111 | // });
112 | // numbers.sort((a,b)=>a-b);
113 | // console.log(numbers);
114 | 
115 | // 1200,410 
116 | // a-b ---> 790
117 | // a-b ---> postive (greater than 0) ---> b, a
118 | // 410 , 1200
119 | 
120 | // a-b ---> negative ----> a,b
121 | // 5, 9 ---> -4 
122 | // price lowToHigh HighToLow 
123 | const products = [
124 |     {productId: 1, produceName: "p1",price: 300 },
125 |     {productId: 2, produceName: "p2",price: 3000 },
126 |     {productId: 3, produceName: "p3",price: 200 },
127 |     {productId: 4, produceName: "p4",price: 8000 },
128 |     {productId: 5, produceName: "p5",price: 500 },
129 | ]
130 | 
131 | // lowToHigh
132 | const lowToHigh = products.slice(0).sort((a,b)=>{
133 |     return a.price-b.price
134 | });
135 | 
136 | const highToLow = products.slice(0).sort((a,b)=>{
137 |     return b.price-a.price;
138 | });
139 | 
140 | 
141 | 
142 | const users = [
143 |     {firstName: "harshit", age: 23},
144 |     {firstName: "mohit", age: 21},
145 |     {firstName: "nitish", age: 22},
146 |     {firstName: "garima", age: 20},
147 | ]
148 | 
149 | 
150 | users.sort((a,b)=>{
151 |     if(a.firstName > b.firstName){
152 |         return 1;
153 |     }else{
154 |         return -1;
155 |     }
156 | });
157 | 
158 | console.log(users);


--------------------------------------------------------------------------------
/part1/61.js:
--------------------------------------------------------------------------------
 1 | // find method 
 2 | 
 3 | // const myArray = ["Hello", "catt", "dog", "lion"];
 4 | 
 5 | // function isLength3(string){
 6 | //     return string.length === 3;
 7 | // }
 8 | 
 9 | // const ans = myArray.find((string)=>string.length===3);
10 | // console.log(ans);
11 | 
12 | const users = [
13 |     {userId : 1, userName: "harshit"},
14 |     {userId : 2, userName: "harsh"},
15 |     {userId : 3, userName: "nitish"},
16 |     {userId : 4, userName: "mohit"},
17 |     {userId : 5, userName: "aaditya"},
18 | ];
19 | 
20 | const myUser = users.find((user)=>user.userId===3);
21 | console.log(myUser);


--------------------------------------------------------------------------------
/part1/62.js:
--------------------------------------------------------------------------------
 1 | // every method
 2 | // const numbers = [2,4,6,9,10];
 3 | 
 4 | 
 5 | // const ans = numbers.every((number)=>number%2===0);
 6 | 
 7 | // console.log(ans);
 8 | 
 9 | const userCart = [
10 |     {productId: 1, productName: "mobile", price: 12000},
11 |     {productId: 2, productName: "laptop", price: 22000},
12 |     {productId: 3, productName: "tv", price: 35000},
13 | ]
14 | 
15 | 
16 | const ans = userCart.every((cartItem)=>cartItem.price < 30000);
17 | console.log(ans);


--------------------------------------------------------------------------------
/part1/63.js:
--------------------------------------------------------------------------------
 1 | // some method 
 2 | 
 3 | const numbers = [3,5,11,9];
 4 | 
 5 | // kya ek bhi number esa hai jo even hai 
 6 | // true 
 7 | 
 8 | // const ans = numbers.some((number)=>number%2===0);
 9 | // console.log(ans);
10 | 
11 | const userCart = [
12 |     {productId: 1, productName: "mobile", price: 12000},
13 |     {productId: 2, productName: "laptop", price: 22000},
14 |     {productId: 3, productName: "tv", price: 35000},
15 |     {productId: 3, productName: "macbook", price: 25000},
16 | ]
17 | 
18 | const ans = userCart.some((cartItem)=>cartItem.price > 100000);
19 | console.log(ans);


--------------------------------------------------------------------------------
/part1/64.js:
--------------------------------------------------------------------------------
1 | // fill method 
2 | // value , start , end 
3 | 
4 | // const myArray = new Array(10).fill(0);
5 | // console.log(myArray);
6 | 
7 | const myArray = [1,2,3,4,5,6,7,8];
8 | myArray.fill(0,2,5);
9 | console.log(myArray);


--------------------------------------------------------------------------------
/part1/65.js:
--------------------------------------------------------------------------------
 1 | // splice method 
 2 | // start , delete , insert 
 3 | 
 4 | const myArray = ['item1', 'item2', 'item3'];
 5 | 
 6 | // delete
 7 | // const deletedItem = myArray.splice(1, 2);
 8 | // console.log("delted item", deletedItem);
 9 | // insert 
10 | // myArray.splice(1, 0,'inserted item');
11 | 
12 | // insert and delete 
13 | const deletedItem = myArray.splice(1, 2, "inserted item1", "inserted item2")
14 | console.log("delted item", deletedItem);
15 | console.log(myArray);


--------------------------------------------------------------------------------
/part1/66.js:
--------------------------------------------------------------------------------
 1 | // iterables 
 2 | // jispe hum for of loop laga sakein
 3 | // string , array are iterable 
 4 | 
 5 | // const firstName = "Harshit";
 6 | // for(let char of firstName){
 7 | //     console.log(char);
 8 | // }
 9 | 
10 | const items = ['item1', 'item2', 'item3'];
11 | // for(let item of items){
12 | //     console.log(item);
13 | // }
14 | 
15 | // array like object 
16 | // jinke pas length property hoti hai 
17 | // aur jiko hum index se access kar sakte hai
18 | // example :- string 
19 | 
20 | // const firstName = "harshit";
21 | // console.log(firstName.length);
22 | // console.log(firstName[2]);


--------------------------------------------------------------------------------
/part1/67.js:
--------------------------------------------------------------------------------
 1 | // Sets (it is iterable)
 2 | // store data  
 3 | // sets also have its own methods
 4 | // No index-based access 
 5 | // Order is not guaranteed
 6 | // unique items only (no duplicates allowed)
 7 | // const items = ['item1', 'item2', 'item3'];
 8 | // const numbers = new Set();
 9 | // numbers.add(1);
10 | // numbers.add(2);
11 | // numbers.add(3);
12 | // numbers.add(4);
13 | // numbers.add(5);
14 | // numbers.add(6);
15 | // numbers.add(items);
16 | // if(numbers.has(1)){
17 | //     console.log("1 is present")
18 | // }else{
19 | //     console.log("1 is not present")
20 | // }
21 | // for(let number of numbers){
22 | //     console.log(number);
23 | // }
24 | // const myArray = [1,2,4,4,5,6,5,6];
25 | // const uniqueElements = new Set(myArray);
26 | // let length = 0;
27 | // for(let element of uniqueElements){
28 | //     length++;
29 | // }
30 | 
31 | // console.log(length);


--------------------------------------------------------------------------------
/part1/68.js:
--------------------------------------------------------------------------------
 1 | // Maps
 2 | // map is an iterable
 3 | 
 4 | // store data in ordered fashion
 5 | 
 6 | // store key value pair (like object)
 7 | // duplicate keys are not allowed like objects
 8 | 
 9 | 
10 | // different between maps and objects
11 | 
12 | // objects can only have string or symbol
13 | // as key 
14 | 
15 | // in maps you can use anything as key
16 | // like array, number, string 
17 | 
18 | // object literal 
19 | // key -> string 
20 | // key -> symbol
21 | // const person = {
22 | //     firstName : "harshit",
23 | //     age: 7,
24 | //     1:"one"
25 | // }
26 | // // console.log(person.firstName);
27 | // // console.log(person["firstName"]);
28 | // // console.log(person[1]);
29 | // for(let key in person){
30 | //     console.log(typeof key);
31 | // }
32 | 
33 | // key value pair 
34 | // const person = new Map();
35 | // person.set('firstName', 'Harshit');
36 | // person.set('age', 7);
37 | // person.set(1,'one');
38 | // person.set([1,2,3],'onetwothree');
39 | // person.set({1: 'one'},'onetwothree');
40 | // console.log(person);
41 | // console.log(person.get(1));
42 | // for(let key of person.keys()){
43 | //     console.log(key, typeof key);
44 | // }
45 | // for(let [key, value] of person){
46 | //     // console.log(Array.isArray(key));
47 | //     console.log(key, value)
48 | // }
49 | 
50 | const person1 = {
51 |     id: 1,
52 |     firstName: "harshit"
53 | }
54 | const person2 = {
55 |     id: 2,
56 |     firstName: "harshta"
57 | }
58 | 
59 | const extraInfo = new Map();
60 | extraInfo.set(person1, {age: 8, gender: "male"});
61 | extraInfo.set(person2, {age: 9, gender: "female"});
62 | // console.log(userInfo);
63 | console.log(person1.id);
64 | console.log(extraInfo.get(person1).gender);
65 | console.log(extraInfo.get(person2).gender);
66 | 


--------------------------------------------------------------------------------
/part1/69.js:
--------------------------------------------------------------------------------
 1 | // clone using Object.assign 
 2 | 
 3 | // memory  
 4 | 
 5 | const obj = {
 6 |     key1: "value1",
 7 |     key2: "value2"
 8 | }
 9 | 
10 | // const obj2 = {'key69': "value69",...obj};
11 | // const obj2 = Object.assign({'key69': "value69"}, obj);
12 | // obj.key3 = "value3";
13 | // console.log(obj);
14 | // console.log(obj2);
15 | 
16 | 


--------------------------------------------------------------------------------
/part1/70.js:
--------------------------------------------------------------------------------
 1 | // optional chaining 
 2 | 
 3 | const user  = {
 4 |     firstName: "harshit",
 5 |     // address: {houseNumber: '1234'}
 6 | }
 7 | 
 8 | 
 9 | 
10 | console.log(user?.firstName);
11 | console.log(user?.address?.houseNumber);


--------------------------------------------------------------------------------
/part1/71.js:
--------------------------------------------------------------------------------
 1 | // methods
 2 | // function inside object
 3 | 
 4 | function personInfo(){
 5 |     console.log(`person name is ${this.firstName} and age is ${this.age}`);
 6 | }
 7 | 
 8 | const person1 = {
 9 |     firstName : "harsh",
10 |     age: 8,
11 |     about: personInfo
12 | }
13 | const person2 = {
14 |     firstName : "mohit",
15 |     age: 18,
16 |     about: personInfo
17 | }
18 | const person3 = {
19 |     firstName : "nitish",
20 |     age: 17,
21 |     about: personInfo
22 | }
23 | 
24 | person1.about();
25 | person2.about();
26 | person3.about();
27 | 
28 | 


--------------------------------------------------------------------------------
/part1/72.js:
--------------------------------------------------------------------------------
1 | // console.log(window);
2 | // "use strict";
3 | // function myFunc(){
4 |     
5 | //     console.log(this);
6 | // }
7 | // myFunc();


--------------------------------------------------------------------------------
/part1/73.js:
--------------------------------------------------------------------------------
 1 | function about(hobby, favMusician){
 2 |     console.log(this.firstName, this.age, hobby, favMusician);
 3 | }
 4 | const user1 = {
 5 |     firstName : "harshit",
 6 |     age: 8,   
 7 | }
 8 | const user2 = {
 9 |     firstName : "mohit",
10 |     age: 9,
11 |     
12 | }
13 | 
14 | // apply
15 | // about.apply(user1, ["guitar", "bach"]);
16 | // const func = about.bind(user2, "guitar", "bach");
17 | // func();
18 | 


--------------------------------------------------------------------------------
/part1/74.js:
--------------------------------------------------------------------------------
 1 | 
 2 | const user1 = {
 3 |     firstName : "harshit",
 4 |     age: 8,
 5 |     about: function(){
 6 |         console.log(this.firstName, this.age);
 7 |     }   
 8 | }
 9 | 
10 | // don't do this mistake 
11 | 
12 | // user1.about();
13 | const myFunc = user1.about.bind(user1);
14 | myFunc();


--------------------------------------------------------------------------------
/part1/75.js:
--------------------------------------------------------------------------------
 1 | // arrow functions 
 2 | 
 3 | const user1 = {
 4 |     firstName : "harshit",
 5 |     age: 8,
 6 |     about: () => {
 7 |         console.log(this.firstName, this.age);
 8 |     }   
 9 | }
10 | 
11 | user1.about(user1);


--------------------------------------------------------------------------------
/part1/76.js:
--------------------------------------------------------------------------------
 1 | // const user1 = {
 2 | //     firstName : "harshit",
 3 | //     age: 8,
 4 | //     about: function(){
 5 | //         console.log(this.firstName, this.age);
 6 | //     }   
 7 | // }
 8 | 
 9 | // const user1 = {
10 | //     firstName : "harshit",
11 | //     age: 8,
12 | //     about(){
13 | //         console.log(this.firstName, this.age);
14 | //     }   
15 | // }
16 | 
17 | 
18 | 
19 | user1.about();


--------------------------------------------------------------------------------
/part1/77.js:
--------------------------------------------------------------------------------
 1 | 
 2 | // function (that function create object)
 3 | // 2.) add key value pair 
 4 | // 3.) object ko return krega 
 5 | function createUser(firstName, lastName, email, age, address){
 6 |     const user = {};
 7 |     user.firstName = firstName;
 8 |     user.lastName = lastName;
 9 |     user.email = email;
10 |     user.age = age;
11 |     user.address = address;
12 |     user.about = function(){
13 |         return `${this.firstName} is ${this.age} years old.`;
14 |     };
15 |     user.is18 =  function(){
16 |         return this.age >= 18;
17 |     }
18 |     return user;
19 | }
20 | 
21 | const user1 = createUser('harshit', 'vashsith', 'harshit@gmail.com', 19, "my address");
22 | console.log(user1);
23 | const is18 = user1.is18();
24 | const about = user1.about();
25 | console.log(about);


--------------------------------------------------------------------------------
/part1/78.js:
--------------------------------------------------------------------------------
 1 | const userMethods = {
 2 |     about : function(){
 3 |         return `${this.firstName} is ${this.age} years old.`;
 4 |     },
 5 |     is18 : function(){
 6 |         return this.age >= 18;
 7 |     }
 8 | }
 9 | function createUser(firstName, lastName, email, age, address){
10 |     const user = {};
11 |     user.firstName = firstName;
12 |     user.lastName = lastName;
13 |     user.email = email;
14 |     user.age = age;
15 |     user.address = address;
16 |     user.about = userMethods.about;
17 |     user.is18 = userMethods.is18;
18 |     return user;
19 | }
20 | 
21 | const user1 = createUser('harshit', 'vashsith', 'harshit@gmail.com', 9, "my address");
22 | const user2 = createUser('harsh', 'vashsith', 'harshit@gmail.com', 19, "my address");
23 | const user3 = createUser('mohit', 'vashsitha', 'harshit@gmail.com', 17, "my address");
24 | console.log(user1.about());
25 | console.log(user3.about());


--------------------------------------------------------------------------------
/part1/79.js:
--------------------------------------------------------------------------------
 1 | const userMethods = {
 2 |     about : function(){
 3 |         return `${this.firstName} is ${this.age} years old.`;
 4 |     },
 5 |     is18 : function(){
 6 |         return this.age >= 18;
 7 |     },
 8 |     sing: function(){
 9 |         return 'toon na na na la la ';
10 |     }
11 | }
12 | function createUser(firstName, lastName, email, age, address){
13 |     const user = Object.create(userMethods);// {}
14 |     user.firstName = firstName;
15 |     user.lastName = lastName;
16 |     user.email = email;
17 |     user.age = age;
18 |     user.address = address;
19 |     return user;
20 | }
21 | 
22 | const user1 = createUser('harshit', 'vashsith', 'harshit@gmail.com', 9, "my address");
23 | const user2 = createUser('harsh', 'vashsith', 'harshit@gmail.com', 19, "my address");
24 | const user3 = createUser('mohit', 'vashsitha', 'harshit@gmail.com', 17, "my address");
25 | console.log(user1);
26 | console.log(user1.about());
27 | // console.log(user3.sing());


--------------------------------------------------------------------------------
/part1/80.js:
--------------------------------------------------------------------------------
 1 | const obj1 = {
 2 |     key1: "value1",
 3 |     key2: "value2"
 4 | }
 5 | 
 6 | // __proto__
 7 | 
 8 | // offical ecmascript documentation 
 9 | 
10 | // [[prototype]]
11 | 
12 | // __proto__ , [[prototype]]
13 | 
14 | 
15 | 
16 | // prototype    
17 | 
18 | const obj2 = Object.create(obj1); // {}
19 | // there is one more way to create empty object
20 | obj2.key3 = "value3";
21 | // obj2.key2 = "unique";
22 | console.log(obj2);
23 | 
24 | console.log(obj2.__proto__);
25 | 
26 | 


--------------------------------------------------------------------------------
/part1/81.js:
--------------------------------------------------------------------------------
 1 | function hello(){
 2 |     console.log("hello world");
 3 | }
 4 | 
 5 | // javascript function ===> function  + object
 6 | 
 7 | // console.log(hello.name);
 8 | 
 9 | // you can add your own properties 
10 | // hello.myOwnProperty = "very unique value";
11 | // console.log(hello.myOwnProperty);
12 | 
13 | // name property ---> tells function name;
14 | 
15 | // function provides more usefull properties.
16 | 
17 | 
18 | // console.log(hello.prototype); // {}
19 | 
20 | // only functions provide prototype property
21 | 
22 | // hello.prototype.abc = "abc";
23 | // hello.prototype.xyz = "xyz";
24 | // hello.prototype.sing = function(){
25 | //     return "lalalla";
26 | // };
27 | // console.log(hello.prototype.sing());


--------------------------------------------------------------------------------
/part1/82.js:
--------------------------------------------------------------------------------
 1 | // const userMethods = {
 2 | //     about : function(){
 3 | //         return `${this.firstName} is ${this.age} years old.`;
 4 | //     },
 5 | //     is18 : function(){
 6 | //         return this.age >= 18;
 7 | //     },
 8 | //     sing: function(){
 9 | //         return 'toon na na na la la ';
10 | //     }
11 | // }
12 | function createUser(firstName, lastName, email, age, address){
13 |     const user = Object.create(createUser.prototype);// {}
14 |     user.firstName = firstName;
15 |     user.lastName = lastName;
16 |     user.email = email;
17 |     user.age = age;
18 |     user.address = address;
19 |     return user;
20 | }
21 | createUser.prototype.about = function(){
22 |     return `${this.firstName} is ${this.age} years old.`;
23 | };
24 | createUser.prototype.is18 = function (){
25 |     return this.age >= 18; 
26 | }
27 | createUser.prototype.sing = function (){
28 |     return "la la la la ";
29 | }
30 | 
31 | 
32 | const user1 = createUser('harshit', 'vashsith', 'harshit@gmail.com', 18, "my address");
33 | const user2 = createUser('harsh', 'vashsith', 'harshit@gmail.com', 19, "my address");
34 | const user3 = createUser('mohit', 'vashsitha', 'harshit@gmail.com', 17, "my address");
35 | console.log(user1);
36 | console.log(user1.is18());


--------------------------------------------------------------------------------
/part1/83.js:
--------------------------------------------------------------------------------
 1 | // new keyword 
 2 | // 1.) this = {}
 3 | // 2.) return {} 
 4 | //
 5 | 
 6 | // __proto__ 
 7 | // // official ecmascript document
 8 | // [[prototype]]
 9 | 
10 | // constructor function 
11 | function CreateUser(firstName, lastName, email, age, address){
12 |     this.firstName = firstName;
13 |     this.lastName = lastName;
14 |     this.email = email;
15 |     this.age = age;
16 |     this.address = address;
17 | }
18 | CreateUser.prototype.about = function(){
19 |     return `${this.firstName} is ${this.age} years old.`;
20 | };
21 | CreateUser.prototype.is18 = function (){
22 |     return this.age >= 18; 
23 | }
24 | CreateUser.prototype.sing = function (){
25 |     return "la la la la ";
26 | }
27 | 
28 | 
29 | const user1 = new CreateUser('harshit', 'vashsith', 'harshit@gmail.com', 18, "my address");
30 | const user2 = new CreateUser('harsh', 'vashsith', 'harshit@gmail.com', 19, "my address");
31 | const user3 = new CreateUser('mohit', 'vashsitha', 'harshit@gmail.com', 17, "my address");
32 | console.log(user1);
33 | console.log(user1.is18());


--------------------------------------------------------------------------------
/part1/84.js:
--------------------------------------------------------------------------------
 1 | function CreateUser(firstName, lastName, email, age, address){
 2 |     this.firstName = firstName;
 3 |     this.lastName = lastName;
 4 |     this.email = email;
 5 |     this.age = age;
 6 |     this.address = address;
 7 | }
 8 | CreateUser.prototype.about = function(){
 9 |     return `${this.firstName} is ${this.age} years old.`;
10 | };
11 | CreateUser.prototype.is18 = function (){
12 |     return this.age >= 18; 
13 | }
14 | CreateUser.prototype.sing = function (){
15 |     return "la la la la ";
16 | }
17 | 
18 | 
19 | const user1 = new CreateUser('harshit', 'vashsith', 'harshit@gmail.com', 18, "my address");
20 | const user2 = new CreateUser('harsh', 'vashsith', 'harshit@gmail.com', 19, "my address");
21 | const user3 = new CreateUser('mohit', 'vashsitha', 'harshit@gmail.com', 17, "my address");
22 | 
23 | for(let key in user1){
24 |     // console.log(key);
25 |     if(user1.hasOwnProperty(key)){
26 |         console.log(key);
27 |     }
28 | 
29 | }
30 | 


--------------------------------------------------------------------------------
/part1/85.js:
--------------------------------------------------------------------------------
 1 | // let numbers = [1,2,3];
 2 | 
 3 | // // console.log(Object.getPrototypeOf(numbers));
 4 | // console.log(Array.prototype);
 5 | // console.log(numbers);
 6 | 
 7 | // function hello(){
 8 | //     console.log("hello");
 9 | // }
10 | 


--------------------------------------------------------------------------------
/part1/86.js:
--------------------------------------------------------------------------------
 1 | // 2015 / es6 
 2 | // class keyword 
 3 | // class are fake
 4 | 
 5 | class CreateUser{
 6 |     constructor(firstName, lastName, email, age, address){
 7 |         this.firstName = firstName;
 8 |         this.lastName = lastName;
 9 |         this.email = email;
10 |         this.age = age;
11 |         this.address = address;
12 |     }
13 | 
14 |     about(){
15 |         return `${this.firstName} is ${this.age} years old.`;
16 |     }
17 |     is18(){
18 |         return this.age >= 18;
19 |     }
20 |     sing(){
21 |         return "la la la la ";
22 |     }
23 | 
24 | }
25 | 
26 | 
27 | const user1 = new CreateUser('harshit', 'vashsith', 'harshit@gmail.com', 18, "my address");
28 | const user2 = new CreateUser('harsh', 'vashsith', 'harshit@gmail.com', 19, "my address");
29 | const user3 = new CreateUser('mohit', 'vashsitha', 'harshit@gmail.com', 17, "my address");
30 | // console.log(Object.getPrototypeOf(user1));
31 | 


--------------------------------------------------------------------------------
/part1/87.js:
--------------------------------------------------------------------------------
 1 | class Animal {
 2 |     constructor(name, age){
 3 |         this.name = name;
 4 |         this.age = age;
 5 |     }
 6 | 
 7 |     eat(){
 8 |         return `${this.name} is eating`;
 9 |     }
10 | 
11 |     isSuperCute(){
12 |         return this.age <= 1;
13 |     }
14 | 
15 |     isCute(){
16 |         return true;
17 |     }
18 | }
19 | 
20 | class Dog extends Animal{
21 |     
22 | } 
23 | 
24 | const tommy = new Dog("tommy", 3);
25 | console.log(tommy);
26 | console.log(tommy.isCute());
27 | 


--------------------------------------------------------------------------------
/part1/88.js:
--------------------------------------------------------------------------------
 1 | // super 
 2 | class Animal {
 3 |     constructor(name, age){
 4 |         this.name = name;
 5 |         this.age = age;
 6 |     }
 7 | 
 8 |     eat(){
 9 |         return `${this.name} is eating`;
10 |     }
11 | 
12 |     isSuperCute(){
13 |         return this.age <= 1;
14 |     }
15 | 
16 |     isCute(){
17 |         return true;
18 |     }
19 | }
20 | 
21 | class Dog extends Animal{
22 |     constructor(name, age, speed){
23 |         super(name,age);
24 |         this.speed = speed;
25 |     }
26 | 
27 |     run(){
28 |         return `${this.name} is running at ${this.speed}kmph`
29 |     }
30 | } 
31 | // object / instance 
32 | const tommy = new Dog("tommy", 3,45);
33 | console.log(tommy.run());
34 | 


--------------------------------------------------------------------------------
/part1/89.js:
--------------------------------------------------------------------------------
 1 | // same method in subclass
 2 | class Animal {
 3 |     constructor(name, age){
 4 |         this.name = name;
 5 |         this.age = age;
 6 |     }
 7 | 
 8 |     eat(){
 9 |         return `${this.name} is eating`;
10 |     }
11 | 
12 |     isSuperCute(){
13 |         return this.age <= 1;
14 |     }
15 | 
16 |     isCute(){
17 |         return true;
18 |     }
19 | }
20 | 
21 | class Dog extends Animal{
22 |     constructor(name, age, speed){
23 |         super(name,age);
24 |         this.speed = speed;
25 |     }
26 | 
27 |     eat(){
28 |         return `Modified Eat : ${this.name} is eating`
29 |     }
30 | 
31 |     run(){
32 |         return `${this.name} is running at ${this.speed}kmph`
33 |     }
34 | } 
35 | // object / instance 
36 | // const tommy = new Dog("tommy", 3,45);
37 | // console.log(tommy.run());
38 | // console.log(tommy.eat());
39 | 
40 | const animal1 = new Animal('sheru', 2);
41 | console.log(animal1.eat());


--------------------------------------------------------------------------------
/part1/90.js:
--------------------------------------------------------------------------------
 1 | // getter and setters 
 2 | class Person{
 3 |     constructor(firstName, lastName, age){
 4 |         this.firstName = firstName;
 5 |         this.lastName = lastName;
 6 |         this.age = age;
 7 |     }
 8 |     get fullName(){
 9 |         return `${this.firstName} ${this.lastName}`
10 |     }
11 |     set fullName(fullName){
12 |         const [firstName, lastName] = fullName.split(" ");
13 |         this.firstName = firstName;
14 |         this.lastName = lastName;
15 |     }
16 | }
17 | 
18 | 
19 | const person1 = new Person("harshit", "sharma", 5);
20 | // console.log(person1.fullName());
21 | // console.log(person1.fullName);
22 | // person1.fullName = "mohit vashistha";
23 | // console.log(person1);
24 | 


--------------------------------------------------------------------------------
/part1/91.js:
--------------------------------------------------------------------------------
 1 | // static methods and properties
 2 | class Person{
 3 |     constructor(firstName, lastName, age){
 4 |         this.firstName = firstName;
 5 |         this.lastName = lastName;
 6 |         this.age = age;
 7 |     }
 8 |     static classInfo(){
 9 |         return 'this is person class';
10 |     }
11 |     static desc = "static property";
12 |     get fullName(){
13 |         return `${this.firstName} ${this.lastName}`
14 |     }
15 |     set fullName(fullName){
16 |         const [firstName, lastName] = fullName.split(" ");
17 |         this.firstName = firstName;
18 |         this.lastName = lastName;
19 |     }
20 |     eat(){
21 |         return `${this.firstName} is eating`;
22 |     }
23 | 
24 |     isSuperCute(){
25 |         return this.age <= 1;
26 |     }
27 | 
28 |     isCute(){
29 |         return true;
30 |     }
31 | }
32 | 
33 | const person1 = new Person("harshit", "sharma", 8);
34 | // // console.log(person1.eat());
35 | // const info = Person.classInfo();
36 | // console.log(person1.desc);
37 | // console.log(info);


--------------------------------------------------------------------------------
/part2/dom-tutorial/102.js:
--------------------------------------------------------------------------------
1 | // DOM 
2 | // document object model 
3 | // overview 
4 | // how to use 
5 | // deep study
6 | // console.dir(document);


--------------------------------------------------------------------------------
/part2/dom-tutorial/103.js:
--------------------------------------------------------------------------------
1 | // select element using get element by id
2 |  
3 | const mainHeading = document.getElementById("main-heading");
4 | console.log(mainHeading);


--------------------------------------------------------------------------------
/part2/dom-tutorial/104.js:
--------------------------------------------------------------------------------
1 | // select element using query selector
2 | 
3 | // const mainHeading = document.getElementById("main-heading");
4 | const mainHeading = document.querySelector("#main-heading");
5 | const header = document.querySelector(".header");
6 | const navItem = document.querySelectorAll(".nav-item")
7 | console.log(navItem);


--------------------------------------------------------------------------------
/part2/dom-tutorial/105.js:
--------------------------------------------------------------------------------
1 | // change text 
2 | // textContent and innerText
3 | // const mainHeading = document.getElementById("main-heading");
4 | // console.log(mainHeading.innerText);
5 | // mainHeading.textContent = "This is something else";
6 | // console.log(mainHeading.textContent);


--------------------------------------------------------------------------------
/part2/dom-tutorial/106.js:
--------------------------------------------------------------------------------
1 | // change the styles of elements
2 | const mainHeading = document.querySelector("div.headline h2");
3 | console.log(mainHeading.style);
4 | mainHeading.style.backgroundColor = "blue";
5 | mainHeading.style.border = "20px solid green";
6 | 


--------------------------------------------------------------------------------
/part2/dom-tutorial/107.js:
--------------------------------------------------------------------------------
1 | // get and set attrubutes
2 | const link = document.querySelector("a");
3 | console.log(link.getAttribute("href").slice(1));
4 | // link.setAttribute("href", "https://codprog.com");
5 | // console.log(link.getAttribute("href"));
6 | 
7 | // const inputElement = document.querySelector(".form-todo input");
8 | // console.log(inputElement.getAttribute("type"));
9 | 


--------------------------------------------------------------------------------
/part2/dom-tutorial/108.js:
--------------------------------------------------------------------------------
1 | // get multiple elements using getElements by class name 
2 | // get multiple elements items using querySelectorAll
3 | // const navItems = document.getElementsByClassName("nav-item"); // HTMLCollection
4 | // console.log(navItems);
5 | // console.log(Array.isArray(navItems));
6 | // const navItems = document.querySelectorAll(".nav-item"); // NodeList
7 | // console.log(navItems[1]);


--------------------------------------------------------------------------------
/part2/dom-tutorial/109.js:
--------------------------------------------------------------------------------
 1 | // get multiple elements using getElements by class name 
 2 | // get multiple elements items using querySelectorAll
 3 | // array like object ---> indexing, length property 
 4 | // let navItems = document.getElementsByTagName("a"); // HTMLCollection
 5 | // console.log(navItems);
 6 | // we can't use forEach method to iterate through HTMLCollection
 7 | // simple for loop 
 8 | // for of loop 
 9 | // forEach 
10 | 
11 | // for(let i=0; i< navItems.length; i++){
12 | //     // console.log(navItems[i]);
13 | //     const navItem = navItems[i];
14 | //     navItem.style.backgroundColor = "#fff";
15 | //     navItem.style.color = "green";
16 | //     navItem.style.fontWeight = "bold";
17 | 
18 | // }
19 | 
20 | // for(let navItem of navItems){
21 | //     navItem.style.backgroundColor = "#fff";
22 | //     navItem.style.color = "green";
23 | //     navItem.style.fontWeight = "bold";
24 | // }
25 | 
26 | // navItems = Array.from(navItems);
27 | // console.log(Array.isArray(navItems));
28 | // navItems.forEach((navItem)=>{
29 | //     navItem.style.backgroundColor = "#fff";
30 | //     navItem.style.color = "green";
31 | //     navItem.style.fontWeight = "bold";
32 | // })
33 | 
34 | // console.log(Array.isArray(navItems));
35 | // const navItems = document.querySelectorAll(".nav-item"); // NodeList
36 | // console.log(navItems[1]);
37 | 
38 | // let navItems = document.querySelectorAll("a");
39 | // navItems = Array.from(navItems);
40 | // console.log(Array.isArray(navItems));
41 | // simple for loop 
42 | // for of loop 
43 | // forEach 
44 | // for(let i=0; i< navItems.length; i++){
45 | //     // console.log(navItems[i]);
46 | //     const navItem = navItems[i];
47 | //     navItem.style.backgroundColor = "#fff";
48 | //     navItem.style.color = "green";
49 | //     navItem.style.fontWeight = "bold";
50 | 
51 | // }
52 | 
53 | // for(let navItem of navItems){
54 | //     navItem.style.backgroundColor = "#fff";
55 | //     navItem.style.color = "green";
56 | //     navItem.style.fontWeight = "bold";
57 | // }
58 | // navItems.forEach((navItem)=>{
59 | //     navItem.style.backgroundColor = "#fff";
60 | //     navItem.style.color = "green";
61 | //     navItem.style.fontWeight = "bold";
62 | // })
63 | // console.log(navItems);


--------------------------------------------------------------------------------
/part2/dom-tutorial/110.js:
--------------------------------------------------------------------------------
1 | // innerHtML 
2 | const headline = document.querySelector(".headline");
3 | // console.log(headline.innerHTML);
4 | // headline.innerHTML = "<h1>Inner html changed </h1>";
5 | // headline.innerHTML += "<button class= \"btn\"> Learn More </button>" 
6 | // console.log(headline.innerHTML);
7 | 


--------------------------------------------------------------------------------
/part2/dom-tutorial/111.js:
--------------------------------------------------------------------------------
 1 | // const rootNode = document.getRootNode();
 2 | // const htmlElementNode = rootNode.childNodes[0];
 3 | // // console.log(htmlElementNode.childNodes); NodeList(3) [head, text, body]
 4 | // const headElementNode = htmlElementNode.childNodes[0];
 5 | // const textNode1 = htmlElementNode.childNodes[1];
 6 | // const bodyElementNode = htmlElementNode.childNodes[2];
 7 | // console.log(headElementNode.childNodes);
 8 | // sibling relation 
 9 | // const h1 = document.querySelector("h1");
10 | // const body = h1.parentNode.parentNode;
11 | // body.style.color = "#efefef";
12 | // body.style.backgroundColor = "#333"
13 | // const body = document.body
14 | // body.style.color = "#efefef";
15 | // body.style.backgroundColor = "#333"
16 | // const head = document.querySelector("head");
17 | // // console.log(head);
18 | // const title = head.querySelector("title");
19 | // console.log(title.childNodes);
20 | const container = document.querySelector(".container");
21 | console.log(container.children);


--------------------------------------------------------------------------------
/part2/dom-tutorial/112.js:
--------------------------------------------------------------------------------
 1 | // const sectionTodo = document.querySelector(".section-todo");
 2 | // console.log(sectionTodo.classList);
 3 | // sectionTodo.classList.add('bg-dark');
 4 | // sectionTodo.classList.remove("container");
 5 | // const ans = sectionTodo.classList.contains("container");
 6 | // console.log(ans);
 7 | // sectionTodo.classList.toggle("bg-dark");
 8 | // sectionTodo.classList.toggle("bg-dark");
 9 | const header = document.querySelector(".header");
10 | 
11 | // header.classList.add("bg-dark");
12 | console.log(header.classList);
13 | 


--------------------------------------------------------------------------------
/part2/dom-tutorial/113.js:
--------------------------------------------------------------------------------
 1 | // Add new HTML elements to page 
 2 | 
 3 | 
 4 | // innerHTML to add html element
 5 | 
 6 | const todoList = document.querySelector(".todo-list");
 7 | // console.log(todoList.innerHTML)
 8 | // todoList.innerHTML = "<li>New Todo 2 </li>"
 9 | // todoList.innerHTML += "<li>New Todo </li>";
10 | // todoList.innerHTML += "<li>teach students </li>";
11 | 
12 | // when you should use it , when you should not
13 | todoList.insertAdjacentElement("afterbegin", '<li>Hi</li>')


--------------------------------------------------------------------------------
/part2/dom-tutorial/114.js:
--------------------------------------------------------------------------------
 1 | // document.createElement()
 2 | // append
 3 | // prepend
 4 | // remove
 5 | // const newTodoItem = document.createElement("li");
 6 | // // const newTodoItemText = document.createTextNode("Teach students");
 7 | // newTodoItem.textContent = "Teach students";
 8 | // const todoList = document.querySelector(".todo-list");
 9 | // todoList.prepend(newTodoItem);
10 | // console.log(newTodoItem);
11 | // const todo1 = document.querySelector('.todo-list li');
12 | // todo1.remove();
13 | // console.log(todo1)
14 | 
15 | // before 
16 | // after
17 | 
18 | // const newTodoItem = document.createElement("li");
19 | // newTodoItem.textContent = "Teach students";
20 | // const todoList = document.querySelector(".todo-list");
21 | // todoList.after(newTodoItem);


--------------------------------------------------------------------------------
/part2/dom-tutorial/115.js:
--------------------------------------------------------------------------------
1 | // elem.insertAdjacentHTML(where, html)
2 | // beforebegin
3 | // afterbegin;
4 | // beforeend;
5 | // afterend;
6 | 
7 | // const todoList = document.querySelector(".todo-list");
8 | // todoList.insertAdjacentHTML("beforeend", "<li>Teach Students </li>");


--------------------------------------------------------------------------------
/part2/dom-tutorial/116.js:
--------------------------------------------------------------------------------
1 | // clone nodes
2 | // const ul = document.querySelector(".todo-list");
3 | // const li = document.createElement("li");
4 | // li.textContent = "new todo";
5 | // const li2 = li.cloneNode(true);
6 | // ul.append(li);
7 | // ul.prepend(li2);
8 | 


--------------------------------------------------------------------------------
/part2/dom-tutorial/117.js:
--------------------------------------------------------------------------------
 1 | // some old methods to support poor IE
 2 | // appendChild;
 3 | // insertBefore;
 4 | // replaceChild;
 5 | // removeChild
 6 | // const ul = document.querySelector(".todo-list");
 7 | 
 8 | // new element
 9 | // const li = document.createElement("li");
10 | // li.textContent = "new todo";
11 | 
12 | 
13 | // const referenceNode = document.querySelector(".first-todo");
14 | 
15 | // ul.removeChild(referenceNode);


--------------------------------------------------------------------------------
/part2/dom-tutorial/118.js:
--------------------------------------------------------------------------------
1 | const ul = document.querySelector(".todo-list");
2 | const listItems = ul.getElementsByTagName("li");
3 | 
4 | const sixthLi = document.createElement("li");
5 | sixthLi.textContent = "item 6";
6 | 
7 | ul.append(sixthLi);
8 | console.log(listItems);


--------------------------------------------------------------------------------
/part2/dom-tutorial/119.js:
--------------------------------------------------------------------------------
1 | // how to get the dimension of element
2 | // height width 
3 | const sectionTodo = document.querySelector(".section-todo");
4 | const info = sectionTodo.getBoundingClientRect();
5 | console.log(info);
6 | 
7 | 


--------------------------------------------------------------------------------
/part2/dom-tutorial/120.js:
--------------------------------------------------------------------------------
 1 | // intro to events
 2 | // click 
 3 | // event add karne ke 3 tarike hai 
 4 | // 1.) 
 5 | const btn = document.querySelector(".btn-headline");
 6 | // method --- addEventListener
 7 | // function clickMe(){
 8 | //     console.log("you clicked me !!!!!");
 9 | // }
10 | // btn.addEventListener("click", function(){
11 | //     console.log("you clicked me !!!!");
12 | // });
13 | 
14 | 
15 | // btn.addEventListener("click", ()=>{
16 | //     console.log("arrow function !!!")
17 | // });


--------------------------------------------------------------------------------
/part2/dom-tutorial/121.js:
--------------------------------------------------------------------------------
1 | // this keyword
2 | const btn = document.querySelector(".btn-headline");
3 | 
4 | btn.addEventListener("click",function(){
5 |     console.log("you clicked me !!!!");
6 |     console.log("value of this")
7 |     console.log(this);
8 | });


--------------------------------------------------------------------------------
/part2/dom-tutorial/122.js:
--------------------------------------------------------------------------------
 1 | const allButtons = document.querySelectorAll(".my-buttons button");
 2 | 
 3 | 
 4 | // for(let button of allButtons){
 5 | //     button.addEventListener("click", function(){
 6 | //         console.log(this);
 7 | //     })
 8 | // }
 9 | 
10 | // for(let i = 0 ; i< allButtons.length; i++){
11 | //     allButtons[i].addEventListener("click", function(){
12 | //         console.log(this);
13 | //     })
14 | // }
15 | // allButtons.forEach(function(button){
16 | //     button.addEventListener("click", function(){
17 | //         console.log(this);
18 | //         });
19 | // })


--------------------------------------------------------------------------------
/part2/dom-tutorial/123.js:
--------------------------------------------------------------------------------
 1 | // event object 
 2 | // const firstButton = document.querySelector("#one");
 3 | 
 4 | 
 5 | 
 6 | // firstButton.addEventListener("click", function(event){
 7 | //     console.log(event);
 8 | // })
 9 | 
10 | // jab bhi mai kisi bhi element pe event listener add hoga 
11 | // js Engine --- line by line execute karta hai 
12 | // browser ---- js Engine + extra features 
13 | // browser ----- js Engine + WebApi
14 | 
15 | // jab browser ko pata chala ki user ne event perform kia 
16 | // jo hum listen kar rahe hai 
17 | // browser ----- 2 
18 | // 1.) callback function hai vo js Engine ko degi ...... 
19 | // 2.)  callback function ke sath browser jo event hua hai uski information bhi dega
20 | // ye info hamein ek object ke form mai milegi 
21 | 
22 | 
23 | const allButtons = document.querySelectorAll(".my-buttons button");
24 | 
25 | 
26 | for(let button of allButtons){
27 |     button.addEventListener("click",(e)=>{
28 |         console.log(e.currentTarget);
29 |     })
30 | }


--------------------------------------------------------------------------------
/part2/dom-tutorial/124.js:
--------------------------------------------------------------------------------
 1 | 
 2 | console.log("script start !!!!!")
 3 | const allButtons = document.querySelectorAll(".my-buttons button");
 4 | 
 5 | allButtons.forEach((button)=>{
 6 |     button.addEventListener("click", (e)=>{
 7 |         let num = 0;
 8 |         for(let i = 0; i<= 1000000000; i++){
 9 |             num += i;
10 |         }
11 |         console.log(e.currentTarget.textContent, num);
12 |     })
13 | })
14 | 
15 | let outerVar = 0;
16 | for(let i = 0; i<= 100000000; i++){
17 |     outerVar += i;
18 | }
19 | console.log("value of outer variable is ", outerVar);
20 | console.log("script end !!!!!")


--------------------------------------------------------------------------------
/part2/dom-tutorial/125.js:
--------------------------------------------------------------------------------
 1 | // little practice with click event
 2 | const allButtons = document.querySelectorAll(".my-buttons button")
 3 | // console.log(allButtons.length);
 4 | 
 5 | allButtons.forEach(button =>{
 6 |     button.addEventListener("click", (e)=>{
 7 |         // console.log(e.target);
 8 |         e.target.style.backgroundColor = "yellow";
 9 |         e.target.style.color = "#333";
10 |     })
11 | })


--------------------------------------------------------------------------------
/part2/dom-tutorial/126.js:
--------------------------------------------------------------------------------
 1 | const mainButton = document.querySelector("button");
 2 | const body = document.body;
 3 | const currentColor = document.querySelector(".current-color");
 4 | function randomColorGenerator(){
 5 |     const red = Math.floor(Math.random() * 256);
 6 |     const green = Math.floor(Math.random() * 256);
 7 |     const blue = Math.floor(Math.random() * 256);
 8 |     const randomColor = `rgb(${red}, ${green}, ${blue})`
 9 |     return randomColor;
10 | }
11 | 
12 | mainButton.addEventListener("click",()=>{
13 |     const randomColor = randomColorGenerator();
14 |     body.style.backgroundColor = randomColor;
15 |     currentColor.textContent = randomColor;
16 | })


--------------------------------------------------------------------------------
/part2/dom-tutorial/127.js:
--------------------------------------------------------------------------------
 1 | // keypress event
 2 | // mouseover event
 3 | // const body = document.body;
 4 | 
 5 | // body.addEventListener("keypress", (e) => {
 6 | //   console.log(e.key);
 7 | // });
 8 | // const mainButton = document.querySelector(".btn-headline");
 9 | // console.log(mainButton);
10 | // mainButton.addEventListener("mouseover", () => {
11 | //   console.log("mouseover event ocurred!!!");
12 | // });
13 | 
14 | // mainButton.addEventListener("mouseleave", () => {
15 | //   console.log("mouseleave event ocurred!!!");
16 | // });
17 | 


--------------------------------------------------------------------------------
/part2/dom-tutorial/128.js:
--------------------------------------------------------------------------------
 1 | // console.log("hello world");
 2 | 
 3 | const grandparent = document.querySelector(".grandparent");
 4 | // const parent = document.querySelector(".parent");
 5 | // const child = document.querySelector(".child");
 6 | 
 7 | // capturing events
 8 | // child.addEventListener(
 9 | //   "click",
10 | //   () => {
11 | //     console.log("capture !!!! child");
12 | //   },
13 | //   true
14 | // );
15 | // parent.addEventListener(
16 | //   "click",
17 | //   () => {
18 | //     console.log("capture !!!! parent");
19 | //   },
20 | //   true
21 | // );
22 | // grandparent.addEventListener(
23 | //   "click",
24 | //   () => {
25 | //     console.log("capture !!!! grandparent");
26 | //   },
27 | //   true
28 | // );
29 | // document.body.addEventListener(
30 | //   "click",
31 | //   () => {
32 | //     console.log("capture !!!! document.body");
33 | //   },
34 | //   true
35 | // );
36 | 
37 | ///// not capture
38 | 
39 | // child.addEventListener("click", () => {
40 | //   console.log("bubble child");
41 | // });
42 | // parent.addEventListener("click", () => {
43 | //   console.log("bubble parent");
44 | // });
45 | // grandparent.addEventListener("click", () => {
46 | //   console.log("bubble grandparent");
47 | // });
48 | // document.body.addEventListener("click", () => {
49 | //   console.log("bubble document.body");
50 | // });
51 | 
52 | // event delegation
53 | // grandparent.addEventListener("click", (e) => {
54 | //   console.log(e.target);
55 | // });
56 | 


--------------------------------------------------------------------------------
/part2/dom-tutorial/129.js:
--------------------------------------------------------------------------------
 1 | const todoForm = document.querySelector(".form-todo");
 2 | const todoInput = document.querySelector(".form-todo input[type='text']");
 3 | const todoList = document.querySelector(".todo-list");
 4 | 
 5 | todoForm.addEventListener("submit", (e) => {
 6 |   e.preventDefault();
 7 |   const newTodoText = todoInput.value;
 8 |   const newLi = document.createElement("li");
 9 |   const newLiInnerHtml = `
10 |         <span class="text">${newTodoText}</span>
11 |         <div class="todo-buttons">
12 |             <button class="todo-btn done">Done</button>
13 |             <button class="todo-btn remove">Remove</button>
14 |         </div>`;
15 |   newLi.innerHTML = newLiInnerHtml;
16 |   todoList.append(newLi);
17 |   todoInput.value = "";
18 | });
19 | 
20 | todoList.addEventListener("click", (e) => {
21 |   // check if user clicked on done button
22 |   if (e.target.classList.contains("remove")) {
23 |     const targetedLi = e.target.parentNode.parentNode;
24 |     targetedLi.remove();
25 |   }
26 |   if (e.target.classList.contains("done")) {
27 |     const liSpan = e.target.parentNode.previousElementSibling;
28 |     liSpan.style.textDecoration = "line-through";
29 |   }
30 | });
31 | 


--------------------------------------------------------------------------------
/part2/dom-tutorial/bg-image.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/harshitvee/javascript-beginning-to-mastery/de37f5efc715985aff160c7886778da46da1db7c/part2/dom-tutorial/bg-image.jpg


--------------------------------------------------------------------------------
/part2/dom-tutorial/clickEvent.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <!-- <script src="./122.js" defer></script> -->
 8 |     <!-- <script src="./123.js" defer></script> -->
 9 |     <!-- <script src="./124.js" defer></script> -->
10 |     <script src="./125.js" defer></script>
11 |     <title>click event</title>
12 | </head>
13 | <body>
14 |     <div class="my-buttons">
15 |         <button id="one">My Button one</button>
16 |         <button id="two">My Button Two</button>
17 |         <button id="three">My Button three</button>
18 |     </div>
19 |     
20 | </body>
21 | </html>


--------------------------------------------------------------------------------
/part2/dom-tutorial/event-bubbling-capturing.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <link rel="stylesheet" href="./evt-bcd.css" />
 8 |     <script src="./128.js" defer></script>
 9 |     <title>Event Bubbling | Capturing | delegation</title>
10 |   </head>
11 |   <body>
12 |     <main>
13 |       <div class="grandparent box">
14 |         Grandparent
15 |         <div class="parent box">
16 |           Parent
17 |           <div class="child box">Child</div>
18 |         </div>
19 |       </div>
20 |     </main>
21 |   </body>
22 | </html>
23 | 


--------------------------------------------------------------------------------
/part2/dom-tutorial/evt-bcd.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |   padding:0;
 3 |   margin: 0;
 4 |   box-sizing: border-box;
 5 | }
 6 | 
 7 | body{
 8 |   font-family:arial,sans-serif;
 9 | }
10 | 
11 | 
12 | main{
13 |   display:flex;
14 |   justify-content:center;
15 |   align-items: center;
16 |   height:100vh;
17 | }
18 | 
19 | .box{
20 |   min-width:100px;
21 |   min-height: 100px;
22 |   padding:5rem;
23 |   color:white;
24 |   font-weight: bold;
25 |   font-size: 2rem;
26 |   cursor: pointer;
27 | }
28 | 
29 | .grandparent{
30 |   background: #b1d4e0;
31 |   color:black;
32 | }
33 | 
34 | .parent{
35 |   background: #145da0;
36 | }
37 | 
38 | .child{
39 |   background: #0c2d48;
40 | }
41 | 
42 | 


--------------------------------------------------------------------------------
/part2/dom-tutorial/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <link rel="stylesheet" href="./style.css" />
 8 |     <!-- <script src="./102.js" defer></script> -->
 9 |     <!-- <script src="./103.js" defer></script> -->
10 |     <!-- <script src="./104.js" defer></script> -->
11 |     <!-- <script src="./105.js" defer></script> -->
12 |     <!-- <script src="./106.js" defer></script> -->
13 |     <!-- <script src="./107.js" defer></script> -->
14 |     <!-- <script src="./108.js" defer></script> -->
15 |     <!-- <script src="./109.js" defer></script> -->
16 |     <!-- <script src="./110.js" defer></script> -->
17 |     <!-- <script src="./113.js" defer></script> -->
18 |     <!-- <script src="./114.js" defer></script> -->
19 |     <!-- <script src="./115.js" defer></script> -->
20 |     <!-- <script src="./116.js" defer></script> -->
21 |     <!-- <script src="./117.js" defer></script> -->
22 |     <!-- <script src="./118.js" defer></script> -->
23 |     <!-- <script src="./119.js" defer></script> -->
24 |     <!-- <script src="./120.js" defer></script> -->
25 |     <!-- <script src="./121.js" defer></script> -->
26 |     <!-- <script src="./127.js" defer></script> -->
27 |     <script src="./129.js" defer></script>
28 |     <title>My Website</title>
29 |   </head>
30 |   <body>
31 |     <header class="header">
32 |       <nav class="nav container">
33 |         <h1 class="logo">Website</h1>
34 |         <ul class="nav-items">
35 |           <li class="nav-item"><a href="#home">Home</a></li>
36 |           <li class="nav-item"><a href="">Todo</a></li>
37 |           <li class="nav-item"><a href="">Sign Up</a></li>
38 |         </ul>
39 |       </nav>
40 |       <div class="headline">
41 |         <h2 id="main-heading">
42 |           Manage your tasks <span style="display: none">Hello</span>
43 |         </h2>
44 |         <button class="btn btn-headline">Learn More</button>
45 |       </div>
46 |     </header>
47 | 
48 |     <section class="section-todo container">
49 |       <h2>Your plan for today ?</h2>
50 |       <!-- todo form  -->
51 |       <form class="form-todo">
52 |         <input type="text" name="" id="" placeholder="Add Todo" />
53 |         <input type="submit" value="Add Todo" class="btn" />
54 |       </form>
55 | 
56 |       <ul class="todo-list">
57 |         <li>
58 |           <span class="text">Do this do that</span>
59 |           <div class="todo-buttons">
60 |             <button class="todo-btn done">Done</button>
61 |             <button class="todo-btn remove">Remove</button>
62 |           </div>
63 |         </li>
64 |       </ul>
65 |     </section>
66 | 
67 |     <section class="section-signup container">
68 |       <h2>Sign Up</h2>
69 |       <form class="signup-form">
70 |         <div class="form-group">
71 |           <label for="username">Username</label>
72 |           <input type="text" name="username" id="username" />
73 |         </div>
74 |         <div class="form-group">
75 |           <label for="password">Password</label>
76 |           <input type="password" name="password" id="password" />
77 |         </div>
78 |         <div class="form-group">
79 |           <label for="confirmPassword">Confirm Password</label>
80 |           <input type="password" name="confirmPassword" id="confirmPassword" />
81 |         </div>
82 |         <div class="form-group">
83 |           <label for="phone">Phone</label>
84 |           <input type="text" name="phone" id="phone" />
85 |         </div>
86 |         <div class="form-group">
87 |           <label for="email">Email</label>
88 |           <input type="email" name="email" id="email" />
89 |         </div>
90 |         <div class="form-group">
91 |           <label for="about">About Yourself</label>
92 |           <textarea name="about" id="about" cols="30" rows="10"></textarea>
93 |         </div>
94 |         <button type="submit" class="btn signup-btn">Submit</button>
95 |       </form>
96 |     </section>
97 |   </body>
98 | </html>
99 | 


--------------------------------------------------------------------------------
/part2/dom-tutorial/index2.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |     <head>
 3 |         <title>Dom traversing</title>
 4 |         <script src="./111.js" defer></script>
 5 |     </head>
 6 |     <body>
 7 |         <div class="container">
 8 |             <h1>My heading</h1>
 9 |             <p>Some useful information</p>
10 |         </div>
11 |     </body>
12 | </html>


--------------------------------------------------------------------------------
/part2/dom-tutorial/little-demo.css:
--------------------------------------------------------------------------------
 1 | *{
 2 |     box-sizing: border-box;
 3 |     padding: 0;
 4 |     margin: 0;
 5 | }
 6 | 
 7 | body{
 8 |     font-family:arial,sans-serif;
 9 | }
10 | main{
11 |     min-height: 100vh;
12 |     display: flex;
13 |     justify-content: center;
14 |     align-items: center;
15 |     text-align: center;
16 | }
17 | 
18 | h1{
19 |     padding: 1rem 2rem;
20 |     background-color: #333;
21 |     color: #efefef;
22 |     border-radius: 1rem;
23 | }
24 | 
25 | button{
26 |     padding: 1rem 2rem;
27 |     font-size:1.4rem;
28 |     border-radius: 1rem;
29 |     cursor: pointer;
30 |     margin-top: 1rem;
31 |     border: none;
32 |     outline: none;
33 |     transition: background 0.4s;
34 | }
35 | button:hover{
36 |     background: rgb(214, 214, 214);
37 | }


--------------------------------------------------------------------------------
/part2/dom-tutorial/little-demo.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <link rel="stylesheet" href="./little-demo.css">
 8 |     <script src="./126.js" defer></script>
 9 |     <title>Random Colors</title>
10 | </head>
11 | <body>
12 |     <main>
13 |         <div class="container">
14 |             <h1>Current Color : <span class="current-color"> rgb(255,255,255) </span> </h1>
15 |             <button>Change Background Color</button>
16 |         </div>
17 |     </main>
18 | </body>
19 | </html>


--------------------------------------------------------------------------------
/part2/dom-tutorial/style.css:
--------------------------------------------------------------------------------
  1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
  2 | 
  3 | * {
  4 |   box-sizing: border-box;
  5 |   padding: 0;
  6 |   margin: 0;
  7 | }
  8 | 
  9 | body {
 10 |   font-family: "Poppins", sans-serif;
 11 | }
 12 | 
 13 | a {
 14 |   text-decoration: none;
 15 |   color: white;
 16 | }
 17 | 
 18 | .header {
 19 |   position: relative;
 20 |   min-height: 60vh;
 21 |   background: url("./bg-image.jpg");
 22 |   background-position: center;
 23 |   background-repeat: no-repeat;
 24 |   background-size: cover;
 25 |   color: white;
 26 | }
 27 | .bg-dark {
 28 |   background: #000;
 29 |   color: #eee;
 30 | }
 31 | 
 32 | .container {
 33 |   max-width: 1200px;
 34 |   margin: auto;
 35 |   width: 90%;
 36 | }
 37 | .nav {
 38 |   min-height: 8vh;
 39 |   display: flex;
 40 |   justify-content: space-between;
 41 |   align-items: center;
 42 | }
 43 | 
 44 | .nav-items {
 45 |   width: 40%;
 46 |   display: flex;
 47 |   list-style-type: none;
 48 |   justify-content: space-between;
 49 | }
 50 | .headline {
 51 |   text-align: center;
 52 |   position: absolute;
 53 |   top: 50%;
 54 |   left: 50%;
 55 |   transform: translate(-50%, -50%);
 56 | }
 57 | 
 58 | .btn {
 59 |   display: inline-block;
 60 |   outline: none;
 61 |   border: none;
 62 |   cursor: pointer;
 63 | }
 64 | 
 65 | .btn-headline {
 66 |   padding: 1rem 2rem;
 67 |   font-size: 1rem;
 68 |   margin-top: 1rem;
 69 |   font-weight: 600;
 70 | }
 71 | 
 72 | .section-todo {
 73 |   margin-top: 5rem;
 74 |   text-align: center;
 75 | }
 76 | 
 77 | .form-todo {
 78 |   min-height: 5vh;
 79 |   display: flex;
 80 |   justify-content: space-between;
 81 |   margin-top: 1rem;
 82 | }
 83 | 
 84 | .form-todo input {
 85 |   min-height: 100%;
 86 | }
 87 | .form-todo input[type="text"] {
 88 |   width: 78%;
 89 |   padding: 0.8rem;
 90 |   font-size: 1rem;
 91 |   font-weight: 400;
 92 | }
 93 | .form-todo input[type="submit"] {
 94 |   width: 20%;
 95 |   background: rgb(44, 55, 63);
 96 |   color: white;
 97 |   font-weight: bold;
 98 | }
 99 | .todo-list {
100 |   text-align: left;
101 |   font-size: 1.2rem;
102 |   list-style-type: none;
103 | }
104 | .todo-list li {
105 |   padding: 0.7rem;
106 |   background: #444;
107 |   color: white;
108 |   margin-top: 1rem;
109 |   text-transform: capitalize;
110 |   display: flex;
111 |   justify-content: space-between;
112 |   align-items: center;
113 | }
114 | .todo-btn {
115 |   /* min-height: 100%; */
116 |   padding: 0.5rem 1rem;
117 |   font-size: 1rem;
118 |   font-weight: bold;
119 |   cursor: pointer;
120 | }
121 | .section-signup {
122 |   margin: 5rem auto;
123 |   text-align: center;
124 |   background: rgb(240, 240, 240);
125 |   border-radius: 10px;
126 |   padding: 1rem;
127 | }
128 | 
129 | .signup-form {
130 |   max-width: 800px;
131 |   width: 95%;
132 |   text-align: left;
133 |   margin: auto;
134 | }
135 | .signup-form label {
136 |   display: block;
137 | }
138 | 
139 | .signup-form input {
140 |   display: block;
141 |   width: 100%;
142 |   padding: 0.5rem;
143 | }
144 | .form-group {
145 |   margin-top: 1rem;
146 | }
147 | .signup-form textarea {
148 |   width: 100%;
149 | }
150 | .signup-btn {
151 |   background: rgb(44, 55, 63);
152 |   color: white;
153 |   padding: 1rem 2rem;
154 |   display: block;
155 |   margin: auto;
156 |   margin-top: 1rem;
157 | }
158 | 


--------------------------------------------------------------------------------
/part2/how-javascript-works/100.js:
--------------------------------------------------------------------------------
 1 | // function myFunction(power){
 2 | //     return function(number){
 3 | //         return number ** power
 4 | //     }
 5 | // }
 6 | // const square = myFunction(2);
 7 | // const ans = square(3);
 8 | // console.log(ans);
 9 | 
10 | 
11 | // const cube = myFunction(3);
12 | // const ans2 = cube(3);
13 | // console.log(ans2);
14 | 
15 | 
16 | function myFunction(power){
17 |     return function(number){
18 |         return number ** power
19 |     }
20 | }
21 | const square = myFunction(2);
22 | const ans = square(3);
23 | console.log(ans);
24 | 
25 | 
26 | const cube = myFunction(3);
27 | const ans2 = cube(3);
28 | console.log(ans2);


--------------------------------------------------------------------------------
/part2/how-javascript-works/101.js:
--------------------------------------------------------------------------------
 1 | function func(){
 2 |     let counter = 0;
 3 |     return function(){
 4 |         if(counter < 1){
 5 |             console.log("Hi You Called me");
 6 |             counter++;
 7 |         }else{
 8 |             console.log("Mai already ek bar call ho chuka hoon!");
 9 |         }
10 |     }
11 | }
12 | 
13 | const myFunc = func();
14 | myFunc();
15 | myFunc();
16 | 


--------------------------------------------------------------------------------
/part2/how-javascript-works/96.js:
--------------------------------------------------------------------------------
 1 | // function execution context 
 2 | 
 3 | let foo = "foo";
 4 | console.log(foo);
 5 | function getFullName(firstName, lastName){
 6 |     console.log(arguments);
 7 |     let myVar = "var inside func";
 8 |     console.log(myVar);
 9 |     const fullName = firstName + " " + lastName;
10 |     return fullName;
11 | }
12 | 
13 | const personName = getFullName("harshit", "sharma");
14 | console.log(personName);


--------------------------------------------------------------------------------
/part2/how-javascript-works/97.js:
--------------------------------------------------------------------------------
 1 | // lexical environment, scope chain
 2 | 
 3 | const lastName = "Vashistha";
 4 | 
 5 | const printName = function(){
 6 |     const firstName = "harshit";
 7 |     function myFunction(){
 8 |         console.log(firstName);
 9 |         console.log(lastName);
10 |     }
11 |     myFunction()
12 |     
13 | }
14 | printName();


--------------------------------------------------------------------------------
/part2/how-javascript-works/98.js:
--------------------------------------------------------------------------------
 1 | // closures
 2 | // closure : 30-40%
 3 | // analyse : 70-80%
 4 | // real example : 100%
 5 | 
 6 | 
 7 | // function can return functions
 8 | 
 9 | // function outerFunction(){
10 | //     function innerFunction(){
11 | //         console.log("hello world")
12 | //     }
13 | //     return innerFunction;
14 | // }
15 | 
16 | // const ans = outerFunction();
17 | // // console.log(ans);
18 | // ans();
19 | 
20 | 
21 | function printFullName(firstName, lastName){
22 |     function printName(){
23 |         console.log(firstName, lastName);
24 |     }
25 |     return printName;
26 | }
27 | 
28 | const ans = printFullName("harshit", "sharma");
29 | // console.log(ans);
30 | ans();
31 | 
32 | 


--------------------------------------------------------------------------------
/part2/how-javascript-works/99.js:
--------------------------------------------------------------------------------
 1 | function hello(x){
 2 |     const a  = "varA";
 3 |     const b = "varB";
 4 |     return function(){
 5 |         console.log(a,b,x);
 6 |     }
 7 | }
 8 | 
 9 | const ans = hello("arg");
10 | ans();


--------------------------------------------------------------------------------
/part2/how-javascript-works/hjw_01.js:
--------------------------------------------------------------------------------
 1 | // compilation 
 2 | // code execution
 3 | 
 4 | // why compilation 
 5 | 
 6 | 
 7 | // How javascript code executes 
 8 | 
 9 | 
10 | // what is global exection context ? 
11 | // what is local execution context ? 
12 | // closures
13 | console.log(this);
14 | console.log(window);
15 | console.log(firstName);
16 | var firstName = "Harshit";
17 | console.log(firstName);


--------------------------------------------------------------------------------
/part2/how-javascript-works/hjw_02.js:
--------------------------------------------------------------------------------
 1 | // hoisting
 2 | console.log(this);
 3 | console.log(window);
 4 | console.log(myFunction);
 5 | 
 6 | console.log(fullName);
 7 | 
 8 | function myFunction(){
 9 |     console.log("this is my function");
10 | }
11 | 
12 | var firstName = "Harshit";
13 | var lastName = "Sharma"
14 | var fullName = firstName + " " + lastName;
15 | console.log(fullName);


--------------------------------------------------------------------------------
/part2/how-javascript-works/hjw_03.js:
--------------------------------------------------------------------------------
1 | 
2 | console.log(myFunction);
3 | 
4 | var myFunction = function(){
5 |     console.log("this is my function");
6 | }
7 | 
8 | console.log(myFunction);
9 | 


--------------------------------------------------------------------------------
/part2/how-javascript-works/hjw_04.js:
--------------------------------------------------------------------------------
 1 | // Uncaught ReferenceError: 
 2 | // Cannot access 'firstName' before initialization
 3 | 
 4 | 
 5 | 
 6 | // Uncaught ReferenceError: 
 7 | // firstName is not defined
 8 | 
 9 | // console.log(firstName);
10 | 
11 | // console.log(firstName);
12 | // let firstName;
13 | // console.log(firstName);
14 | 
15 | // console.log(typeof firstName);
16 | 
17 | // let firstName = "harshit";


--------------------------------------------------------------------------------
/part2/how-javascript-works/hjw_05.js:
--------------------------------------------------------------------------------
 1 | console.log("hello world");
 2 | let firstName = "Harshit";
 3 | let lastName = "Vashistha";
 4 | 
 5 | const myFunction = function() {
 6 |     let var1 = "First Variable";
 7 |     let var2 = "second Variable";
 8 |     console.log(var1);
 9 |     console.log(var2);
10 | }


--------------------------------------------------------------------------------
/part2/how-javascript-works/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>How JavaScript Works</title>
 8 | </head>
 9 | <body>
10 |     
11 |     <!-- <script src="./hjw_01.js"></script> -->
12 |     <!-- <script src="./hjw_02.js"></script> -->
13 |     <!-- <script src="./hjw_03.js"></script> -->
14 |     <script src="./hjw_04.js"></script>
15 | </body>
16 | </html>


--------------------------------------------------------------------------------
/part3/asynchronous-javascript/130.js:
--------------------------------------------------------------------------------
 1 | // synchronous programming vs asynchronous programming
 2 | // synchronous programming
 3 | // synchronous programming single threaded
 4 | // console.log("script start");
 5 | 
 6 | // for (let i = 1; i < 10000; i++) {
 7 | //   console.log("inside for loop");
 8 | // }
 9 | 
10 | // console.log("script end");
11 | 
12 | // setTimeout
13 | 
14 | console.log("script start");
15 | 
16 | const id = setTimeout(() => {
17 |   console.log("inside setTimeout");
18 | }, 1000);
19 | 
20 | for (let i = 1; i < 100; i++) {
21 |   console.log("....");
22 | }
23 | console.log("settimeout id is ", id);
24 | console.log("clearing time out");
25 | clearTimeout(id);
26 | console.log("Script end");
27 | 


--------------------------------------------------------------------------------
/part3/asynchronous-javascript/131.js:
--------------------------------------------------------------------------------
 1 | // setInterval
 2 | // console.log("script start");
 3 | // // setInterval(() => {
 4 | // //   console.log(total);
 5 | // //   console.log(Math.random());
 6 | // // }, 500);
 7 | // console.log("script end");
 8 | const body = document.body;
 9 | const button = document.querySelector("button");
10 | const intervalId = setInterval(() => {
11 |   const red = Math.floor(Math.random() * 256);
12 |   const green = Math.floor(Math.random() * 256);
13 |   const blue = Math.floor(Math.random() * 256);
14 |   const rgb = `rgb(${red},${green}, ${blue})`;
15 |   body.style.background = rgb;
16 | }, 1000);
17 | 
18 | button.addEventListener("click", () => {
19 |   clearInterval(intervalId);
20 |   button.textContent = body.style.background;
21 | });
22 | 
23 | console.log(intervalId);
24 | 


--------------------------------------------------------------------------------
/part3/asynchronous-javascript/132.js:
--------------------------------------------------------------------------------
 1 | // understand callback
 2 | 
 3 | // function myFunc(callback) {
 4 | //   console.log("Function is doing task 1 ");
 5 | //   callback();
 6 | // }
 7 | 
 8 | // myFunc(() => {
 9 | //   console.log("function is doing task 2");
10 | // });
11 | 
12 | function getTwoNumbersAndAdd(number1, number2, onSuccess, onFailure) {
13 |   if (typeof number1 === "number" && typeof number2 === "number") {
14 |     onSuccess(number1, number2);
15 |   } else {
16 |     onFailure();
17 |   }
18 | }
19 | 
20 | function addTwoNumbers(num1, num2) {
21 |   console.log(num1 + num2);
22 | }
23 | 
24 | function onFail(){
25 |     console.log("Wrong data type");
26 |     console.log("please pass numbers only")
27 | }
28 | getTwoNumbersAndAdd(4, 4,addTwoNumbers, onFail);
29 | 


--------------------------------------------------------------------------------
/part3/asynchronous-javascript/133.js:
--------------------------------------------------------------------------------
 1 | // callbacks , callback hell, pyramid of doom
 2 | // asynchronous programming
 3 | const heading1 = document.querySelector(".heading1");
 4 | const heading2 = document.querySelector(".heading2");
 5 | const heading3 = document.querySelector(".heading3");
 6 | const heading4 = document.querySelector(".heading4");
 7 | const heading5 = document.querySelector(".heading5");
 8 | const heading6 = document.querySelector(".heading6");
 9 | const heading7 = document.querySelector(".heading7");
10 | const heading8 = document.querySelector(".heading8");
11 | const heading9 = document.querySelector(".heading9");
12 | const heading10 = document.querySelector(".heading10");
13 | 
14 | // Text       Delay   Color
15 | 
16 | // one        1s      Violet
17 | // two        2s      purple
18 | // three      2s      red
19 | // four       1s      Pink
20 | // five       2s      green
21 | // six        3s      blue
22 | // seven      1s      brown
23 | 
24 | // callback hell  
25 | // setTimeout(()=>{
26 | //   heading1.textContent = "one";
27 | //   heading1.style.color = "violet";
28 | //   setTimeout(()=>{
29 | //     heading2.textContent = "two";
30 | //     heading2.style.color = "purple";
31 | //     setTimeout(()=>{
32 | //       heading3.textContent = "three";
33 | //       heading3.style.color = "red";
34 | //       setTimeout(()=>{
35 | //         heading4.textContent = "four";
36 | //         heading4.style.color = "pink";
37 | //         setTimeout(()=>{
38 | //           heading5.textContent = "five";
39 | //           heading5.style.color = "green";
40 | //         },2000)
41 |         
42 | //       },1000)
43 |       
44 | //     },2000)
45 |     
46 | //   },2000)
47 |   
48 | // },1000)
49 | 
50 | function changeText(element, text, color, time, onSuccessCallback, onFailureCallback) {
51 |   setTimeout(()=>{
52 |     if(element){
53 |       element.textContent = text;
54 |       element.style.color = color;
55 |       if(onSuccessCallback){
56 |         onSuccessCallback();
57 |       }
58 |     }else{
59 |       if(onFailureCallback){
60 |         onFailureCallback();
61 |       }
62 |     }
63 |   },time)
64 | }
65 | // pyramid of doom
66 | changeText(heading1, "one","violet",1000,()=>{
67 |   changeText(heading2, "two","purple",2000,()=>{
68 |     changeText(heading3, "three","red",1000,()=>{
69 |       changeText(heading4, "four","pink",1000,()=>{
70 |         changeText(heading5, "five","green",2000,()=>{
71 |           changeText(heading6, "six","blue",1000,()=>{
72 |             changeText(heading7, "seven","brown",1000,()=>{
73 |               changeText(heading8, "eight","cyan",1000,()=>{
74 |                 changeText(heading9, "nine","#cda562",1000,()=>{
75 |                   changeText(heading10, "ten","dca652",1000,()=>{
76 |                     
77 |                   },()=>{console.log("Heading10 does not exist")})
78 |                 },()=>{console.log("Heading9 does not exist")})
79 |               },()=>{console.log("Heading8 does not exist")})
80 |             },()=>{console.log("Heading7 does not exist")})
81 |           },()=>{console.log("Heading6 does not exist")})
82 |         },()=>{console.log("Heading5 does not exist")})
83 |       },()=>{console.log("Heading4 does not exist")})
84 |     },()=>{console.log("Heading3 does not exist")})
85 |   },()=>{console.log("Heading2 does not exist")})
86 | },()=>{console.log("Heading1 does not exist")})


--------------------------------------------------------------------------------
/part3/asynchronous-javascript/134.js:
--------------------------------------------------------------------------------
 1 | // Promise
 2 | console.log("script start");
 3 | const bucket = ['coffee', 'chips','vegetables','salt','rice'];
 4 | 
 5 | 
 6 | 
 7 | const friedRicePromise = new Promise((resolve,reject)=>{
 8 |     if(bucket.includes("vegetables")&& bucket.includes("salt") && bucket.includes("rice")){
 9 |         resolve({value:"friedrice"});
10 |     }else{
11 |         reject("could not do it");
12 |     }
13 | })
14 | 
15 | // produce 
16 | 
17 | 
18 | 
19 | // consume 
20 | // how to consume 
21 | 
22 | friedRicePromise.then(
23 |     // jab promise resolve hoga 
24 |     (myfriedRice)=>{
25 |     console.log("lets eat ", myfriedRice);
26 |     }
27 |     ).catch(
28 |     (error)=>{
29 |         console.log(error)
30 |     })
31 | 
32 | 
33 | setTimeout(()=>{
34 |     console.log("hello from settimeout")
35 | },0)
36 | 
37 | for(let i = 0; i <=100; i++){
38 |     console.log(Math.random(), i);
39 | }
40 | 
41 | console.log("script end!!!!")


--------------------------------------------------------------------------------
/part3/asynchronous-javascript/135.js:
--------------------------------------------------------------------------------
 1 | // function returning promise
 2 | 
 3 | function ricePromise(){
 4 |   const bucket = ['coffee', 'chips','vegetables','salts','rice'];
 5 |   return new Promise((resolve,reject)=>{
 6 |     if(bucket.includes("vegetables")&& bucket.includes("salt") && bucket.includes("rice")){
 7 |         resolve({value:"friedrice"});
 8 |     }else{
 9 |         reject("could not do it");
10 |     }
11 |   })
12 | }
13 | 
14 | 
15 | ricePromise().then(
16 |   // jab promise resolve hoga 
17 |   (myfriedRice)=>{
18 |   console.log("lets eat ", myfriedRice);
19 |   }
20 |   ).catch(
21 |   (error)=>{
22 |       console.log(error)
23 |   })


--------------------------------------------------------------------------------
/part3/asynchronous-javascript/136.js:
--------------------------------------------------------------------------------
 1 | // promise && setTimeout 
 2 | 
 3 | 
 4 | // I want to resolve / reject promise after 2 seconds 
 5 | 
 6 | 
 7 | function myPromise(){
 8 |     return new Promise((resolve, reject)=>{
 9 |         const value = false;
10 |         setTimeout(()=>{
11 |             if(value){
12 |                 resolve();
13 |             }else{
14 |                 reject();
15 |             }
16 |         },2000)
17 |     })
18 | }
19 | 
20 | myPromise()
21 |     .then(()=>{console.log("resolved")})
22 |     .catch(()=>{console.log("rejected")})


--------------------------------------------------------------------------------
/part3/asynchronous-javascript/137.js:
--------------------------------------------------------------------------------
 1 | // Promise.resolve
 2 | // Promise chaining
 3 | 
 4 | // const myPromise = Promise.resolve(5);
 5 | // Promise.resolve(5).then(value=>{
 6 | //   console.log(value);
 7 | // })
 8 | 
 9 | 
10 | // then()
11 | // then method hamesha promise return karta hai
12 | 
13 | 
14 | function myPromise(){
15 |   return new Promise((resolve, reject)=>{
16 |     resolve("foo");
17 |   })
18 | }
19 | 
20 | myPromise()
21 |   .then((value)=>{
22 |     console.log(value);
23 |     value += "bar";
24 |     return value
25 |   })
26 |   .then((value) =>{
27 |     console.log(value);
28 |     value += "baaz";
29 |     return value;
30 |   })
31 |   .then(value=>{
32 |     console.log(value);
33 |   })
34 | 
35 | 
36 | 


--------------------------------------------------------------------------------
/part3/asynchronous-javascript/138.js:
--------------------------------------------------------------------------------
 1 | const heading1 = document.querySelector(".heading1");
 2 | const heading2 = document.querySelector(".heading");
 3 | const heading3 = document.querySelector(".heading3");
 4 | const heading4 = document.querySelector(".heading4");
 5 | const heading5 = document.querySelector(".heading5");
 6 | const heading6 = document.querySelector(".heading6");
 7 | const heading7 = document.querySelector(".heading7");
 8 | const heading8 = document.querySelector(".heading8");
 9 | const heading9 = document.querySelector(".heading9");
10 | const heading10 = document.querySelector(".heading10");
11 | 
12 | 
13 | function changeText(element, text, color, time) {
14 |     return new Promise((resolve, reject) => {
15 |         setTimeout(()=>{
16 |             if(element){
17 |               element.textContent = text;
18 |               element.style.color = color;
19 |               resolve();
20 |             }else{
21 |               reject("element not found");
22 |             }
23 |           },time)
24 |     })  
25 |   }
26 | 
27 | changeText(heading1, "one", "red", 1000)
28 |   .then(()=>changeText(heading2, "two", "purple", 1000))
29 |   .then(()=>changeText(heading3, "three", "green", 1000))
30 |   .then(()=>changeText(heading4, "four", "orange", 1000))
31 |   .then(()=>changeText(heading5, "four", "orange", 1000))
32 |   .then(()=>changeText(heading6, "four", "orange", 1000))
33 |   .then(()=>changeText(heading7, "four", "orange", 1000))
34 |   .then(()=>changeText(heading8, "four", "orange", 1000))
35 |   .then(()=>changeText(heading9, "four", "orange", 1000))
36 |   .then(()=>changeText(heading10, "four", "orange", 1000))
37 |   .catch((error)=>{
38 |       alert(error);
39 |   })


--------------------------------------------------------------------------------
/part3/asynchronous-javascript/139.js:
--------------------------------------------------------------------------------
 1 | // BASIC THEORY 
 2 | 
 3 | // AJAX : asynchronous javascript and XML
 4 | 
 5 | // HTTP request
 6 | 
 7 | // is a set of "web development techniques" 
 8 | // using many web technologies on the "client-side "
 9 | // to create asynchronous web applications. 
10 | 
11 | 
12 | // With Ajax, web applications can send and retrieve 
13 | // data from a server asynchronously (in the background) 
14 | // without interfering with the display and 
15 | // behaviour of the existing page
16 | 
17 | // We don't use data in XML format anymore. 
18 | // we use JSON now. 
19 | 
20 | 
21 | // we have 3 most common ways to create and send request to server
22 | // 1.) xmlHTTPRequest (old way of doing)
23 | // 2.) fetch API (new way of doing)
24 | // 3.) axios (this is third party library)
25 | 


--------------------------------------------------------------------------------
/part3/asynchronous-javascript/140.js:
--------------------------------------------------------------------------------
 1 | const URL = "https://jsonplaceholder.typicode.com/posts";
 2 | const xhr = new XMLHttpRequest();
 3 | // console.log(xhr);
 4 | // step1
 5 | // console.log(xhr.readyState);
 6 | xhr.open("GET",URL);
 7 | // console.log(xhr.readyState);
 8 | // xhr.onreadystatechange = function(){
 9 | //     // console.log(xhr.readyState);
10 | //     if(xhr.readyState === 4){
11 | //         console.log(xhr)
12 | //         const response = xhr.response;
13 | //         const data = JSON.parse(response);
14 | //         console.log(typeof data);
15 | //     }
16 | // }
17 | 
18 | xhr.onload = function(){
19 |     const response = xhr.response;
20 |     const data = JSON.parse(response);
21 |     console.log(data);
22 | }
23 | 
24 | xhr.send();


--------------------------------------------------------------------------------
/part3/asynchronous-javascript/141.js:
--------------------------------------------------------------------------------
 1 | const URL = "https://jsonplaceholder.typicode.com/posts";
 2 | 
 3 | const xhr = new XMLHttpRequest();
 4 | 
 5 | xhr.open("GET", URL);
 6 | xhr.onload = () => {
 7 |     if(xhr.status >= 200 && xhr.status < 300) {
 8 |         const data = JSON.parse(xhr.response);
 9 |         console.log(data);
10 |         const id = data[3].id;
11 |         const xhr2 = new XMLHttpRequest();
12 |         const URL2 = `${URL}/${id}`
13 |         console.log(URL2);
14 |         xhr2.open("GET", URL2);
15 |         xhr2.onload = () => {
16 |             const data2 = JSON.parse(xhr2.response);
17 |             console.log(data2);
18 |         }
19 |         xhr2.send();
20 |     }
21 |    else{
22 |        console.log("something went wrong");
23 |    }
24 | }
25 | 
26 | xhr.onerror = () => {
27 |     console.log("network error");
28 | }
29 | xhr.send();


--------------------------------------------------------------------------------
/part3/asynchronous-javascript/142.js:
--------------------------------------------------------------------------------
 1 | const URL = "https://jsonplaceholder.typicode.com/posts";
 2 | 
 3 | function sendRequest(method, url) {
 4 |     return new Promise(function(resolve, reject) {
 5 |         const xhr  = new XMLHttpRequest();
 6 |         xhr.open(method, url);
 7 |         xhr.onload = function() {
 8 |             if(xhr.status >= 200 && xhr.status < 300){
 9 |                 resolve(xhr.response);
10 |             }
11 |             else{
12 |                 reject(new Error("Something Went wrong"));
13 |             }
14 |         }
15 | 
16 |         xhr.onerror = function() {
17 |             reject(new Error("Something went wrong"));
18 |         }
19 | 
20 |         xhr.send();
21 |     })
22 | }
23 | 
24 | sendRequest("GET", URL)
25 |     .then(response => {
26 |         const data = JSON.parse(response);
27 |         // console.log(data)
28 |         return data;
29 |     })
30 |     .then(data=>{
31 |         const id = data[3].id;
32 |         return id;
33 |     })
34 |     .then(id=>{
35 |         const url = `${URL}/${id}ssss`;
36 |         return sendRequest("GET", url);
37 |     })
38 |     .then(newResponse => {
39 |         const newData = JSON.parse(newResponse);
40 |         console.log(newData);
41 |     })
42 |     .catch(error =>{
43 |         console.log(error);
44 |     })
45 | 


--------------------------------------------------------------------------------
/part3/asynchronous-javascript/143.js:
--------------------------------------------------------------------------------
 1 | // fetch 
 2 | 
 3 | const URL = "https://jsonplaceholder.typicode.com/postssss";
 4 | 
 5 | fetch(URL,{
 6 |     method: 'POST',
 7 |     body: JSON.stringify({
 8 |         title: 'foo',
 9 |         body: 'bar',
10 |         userId: 1,
11 |     }),
12 |     headers: {
13 |         'Content-type': 'application/json; charset=UTF-8',
14 |     },
15 |     })
16 |     .then(response =>{
17 |         if(response.ok){
18 |             return response.json()
19 |         }else{
20 |             throw new Error("Something went wrong!!!")
21 |         }
22 |     })
23 |     .then(data =>{
24 |         console.log(data);
25 |     })
26 |     .catch(error =>{
27 |         console.log("inside catch");
28 |         console.log(error);
29 |     })
30 | 


--------------------------------------------------------------------------------
/part3/asynchronous-javascript/144.js:
--------------------------------------------------------------------------------
 1 | // async await
 2 | 
 3 | // fetch(URL)
 4 | //     .then(response => {
 5 | //         return response.json()
 6 | //     })
 7 | //     .then(data => {
 8 | //         console.log(data);
 9 | //     })
10 | console.log("script start");
11 | const URL = "https://jsonplaceholder.typicode.com/posts";
12 | 
13 | // async function getPosts(){
14 | //     const response = await fetch(URL);
15 | //     if(!response.ok){
16 | //         throw new Error("Something went wrong")
17 | //     }
18 | //     const data = await response.json();
19 | //     return data;
20 | // }
21 | 
22 | 
23 | const getPosts = async() =>{
24 |     const response = await fetch(URL);
25 |     if(!response.ok){
26 |         throw new Error("Something went wrong")
27 |     }
28 |     const data = await response.json();
29 |     return data;
30 | }
31 | 
32 | // const myData = getPosts();
33 | // console.log(myData);
34 | 
35 | getPosts()
36 |     .then((myData) => {
37 |         console.log(myData);
38 |     })
39 |     .catch(error =>{
40 |         console.log("inside catch")
41 |         console.log(error);
42 |     })
43 | 
44 | 
45 | console.log("script end ");


--------------------------------------------------------------------------------
/part3/asynchronous-javascript/async-code.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <!-- <script src="./130.js" defer></script> -->
 8 |     <!-- <script src="./131.js" defer></script> -->
 9 |     <script src="./132.js" defer></script>
10 |     <title>Asynchronous Javascript</title>
11 |   </head>
12 |   <body></body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/part3/asynchronous-javascript/callback-demo.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <script src="./133.js" defer></script>
 8 |     <style>
 9 |         body{font-family:arial,sans-serif}
10 |     </style>
11 |     <title>Document</title>
12 | </head>
13 | <body>
14 |   <h1 class="heading1">Hello World</h1>
15 |   <h1 class="heading2">Hello World</h1>
16 |   <h1 class="heading3">Hello World</h1>
17 |   <h1 class="heading4">Hello World</h1>
18 |   <h1 class="heading5">Hello World</h1>
19 |   <h1 class="heading6">Hello World</h1>
20 |   <h1 class="heading7">Hello World</h1>
21 |   <h1 class="heading8">Hello World</h1>
22 |   <h1 class="heading9">Hello World</h1>
23 |   <h1 class="heading10">Hello World</h1>
24 | </body>
25 | </html>


--------------------------------------------------------------------------------
/part3/asynchronous-javascript/moreAboutPromise.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <script src="./moreAboutPromise.js" defer></script>
 8 |     <title>Document</title>
 9 | </head>
10 | <body>
11 |     <h1>More about promise</h1>
12 | </body>
13 | </html>


--------------------------------------------------------------------------------
/part3/asynchronous-javascript/moreAboutPromise.js:
--------------------------------------------------------------------------------
 1 | function myPromise(){
 2 |     return new Promise((resolve, reject) =>{
 3 |         resolve(1);
 4 |     })
 5 | }
 6 | 
 7 | 
 8 | myPromise()
 9 |     .then((data)=>{
10 |         console.log(data);
11 |         return 2;
12 |     })
13 |     .then(data => {
14 |         console.log(data);
15 |         return 3;
16 |     })
17 |     .then(data => {
18 |         console.log(data);
19 |         return 4;
20 |     }).then(data => {
21 |         console.log(data);
22 |     })


--------------------------------------------------------------------------------
/part3/asynchronous-javascript/myfile.json:
--------------------------------------------------------------------------------
  1 | [
  2 |     {
  3 |       "userId": 1,
  4 |       "id": 1,
  5 |       "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
  6 |       "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
  7 |     },
  8 |     {
  9 |       "userId": 1,
 10 |       "id": 2,
 11 |       "title": "qui est esse",
 12 |       "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
 13 |     },
 14 |     {
 15 |       "userId": 1,
 16 |       "id": 3,
 17 |       "title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
 18 |       "body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
 19 |     },
 20 |     {
 21 |       "userId": 1,
 22 |       "id": 4,
 23 |       "title": "eum et est occaecati",
 24 |       "body": "ullam et saepe reiciendis voluptatem adipisci\nsit amet autem assumenda provident rerum culpa\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\nquis sunt voluptatem rerum illo velit"
 25 |     },
 26 |     {
 27 |       "userId": 1,
 28 |       "id": 5,
 29 |       "title": "nesciunt quas odio",
 30 |       "body": "repudiandae veniam quaerat sunt sed\nalias aut fugiat sit autem sed est\nvoluptatem omnis possimus esse voluptatibus quis\nest aut tenetur dolor neque"
 31 |     },
 32 |     {
 33 |       "userId": 1,
 34 |       "id": 6,
 35 |       "title": "dolorem eum magni eos aperiam quia",
 36 |       "body": "ut aspernatur corporis harum nihil quis provident sequi\nmollitia nobis aliquid molestiae\nperspiciatis et ea nemo ab reprehenderit accusantium quas\nvoluptate dolores velit et doloremque molestiae"
 37 |     },
 38 |     {
 39 |       "userId": 1,
 40 |       "id": 7,
 41 |       "title": "magnam facilis autem",
 42 |       "body": "dolore placeat quibusdam ea quo vitae\nmagni quis enim qui quis quo nemo aut saepe\nquidem repellat excepturi ut quia\nsunt ut sequi eos ea sed quas"
 43 |     },
 44 |     {
 45 |       "userId": 1,
 46 |       "id": 8,
 47 |       "title": "dolorem dolore est ipsam",
 48 |       "body": "dignissimos aperiam dolorem qui eum\nfacilis quibusdam animi sint suscipit qui sint possimus cum\nquaerat magni maiores excepturi\nipsam ut commodi dolor voluptatum modi aut vitae"
 49 |     },
 50 |     {
 51 |       "userId": 1,
 52 |       "id": 9,
 53 |       "title": "nesciunt iure omnis dolorem tempora et accusantium",
 54 |       "body": "consectetur animi nesciunt iure dolore\nenim quia ad\nveniam autem ut quam aut nobis\net est aut quod aut provident voluptas autem voluptas"
 55 |     },
 56 |     {
 57 |       "userId": 1,
 58 |       "id": 10,
 59 |       "title": "optio molestias id quia eum",
 60 |       "body": "quo et expedita modi cum officia vel magni\ndoloribus qui repudiandae\nvero nisi sit\nquos veniam quod sed accusamus veritatis error"
 61 |     },
 62 |     {
 63 |       "userId": 2,
 64 |       "id": 11,
 65 |       "title": "et ea vero quia laudantium autem",
 66 |       "body": "delectus reiciendis molestiae occaecati non minima eveniet qui voluptatibus\naccusamus in eum beatae sit\nvel qui neque voluptates ut commodi qui incidunt\nut animi commodi"
 67 |     },
 68 |     {
 69 |       "userId": 2,
 70 |       "id": 12,
 71 |       "title": "in quibusdam tempore odit est dolorem",
 72 |       "body": "itaque id aut magnam\npraesentium quia et ea odit et ea voluptas et\nsapiente quia nihil amet occaecati quia id voluptatem\nincidunt ea est distinctio odio"
 73 |     },
 74 |     {
 75 |       "userId": 2,
 76 |       "id": 13,
 77 |       "title": "dolorum ut in voluptas mollitia et saepe quo animi",
 78 |       "body": "aut dicta possimus sint mollitia voluptas commodi quo doloremque\niste corrupti reiciendis voluptatem eius rerum\nsit cumque quod eligendi laborum minima\nperferendis recusandae assumenda consectetur porro architecto ipsum ipsam"
 79 |     },
 80 |     {
 81 |       "userId": 2,
 82 |       "id": 14,
 83 |       "title": "voluptatem eligendi optio",
 84 |       "body": "fuga et accusamus dolorum perferendis illo voluptas\nnon doloremque neque facere\nad qui dolorum molestiae beatae\nsed aut voluptas totam sit illum"
 85 |     },
 86 |     {
 87 |       "userId": 2,
 88 |       "id": 15,
 89 |       "title": "eveniet quod temporibus",
 90 |       "body": "reprehenderit quos placeat\nvelit minima officia dolores impedit repudiandae molestiae nam\nvoluptas recusandae quis delectus\nofficiis harum fugiat vitae"
 91 |     },
 92 |     {
 93 |       "userId": 2,
 94 |       "id": 16,
 95 |       "title": "sint suscipit perspiciatis velit dolorum rerum ipsa laboriosam odio",
 96 |       "body": "suscipit nam nisi quo aperiam aut\nasperiores eos fugit maiores voluptatibus quia\nvoluptatem quis ullam qui in alias quia est\nconsequatur magni mollitia accusamus ea nisi voluptate dicta"
 97 |     },
 98 |     {
 99 |       "userId": 2,
100 |       "id": 17,
101 |       "title": "fugit voluptas sed molestias voluptatem provident",
102 |       "body": "eos voluptas et aut odit natus earum\naspernatur fuga molestiae ullam\ndeserunt ratione qui eos\nqui nihil ratione nemo velit ut aut id quo"
103 |     },
104 |     {
105 |       "userId": 2,
106 |       "id": 18,
107 |       "title": "voluptate et itaque vero tempora molestiae",
108 |       "body": "eveniet quo quis\nlaborum totam consequatur non dolor\nut et est repudiandae\nest voluptatem vel debitis et magnam"
109 |     },
110 |     {
111 |       "userId": 2,
112 |       "id": 19,
113 |       "title": "adipisci placeat illum aut reiciendis qui",
114 |       "body": "illum quis cupiditate provident sit magnam\nea sed aut omnis\nveniam maiores ullam consequatur atque\nadipisci quo iste expedita sit quos voluptas"
115 |     },
116 |     {
117 |       "userId": 2,
118 |       "id": 20,
119 |       "title": "doloribus ad provident suscipit at",
120 |       "body": "qui consequuntur ducimus possimus quisquam amet similique\nsuscipit porro ipsam amet\neos veritatis officiis exercitationem vel fugit aut necessitatibus totam\nomnis rerum consequatur expedita quidem cumque explicabo"
121 |     },
122 |     {
123 |       "userId": 3,
124 |       "id": 21,
125 |       "title": "asperiores ea ipsam voluptatibus modi minima quia sint",
126 |       "body": "repellat aliquid praesentium dolorem quo\nsed totam minus non itaque\nnihil labore molestiae sunt dolor eveniet hic recusandae veniam\ntempora et tenetur expedita sunt"
127 |     },
128 |     {
129 |       "userId": 3,
130 |       "id": 22,
131 |       "title": "dolor sint quo a velit explicabo quia nam",
132 |       "body": "eos qui et ipsum ipsam suscipit aut\nsed omnis non odio\nexpedita earum mollitia molestiae aut atque rem suscipit\nnam impedit esse"
133 |     },
134 |     {
135 |       "userId": 3,
136 |       "id": 23,
137 |       "title": "maxime id vitae nihil numquam",
138 |       "body": "veritatis unde neque eligendi\nquae quod architecto quo neque vitae\nest illo sit tempora doloremque fugit quod\net et vel beatae sequi ullam sed tenetur perspiciatis"
139 |     },
140 |     {
141 |       "userId": 3,
142 |       "id": 24,
143 |       "title": "autem hic labore sunt dolores incidunt",
144 |       "body": "enim et ex nulla\nomnis voluptas quia qui\nvoluptatem consequatur numquam aliquam sunt\ntotam recusandae id dignissimos aut sed asperiores deserunt"
145 |     },
146 |     {
147 |       "userId": 3,
148 |       "id": 25,
149 |       "title": "rem alias distinctio quo quis",
150 |       "body": "ullam consequatur ut\nomnis quis sit vel consequuntur\nipsa eligendi ipsum molestiae et omnis error nostrum\nmolestiae illo tempore quia et distinctio"
151 |     },
152 |     {
153 |       "userId": 3,
154 |       "id": 26,
155 |       "title": "est et quae odit qui non",
156 |       "body": "similique esse doloribus nihil accusamus\nomnis dolorem fuga consequuntur reprehenderit fugit recusandae temporibus\nperspiciatis cum ut laudantium\nomnis aut molestiae vel vero"
157 |     },
158 |     {
159 |       "userId": 3,
160 |       "id": 27,
161 |       "title": "quasi id et eos tenetur aut quo autem",
162 |       "body": "eum sed dolores ipsam sint possimus debitis occaecati\ndebitis qui qui et\nut placeat enim earum aut odit facilis\nconsequatur suscipit necessitatibus rerum sed inventore temporibus consequatur"
163 |     },
164 |     {
165 |       "userId": 3,
166 |       "id": 28,
167 |       "title": "delectus ullam et corporis nulla voluptas sequi",
168 |       "body": "non et quaerat ex quae ad maiores\nmaiores recusandae totam aut blanditiis mollitia quas illo\nut voluptatibus voluptatem\nsimilique nostrum eum"
169 |     },
170 |     {
171 |       "userId": 3,
172 |       "id": 29,
173 |       "title": "iusto eius quod necessitatibus culpa ea",
174 |       "body": "odit magnam ut saepe sed non qui\ntempora atque nihil\naccusamus illum doloribus illo dolor\neligendi repudiandae odit magni similique sed cum maiores"
175 |     },
176 |     {
177 |       "userId": 3,
178 |       "id": 30,
179 |       "title": "a quo magni similique perferendis",
180 |       "body": "alias dolor cumque\nimpedit blanditiis non eveniet odio maxime\nblanditiis amet eius quis tempora quia autem rem\na provident perspiciatis quia"
181 |     },
182 |     {
183 |       "userId": 4,
184 |       "id": 31,
185 |       "title": "ullam ut quidem id aut vel consequuntur",
186 |       "body": "debitis eius sed quibusdam non quis consectetur vitae\nimpedit ut qui consequatur sed aut in\nquidem sit nostrum et maiores adipisci atque\nquaerat voluptatem adipisci repudiandae"
187 |     },
188 |     {
189 |       "userId": 4,
190 |       "id": 32,
191 |       "title": "doloremque illum aliquid sunt",
192 |       "body": "deserunt eos nobis asperiores et hic\nest debitis repellat molestiae optio\nnihil ratione ut eos beatae quibusdam distinctio maiores\nearum voluptates et aut adipisci ea maiores voluptas maxime"
193 |     },
194 |     {
195 |       "userId": 4,
196 |       "id": 33,
197 |       "title": "qui explicabo molestiae dolorem",
198 |       "body": "rerum ut et numquam laborum odit est sit\nid qui sint in\nquasi tenetur tempore aperiam et quaerat qui in\nrerum officiis sequi cumque quod"
199 |     },
200 |     {
201 |       "userId": 4,
202 |       "id": 34,
203 |       "title": "magnam ut rerum iure",
204 |       "body": "ea velit perferendis earum ut voluptatem voluptate itaque iusto\ntotam pariatur in\nnemo voluptatem voluptatem autem magni tempora minima in\nest distinctio qui assumenda accusamus dignissimos officia nesciunt nobis"
205 |     },
206 |     {
207 |       "userId": 4,
208 |       "id": 35,
209 |       "title": "id nihil consequatur molestias animi provident",
210 |       "body": "nisi error delectus possimus ut eligendi vitae\nplaceat eos harum cupiditate facilis reprehenderit voluptatem beatae\nmodi ducimus quo illum voluptas eligendi\net nobis quia fugit"
211 |     },
212 |     {
213 |       "userId": 4,
214 |       "id": 36,
215 |       "title": "fuga nam accusamus voluptas reiciendis itaque",
216 |       "body": "ad mollitia et omnis minus architecto odit\nvoluptas doloremque maxime aut non ipsa qui alias veniam\nblanditiis culpa aut quia nihil cumque facere et occaecati\nqui aspernatur quia eaque ut aperiam inventore"
217 |     },
218 |     {
219 |       "userId": 4,
220 |       "id": 37,
221 |       "title": "provident vel ut sit ratione est",
222 |       "body": "debitis et eaque non officia sed nesciunt pariatur vel\nvoluptatem iste vero et ea\nnumquam aut expedita ipsum nulla in\nvoluptates omnis consequatur aut enim officiis in quam qui"
223 |     },
224 |     {
225 |       "userId": 4,
226 |       "id": 38,
227 |       "title": "explicabo et eos deleniti nostrum ab id repellendus",
228 |       "body": "animi esse sit aut sit nesciunt assumenda eum voluptas\nquia voluptatibus provident quia necessitatibus ea\nrerum repudiandae quia voluptatem delectus fugit aut id quia\nratione optio eos iusto veniam iure"
229 |     },
230 |     {
231 |       "userId": 4,
232 |       "id": 39,
233 |       "title": "eos dolorem iste accusantium est eaque quam",
234 |       "body": "corporis rerum ducimus vel eum accusantium\nmaxime aspernatur a porro possimus iste omnis\nest in deleniti asperiores fuga aut\nvoluptas sapiente vel dolore minus voluptatem incidunt ex"
235 |     },
236 |     {
237 |       "userId": 4,
238 |       "id": 40,
239 |       "title": "enim quo cumque",
240 |       "body": "ut voluptatum aliquid illo tenetur nemo sequi quo facilis\nipsum rem optio mollitia quas\nvoluptatem eum voluptas qui\nunde omnis voluptatem iure quasi maxime voluptas nam"
241 |     },
242 |     {
243 |       "userId": 5,
244 |       "id": 41,
245 |       "title": "non est facere",
246 |       "body": "molestias id nostrum\nexcepturi molestiae dolore omnis repellendus quaerat saepe\nconsectetur iste quaerat tenetur asperiores accusamus ex ut\nnam quidem est ducimus sunt debitis saepe"
247 |     },
248 |     {
249 |       "userId": 5,
250 |       "id": 42,
251 |       "title": "commodi ullam sint et excepturi error explicabo praesentium voluptas",
252 |       "body": "odio fugit voluptatum ducimus earum autem est incidunt voluptatem\nodit reiciendis aliquam sunt sequi nulla dolorem\nnon facere repellendus voluptates quia\nratione harum vitae ut"
253 |     },
254 |     {
255 |       "userId": 5,
256 |       "id": 43,
257 |       "title": "eligendi iste nostrum consequuntur adipisci praesentium sit beatae perferendis",
258 |       "body": "similique fugit est\nillum et dolorum harum et voluptate eaque quidem\nexercitationem quos nam commodi possimus cum odio nihil nulla\ndolorum exercitationem magnam ex et a et distinctio debitis"
259 |     },
260 |     {
261 |       "userId": 5,
262 |       "id": 44,
263 |       "title": "optio dolor molestias sit",
264 |       "body": "temporibus est consectetur dolore\net libero debitis vel velit laboriosam quia\nipsum quibusdam qui itaque fuga rem aut\nea et iure quam sed maxime ut distinctio quae"
265 |     },
266 |     {
267 |       "userId": 5,
268 |       "id": 45,
269 |       "title": "ut numquam possimus omnis eius suscipit laudantium iure",
270 |       "body": "est natus reiciendis nihil possimus aut provident\nex et dolor\nrepellat pariatur est\nnobis rerum repellendus dolorem autem"
271 |     },
272 |     {
273 |       "userId": 5,
274 |       "id": 46,
275 |       "title": "aut quo modi neque nostrum ducimus",
276 |       "body": "voluptatem quisquam iste\nvoluptatibus natus officiis facilis dolorem\nquis quas ipsam\nvel et voluptatum in aliquid"
277 |     },
278 |     {
279 |       "userId": 5,
280 |       "id": 47,
281 |       "title": "quibusdam cumque rem aut deserunt",
282 |       "body": "voluptatem assumenda ut qui ut cupiditate aut impedit veniam\noccaecati nemo illum voluptatem laudantium\nmolestiae beatae rerum ea iure soluta nostrum\neligendi et voluptate"
283 |     },
284 |     {
285 |       "userId": 5,
286 |       "id": 48,
287 |       "title": "ut voluptatem illum ea doloribus itaque eos",
288 |       "body": "voluptates quo voluptatem facilis iure occaecati\nvel assumenda rerum officia et\nillum perspiciatis ab deleniti\nlaudantium repellat ad ut et autem reprehenderit"
289 |     },
290 |     {
291 |       "userId": 5,
292 |       "id": 49,
293 |       "title": "laborum non sunt aut ut assumenda perspiciatis voluptas",
294 |       "body": "inventore ab sint\nnatus fugit id nulla sequi architecto nihil quaerat\neos tenetur in in eum veritatis non\nquibusdam officiis aspernatur cumque aut commodi aut"
295 |     },
296 |     {
297 |       "userId": 5,
298 |       "id": 50,
299 |       "title": "repellendus qui recusandae incidunt voluptates tenetur qui omnis exercitationem",
300 |       "body": "error suscipit maxime adipisci consequuntur recusandae\nvoluptas eligendi et est et voluptates\nquia distinctio ab amet quaerat molestiae et vitae\nadipisci impedit sequi nesciunt quis consectetur"
301 |     },
302 |     {
303 |       "userId": 6,
304 |       "id": 51,
305 |       "title": "soluta aliquam aperiam consequatur illo quis voluptas",
306 |       "body": "sunt dolores aut doloribus\ndolore doloribus voluptates tempora et\ndoloremque et quo\ncum asperiores sit consectetur dolorem"
307 |     },
308 |     {
309 |       "userId": 6,
310 |       "id": 52,
311 |       "title": "qui enim et consequuntur quia animi quis voluptate quibusdam",
312 |       "body": "iusto est quibusdam fuga quas quaerat molestias\na enim ut sit accusamus enim\ntemporibus iusto accusantium provident architecto\nsoluta esse reprehenderit qui laborum"
313 |     },
314 |     {
315 |       "userId": 6,
316 |       "id": 53,
317 |       "title": "ut quo aut ducimus alias",
318 |       "body": "minima harum praesentium eum rerum illo dolore\nquasi exercitationem rerum nam\nporro quis neque quo\nconsequatur minus dolor quidem veritatis sunt non explicabo similique"
319 |     },
320 |     {
321 |       "userId": 6,
322 |       "id": 54,
323 |       "title": "sit asperiores ipsam eveniet odio non quia",
324 |       "body": "totam corporis dignissimos\nvitae dolorem ut occaecati accusamus\nex velit deserunt\net exercitationem vero incidunt corrupti mollitia"
325 |     },
326 |     {
327 |       "userId": 6,
328 |       "id": 55,
329 |       "title": "sit vel voluptatem et non libero",
330 |       "body": "debitis excepturi ea perferendis harum libero optio\neos accusamus cum fuga ut sapiente repudiandae\net ut incidunt omnis molestiae\nnihil ut eum odit"
331 |     },
332 |     {
333 |       "userId": 6,
334 |       "id": 56,
335 |       "title": "qui et at rerum necessitatibus",
336 |       "body": "aut est omnis dolores\nneque rerum quod ea rerum velit pariatur beatae excepturi\net provident voluptas corrupti\ncorporis harum reprehenderit dolores eligendi"
337 |     },
338 |     {
339 |       "userId": 6,
340 |       "id": 57,
341 |       "title": "sed ab est est",
342 |       "body": "at pariatur consequuntur earum quidem\nquo est laudantium soluta voluptatem\nqui ullam et est\net cum voluptas voluptatum repellat est"
343 |     },
344 |     {
345 |       "userId": 6,
346 |       "id": 58,
347 |       "title": "voluptatum itaque dolores nisi et quasi",
348 |       "body": "veniam voluptatum quae adipisci id\net id quia eos ad et dolorem\naliquam quo nisi sunt eos impedit error\nad similique veniam"
349 |     },
350 |     {
351 |       "userId": 6,
352 |       "id": 59,
353 |       "title": "qui commodi dolor at maiores et quis id accusantium",
354 |       "body": "perspiciatis et quam ea autem temporibus non voluptatibus qui\nbeatae a earum officia nesciunt dolores suscipit voluptas et\nanimi doloribus cum rerum quas et magni\net hic ut ut commodi expedita sunt"
355 |     },
356 |     {
357 |       "userId": 6,
358 |       "id": 60,
359 |       "title": "consequatur placeat omnis quisquam quia reprehenderit fugit veritatis facere",
360 |       "body": "asperiores sunt ab assumenda cumque modi velit\nqui esse omnis\nvoluptate et fuga perferendis voluptas\nillo ratione amet aut et omnis"
361 |     },
362 |     {
363 |       "userId": 7,
364 |       "id": 61,
365 |       "title": "voluptatem doloribus consectetur est ut ducimus",
366 |       "body": "ab nemo optio odio\ndelectus tenetur corporis similique nobis repellendus rerum omnis facilis\nvero blanditiis debitis in nesciunt doloribus dicta dolores\nmagnam minus velit"
367 |     },
368 |     {
369 |       "userId": 7,
370 |       "id": 62,
371 |       "title": "beatae enim quia vel",
372 |       "body": "enim aspernatur illo distinctio quae praesentium\nbeatae alias amet delectus qui voluptate distinctio\nodit sint accusantium autem omnis\nquo molestiae omnis ea eveniet optio"
373 |     },
374 |     {
375 |       "userId": 7,
376 |       "id": 63,
377 |       "title": "voluptas blanditiis repellendus animi ducimus error sapiente et suscipit",
378 |       "body": "enim adipisci aspernatur nemo\nnumquam omnis facere dolorem dolor ex quis temporibus incidunt\nab delectus culpa quo reprehenderit blanditiis asperiores\naccusantium ut quam in voluptatibus voluptas ipsam dicta"
379 |     },
380 |     {
381 |       "userId": 7,
382 |       "id": 64,
383 |       "title": "et fugit quas eum in in aperiam quod",
384 |       "body": "id velit blanditiis\neum ea voluptatem\nmolestiae sint occaecati est eos perspiciatis\nincidunt a error provident eaque aut aut qui"
385 |     },
386 |     {
387 |       "userId": 7,
388 |       "id": 65,
389 |       "title": "consequatur id enim sunt et et",
390 |       "body": "voluptatibus ex esse\nsint explicabo est aliquid cumque adipisci fuga repellat labore\nmolestiae corrupti ex saepe at asperiores et perferendis\nnatus id esse incidunt pariatur"
391 |     },
392 |     {
393 |       "userId": 7,
394 |       "id": 66,
395 |       "title": "repudiandae ea animi iusto",
396 |       "body": "officia veritatis tenetur vero qui itaque\nsint non ratione\nsed et ut asperiores iusto eos molestiae nostrum\nveritatis quibusdam et nemo iusto saepe"
397 |     },
398 |     {
399 |       "userId": 7,
400 |       "id": 67,
401 |       "title": "aliquid eos sed fuga est maxime repellendus",
402 |       "body": "reprehenderit id nostrum\nvoluptas doloremque pariatur sint et accusantium quia quod aspernatur\net fugiat amet\nnon sapiente et consequatur necessitatibus molestiae"
403 |     },
404 |     {
405 |       "userId": 7,
406 |       "id": 68,
407 |       "title": "odio quis facere architecto reiciendis optio",
408 |       "body": "magnam molestiae perferendis quisquam\nqui cum reiciendis\nquaerat animi amet hic inventore\nea quia deleniti quidem saepe porro velit"
409 |     },
410 |     {
411 |       "userId": 7,
412 |       "id": 69,
413 |       "title": "fugiat quod pariatur odit minima",
414 |       "body": "officiis error culpa consequatur modi asperiores et\ndolorum assumenda voluptas et vel qui aut vel rerum\nvoluptatum quisquam perspiciatis quia rerum consequatur totam quas\nsequi commodi repudiandae asperiores et saepe a"
415 |     },
416 |     {
417 |       "userId": 7,
418 |       "id": 70,
419 |       "title": "voluptatem laborum magni",
420 |       "body": "sunt repellendus quae\nest asperiores aut deleniti esse accusamus repellendus quia aut\nquia dolorem unde\neum tempora esse dolore"
421 |     },
422 |     {
423 |       "userId": 8,
424 |       "id": 71,
425 |       "title": "et iusto veniam et illum aut fuga",
426 |       "body": "occaecati a doloribus\niste saepe consectetur placeat eum voluptate dolorem et\nqui quo quia voluptas\nrerum ut id enim velit est perferendis"
427 |     },
428 |     {
429 |       "userId": 8,
430 |       "id": 72,
431 |       "title": "sint hic doloribus consequatur eos non id",
432 |       "body": "quam occaecati qui deleniti consectetur\nconsequatur aut facere quas exercitationem aliquam hic voluptas\nneque id sunt ut aut accusamus\nsunt consectetur expedita inventore velit"
433 |     },
434 |     {
435 |       "userId": 8,
436 |       "id": 73,
437 |       "title": "consequuntur deleniti eos quia temporibus ab aliquid at",
438 |       "body": "voluptatem cumque tenetur consequatur expedita ipsum nemo quia explicabo\naut eum minima consequatur\ntempore cumque quae est et\net in consequuntur voluptatem voluptates aut"
439 |     },
440 |     {
441 |       "userId": 8,
442 |       "id": 74,
443 |       "title": "enim unde ratione doloribus quas enim ut sit sapiente",
444 |       "body": "odit qui et et necessitatibus sint veniam\nmollitia amet doloremque molestiae commodi similique magnam et quam\nblanditiis est itaque\nquo et tenetur ratione occaecati molestiae tempora"
445 |     },
446 |     {
447 |       "userId": 8,
448 |       "id": 75,
449 |       "title": "dignissimos eum dolor ut enim et delectus in",
450 |       "body": "commodi non non omnis et voluptas sit\nautem aut nobis magnam et sapiente voluptatem\net laborum repellat qui delectus facilis temporibus\nrerum amet et nemo voluptate expedita adipisci error dolorem"
451 |     },
452 |     {
453 |       "userId": 8,
454 |       "id": 76,
455 |       "title": "doloremque officiis ad et non perferendis",
456 |       "body": "ut animi facere\ntotam iusto tempore\nmolestiae eum aut et dolorem aperiam\nquaerat recusandae totam odio"
457 |     },
458 |     {
459 |       "userId": 8,
460 |       "id": 77,
461 |       "title": "necessitatibus quasi exercitationem odio",
462 |       "body": "modi ut in nulla repudiandae dolorum nostrum eos\naut consequatur omnis\nut incidunt est omnis iste et quam\nvoluptates sapiente aliquam asperiores nobis amet corrupti repudiandae provident"
463 |     },
464 |     {
465 |       "userId": 8,
466 |       "id": 78,
467 |       "title": "quam voluptatibus rerum veritatis",
468 |       "body": "nobis facilis odit tempore cupiditate quia\nassumenda doloribus rerum qui ea\nillum et qui totam\naut veniam repellendus"
469 |     },
470 |     {
471 |       "userId": 8,
472 |       "id": 79,
473 |       "title": "pariatur consequatur quia magnam autem omnis non amet",
474 |       "body": "libero accusantium et et facere incidunt sit dolorem\nnon excepturi qui quia sed laudantium\nquisquam molestiae ducimus est\nofficiis esse molestiae iste et quos"
475 |     },
476 |     {
477 |       "userId": 8,
478 |       "id": 80,
479 |       "title": "labore in ex et explicabo corporis aut quas",
480 |       "body": "ex quod dolorem ea eum iure qui provident amet\nquia qui facere excepturi et repudiandae\nasperiores molestias provident\nminus incidunt vero fugit rerum sint sunt excepturi provident"
481 |     },
482 |     {
483 |       "userId": 9,
484 |       "id": 81,
485 |       "title": "tempora rem veritatis voluptas quo dolores vero",
486 |       "body": "facere qui nesciunt est voluptatum voluptatem nisi\nsequi eligendi necessitatibus ea at rerum itaque\nharum non ratione velit laboriosam quis consequuntur\nex officiis minima doloremque voluptas ut aut"
487 |     },
488 |     {
489 |       "userId": 9,
490 |       "id": 82,
491 |       "title": "laudantium voluptate suscipit sunt enim enim",
492 |       "body": "ut libero sit aut totam inventore sunt\nporro sint qui sunt molestiae\nconsequatur cupiditate qui iste ducimus adipisci\ndolor enim assumenda soluta laboriosam amet iste delectus hic"
493 |     },
494 |     {
495 |       "userId": 9,
496 |       "id": 83,
497 |       "title": "odit et voluptates doloribus alias odio et",
498 |       "body": "est molestiae facilis quis tempora numquam nihil qui\nvoluptate sapiente consequatur est qui\nnecessitatibus autem aut ipsa aperiam modi dolore numquam\nreprehenderit eius rem quibusdam"
499 |     },
500 |     {
501 |       "userId": 9,
502 |       "id": 84,
503 |       "title": "optio ipsam molestias necessitatibus occaecati facilis veritatis dolores aut",
504 |       "body": "sint molestiae magni a et quos\neaque et quasi\nut rerum debitis similique veniam\nrecusandae dignissimos dolor incidunt consequatur odio"
505 |     },
506 |     {
507 |       "userId": 9,
508 |       "id": 85,
509 |       "title": "dolore veritatis porro provident adipisci blanditiis et sunt",
510 |       "body": "similique sed nisi voluptas iusto omnis\nmollitia et quo\nassumenda suscipit officia magnam sint sed tempora\nenim provident pariatur praesentium atque animi amet ratione"
511 |     },
512 |     {
513 |       "userId": 9,
514 |       "id": 86,
515 |       "title": "placeat quia et porro iste",
516 |       "body": "quasi excepturi consequatur iste autem temporibus sed molestiae beatae\net quaerat et esse ut\nvoluptatem occaecati et vel explicabo autem\nasperiores pariatur deserunt optio"
517 |     },
518 |     {
519 |       "userId": 9,
520 |       "id": 87,
521 |       "title": "nostrum quis quasi placeat",
522 |       "body": "eos et molestiae\nnesciunt ut a\ndolores perspiciatis repellendus repellat aliquid\nmagnam sint rem ipsum est"
523 |     },
524 |     {
525 |       "userId": 9,
526 |       "id": 88,
527 |       "title": "sapiente omnis fugit eos",
528 |       "body": "consequatur omnis est praesentium\nducimus non iste\nneque hic deserunt\nvoluptatibus veniam cum et rerum sed"
529 |     },
530 |     {
531 |       "userId": 9,
532 |       "id": 89,
533 |       "title": "sint soluta et vel magnam aut ut sed qui",
534 |       "body": "repellat aut aperiam totam temporibus autem et\narchitecto magnam ut\nconsequatur qui cupiditate rerum quia soluta dignissimos nihil iure\ntempore quas est"
535 |     },
536 |     {
537 |       "userId": 9,
538 |       "id": 90,
539 |       "title": "ad iusto omnis odit dolor voluptatibus",
540 |       "body": "minus omnis soluta quia\nqui sed adipisci voluptates illum ipsam voluptatem\neligendi officia ut in\neos soluta similique molestias praesentium blanditiis"
541 |     },
542 |     {
543 |       "userId": 10,
544 |       "id": 91,
545 |       "title": "aut amet sed",
546 |       "body": "libero voluptate eveniet aperiam sed\nsunt placeat suscipit molestias\nsimilique fugit nam natus\nexpedita consequatur consequatur dolores quia eos et placeat"
547 |     },
548 |     {
549 |       "userId": 10,
550 |       "id": 92,
551 |       "title": "ratione ex tenetur perferendis",
552 |       "body": "aut et excepturi dicta laudantium sint rerum nihil\nlaudantium et at\na neque minima officia et similique libero et\ncommodi voluptate qui"
553 |     },
554 |     {
555 |       "userId": 10,
556 |       "id": 93,
557 |       "title": "beatae soluta recusandae",
558 |       "body": "dolorem quibusdam ducimus consequuntur dicta aut quo laboriosam\nvoluptatem quis enim recusandae ut sed sunt\nnostrum est odit totam\nsit error sed sunt eveniet provident qui nulla"
559 |     },
560 |     {
561 |       "userId": 10,
562 |       "id": 94,
563 |       "title": "qui qui voluptates illo iste minima",
564 |       "body": "aspernatur expedita soluta quo ab ut similique\nexpedita dolores amet\nsed temporibus distinctio magnam saepe deleniti\nomnis facilis nam ipsum natus sint similique omnis"
565 |     },
566 |     {
567 |       "userId": 10,
568 |       "id": 95,
569 |       "title": "id minus libero illum nam ad officiis",
570 |       "body": "earum voluptatem facere provident blanditiis velit laboriosam\npariatur accusamus odio saepe\ncumque dolor qui a dicta ab doloribus consequatur omnis\ncorporis cupiditate eaque assumenda ad nesciunt"
571 |     },
572 |     {
573 |       "userId": 10,
574 |       "id": 96,
575 |       "title": "quaerat velit veniam amet cupiditate aut numquam ut sequi",
576 |       "body": "in non odio excepturi sint eum\nlabore voluptates vitae quia qui et\ninventore itaque rerum\nveniam non exercitationem delectus aut"
577 |     },
578 |     {
579 |       "userId": 10,
580 |       "id": 97,
581 |       "title": "quas fugiat ut perspiciatis vero provident",
582 |       "body": "eum non blanditiis soluta porro quibusdam voluptas\nvel voluptatem qui placeat dolores qui velit aut\nvel inventore aut cumque culpa explicabo aliquid at\nperspiciatis est et voluptatem dignissimos dolor itaque sit nam"
583 |     },
584 |     {
585 |       "userId": 10,
586 |       "id": 98,
587 |       "title": "laboriosam dolor voluptates",
588 |       "body": "doloremque ex facilis sit sint culpa\nsoluta assumenda eligendi non ut eius\nsequi ducimus vel quasi\nveritatis est dolores"
589 |     },
590 |     {
591 |       "userId": 10,
592 |       "id": 99,
593 |       "title": "temporibus sit alias delectus eligendi possimus magni",
594 |       "body": "quo deleniti praesentium dicta non quod\naut est molestias\nmolestias et officia quis nihil\nitaque dolorem quia"
595 |     },
596 |     {
597 |       "userId": 10,
598 |       "id": 100,
599 |       "title": "at nam consequatur ea labore ea harum",
600 |       "body": "cupiditate quo est a modi nesciunt soluta\nipsa voluptas error itaque dicta in\nautem qui minus magnam et distinctio eum\naccusamus ratione error aut"
601 |     }
602 |   ]


--------------------------------------------------------------------------------
/part3/asynchronous-javascript/promise.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <script src="./134.js" defer></script>
 8 |     <title>Promise</title>
 9 | </head>
10 | <body>
11 |     <h1>Promise</h1>
12 | </body>
13 | </html>


--------------------------------------------------------------------------------
/part3/asynchronous-javascript/promise_demo.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <!-- <script src="./134.js" defer></script> -->
 8 |     <!-- <script src="./135.js" defer></script> -->
 9 |     <!-- <script src="./136.js" defer></script> -->
10 |     <script src="./137.js" defer></script>
11 |     <title>Document</title>
12 | </head>
13 | <body>
14 |     
15 | </body>
16 | </html>


--------------------------------------------------------------------------------
/part3/asynchronous-javascript/refactor-with-promise.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <script src="./138.js" defer></script>
 8 |     <style>
 9 |         body{font-family:arial,sans-serif}
10 |     </style>
11 |     <title>Document</title>
12 | </head>
13 | <body>
14 |   <h1 class="heading1">Hello World 1</h1>
15 |   <h1 class="heading2">Hello World 2</h1>
16 |   <h1 class="heading3">Hello World 3</h1>
17 |   <h1 class="heading4">Hello World 4</h1>
18 |   <h1 class="heading5">Hello World 5</h1>
19 |   <h1 class="heading6">Hello World 6</h1>
20 |   <h1 class="heading7">Hello World 7</h1>
21 |   <h1 class="heading8">Hello World 8</h1>
22 |   <h1 class="heading9">Hello World 9</h1>
23 |   <h1 class="heading10">Hello World 10</h1>
24 | </body>
25 | </html>


--------------------------------------------------------------------------------
/part3/asynchronous-javascript/setInterval.css:
--------------------------------------------------------------------------------
 1 | button {
 2 |   position: absolute;
 3 |   top: 50%;
 4 |   left: 50%;
 5 |   transform: translate(-50%, -50%);
 6 |   padding: 1rem 1.5rem;
 7 |   border: none;
 8 |   outline: none;
 9 |   cursor: pointer;
10 |   font-size: 3rem;
11 |   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.322);
12 |   transition: all 0.4s;
13 | }
14 | button:hover {
15 |   box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.438);
16 | }
17 | 


--------------------------------------------------------------------------------
/part3/asynchronous-javascript/setInterval.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <link rel="stylesheet" href="./setInterval.css" />
 8 |     <script src="./131.js" defer></script>
 9 |     <title>Set Interval Example</title>
10 |   </head>
11 |   <body>
12 |     <button>Stop Changing!!!!</button>
13 |   </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/part3/asynchronous-javascript/xhr.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <!-- <script src="./140.js" defer></script> -->
 8 |     <!-- <script src="./141.js" defer></script> -->
 9 |     <!-- <script src="./142.js" defer></script> -->
10 |     <!-- <script src="./144.js" defer></script> -->
11 |     <script src="./144.js" defer></script>
12 |     <title>XHR</title>
13 | </head>
14 | <body>
15 |     
16 | </body>
17 | </html>


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