├── Arrays
├── array2.js
├── hof.js
├── index.html
├── problems.txt
├── script.js
└── strings.js
├── assignments
├── index.html
└── script.js
├── dom-assignments
├── images
│ ├── five.jpeg
│ ├── four.jpeg
│ ├── one.jpeg
│ ├── three.jpeg
│ └── two.jpeg
├── instagram.html
├── instagram.js
├── speech.html
├── speech.js
├── video-player.html
├── video-player.js
├── video.css
└── video.mp4
├── dom
├── dom-querying.html
├── dom-querying.js
├── dom-update.html
├── dom-update.js
├── events
│ ├── bubbling.html
│ ├── bubbling.js
│ ├── index.html
│ ├── index.js
│ ├── input.html
│ ├── insertBefore.js
│ ├── popup.html
│ ├── popup.js
│ └── traversal.js
├── introduction.html
└── introduction.js
├── excel-clone
├── index.html
├── index.js
├── menus.css
├── options.js
├── styles.css
├── test.html
└── ui.html
├── extra.css
├── extra.js
├── jira
├── dragging.js
├── index.html
├── index.js
├── jira.css
├── test.html
└── test.js
├── json
└── index.html
├── media
├── index.html
├── test.mp3
└── video.mp4
├── projects
├── employee.html
└── employee.js
├── readme.md
├── scope
├── closures.js
├── execution-flow.js
└── index.html
├── strings
├── index.html
├── regexp.js
└── sort.js
├── this
├── index.html
├── index.js
├── this.js
└── this2.js
├── timers
├── index.html
└── index.js
└── topics.txt
/Arrays/array2.js:
--------------------------------------------------------------------------------
1 | /*
2 | 1. functions (little bit)
3 | 2. higher order functions and callback functions
4 | 3. array methods ( higher order functions in array methods )
5 | */
6 |
7 | // let arr = [3, 4, 1, 9];
8 | // 0 1 2 3
9 | // -4 -3 -2 -1
10 |
11 | // arr.push(99, 34, 23);
12 | // arr.unshift(99, 77, 44);
13 | // [99, 77, 44, 3, 4, 1, 9]
14 |
15 | // console.log(arr);
16 |
17 | // let removedElement = arr.pop();
18 | // console.log(removedElement);
19 |
20 | // let subArray = arr.slice(3, 1);
21 | // console.log(subArray, arr);
22 | // console.log(arr); //
23 | // let deletedElements = arr.splice(1, 2);
24 | // console.log(arr, deletedElements);
25 |
26 | // Find the second smallest element in an array ?
27 |
28 | // let arr = [3, 10, 9, 12, 18, 5];
29 | // // i=2
30 |
31 | // let a = arr[0],
32 | // b = arr[1];
33 |
34 | // for (let i = 2; i < arr.length; i++) {
35 | // let currentMax = a > b ? a : b; //3
36 | // let currentMin = a < b ? a : b; //
37 |
38 | // if (currentMax > arr[i]) {
39 | // a = currentMin; // a = 3
40 | // b = arr[i]; // b = 9
41 | // }
42 | // }
43 |
44 | // console.log(a > b ? a : b);
45 |
46 | // Find the maximum frequency of an element in a sorted array
47 |
48 | // let arr = [2, 2, 3, 5, 5, 5];
49 | // i=3
50 | // j=5
51 | // max = 3,
52 |
53 | // let i = 0,
54 | // j = 0,
55 | // max = 1,
56 | // maxElement = arr[0];
57 |
58 | // while (j < arr.length) {
59 | // if (arr[j] != arr[i]) {
60 | // i = j;
61 | // j++;
62 | // continue;
63 | // }
64 | // let currentMaxLength = j - i + 1;
65 |
66 | // if (max < currentMaxLength) {
67 | // max = currentMaxLength;
68 | // maxElement = arr[i];
69 | // }
70 | // j++;
71 | // }
72 |
73 | // console.log(max, maxElement);
74 |
75 | // console.log("hello" , "Subham");
76 |
77 | // console.log("hello" , "Aravind");
78 |
79 | // console.log("hello", "rohit")
80 |
81 | // function printHello(name) {
82 | // console.log("hello", name);
83 | // }
84 |
85 | // printHello("Rohith"); // invocation of function
86 | // printHello([10, 20, 40]);
87 |
88 | // console.log("hello", true);
89 |
90 | /*
91 | 1. always start a variable name with alpha, _, $
92 | 2. variable name should always contain alpha, _, $, numeric
93 | */
94 | // function $abc() {
95 | // console.log("Inside");
96 | // }
97 | // $abc();
98 |
99 | // let $abc ;
100 |
101 | // let f = function (a, b, c) {
102 | // // a = 1, b = 4, c
103 | // console.log(a, b, c); // 1 + 4 + undefined = NaN
104 | // };
105 |
106 | // // console.log(typeof f); // number
107 |
108 | // f(true, [9, 10], "aravind");
109 |
110 | // callback function => A function passed as an argument to another function is called as callback function
111 |
112 | // Higher order function => A function which takes or returns another function as a parameter
113 |
114 | // function parent(a, b) { // a ,b => parameters
115 | // // a = true, b = x function
116 | // // parent is a higher order function as it takes another function into it.
117 | // console.log(typeof a, typeof b);
118 | // }
119 |
120 | // let x = function(){
121 | // console.log("inside x");
122 | // }
123 |
124 | // parent(true, x); // x is a callback function.
125 | // true, x are arguments
126 |
127 | // let a = function (m) {
128 | // // m = b = function () {}
129 | // console.log(typeof m);
130 | // };
131 |
132 | // let b = function () {};
133 |
134 | // a(b);
135 | // b = callback function
136 | // a = higher order function
137 |
138 | // let arr = [5, 1, 3];
139 |
140 | // let f = function (element, index, list) {
141 | // console.log(element, index, list);
142 | // };
143 |
144 | // arr.forEach(f);
145 |
146 | // let forEach = function (x) {
147 | // x(2, 3);
148 | // };
149 | // let f2 = function (a, b) {
150 | // console.log(a + b);
151 | // };
152 | // forEach(f2);
153 |
154 | // let arr = [3, 4, 5, 6, 9, 12];
155 | // // 0 1 2 3 4 5
156 | // // 3 + 5 + 9 = 17
157 |
158 | // let sum = 0;
159 |
160 | // let f = function (element, index) {
161 | // if (index % 2 == 0) {
162 | // sum += element;
163 | // }
164 | // };
165 |
166 | // arr.forEach(f);
167 |
168 | // console.log(sum);
169 |
170 | // map, filter, reduce, sort
171 |
--------------------------------------------------------------------------------
/Arrays/hof.js:
--------------------------------------------------------------------------------
1 | // function callme() {
2 | // console.log("some code");
3 | // }
4 |
5 | // let callme = function (a, b) {
6 | // // a = 10, b = 20
7 | // console.log(a, b); // 10 20
8 | // // return a + b; // 30
9 | // };
10 |
11 | // let x = callme(10, 20);
12 |
13 | // console.log(x); // 89
14 | // arrow function
15 | // let sum = (a, b, c) => {
16 | // return a + b + c;
17 | // };
18 |
19 | // let sum = (a, b, c) => a + b + c;
20 |
21 | // let y = sum(1, 3, 12);
22 | // console.log(y);
23 |
24 | // let arr = [4, 3, 1];
25 | // //
26 |
27 | // let f = (element, index, list) => {
28 | // // console.log(element, index, list);
29 | // // 4, 0, [4, 3, 1]
30 | // // 3, 1, [4, 3, 1]
31 | // // 1, 2, [4, 3, 1]
32 | // };
33 |
34 | // let r1 = arr.forEach(f);
35 | // console.log(r1); // undefined
36 |
37 | // let arr = [4, 9];
38 | // //
39 |
40 | // let x = (a, b, c) => {
41 | // // console.log(a, b, c);
42 | // // a = 4, b = 0, c = [4, 9]
43 | // // a = 9, b = 1, c = [4, 9]
44 | // //
45 | // return a - b;
46 | // };
47 | // let r = arr.forEach(x);
48 | // console.log(r);
49 | // let r = arr.map(x);
50 | // console.log(r); // [ 4 , 8]
51 |
52 | // x => callback function.
53 | // map => higher order function.
54 |
55 | // let arr = [4, 5];
56 | // function myMap(x) {
57 | // for (let i = 0; i < arr.length; i++) {
58 | // x(arr[i], i, arr);
59 | // // i = 0 ; x(4, 0, [4, 5])
60 | // // i = 1 ; x(5, 1, [4, 5])
61 | // }
62 | // }
63 |
64 | // let f = (element, index, list) => {
65 | // // element = 4, index = 0, list = [4, 5]
66 | // // element = 5, index = 1, list = [4, 5]
67 | // console.log(element, index, list);
68 | // };
69 |
70 | // myMap(f); // f will be called for 2
71 |
72 | // let arr = [5, 1, 10];
73 | // (5, 0) => 5 * 0
74 | // (1, 1) => 1 * 1
75 | // (10,2) => 10 * 2
76 |
77 | // [0, 1, 20]
78 | // [5, 2, 12]
79 | // [10, 10, 10]
80 | // let result = arr.map((e, i) => 10);
81 |
82 | // console.log(result);
83 | //
84 | // [0, 1, 20]
85 |
86 | // let arr = [5, 3, 2, 9];
87 | // [2.5, 1.5, 1, 4.5]
88 | // Generate another which should contain half of the each elements. Do not modify the original array.
89 | // let ans = [];
90 | // for (let i = 0; i < arr.length; i++) {
91 | // ans.push(arr[i] / 2);
92 | // }
93 | // console.log(ans);
94 |
95 | // let halfArray = arr.map((element) => element / 2);
96 | // console.log(halfArray);
97 |
98 | // let arr = [5, 3, 6, 8, 11];
99 | // // [6, 8]
100 | // let result = arr.filter((element, index, list) => {
101 | // // console.log(element, index, list);
102 | // // console.log(index)
103 | // return element % 2 == 0; // 6 % 2 == 0
104 | // });
105 |
106 | // console.log(result); // [6, 8]
107 |
108 | /*
109 | 1. forEach takes a callback and returns nothing.
110 | used for only iterating on the array .
111 |
112 | 2. map takes a callback function and returns another of same length.
113 |
114 | 3. filter takes a callback function and returns another array of any length .
115 |
116 | None of the above three methods manipulate the original array.
117 |
118 | */
119 |
120 | // let arr = [5, 4, 8];
121 | // reduce takes two arguments one is a function another one is any value
122 |
123 | // let f = function (prev, element, index) {
124 | // // prev = 0, e = 5
125 | // // prev = 5, e = 4
126 | // console.log(prev, element, index); // 19, 5, 0
127 | // return prev + element; //5 + 4 = 9
128 | // };
129 |
130 | // let result = arr.reduce(f, 0);
131 | // console.log(result); // 9
132 |
133 | // let arr = [5, 4, 8];
134 | // // i
135 | // let f = (prev, e) => {
136 | // // prev = 9, e = 8
137 | // console.log(prev, e); //
138 | // return prev + e; // 9 + 8 = 17
139 | // };
140 |
141 | // let result = arr.reduce(f);
142 |
143 | // console.log(result); // 17
144 |
--------------------------------------------------------------------------------
/Arrays/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/Arrays/problems.txt:
--------------------------------------------------------------------------------
1 | 1. find the peak element in an array.
2 | 2. reverse array in place.
3 | 3. find the second smallest element in the array.
4 | 4. Find the maximum frequency of an element in a sorted array.
--------------------------------------------------------------------------------
/Arrays/script.js:
--------------------------------------------------------------------------------
1 | /*
2 | 1. basics of js
3 | 2. functions
4 | 3. DOM
5 | 4. async js
6 | */
7 |
8 | // let x = 20,
9 | // y = "sjks",
10 | // z = true;
11 |
12 | // for arithmatic operators the operands should be numbers
13 | // console.log(z + y); // "true" + "sjks" = truesjks
14 | // x = number, y = string
15 | // String(x) + y = "20" + "sjks" = 20sjks
16 |
17 | // + operator has two behaviours
18 | // if one operand is a string + will be concatenation operator
19 | // else it will be an arithmatic operator
20 |
21 | //
22 |
23 | // x = number, z = boolean;
24 | // 20 + Number(true) = 20 + 1 = 21
25 |
26 | // ==, ===, !==, != , >= , <= , > , <
27 |
28 | // let x = 22;
29 |
30 | // if (x % 2 == 0) {
31 | // // 1 == 0
32 | // console.log("even");
33 | // } else {
34 | // console.log("odd");
35 | // }
36 | // BODMAS
37 | // console.log("abc" + 3 - 2); // -1 => "-1"
38 | // "abc" + "-1" = abc-1
39 |
40 | // "abc" + 3 - 2 => "abc3" - 2
41 | // "abc3" - 2 = Number("abc3") - 2
42 | // NaN - 2 = NaN
43 |
44 | // 10, 20, -3, 4, 2.3, 4.555, NaN
45 |
46 | // console.log("23" - 4);
47 |
48 | // Number("23") - 4 = 23 - 4 = 19
49 |
50 | // let x = 20;
51 |
52 | // if (x % 2 == 0) {
53 | // // 20 % 2 = 0 == 0
54 | // console.log("If");
55 | // } else if (true) {
56 | // console.log("else if");
57 | // } else {
58 | // console.log("else");
59 | // }
60 |
61 | // loops
62 |
63 | // for (intialisation; condition; updation) {
64 | // // block of code
65 | // }
66 |
67 | // let x = 0;
68 |
69 | // for (x = 1; x < 3; x++) {
70 | // console.log(x);
71 | // }
72 | // console.log(x); // 3
73 |
74 | // while (x < 3) {
75 | // console.log(x);
76 | // x++;
77 | // }
78 | // console.log(x); // 3
79 |
80 | // let x = 0;
81 | // do {
82 | // console.log(x);
83 | // x++;
84 | // } while (x < 2); // 2 < 2
85 | // x = 2
86 | // 0 , 1
87 |
88 | // let arr = [1, 2, 99];
89 | // 1. by default arrays in js are dynamic in nature.
90 | // 2. By default arrays in js are heterogenious
91 | // console.log(arr[-9]);
92 | // not defined
93 | // undefined
94 |
95 | // console.log(arr.length);
96 |
97 | // for (let index = 0; index < 4; index++) {
98 | // console.log(arr[index]);
99 | // }
100 |
101 | // console.log(arr.length); // 4
102 | // arr.push(99, 14);
103 | // console.log(arr.length, arr); // 5
104 | // arr.unshift(8, 6, 10);
105 | // console.log(arr.length, arr); // 6
106 |
107 | // let e = arr.pop();
108 | // console.log(arr);
109 | // console.log(e);
110 |
111 | // let e = arr.shift();
112 | // console.log(arr, e);
113 |
114 | // let arr = [1, 2, 5, 8, 9];
115 | // [1, 2, 8, 9]
116 | // [1, 2, 13, 14, 8, 9]
117 | // let elements = arr.splice(1, 3);
118 | // console.log(elements);
119 | // console.log(arr);
120 |
121 | // splice(startIndex, deleteCount, elementsTobeAdded)
122 | // let deletedElements = arr.splice(2, 1, 13, 14);
123 | // console.log(deletedElements); // [5]
124 | // console.log(arr);
125 |
126 | // arr.splice(2, 1, 13, 14);
127 | // console.log(arr); // [1, 2, 8, 9]
128 | // arr.splice(2, 0, 13, 14);
129 | // console.log(arr);
130 |
131 | // let arr = [3, 5, 8, 4, 9, 7];
132 | // if (arr.length >= 3) {
133 | // for (let i = 1; i < arr.length - 1; i++) {
134 | // if (arr[i] > arr[i + 1] && arr[i] > arr[i - 1]) {
135 | // console.log(arr[i], "is the peak element");
136 | // break;
137 | // }
138 | // }
139 | // } else {
140 | // console.log("array length should be atleast 3");
141 | // }
142 |
143 | // Reverse an array
144 | let arr = [3, 7, 2, 9, 8];
145 |
146 | let i = 0,
147 | j = arr.length - 1;
148 |
149 | // for (; i < j; ) {
150 | // let temp = arr[j];
151 | // arr[j] = arr[i];
152 | // arr[i] = temp;
153 |
154 | // i++;
155 | // j--;
156 | // }
157 |
158 | while (i < j) {
159 | let temp = arr[j];
160 | arr[j] = arr[i];
161 | arr[i] = temp;
162 | console.log(i);
163 | i++;
164 | j--;
165 | }
166 | console.log(arr);
167 |
--------------------------------------------------------------------------------
/Arrays/strings.js:
--------------------------------------------------------------------------------
1 | // let str = "aravind";
2 |
3 | // console.log(str.length); // 7
4 |
5 | // let x = str.charAt(100); // ""
6 | // console.log(x, x.length);
7 |
8 | // a = 97, b = 98, c = 99 ..
9 | // A = 65, B = 66 ..
10 | // let x = "akB";
11 | // console.log(x.charCodeAt(2));
12 |
13 | // comparision of strings
14 | // lexicographical order ( )
15 | // "abc" , "abm"
16 | // "mno", "mn"
17 |
18 | // console.log("ab" < "ac");
19 |
20 | // let str = "I am aravind";
21 |
22 | // let x = str.slice(2, 7);
23 |
24 | // console.log(x); //
25 |
26 | // let x = "de$va$ku$mar";
27 | // 2 words
28 | // let frags = x.split("$");
29 | // console.log(frags);
30 | // "deva" v
31 |
32 | // let arr = ["a", "mn", "o", "xyz"];
33 |
34 | // let joinedString = arr.join(""); // "a-mn-o-xyz"
35 | // console.log(joinedString);
36 |
37 | // let str = "i am aravind";
38 |
39 | // let result = str.replace("i", "MNO");
40 |
41 | // console.log(result); // "I am aravind"
42 |
43 | // regular expressions.
44 |
45 | // let str = "ant act amnt";
46 | // "Y Y amnt"
47 |
48 | // a_t => ["ant", "act"]
49 |
50 | // global flag used to match all the occurances
51 | // insensitive
52 |
53 | // meta charecters :
54 | // . => matches with any charecter
55 | // ? => 0 or 1 occurence of it's previous char.
56 | // + => 1 or more occurance of it's preceeding char
57 | // * => 0 or more occurances of it's preceeding char
58 |
59 | // let regex = /a..t/g;
60 |
61 | // console.log(str.match(regex));
62 |
63 | // let result = str.replace(/a.t/g, "Y");
64 |
65 | // console.log(result);
66 |
67 | // let str = "abaaa bmno";
68 |
69 | // "b" , "ba"
70 |
71 | // "ba", "baa", "baaa",
72 | // ["baaa", "b"]
73 | // ["b", "ba", "baa", "baaa", "baaaaaa..."]
74 |
75 | // "b", "d", "b", "b"
76 | // /b./g = ["bd", "bm", "by"]
77 | // console.log(str.split(/b./g));
78 | // console.log(str.match(/b|d/g));
79 | // console.log(str.match(/ba*/g));
80 |
81 | // b, ba, baa, baaa, baaaaaaaaaaaa
82 | // b, ba, baaa
83 |
84 | // let str = "amn akn asn";
85 | // // a_n
86 | // // [k, s]
87 | // // akn
88 | // // asn
89 | // console.log(str.match(/a[ks]n/g));
90 |
91 | // Remove all the extra spaces between the string.
92 | // let str = "a xyz mno ";
93 |
94 | // let regexp = / +/g;
95 |
96 | // let result = str.replace(regexp, " ");
97 | // console.log(result);
98 |
--------------------------------------------------------------------------------
/assignments/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
16 |
17 |
18 |
30 |
31 |
32 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, quaerat
33 | rem perferendis culpa eos totam doloremque reiciendis est? Hic quam
34 | accusantium quo fugit deleniti ad ullam, in perspiciatis quidem ipsum
35 | dolorum suscipit a, reiciendis, enim quibusdam eaque rerum libero at!
36 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aspernatur aut
37 | quod necessitatibus iste iusto? Distinctio, est impedit explicabo,
38 | accusantium autem voluptatibus fugit eius tempore ratione et nobis, quasi
39 | ipsum minus! Impedit dolorum id cupiditate aliquid unde modi explicabo
40 | quisquam soluta.
41 |
42 |
43 |
44 |
45 |
46 |
--------------------------------------------------------------------------------
/assignments/script.js:
--------------------------------------------------------------------------------
1 | // document.addEventListener("DOMContentLoaded", () => {
2 | // let levelElement = document.getElementById("level");
3 | // console.log(levelElement);
4 | // let level = 1;
5 |
6 | // while (true) {
7 | // if (levelElement.tagName === "HTML") {
8 | // break;
9 | // }
10 | // console.log(levelElement);
11 | // levelElement = levelElement.parentNode;
12 | // level++;
13 | // }
14 |
15 | // alert(`The level of the element is: ${level}`);
16 | // });
17 |
18 | // infinite scroll
19 |
20 | // const scrollContainer = document.getElementById("container");
21 | // console.log("scrollheight", scrollContainer.scrollHeight);
22 | // console.log("containerHeight", scrollContainer.clientHeight);
23 |
24 | /**
25 | * maximum scrollable height = totalScrollHeight - containerHeight => we can acheive this when we scroll to the end.
26 | *
27 | * threshold how much more we can scroll to get to last.
28 | *
29 | * threshold = maximumScrollableheight - scrolledHeight till the instance.
30 | *
31 | */
32 | /*
33 |
34 | scrollContainer.addEventListener("scroll", () => {
35 | const scrollTop = scrollContainer.scrollTop;
36 | const containerHeight = scrollContainer.clientHeight;
37 | const scrollHeight = scrollContainer.scrollHeight;
38 | const maximumScrollableheight = scrollHeight - containerHeight;
39 |
40 | const threshold = Math.abs(scrollTop - maximumScrollableheight);
41 |
42 | if (threshold <= 5) {
43 | const div = document.createElement("div");
44 | div.innerText = `Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere, quaerat
45 | rem perferendis culpa eos totam doloremque reiciendis est? Hic quam
46 | accusantium quo fugit deleniti ad ullam, in perspiciatis quidem ipsum
47 | dolorum suscipit a, reiciendis, enim quibusdam eaque rerum libero at!
48 | Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aspernatur aut
49 | quod necessitatibus iste iusto? Distinctio, est impedit explicabo,`;
50 | div.style.border = "2px solid blue";
51 | scrollContainer.appendChild(div);
52 | }
53 | });
54 | */
55 |
56 | // Solution
57 |
58 | const scrollContainer = document.getElementById("infi-list");
59 | let i = 0;
60 | function addOneItem() {
61 | const li = document.createElement("li");
62 | li.innerText = `Item ${++i}`;
63 | scrollContainer.appendChild(li);
64 | }
65 |
66 | for (let i = 0; i < 10; i++) {
67 | addOneItem();
68 | }
69 |
70 | scrollContainer.addEventListener("scroll", () => {
71 | const maxScrollHeight =
72 | scrollContainer.scrollHeight - scrollContainer.clientHeight;
73 | let currentScrollTop = scrollContainer.scrollTop;
74 |
75 | let threshold = Math.abs(maxScrollHeight - currentScrollTop);
76 |
77 | if (threshold <= 5) {
78 | for (let i = 0; i < 2; i++) {
79 | addOneItem();
80 | }
81 | }
82 | });
83 |
--------------------------------------------------------------------------------
/dom-assignments/images/five.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAMUDRALAARAVIND/september/a2a5f38fe55d4d2c5d80399eaf891eb4a45c30c8/dom-assignments/images/five.jpeg
--------------------------------------------------------------------------------
/dom-assignments/images/four.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAMUDRALAARAVIND/september/a2a5f38fe55d4d2c5d80399eaf891eb4a45c30c8/dom-assignments/images/four.jpeg
--------------------------------------------------------------------------------
/dom-assignments/images/one.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAMUDRALAARAVIND/september/a2a5f38fe55d4d2c5d80399eaf891eb4a45c30c8/dom-assignments/images/one.jpeg
--------------------------------------------------------------------------------
/dom-assignments/images/three.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAMUDRALAARAVIND/september/a2a5f38fe55d4d2c5d80399eaf891eb4a45c30c8/dom-assignments/images/three.jpeg
--------------------------------------------------------------------------------
/dom-assignments/images/two.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SAMUDRALAARAVIND/september/a2a5f38fe55d4d2c5d80399eaf891eb4a45c30c8/dom-assignments/images/two.jpeg
--------------------------------------------------------------------------------
/dom-assignments/instagram.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
--------------------------------------------------------------------------------
/dom-assignments/instagram.js:
--------------------------------------------------------------------------------
1 | const container = document.getElementById("container");
2 | const images = document.getElementsByTagName("img");
3 |
4 | /**
5 | *
6 | * For every image
7 | * 1. dragstart event => to set it's id in the dataTransfer.
8 | *
9 | * 2. dragover event => as every image is a dropzone we need to prevent the default behaviour in this dragover event to make it act like a drop container.
10 | *
11 | * 3. drop => to execute the swapping logic.
12 | */
13 |
14 | function onDragStart(event) {
15 | // event.target represents the dragged element
16 | event.dataTransfer.setData("sourceId", event.target.id);
17 | }
18 |
19 | function onDragOver(event) {
20 | event.preventDefault();
21 | }
22 |
23 | function onDrop(event) {
24 | // event.target => on which we drop some element
25 | const sourceId = event.dataTransfer.getData("sourceId");
26 | const sourceElement = document.getElementById(sourceId);
27 | const destElement = event.target;
28 |
29 | const sourceNextElement = sourceElement.nextElementSibling;
30 | const destNextElement = destElement.nextElementSibling;
31 |
32 | // adding destElement in front of sourceNextElement
33 | container.insertBefore(destElement, sourceNextElement);
34 |
35 | // adding sourceElement in front of destNextElement
36 | container.insertBefore(sourceElement, destNextElement);
37 | }
38 |
39 | for (let i = 0; i < images.length; i++) {
40 | images[i].addEventListener("dragstart", onDragStart);
41 | images[i].addEventListener("dragover", onDragOver);
42 | images[i].addEventListener("drop", onDrop);
43 | }
44 |
--------------------------------------------------------------------------------
/dom-assignments/speech.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
9 |
10 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/dom-assignments/speech.js:
--------------------------------------------------------------------------------
1 | let voices;
2 | const select = document.getElementsByTagName("select")[0];
3 |
4 | let timerId = setInterval(() => {
5 | voices = window.speechSynthesis.getVoices();
6 | if (voices.length > 0) {
7 | displayVoices();
8 | clearInterval(timerId);
9 | }
10 | }, 20);
11 |
12 | function displayVoices() {
13 | voices.forEach((voice, index) => {
14 | let formatString = `${voice.name} (${voice.lang})`;
15 |
16 | const option = document.createElement("option");
17 | option.innerText = formatString;
18 | option.value = index;
19 |
20 | select.appendChild(option);
21 | });
22 | }
23 |
24 | let textTobeRead = `Start speaking when the start button is clicked
25 | Stop speaking when the stop button is clicked`;
26 |
27 | function changeVoice() {
28 | let selectedValue = select.value;
29 | let utterance = new SpeechSynthesisUtterance();
30 | // utterance.lang
31 | utterance.text = textTobeRead;
32 | utterance.pitch = 1;
33 | utterance.rate = 1;
34 | utterance.voice = voices[parseInt(selectedValue)];
35 |
36 | window.speechSynthesis.speak(utterance);
37 | }
38 |
39 | function stop() {
40 | speechSynthesis.pause();
41 | }
42 |
43 | function play() {
44 | speechSynthesis.resume();
45 | }
46 |
47 | /**
48 | * 1. window.speechSynthesis is a globally available object. it deals with audio.
49 | * window.speechSynthesis.getVoices() => returns all the available voices.
50 | *
51 | * window.speechSynthesis.speak(utteranceObject);
52 | *
53 | *
54 | * SpeechSynthesisUtterance => globally available class/function.
55 | *
56 | * let utterance = new SpeechSynthesisUtterance();
57 | * utterance.text = "text to read";
58 | * utterance.voice = window.speechSynthesis.getVoices()[4]
59 | * utterance.pitch = 1
60 | * utterance.rate = 1
61 | *
62 | * window.speechSynthesis.speak(utterance) => it will start reading the text
63 | *
64 | * window.speechSynthesis.pause() // pausing the audio
65 | * window.speechSynthesis.resume() // playing again
66 | */
67 |
--------------------------------------------------------------------------------
/dom-assignments/video-player.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Video Player
8 |
12 |
13 |
14 |
15 |
66 |
67 |
68 |
69 |
--------------------------------------------------------------------------------
/projects/employee.js:
--------------------------------------------------------------------------------
1 | /**
2 | *
3 | * 1. user should be able to add emplyees.
4 | * {
5 | * name: '',
6 | * email: '',
7 | * employeeId: '',
8 | * company: '',
9 | * desigation: ''
10 | * }
11 | *
12 | * 2. added employees should be displayed on the webpage in the form of a table .
13 | *
14 | * 3. every added employee can be deleted / remove.
15 | *
16 | * 4. add edit feature for every employee under the options section.
17 | * when clicked on edit button the data of that employee should be pre populated in the form
18 | * upon submission of that form update record in the UI.
19 | */
20 |
21 | const form = document.getElementById("form");
22 | const tbody = document.getElementById("tbody");
23 |
24 | const employees = [];
25 |
26 | // it should take the details of an employee (object) and adds this object to the table
27 | function addEmployee(employee) {
28 | // check if the employe exist aleady in the array .
29 | for (let i = 0; i < employees.length; i++) {
30 | let e = employees[i];
31 | if (e.email === employee.email) {
32 | alert("Email already exsists");
33 | // if employee found do not add the current employee.
34 | return;
35 | } else if (e.empId === employee.empId) {
36 | alert("Employee ID already exists");
37 | return;
38 | }
39 | }
40 |
41 | const tr = document.createElement("tr");
42 |
43 | tr.innerHTML = `
${employee.name}
44 |
${employee.email}
45 |
${employee.empId}
46 |
${employee.company}
47 |
${employee.designation}
48 |
49 |
50 |
51 | `;
52 |
53 | tbody.appendChild(tr);
54 | employees.push(employee);
55 | // after addiing an employee into the table clear the form.
56 | form.reset();
57 | }
58 |
59 | // below function deletes the employee
60 |
61 | function deleteEmployee(buttonRef) {
62 | let empId = buttonRef.getAttribute("data-empid");
63 |
64 | // using the above empId delete the corresponding object in the employess array
65 | for (let i = 0; i < employees.length; i++) {
66 | if (employees[i].empId === empId) {
67 | employees.splice(i, 1);
68 | break;
69 | }
70 | }
71 |
72 | // also remove the employee from the DOM tree.
73 | let parentTd = buttonRef.parentNode;
74 | let parentTr = parentTd.parentNode;
75 |
76 | // the below line removed the
from the DOM tree
77 | parentTr.remove();
78 | }
79 |
80 | form.addEventListener("submit", (event) => {
81 | event.preventDefault();
82 |
83 | let employee = {
84 | name: event.target.name.value,
85 | email: event.target.email.value,
86 | empId: event.target.empId.value,
87 | company: event.target.company.value,
88 | designation: event.target.designation.value,
89 | };
90 |
91 | addEmployee(employee);
92 | });
93 |
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | # JavaScript F2
2 |
3 | Get Ready for mastering Javascript. This module is designed to help you learn the fundamentals of JavaScript programming, from the basics to more advanced topics. By the end of this module, you'll have a solid understanding of JavaScript and be able to build interactive web applications.
4 |
5 | ## Table of Contents
6 |
7 | - **Introduction to Javascript**
8 | - Variables and Data types.
9 | - Operators (unary , binary and ternary )
10 | - conditional statements ( if , else if, else )
11 | - loops ( for, while , do while )
12 | - **Arrays**
13 | - Arrays and important Array methods
14 | - Object literals.
15 | - Destructuring & Spread Operator
16 | - Functions basics and callbacks.
17 | - Higher Order functions (forEach, map, filter, reduce)
18 | - Problems on Arrays.
19 | - **Strings**
20 | - indexing and immutability of strings.
21 | - template strings
22 | - Strings important methods.
23 | - Problems on strings.
24 | - **Functions and Execution flow**
25 | - Function syntax and usage.
26 | - Call by reference & call by value .
27 | - scope and scope chaining.
28 | - closures.
29 | - Callbacks & Higher order functions.
30 | - **_More to add ...._**
31 |
32 | ## Prerequisites
33 |
34 | Before starting this module, it's recommended that you have:
35 |
36 | - Basic knowledge of HTML and CSS.
37 | - A code editor installed (e.g. Visual Studio Code).
38 | - A web browser for testing your JavaScript code.
39 |
40 | ## Exercises and Projects
41 |
42 | - The only way to master any programming language is to understand the core of it and practice. Follow the below 2 Step approach to master any programming language.
43 |
44 | - **Step 1 :** Understand the concept very clearly then write some code snippets and evaluate your learning.
45 | - **Step 2 :** Once you find that you're conceptually strong then head towards solving DSA questions from accio portal or leetcode or interviewbit.
46 |
47 | ## Resources
48 |
49 | To enhance your learning experience in this course, consider the following resources:
50 |
51 | 1. **Class Recordings:** If you need additional clarification on any JavaScript concepts covered in this course, don't hesitate to refer to the recorded class sessions. These recordings can provide valuable insights and help reinforce your understanding.
52 | 2. **ChatGPT:** For quick answers to your JavaScript questions or assistance with coding challenges, you can rely on ChatGPT, an AI-powered language model. ChatGPT can provide explanations, code snippets, and guidance to help you with your learning journey.
53 | 3. **[MDN Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Addition):** The Mozilla Developer Network (MDN) JavaScript documentation is a comprehensive and reliable resource for understanding JavaScript in-depth. Be sure to explore the MDN documentation thoroughly, especially when you want to dive deeper into specific JavaScript operators or features.
54 |
55 | ---
56 |
57 | Happy coding, and enjoy your JavaScript learning journey!
58 |
--------------------------------------------------------------------------------
/scope/closures.js:
--------------------------------------------------------------------------------
1 | // var add = function (a, b) {
2 | // return a + b;
3 | // };
4 |
5 | // var subtract = function (a, b) {
6 | // return a - b;
7 | // };
8 |
9 | // var op = function (func) {
10 | // // func => subtract invoking func is nothing but invoking subtract
11 | // var x = 2;
12 | // var y = 3;
13 | // return func(x, y); // -1 : subtract(2, 3)
14 | // };
15 |
16 | // console.log(op(subtract)); // console.log( -1 )
17 |
18 | // // op function => higher order function
19 | // // subtract => callback functions
20 |
21 | // function a() {
22 | // console.log("Inside a"); // Inside a
23 |
24 | // function b() {
25 | // console.log("Inside b"); // Inside b
26 | // }
27 | // return b;
28 | // }
29 |
30 | // let x = a(); // x = b
31 | // x(); // x() = b();
32 |
33 | // str = "abca" ;
34 | // i
35 | // function firstNonRepeatedChar(str) {
36 | // let obj = {};
37 | // for (let i = 0; i < str.length; i++) {
38 | // if (obj[str[i]] !== undefined) {
39 | // // obj["a"]
40 | // obj[str[i]] += 1;
41 | // } else {
42 | // obj[str[i]] = 1;
43 | // }
44 | // }
45 | // // {"a": 2, "b" : 1, "c" : 1}
46 |
47 | // for (let i = 0; i < str.length; i++) {
48 | // if (obj[str[i]] == 1) { // i = 1 , str[1] = "b" , obj["b"] = 1
49 | // return str[i];
50 | // }
51 | // }
52 |
53 | // return null;
54 | // }
55 |
56 | // let obj = {} ;
57 |
58 | // console.log(obj["x"]) // undefined
59 | // obj["abc"] = 1 ; // { "abc" : 1}
60 |
61 | /**
62 | * Closures :
63 | *
64 | *
65 | *
66 | */
67 | // let a = 100;
68 | // function parent() {
69 | // // let a = 20;
70 |
71 | // let child = () => {
72 | // // parent of child func is `parent` function
73 | // console.log(a); // 20
74 | // };
75 |
76 | // return child;
77 | // }
78 |
79 | // let x = parent(); // typeof x = function
80 |
81 | // x();
82 |
83 | /*
84 |
85 | Primitive(simple) and Non primitive(complex) data types
86 |
87 | */
88 |
89 | // let a = 20 ; // 4bytes\
90 |
91 | // let arr = [ 20, 30, 40 ]
92 |
93 | // let callme = (a, b) => {
94 | // console.log(a , b)
95 | // a = 19 ;
96 | // b[0] = 12 ;
97 | // }
98 |
99 | // let x = 20, y = [5, 1, 10] ;
100 | // callme(x, y);
101 | // console.log(x, y)
102 |
103 | // let a = 20 ;
104 | // function callme(a) {
105 |
106 | // let child = () => {
107 | // console.log(a); // 30
108 | // }
109 | // return child ;
110 | // }
111 |
112 | // let x = callme() ;
113 | // x(); // child ()
114 |
115 | // Destructuring and Spread operator
116 |
117 | // let arr = [90, 10, 200] ;
118 |
119 | // let x = arr[1] ;
120 |
121 | // let [,y] = [4, 5, 20];
122 |
123 | // console.log(y);
124 |
125 | // let {
126 | // address: { pincode },
127 | // age,
128 | // } = {
129 | // name: "aravind",
130 | // age: 22,
131 | // address: {
132 | // city: "Warangal",
133 | // pincode: 383902,
134 | // },
135 | // };
136 |
137 | // console.log(pincode);
138 |
139 | // let [, , [, a]] = [10, 20, [18, 99]];
140 | // console.log(a);
141 |
142 | // function arithmatic(a, b) {
143 | // return [a + b, a - b, a * b, a / b];
144 | // }
145 |
146 | // let [addition, , mul] = arithmatic(10, 20);
147 | // console.log(addition, mul);
148 |
149 | //
150 |
151 | // Spread operator (...), arrays , Objects, string
152 |
153 | // let arr = [90, 20, 30];
154 | // // ...[90, 20, 30] = 90, 20, 30
155 | // let arr2 = [1, 2, ...[90, 20, 30], 189];
156 |
157 | // console.log(arr2);
158 |
159 | // [1, 2, ...[90, 20, 30] , 189] => [1, 2, 90, 20, 30 ,189]
160 |
161 | // function callme(a, b, c) {
162 | // console.log(a, b, c);
163 | // }
164 | // callme( 10, 20, 30 )
165 | // ...[10, 20, 30] = 10, 20, 30
166 | // callme([10, 20, 30]);
167 |
168 | // let user = {
169 | // name: "Aravind",
170 | // email: "aravind@gmail.com",
171 | // };
172 | // // ...{name: "Aravind",email: "aravind@gmail.com"}
173 | // // name: "Aravind", email: "aravind@gmail.com"
174 | // let updatedUser = {
175 | // phoneNumber: 389202020,
176 | // gender: "male",
177 | // email: user.email
178 | // };
179 |
180 | // console.log(updatedUser);
181 |
182 | function callme(x) {
183 | // x = { name: 'aravind', age: 22 }
184 | let { name, age, abc } = { name: "aravind", age: 22 };
185 | console.log(name, age, abc); // 'aravind'
186 | }
187 |
188 | callme({ name: "aravind", age: 22 });
189 |
--------------------------------------------------------------------------------
/scope/execution-flow.js:
--------------------------------------------------------------------------------
1 | /**
2 | * 1. Execution flow of JS code .
3 | * 2. Scope & Scope chain (Block scope and context scope)
4 | * 3. Hoisting
5 | */
6 |
7 | // function callme() {
8 | // // code
9 | // }
10 |
11 | // let x = function() {
12 | // // code
13 | // }
14 |
15 | // let y = () => {
16 | // // code
17 | // }
18 |
19 | // let a = 20;
20 | // var b = 200;
21 | // let callme = () => {
22 | // let b = 100;
23 | // console.log(b, a); // 100, 20
24 | // };
25 |
26 | // callme();
27 | // console.log(a + b); // 200
28 |
29 | /**
30 | * 1. Every context will go through 2 phases.
31 | * i. Creation Phase
32 | * ii. Execution Phase
33 | *
34 | * i) IN creation phase variables will be intialised with some value .
35 | * let , var, const , function
36 | *
37 | * let or const => undefined , kept inside the Temporal Dead Zone ( TDZ )
38 | * var => undefined => will be added inside the TDZ
39 | * function => actual value./
40 | *
41 | *
42 | * ii) In execution phase code be executed line by line.
43 | */
44 |
45 | // console.log(a); // undefined
46 | // var a = 100;
47 | // console.log(a); // 100
48 |
49 | // console.log(a); // Error: Cannot access `a` before it's intialisation.
50 | // let a = 100;
51 | // console.log(a);
52 |
53 | // let f = () => {
54 | // console.log(a);
55 | // var a = 200;
56 | // console.log(a);
57 | // console.log(b);
58 | // };
59 | // f();
60 | // let b = 200;
61 | // console.log("something");
62 |
63 | // ES6 in 2015
64 | // let ,const => before ES6 var, function
65 |
66 | // let f1 = () => {
67 | // console.log(a); // 900
68 | // let f2 = () => {
69 | // console.log(a); // 900
70 | // };
71 | // f2();
72 | // };
73 |
74 | // // let a = 900; // a = 900
75 |
76 | // f1();
77 | // let b = 900;
78 |
79 | /*
80 | 1. Creation Phase of Global context:
81 | f1 = undefined (TDZ)
82 | a = undefined (TDZ)
83 |
84 | 2. Execution phase of global context
85 | f1 = () (No TDZ)
86 | a = 900 (No TDZ)
87 | */
88 |
89 | // console.log(age); // age is not defined.
90 |
91 | /**
92 | *
93 | * Scope
94 | *
95 | * 1. Block Scope (let, const )
96 | * Block means {}
97 | * 2. Context scope ( var, function )
98 | */
99 |
100 | // let b = 900;
101 | // {
102 | // let a = 200;
103 | // console.log(a, b);
104 | // }
105 | // console.log(a);
106 |
107 | // console.log(x);
108 | // if (false) {
109 | // console.log(x);
110 | // var x = 10;
111 | // let b = 200;
112 | // console.log(x + b);
113 | // }
114 | // console.log(x);
115 | // console.log(b);
116 |
117 | // console.log(x);
118 | // let f = () => {
119 | // console.log(x);
120 | // var x = 20;
121 | // console.log(x);
122 | // };
123 |
124 | // f();
125 | // console.log(x);
126 |
127 | // var x = 180; // 1000
128 |
129 | // function callme() {
130 | // var x = 500;
131 | // console.log(x); // 500
132 | // if (false) {
133 | // let a = 200;
134 | // var x = 1000; // x = 1000
135 | // console.log(a + x); // 1200
136 | // }
137 | // console.log(x); // 500
138 | // }
139 | // callme();
140 |
141 | // x = 200; // var x = 200 ;
142 | // console.log(x); // undefined
143 | // console.log(x); // 200
144 |
--------------------------------------------------------------------------------
/scope/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
9 |
10 |
Javascript Execution flow
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/strings/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Strings
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/strings/regexp.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Regular Expressions:
3 | *
4 | Basic Characters and Metacharacters:
5 |
6 | Ordinary characters (e.g., letters and digits)
7 | in a regular expression match themselves. For example, /abc/ matches the string "abc".
8 | Some characters have special meanings, called metacharacters.
9 | Common metacharacters include ., *, +, ?, | etc. To match these characters literally, you need to escape them with a backslash (\).
10 |
11 | \d used for digit match
12 | \w used for word char match ( alpha, _, numeric )
13 |
14 | Character Classes:
15 |
16 | Square brackets [] define a character class. For example, [aeiou] matches any single vowel.
17 | You can use hyphens to specify a range, like [0-9] for any digit.
18 | You can use ^ inside a character class to negate it. For example, [^0-9] matches any character that is not a digit.
19 |
20 | Quantifiers:
21 |
22 | Quantifiers control the number of times a character or group can be matched:
23 | *: Matches 0 or more occurrences (e.g., a* matches "", "a", "aa", ...).
24 | +: Matches 1 or more occurrences (e.g., a+ matches "a", "aa", ...).
25 | ?: Matches 0 or 1 occurrence (e.g., a? matches "", "a").
26 | {n}: Matches exactly n occurrences (e.g., a{3} matches "aaa").
27 | {n,}: Matches at least n occurrences (e.g., a{3,} matches "aaa", "aaaa", ...).
28 | {n,m}: Matches between n and m occurrences (e.g., a{2,4} matches "aa", "aaa", "aaaa").
29 |
30 | Anchors:
31 |
32 | Anchors define where in the text a match should occur:
33 | ^: Matches the start of a line (or string).
34 | $: Matches the end of a line (or string).
35 | \b: Matches a word boundary.
36 |
37 | Modifiers:
38 |
39 | Modifiers affect how the regular expression is applied:
40 | i: Case-insensitive matching (e.g., /abc/i matches "ABC", "abc", etc.).
41 | g: Global matching (matches all occurrences, not just the first).
42 | */
43 |
44 | // let str = "g goo goooo is good one";
45 |
46 | // o+ => "o", "oo", "ooo", "oooooo"
47 | // console.log(str.match(/o+/g));
48 |
49 | // go* => "g", "go", "goo", "goooo"
50 | // console.log(str.match(/go*/g));
51 |
52 | // go? => "g" , "go"
53 | // console.log(str.match(/go?/g));
54 |
55 | // go{2} => `goo`
56 | // go{2,4} => `goo`, `gooo`, `goooo`
57 | // console.log(str.match(/goo|is/g));
58 |
59 | // go* => g, go, goo, goooo
60 | // go+ => go, gooo, gooooo
61 |
62 | // let str = "a$-_8b91"; // 8, 9, 1
63 | // "8", "91"
64 |
65 | // /pattern/flga => pattern = \d => extracts digits
66 | // console.log(str.match(/\d+/g));
67 |
68 | // exp = / \d+ /g = digit+
69 |
70 | // 12, 8, 37389939393
71 |
72 | // let x = "ab$23_()";
73 | //"a", "b", "2", "3", "_"
74 | // word charecters => alpha, numerics, _
75 |
76 | // the most
77 | // \w => matches all the word charecters.
78 | // console.log(x.match(/\w/g));
79 |
80 | // \b => word boundary
81 |
82 | // console.log(x.match(/\b/g));
83 |
84 | // let str = "the sathe man an";
85 |
86 | // // a, an ,the are the three articles
87 | // console.log(str.match(/\bthe\b/g));
88 |
89 | let str = "an rockey launched a the rocket";
90 |
91 | // console.log(str.match(/\bthe\b|\ban\b|\ba\b/g));
92 |
93 | let regexp = /\bthe\b|\ban\b|\ba\b/gi;
94 | // "$ rockey launched $ $ rocket"
95 | console.log(str.replace(regexp, "$"));
96 |
97 | let arr = [
98 | "The Virupaksha Temple", // "Virupaksha Temple"
99 | "a Victoria Memorial", //"Victoria Memorial"
100 | "an Tajmahal", // "Tajmahal"
101 | ];
102 |
103 | let articleLessArray = [];
104 | /* ["Virupaksha Temple", "Victoria Memorial", "Tajmahal" ]
105 |
106 | {
107 | "Virupaksha Temple": "The Virupaksha Temple",
108 | "Victoria Memorial": "a Victoria Memorial",
109 | "Tajmahal": "an Tajmahal"
110 | }
111 | */
112 | let mp = {};
113 | // {aricleLessItem: ""}
114 |
115 | for (let i = 0; i < arr.length; i++) {
116 | let articleLessItem = arr[i].replace(regexp, "").trim();
117 | articleLessItem = articleLessItem.replace(/ /g, " "); // remove two spaces with a single space
118 | articleLessArray.push(articleLessItem);
119 | mp[articleLessItem] = arr[i];
120 | // for i = 0 arr[i] = "The Virupaksha Temple", articlLessItem = "Virupaksha Temple"
121 |
122 | // mp = { "Virupaksha Temple": "The Virupaksha Temple" }
123 | }
124 | // articleLessArray = ["Virupaksha Temple", "Victoria Memorial", "Tajmahal" ]
125 | //
126 | articleLessArray.sort();
127 |
128 | let ans = [];
129 |
130 | for (let i of articleLessArray) {
131 | ans.push(mp[i]);
132 | }
133 |
134 | console.log(ans);
135 | // without removing articles the sorting order will be as follows
136 | // 'a Victoria Memorial'
137 | // 'an Tajmahal'
138 | // 'The Virupaksha Temple'
139 |
140 | // [
141 | // "Virupaksha Temple",
142 | // "Victoria Memorial",
143 | // "Tajmahal"
144 | // ]
145 |
146 | // 'an Tajmahal'
147 | // 'a Victoria Memorial'
148 | // 'The Virupaksha Temple'
149 |
150 | // originalArray = ["the king", "an apple", "a blanket"]
151 | // articleLessArray = ["king", "apple", "blanket"]
152 | // mp = {"king" : "the king", "apple" : "an apple", "blanket" : "a blanket"}
153 | // articleLessArray.sort();
154 | // articleLessArray = ["apple", "blanket", "king"]
155 |
156 | // ans = ["an apple", "a blanket", "the king"]
157 |
158 | // output = ["an apple", "a blanket", "the king"]
159 |
--------------------------------------------------------------------------------
/strings/sort.js:
--------------------------------------------------------------------------------
1 | // let arr = [19, 5, 29, 2];
2 | // [2, 5, 19, 29]
3 |
4 | // ["19", "5", "9", "2"]
5 | // "19", "2", "29", "5"
6 |
7 | // by default the sort function sorts the elements in the lexicographical order ( numbers will be treated as string )
8 |
9 | // sort is a higher order function since it takes another function as argument .
10 |
11 | /**
12 | *
13 | * Compare function
14 | * (a, b) => +ve || -ve || 0
15 | *
16 | * when compare function returns -ve (`a` will come before `b`)
17 | *
18 | * when compare function returns +ve (`b` will come before `a` )
19 | *
20 | * when compare function returns 0 ( no change in the order of `a` and `b` in the final output )
21 | */
22 |
23 | // let arr = [19, 5, 29, 2];
24 |
25 | // sort in increasing order.
26 | // arr.sort((a, b) => a - b);
27 | // console.log(arr);
28 |
29 | // sort in decreasing order
30 | // arr.sort((a, b) => b - a);
31 | // console.log(arr);
32 |
33 | /*
34 | HomeWork:
35 | Problem:
36 | given an integer array find the highest frequent element in the array without using the extra space.
37 | */
38 |
39 | // let arr = ["abc", "abmx", "mno", "bcd"];
40 |
41 | // // by default sorts in the increasing order.
42 | // arr.sort((a, b) => {
43 | // if (a > b) {
44 | // return -1;
45 | // } else if (b > a) {
46 | // return 1;
47 | // }
48 | // return 0;
49 | // });
50 | // // ["mno", "bcd", "abmx", "abc"]
51 | // // "abc", "abmx", "bcd", "mno"
52 | // console.log(arr);
53 |
54 | // Objects
55 |
56 | // Not readable
57 | let user1 = [22, "Yash Sharma", "Male"];
58 | // 0 1 2
59 | // Readable
60 | let user2 = {
61 | age: 22, // "age"
62 | name: "Yash Sharma",
63 | gender: "Male",
64 | };
65 |
66 | // extract name value
67 | // console.log(user1[1], user2["name"], user2.name);
68 |
69 | // extract gender from both
70 | // console.log(user1[2], user2["gender"], user2.gender);
71 |
72 | // extract the age from both variables
73 | // console.log(user1[0], user2["age"], user2.age);
74 |
75 | // console.log(user1[100], user2["dfejfnekf"], user2.ejekkdkd);
76 |
77 | // 1. adding new element
78 | // Arrays are ordered
79 | // user1.push("enke");
80 | // console.log(user1);
81 |
82 | // user2.email = "aravind@gmail.com";
83 | // user2["email"] = "aravind@gmail.com";
84 | // console.log(user2);
85 |
86 | // 2. Update
87 | // console.log(user1);
88 | // user1[1] = "Nayeem";
89 | // console.log(user1);
90 |
91 | // user2["name"] = "nayeem";
92 | // console.log(user2);
93 |
94 | // 3. Delete
95 |
96 | // delete gender from user1
97 |
98 | // user1.pop();
99 | // console.log(user1);
100 |
101 | // delete user2.gender;
102 | // console.log(user2);
103 |
104 | // delete user2;
105 | // console.log(user2);
106 |
107 | // user2["email"] = "dskddk" ;
108 |
109 | // console.log(user2["email"])
110 |
111 | // Iteration on Arrays and Objects
112 | // let arr = [4, 9, 1, 9];
113 | // 0 1 2 3
114 |
115 | // for in loop
116 | // for of loop
117 |
118 | // for (let i in arr) {
119 | // in operator iterates on the keys
120 | // console.log(i, arr[i]);
121 | // }
122 |
123 | // for (let i of arr) {
124 | // console.log(i);
125 | // }
126 |
127 | // let obj = {
128 | // name: "aravind",
129 | // age: 22,
130 | // email: "aravind@gmail.com",
131 | // };
132 |
133 | // let x = Object.keys(obj);
134 | // // x = ["name", "age", "email"]
135 |
136 | // for (let i = 0; i < x.length; i++) {
137 | // // x[0] = "name" , x[1] = "age", x[2] = "email"
138 | // console.log(x[i], obj[x[i]]);
139 | // }
140 |
141 | // let obj = {
142 | // name: "skks",
143 | // "x-y": 23,
144 | // };
145 | // console.log(obj["x-y"]);
146 |
147 | // for (let i in obj) {
148 | // console.log(i, obj[i]);
149 | // }
150 |
--------------------------------------------------------------------------------
/this/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/this/index.js:
--------------------------------------------------------------------------------
1 | /*
2 | 1.
3 |
4 | An mcq question can have the following properties .
5 |
6 | {
7 | questionNumber: 1 ,
8 | score: 3 ,
9 | description: "What is the output of following code?"
10 | }
11 | */
12 |
13 | // let question = {
14 | // questionNumber: 1 ,
15 | // score: 3 ,
16 | // description: "What is the output of following code?",
17 | // image: "https://i.postimg.cc/tgkTdhGt/Screenshot-2023-02-26-211045.png",
18 | // options: [
19 | // "5",
20 | // "-1",
21 | // "ƒ (func) { var x = 2; var y = 3; return func(x, y); }",
22 | // "ƒ (a, b) { return a+b; }"
23 | // ]
24 | // }
25 |
26 | // let questions = [
27 | // question,
28 | // question,
29 | // question,
30 | // ]
31 |
32 | // 936
33 |
34 | // React Native => js
35 |
36 | // let follower = {
37 | // username: "yeshwanth",
38 | // imageUrl: "",
39 | // isFollowing: true,
40 | // id: 28739922
41 | // }
42 |
43 | // let followers = [
44 | // follower,
45 | // follower,
46 | // follower,
47 | // follower
48 | // ]
49 |
50 | /**
51 | *
52 | * this keyword
53 | */
54 |
55 | // var a = 1; // 100
56 |
57 | // function callme() {
58 | // console.log(x) // 1
59 | // x = 100 ;
60 | // return ;
61 | // function a(){}
62 | // }
63 |
64 | // callme();
65 | // console.log(a); // 100
66 |
67 | // a = 20; // var a = 20 ;
68 | // console.log(a); // 20
69 |
70 | // console.log(a); // a is not defined
71 | // a = 20;
72 |
73 | // let x = function(){}
74 |
75 | // y = 100 ; // var y = 100
76 |
77 | // var y = 200 ;
78 | // var y = 900 ;
79 |
80 | // a();
81 | // function a() {
82 | // console.log("first");
83 | // }
84 |
--------------------------------------------------------------------------------
/this/this.js:
--------------------------------------------------------------------------------
1 | /**
2 | *
3 | * this keyword
4 | *
5 | * 1. this keyword always refers to some heap memory address (object).
6 | *
7 | * we can use `this` keyword either in global line or in local line
8 | *
9 | *
10 | * when we use `this` keyword in global it points to `window` object.
11 | *
12 | *
13 | * when `this` keyword used inside a function it will point to the object whichever invokes that function .
14 | */
15 |
16 | // console.log(window);
17 |
18 | /*
19 | let obj = {
20 | alert: 100,
21 | printName: () => {
22 | console.log("aravind");
23 | },
24 | };
25 |
26 | console.log(obj.alert); // 100
27 |
28 | obj["printName"]();
29 |
30 | console.log(typeof obj.printName); // number
31 | */
32 |
33 | // console.log(window.alert);
34 |
35 | // window.alert("Hi Aravind");
36 |
37 | // console.log(typeof window.prompt);
38 |
39 | // let x = window.prompt();
40 | // console.log(x);
41 |
42 | // console.log(window.innerHeight);
43 |
44 | // console.log(this == window);
45 |
46 | // console.log(this); // global => window
47 |
48 | /*
49 | var aa = 20; // will be added to window object
50 | let aaa = 30; // will not be added to window object
51 | const aaaa = 400; // will not be added to window object
52 | function aaaaa() { // will be added to window object
53 | console.log(this);
54 | }
55 |
56 | console.log(window);
57 | */
58 |
59 | /**
60 | * Wh
61 | */
62 |
63 | // function callme() {
64 | // // will be a property of window
65 | // // this = points to the object which invokes it
66 | // console.log(this); // this => window
67 | // }
68 |
69 | // this.callme(); // this = window => window.callme()
70 |
71 | // let obj = {
72 | // a: 10,
73 | // b: 20,
74 | // callme: function () {
75 | // // this = will points to the object whichever invokes this function
76 | // console.log(this); // this => obj
77 | // },
78 | // };
79 |
80 | // obj.callme(); // obj is invoking the function callme
81 |
--------------------------------------------------------------------------------
/this/this2.js:
--------------------------------------------------------------------------------
1 | /*
2 | 1. this => global => window
3 | 2. this => locally => points to an object who invokes it.
4 |
5 |
6 | var , function declared variables (in global context) will become the properties of window object by default.
7 |
8 | Inside function this keyword has no meaning . which means `this` keyword inside an arrow function will be treated as just a variable like all other variable.
9 |
10 | When a regular function is called without any object infront of it , `this` keyword inside such a function will always be global object.
11 | */
12 |
13 | // let x = {
14 | // name: "aravind",
15 | // gender: "male",
16 | // callme: function () {
17 | // // this = x
18 | // console.log(this);
19 | // },
20 | // address: {
21 | // city: "Waranagal",
22 | // callme1: function () {
23 | // // this = address
24 | // console.log(this);
25 | // },
26 | // },
27 | // };
28 |
29 | // x.address.callme1(); // address object is invoking callme1
30 |
31 | // x.callme(); // x is invoking callme
32 |
33 | // var aaa = 200;
34 |
35 | // function aaa() {}
36 |
37 | // console.log(window);
38 |
39 | // console.log(aaa, window.aaa);
40 |
41 | // function callme() {
42 | // // this = window
43 | // console.log(this);
44 | // }
45 | // console.log(window.callme);
46 | // callme(); // window object is invoking callme/
47 |
48 | /*
49 |
50 | let a = 200;
51 | // console.log(this) // window
52 | let func = () => {
53 | console.log(a);
54 | console.log(this); // window
55 | // `this` variable is not present in this context it gets from global context, in the global context `this` means `window`.
56 | // treat `this` as just like other variables.
57 | };
58 |
59 | func();
60 |
61 | */
62 | // console.log(this === window)
63 | // let obj = {
64 | // x: 100,
65 | // y: 200,
66 | // callme1: () => {
67 | // console.log(this);
68 | // },
69 | // callme2: function () {
70 | // // this = obj
71 | // console.log(this); // obj
72 | // },
73 | // };
74 |
75 | // // obj.callme2(); // obj is invoking callme2 , callme2 is a regular function.
76 |
77 | // obj.callme1(); // obj is invoking callme1, callme1 is an arrow function.
78 |
79 | // let obj = {
80 | // x: 10,
81 | // y: 20,
82 | // callme: function () {
83 | // console.log(this); // this => obj
84 |
85 | // let f = () => {
86 | // console.log(this); // this = obj
87 | // // treat `this` as a variable
88 | // };
89 | // // parent of function f, callme
90 | // f();
91 | // },
92 | // };
93 | // obj.callme();
94 |
95 | // let obj = {
96 | // x: 10,
97 | // y: 20,
98 | // callme: function () {
99 | // console.log(this); // this => obj
100 | // let f = function () {
101 | // console.log(this); // window
102 | // };
103 | // f(); // no one invokes the function f and f is also not an arrow function
104 | // },
105 | // };
106 |
107 | // obj.callme();
108 |
109 | // class Student {
110 | // constructor(n, a) {
111 | // console.log(this); // #300 = {}
112 | // this.name = n;
113 | // this.age = a;
114 | // console.log(this);
115 | // }
116 | // }
117 |
118 | // let student1 = new Student("Rockey", 22);// #300
119 | // let studnet2 = new Student("abc", 10); // #500
120 |
121 | // console.log(student1); // #300 => { name: "Rockey", age: 22}
122 |
123 | // student1.name = "Rockey";
124 | // student1.age = 22;
125 | // student1.email = "rockeybhai@gmail.com";
126 |
127 | // console.log(student1);
128 |
--------------------------------------------------------------------------------
/timers/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
21 |
22 |
23 |
28 |
30 |
31 |
35 |
36 |
37 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/timers/index.js:
--------------------------------------------------------------------------------
1 | // console.log(1);
2 |
3 | // the first two arguments of setTimeout
4 | // 1. function to be called.
5 | // 2. time in milliseconds after which we want to call the function.
6 | // setTimeout(function () {
7 | // // f1
8 | // console.log(2);
9 | // }, 200);
10 |
11 | // setTimeout(function () {
12 | // // f2
13 | // console.log(4);
14 | // }, 199);
15 |
16 | // console.log(3);
17 |
18 | // 1 3 2 4
19 | // scheduler => f1, f2
20 | // callback queue => f2
21 | // let d1 = new Date();
22 | // for (let i = 0; i < 10e9; i++) {}
23 | // let d2 = new Date();
24 | // console.log(d2 - d1); // gives the milliseconds gap
25 |
26 | // console.log(1);
27 | // setTimeout(() => {
28 | // // f1 = #100
29 | // console.log(2);
30 | // }, 1000);
31 |
32 | // for (let i = 0; i < 10e9; i++) {} // Global Context
33 |
34 | // setTimeout(() => {
35 | // // f2
36 | // console.log(3);
37 | // });
38 |
39 | // console.log(4);
40 |
41 | /**
42 | * output: 1, 4, 2, 3
43 | * scheduler: []
44 | * callbackqueue : []
45 | * callstack=> empty => f1 => empty => f2 => empty
46 | */
47 |
48 | // setTimeout will always return a number => timerId
49 | // let x = setTimeout(() => {}); //
50 | // let y = setTimeout(() => {}); //
51 | // console.log(x, y);
52 |
53 | // console.log(1);
54 | // let timerId1 = setTimeout(() => {
55 | // console.log(3);
56 | // }, 2000);
57 | // console.log(2);
58 | // let x = 19;
59 | // if (x % 2 === 0) {
60 | // clearTimeout(timerId1); // it will clear the scheduled function
61 | // }
62 | // 1 , 2 ,3
63 | // let i = 0;
64 | // setInterval(() => {
65 | // console.log(++i);
66 | // }, 1000);
67 |
68 | // const timerElement = document.getElementById("timer");
69 |
70 | // function startTimer() {
71 | // let time = 4;
72 | // let timerId = setInterval(() => {
73 | // if (time === 0) {
74 | // clearInterval(timerId);
75 | // }
76 | // timerElement.innerText = time === 0 ? "Time's up" : --time;
77 | // }, 1000);
78 | // }
79 |
80 | // in browsers when we register a function with a time delay of 0sec. that function will not be pushed immediately into callback queue. instead that will be pushed once the callstack becomes empty.
81 |
82 | // callstack empty => #100 => empty -> one event loop cycle
83 |
84 | // setTimeout(() => {
85 | // console.log(1);
86 | // }, 200);
87 | // console.time("abc");
88 | // for (let i = 0; i < 10e8; i++) {}
89 | // console.timeEnd("abc");
90 | // setTimeout(() => {
91 | // console.log(20);
92 | // }, 0);
93 | // setTimeout(() => {
94 | // console.log(1);
95 | // }, 200);
96 | // // console.time("abc");
97 | // for (let i = 0; i < 10e8; i++) {} // 500ms
98 | // // console.timeEnd("abc");
99 | // setTimeout(() => {
100 | // console.log(2);
101 | // }, 1);
102 |
103 | // 2, 1
104 |
105 | /**
106 | * promp from the user time.
107 | * set timer for that amount of timer
108 | * implement the fature of pause and play
109 | */
110 |
111 | // let time = parseInt(window.prompt("Enter time"));
112 | // const timerElement = document.getElementById("timer");
113 | // const button = document.getElementById("handler");
114 |
115 | // timerElement.innerText = time;
116 |
117 | // button.addEventListener("click", toggleTimer);
118 |
119 | // let timerId;
120 | // function toggleTimer() {
121 | // if (!timerId) { // if the timer is not started yet
122 | // // play functionality
123 | // button.innerText = "stop";
124 | // timerId = setInterval(() => {
125 | // if (time === 0) {
126 | // timerElement.innerText = "time's up";
127 | // clearInterval(timerId);
128 | // timerId = undefined;
129 | // return;
130 | // }
131 | // timerElement.innerText = --time;
132 | // }, 1000);
133 | // } else {
134 | // // pause functionality
135 | // button.innerText = "start";
136 | // clearInterval(timerId); // 3
137 | // timerId = undefined;
138 | // }
139 | // }
140 |
141 | /**
142 | * timerId = undefined => 3 => undefined (timer is not started yet)
143 | *
144 | * button => `start` =>
145 | *
146 | * button => `stop` =>
147 | *
148 | * button => `start`
149 | */
150 |
151 | // function convertToHrs(seconds) {
152 | // // seconds is the number of seconds
153 | // let totalMins = parseInt(seconds / 60);
154 | // let totalSeconds = seconds % 60;
155 | // let totalHrs = parseInt(totalMins / 60);
156 | // let finalMins = totalMins % 60;
157 | // return `${totalHrs}H: ${finalMins}M: ${totalSeconds}S`;
158 | // // return "01H: 20M: 30S"
159 | // }
160 |
161 | // console.log(convertToHrs(3829220));
162 | // 3829220 / 60 => 63820.3333 => 63820M
163 | // 3829220 % 60 => 20S
164 | // 63820 / 60 => 1063.6666 =>
165 |
166 | const test = document.getElementById("test");
167 |
168 | function addListener() {
169 | // test.addEventListener("click", () => {
170 | // console.log("inside");
171 | // });
172 |
173 | test.onclick = () => {
174 | console.log("first");
175 | };
176 | }
177 |
--------------------------------------------------------------------------------
/topics.txt:
--------------------------------------------------------------------------------
1 | conditional statements
2 | loops
3 | variables and data types
4 | hoisting (let, var , const , function)
--------------------------------------------------------------------------------
22 | 
23 | 
24 | 
25 | 
26 |