├── README.md
├── _config.yml
├── ajax.html
├── assets
├── console.error.png
├── console.log.png
├── console.warn.png
├── console_dir.png
├── console_log.png
├── console_table.png
├── css-dom-tree.png
├── deepcopy.png
├── html-dom-tree.png
├── javascript-stages.png
├── message.json
├── rendering-process.png
├── rendering.png
└── star.png
├── browser-type.html
├── call-apply-bind.html
├── closures.html
├── create-html-elements.html
├── datatypes.html
├── dom-manipulation.html
├── es6-questions.md
├── es6
├── async-in-es6.js
└── es6-features.js
├── functions.html
├── iife-pattern.html
├── javascript-programs.md
├── miscellaneous.html
├── namespace.html
├── objects.html
├── problems
├── AllSubSetOfGivenSet.js
├── animateUsingVanillaJavascript.js
├── filterArrayBasedOnAnotherArray.js
├── flattenObject.js
├── graph.js
├── layout.md
├── lengthOfLongestSubString.js
├── maxSubArray.js
├── median_of_arr.js
├── mergeOverlappingInterval.js
├── overlapRectangle.js
├── secondLargestInArray.js
├── sequentialPromiseExecution.js
├── sortedArrayToBST.js
├── stringPermutations.js
└── wordSquare.js
├── prototype.html
└── regexp.html
/_config.yml:
--------------------------------------------------------------------------------
1 | theme: jekyll-theme-cayman
--------------------------------------------------------------------------------
/ajax.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | The text above has been created dynamically.
8 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/datatypes.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | /*
6 | #animatedElem {
7 | position: absolute;
8 | width: 20px;
9 | height: 20px;
10 | background: #ff6600;
11 | }
12 | */
13 |
14 |
15 | var elem = document.getElementById("animatedElem"),
16 | left = 0,
17 | lastFrame = +new Date,
18 | timer;
19 | // Move the element on the right at ~600px/s
20 | timer = setInterval(function() {
21 | var now = +new Date,
22 | deltaT = now - lastFrame;
23 | elem.style.left = ( left += 10 * deltaT / 16 ) + "px";
24 | lastFrame = now;
25 | // clear the timer at 400px to stop the animation
26 | if ( left > 400 ) {
27 | clearInterval( timer );
28 | }
29 | }, 16);
30 |
--------------------------------------------------------------------------------
/problems/filterArrayBasedOnAnotherArray.js:
--------------------------------------------------------------------------------
1 | let items = [
2 | {color: 'red', type: 'tv', age: 18},
3 | {color: 'silver', type: 'phone', age: 20},
4 | {color: 'blue', type: 'phone', age: 20},
5 | {color: 'green', type: 'phone', age: 20}
6 | ];
7 |
8 | let excludes = [
9 | {k: 'color', v: 'silver'},
10 | {k: 'type', v: 'tv'},
11 | ];
12 |
13 |
14 | let newItems = items.reduce((acc, item) => {
15 | let result = excludes.some(exclude => item[exclude['k']] === exclude['v']);
16 | if (!result) {
17 | acc.push(item);
18 | }
19 | return acc;
20 | }, []);
21 |
22 | console.log(newItems);
23 |
--------------------------------------------------------------------------------
/problems/flattenObject.js:
--------------------------------------------------------------------------------
1 | let obj = {
2 | "a": {
3 | "b": {
4 | "c": 12,
5 | "d": "Hello World",
6 | "e": null
7 | },
8 | "f": [1,2,3]
9 | }
10 | };
11 |
12 | const flatten = (obj, parentkey) => {
13 | return Object.keys(obj).reduce((acc, key) => {
14 | if (Object.prototype.hasOwnProperty.call(obj, key)) {
15 | let val = obj[key];
16 | if (typeof val === "object" && !Array.isArray(val) && val != null) { // != will catch undefined or null
17 | let flat = flatten(val, key);
18 | if (parentkey) {
19 | for (let i in flat) {
20 | let k = `${parentkey}/${i}`;
21 | acc[k] = flat[i];
22 | }
23 | } else {
24 | acc = flat;
25 | }
26 | } else {
27 | let prop = parentkey ? `${parentkey}/${key}` : key;
28 | acc[prop] = val;
29 | }
30 | }
31 | return acc;
32 | }, {});
33 | };
34 |
35 |
36 | console.log(flatten(obj));
37 |
38 | // {
39 | // a/b/c: 12,
40 | // a/b/d: "Hello World",
41 | // a/b/e: null,
42 | // a/f: [1, 2, 3]
43 | // }
44 |
--------------------------------------------------------------------------------
/problems/graph.js:
--------------------------------------------------------------------------------
1 | class Graph {
2 | constructor() {
3 | this.vertices = [];
4 | this.edges = {};
5 | this.numberOfEdges = 0;
6 | }
7 |
8 | addVertex(vertex) {
9 | this.vertices.push(vertex);
10 | this.edges[vertex] = [];
11 | }
12 |
13 | addEdge(vertex1, vertex2) {
14 | this.edges[vertex1].push(vertex2);
15 | this.edges[vertex2].push(vertex1);
16 | this.numberOfEdges++;
17 | }
18 |
19 | removeVertex(vertex) {
20 | const index = this.vertices.indexOf(vertex);
21 | if(~index) {
22 | this.vertices.splice(index, 1);
23 | }
24 | while(this.edges[vertex].length) {
25 | const adjacentVertex = this.edges[vertex].pop();
26 | this.removeEdge(adjacentVertex, vertex);
27 | }
28 | }
29 |
30 | removeEdge(vertex1, vertex2) {
31 | const index1 = this.edges[vertex1] ? this.edges[vertex1].indexOf(vertex2) : -1;
32 | const index2 = this.edges[vertex2] ? this.edges[vertex2].indexOf(vertex1) : -1;
33 | if(~index1) {
34 | this.edges[vertex1].splice(index1, 1);
35 | this.numberOfEdges--;
36 | }
37 | if(~index2) {
38 | this.edges[vertex2].splice(index2, 1);
39 | }
40 | }
41 |
42 | size() {
43 | return this.vertices.length;
44 | }
45 |
46 | relations() {
47 | return this.numberOfEdges;
48 | }
49 |
50 | traverseDFS(vertex, fn) {
51 | if(!~this.vertices.indexOf(vertex)) {
52 | return console.log('Vertex not found');
53 | }
54 | const visited = {};
55 | this._traverseDFS(vertex, visited, fn);
56 | }
57 |
58 | _traverseDFS(vertex, visited, fn) {
59 | visited[vertex] = true;
60 | if (typeof fn === "function") {
61 | fn(vertex);
62 | }
63 | this.edges[vertex].forEach(adjVertex => {
64 | if(!visited[adjVertex]) {
65 | this._traverseDFS(adjVertex, visited, fn);
66 | }
67 | });
68 | }
69 |
70 | traverseBFS(vertex, fn) {
71 | if(!~this.vertices.indexOf(vertex)) {
72 | return console.log('Vertex not found');
73 | }
74 | const queue = [vertex];
75 | const visited = {[vertex] : true};
76 |
77 | while(queue.length) {
78 | vertex = queue.shift();
79 | if (typeof fn === "function") {
80 | fn(vertex);
81 | }
82 | this.edges[vertex].forEach(vEdge => {
83 | if(!visited[vEdge]) {
84 | visited[vEdge] = true;
85 | queue.push(vEdge);
86 | }
87 | });
88 | }
89 | }
90 |
91 | pathFromTo(vertexSource, vertexDestination) {
92 | if(!~this.vertices.indexOf(vertexSource) || this.vertices.indexOf(vertexDestination) === -1) {
93 | return console.log('Vertex not found');
94 | }
95 | const queue = [vertexSource];
96 | const visited = {[vertexSource]: true };
97 | const paths = {};
98 |
99 | while(queue.length) {
100 | const vertex = queue.shift();
101 | this.edges[vertex].forEach(vEdge => {
102 | if(!visited[vEdge]) {
103 | visited[vEdge] = true;
104 | queue.push(vEdge);
105 | // save paths between vertices
106 | paths[vEdge] = vertex;
107 | }
108 | });
109 | }
110 |
111 | let current = vertexDestination;
112 | const path = [];
113 | while (current) {
114 | path.push(current);
115 | current = paths[current];
116 | }
117 | return path.join('-');
118 | }
119 |
120 | print() {
121 | console.log(this.vertices.map(function(vertex) {
122 | return (`${vertex} -> ${this.edges[vertex].join(', ')}`).trim();
123 | }, this).join(' | '));
124 | }
125 | }
126 |
127 | const graph = new Graph();
128 | graph.addVertex(1);
129 | graph.addVertex(2);
130 | graph.addVertex(3);
131 | graph.addVertex(4);
132 | graph.addVertex(5);
133 | graph.addVertex(6);
134 | graph.print(); // 1 -> | 2 -> | 3 -> | 4 -> | 5 -> | 6 ->
135 | graph.addEdge(1, 2);
136 | graph.addEdge(1, 5);
137 | graph.addEdge(2, 3);
138 | graph.addEdge(2, 5);
139 | graph.addEdge(3, 4);
140 | graph.addEdge(4, 5);
141 | graph.addEdge(4, 6);
142 | graph.print(); // 1 -> 2, 5 | 2 -> 1, 3, 5 | 3 -> 2, 4 | 4 -> 3, 5, 6 | 5 -> 1, 2, 4 | 6 -> 4
143 | console.log('graph size (number of vertices):', graph.size()); // => 6
144 | console.log('graph relations (number of edges):', graph.relations()); // => 7
145 | graph.traverseDFS(1, vertex => { console.log(vertex); }); // => 1 2 3 4 5 6
146 | console.log('---');
147 | graph.traverseBFS(1, vertex => { console.log(vertex); }); // => 1 2 5 3 4 6
148 | graph.traverseDFS(0, vertex => { console.log(vertex); }); // => 'Vertex not found'
149 | graph.traverseBFS(0, vertex => { console.log(vertex); }); // => 'Vertex not found'
150 | console.log('path from 6 to 1:', graph.pathFromTo(6, 1)); // => 6-4-5-1
151 | console.log('path from 3 to 5:', graph.pathFromTo(3, 5)); // => 3-2-5
152 | graph.removeEdge(1, 2);
153 | graph.removeEdge(4, 5);
154 | graph.removeEdge(10, 11);
155 | console.log('graph relations (number of edges):', graph.relations()); // => 5
156 | console.log('path from 6 to 1:', graph.pathFromTo(6, 1)); // => 6-4-3-2-5-1
157 | graph.addEdge(1, 2);
158 | graph.addEdge(4, 5);
159 | console.log('graph relations (number of edges):', graph.relations()); // => 7
160 | console.log('path from 6 to 1:', graph.pathFromTo(6, 1)); // => 6-4-5-1
161 | graph.removeVertex(5);
162 | console.log('graph size (number of vertices):', graph.size()); // => 5
163 | console.log('graph relations (number of edges):', graph.relations()); // => 4
164 | console.log('path from 6 to 1:', graph.pathFromTo(6, 1)); // => 6-4-3-2-1
165 | graph.traverseDFS(1, (v) => console.log(`traverse DFS ${v}`) );
166 | graph.traverseBFS(1, (v) => console.log(`traverse BFS ${v}`) );
167 |
--------------------------------------------------------------------------------
/problems/layout.md:
--------------------------------------------------------------------------------
1 | [FlexBox](https://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/) - Holy grail layout using FlexBox
2 | [Grid](https://bitsofco.de/holy-grail-layout-css-grid/) - Holy grail layout using grid
3 | [Learn flexbox](http://flexboxfroggy.com/) - flex box froggy
4 | [Learn CSS Grid](https://cssgridgarden.com/) - CSS grid garden
5 |
--------------------------------------------------------------------------------
/problems/lengthOfLongestSubString.js:
--------------------------------------------------------------------------------
1 | const lengthOfLongestSubstring = function(s) {
2 |
3 | let map = {}
4 | let start = 0
5 | let maxLen = 0
6 | let arr = s.split('')
7 |
8 | for (let i=0; i < s.length; i++) {
9 | let current = map[arr[i]];
10 | if (current != null && start <= current) {
11 | start = current + 1;
12 | } else {
13 | maxLen = Math.max(maxLen, i - start + 1)
14 | }
15 | map[arr[i]] = i;
16 | }
17 |
18 | return maxLen;
19 | };
20 |
21 | console.log(lengthOfLongestSubstring("abcabcbb")); //3
22 | console.log(lengthOfLongestSubstring("cccc")); //1
23 | console.log(lengthOfLongestSubstring("umesh")); 5
24 |
--------------------------------------------------------------------------------
/problems/maxSubArray.js:
--------------------------------------------------------------------------------
1 | const maxSubArray = (nums) => {
2 | let currentSum = 0;
3 | return nums.reduce((acc, item) => {
4 | currentSum = Math.max(currentSum+item, 0);
5 | return Math.max(acc, currentSum)
6 | }, 0);
7 | };
8 |
9 | console.log(maxSubArray([-2,1,-3,4,-1,2,1,-5,4])) // 6
10 | console.log(maxSubArray([4,-1,3,1])) // 7
11 |
--------------------------------------------------------------------------------
/problems/median_of_arr.js:
--------------------------------------------------------------------------------
1 | const median = (arr) => {
2 | if (!Array.isArray(arr)) {
3 | return null; // or throw error;
4 | }
5 | if (arr.length === 0) {
6 | return null;
7 | }
8 |
9 | let cloneArr = arr.slice();
10 | let sortedArr = cloneArr.sort((a, b) => a - b);
11 |
12 | let mid = Math.floor((0, sortedArr.length - 1) / 2);
13 | if (sortedArr.length % 2 === 0) {
14 | return (sortedArr[mid] + sortedArr[mid + 1]) / 2;
15 | }
16 | return sortedArr[mid];
17 | };
18 |
19 |
20 | let arr = [3,8,9,1,5,7,9,21];
21 | console.log(median(arr)); // 7.5
22 |
23 | let arr1 = [1,2,4,3,5];
24 | console.log(median(arr1)); // 3
25 |
--------------------------------------------------------------------------------
/problems/mergeOverlappingInterval.js:
--------------------------------------------------------------------------------
1 | const mergeIntervals = (arr) => {
2 | if (arr == null || arr.length < 2) {
3 | return arr;
4 | }
5 |
6 | arr.sort((a, b) => a[0] - b[0]);
7 |
8 | return arr.reduce((acc, cur) => {
9 | let last = acc.pop()
10 | if (last) {
11 | if (last[1] > cur[0]) {
12 | let newLast = [last[0], cur[1]];
13 | acc.push(newLast);
14 | } else {
15 | acc.push(last, cur);
16 | }
17 | } else {
18 | acc.push(cur);
19 | }
20 | return acc;
21 | }, []);
22 | };
23 |
24 | console.log(mergeIntervals( [[1,3],[2,6],[8,10],[15,18]])); //[[1, 6], [8, 10], [15, 18]]
25 | console.log(mergeIntervals([[1,4],[3,5],[2,4],[7,10]])); // [[1, 5], [7, 10]]
26 |
--------------------------------------------------------------------------------
/problems/overlapRectangle.js:
--------------------------------------------------------------------------------
1 | class Rectangle {
2 | constructor(x, y, width, height) {
3 | this.x = x;
4 | this.y = y;
5 | this.width = width;
6 | this.height = height;
7 | }
8 |
9 | isOverlapping(rect2) {
10 | return (this.x < (rect2.x + rect2.width) &&
11 | (this.x + this.width) > rect2.x &&
12 | this.y < (rect2.y + rect2.height) &&
13 | (this.y + this.height) > rect2.y
14 | );
15 | }
16 | }
17 |
18 | const rect1 = new Rectangle(250, 250, 150,100);
19 | const rect2 = new Rectangle(100, 100, 300, 200);
20 |
21 | const rect3 = new Rectangle(450, 450, 150,100);
22 |
23 |
24 | console.log(rect1.isOverlapping(rect2)); // true
25 |
26 | console.log(rect2.isOverlapping(rect3)); // false
27 |
--------------------------------------------------------------------------------
/problems/secondLargestInArray.js:
--------------------------------------------------------------------------------
1 | const secondLargest = (arr) => {
2 | //return arr.sort((a, b) => a - b)[arr.length -2]; // different solution
3 | let largest = -1;
4 | let secondLargest = -1;
5 | arr.forEach(el => {
6 | if (el > largest) {
7 | let temp = largest;
8 | largest = el;
9 | secondLargest = temp;
10 | } else if (el > secondLargest) {
11 | secondLargest = el;
12 | }
13 | });
14 |
15 | return secondLargest;
16 | }
17 |
18 | console.log(secondLargest([1,10,2,9])) // 9
19 |
--------------------------------------------------------------------------------
/problems/sequentialPromiseExecution.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | return tasks.reduce((promiseChain, currentTask) => {
4 | return promiseChain.then(chain =>
5 | currentTask.then(result => [...chain, result]);
6 | );
7 | }, Promise.resolve([])).then(arrayOfResults => {
8 | ....
9 | });
10 |
--------------------------------------------------------------------------------
/problems/sortedArrayToBST.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 | class Node {
3 | constructor(value){
4 | this.value = value;
5 | this.left = this.right = null;
6 | }
7 | }
8 | const sortedArrayToBST = (nums) => {
9 | let sortedArrayToBSTRec = (nums, start, end) => {
10 | if (start > end) {
11 | return null
12 | }
13 | let mid = Math.floor((start + end) / 2)
14 | let root = new Node(nums[mid])
15 | root.left = sortedArrayToBSTRec(nums, start, mid - 1)
16 | root.right = sortedArrayToBSTRec(nums, mid + 1, end)
17 | return root
18 | }
19 | return sortedArrayToBSTRec(nums, 0, nums.length - 1)
20 | };
21 |
22 | console.log(sortedArrayToBST([1,2,3,4,5,6,7]))
23 |
--------------------------------------------------------------------------------
/problems/stringPermutations.js:
--------------------------------------------------------------------------------
1 | const strPermutations = str => {
2 | if (str.length < 2) {
3 | return str; // This is our break condition
4 | }
5 |
6 | let permutations = []; // This array will hold our permutations
7 |
8 | for (let i = 0, len = str.length; i < len; i++) {
9 | let char = str[i];
10 | let remainingString = `${str.slice(0,i)}${str.slice(i+1)}`;
11 | for (let subPermutation of strPermutations(remainingString)) {
12 | permutations.push(char + subPermutation);
13 | }
14 | }
15 | return permutations;
16 | }
17 |
18 | console.log(strPermutations("abcd"));
19 | // ["abcd", "abdc", "acbd", "acdb", "adbc", "adcb", "bacd", "badc", "bcad", "bcda", "bdac", "bdca", "cabd",
20 | // "cadb", "cbad", "cbda", "cdab", "cdba", "dabc", "dacb", "dbac", "dbca", "dcab", "dcba"]
21 |
22 | // Permuation of an array
23 |
24 | function permutation(input) {
25 | let outputs = [[input[0]]];
26 | for (let i = 1; i < input.length; i++) {
27 | let current = [];
28 | for (let j = 0; j < outputs.length; j++) {
29 | let base = outputs[j];
30 | for (let k = 0; k <= base.length; k++) {
31 | let temp = base.slice();
32 | temp.splice(k, 0, input[i]);
33 | current.push(temp);
34 | }
35 | }
36 | outputs = current;
37 | }
38 | return outputs;
39 | }
40 |
41 | console.log(permutation(["a", "b", "c", "d"]));
42 | //[["d", "c", "b", "a"], ["c", "d", "b", "a"], ["c", "b", "d", "a"], ["c", "b", "a", "d"], ["d", "b", "c", "a"],
43 | // ["b", "d", "c", "a"], ["b", "c", "d", "a"], ["b", "c", "a", "d"], ["d", "b", "a", "c"], ["b", "d", "a", "c"],
44 | // ["b", "a", "d", "c"], ["b", "a", "c", "d"], ["d", "c", "a", "b"], ["c", "d", "a", "b"], ["c", "a", "d", "b"],
45 | // ["c", "a", "b", "d"], ["d", "a", "c", "b"], ["a", "d", "c", "b"], ["a", "c", "d", "b"], ["a", "c", "b", "d"],
46 | // ["d", "a", "b", "c"], ["a", "d", "b", "c"], ["a", "b", "d", "c"], ["a", "b", "c", "d"]]
47 |
--------------------------------------------------------------------------------
/problems/wordSquare.js:
--------------------------------------------------------------------------------
1 | const validWordSquare = (words) => {
2 | if (words == null || words.length === 0) {
3 | return false;
4 | }
5 | if (words.length !== words[0].length) {
6 | return false;
7 | }
8 |
9 | for (let i = 0; i < words.length; i++) {
10 | for (let j = 0; j < words[i].length; j++) {
11 | if (words[i][j] !== words[j][i]) {
12 | return false;
13 | }
14 | }
15 | }
16 | return true;
17 | };
18 |
19 | let arr = [
20 | ["b","a","l","l"],
21 | ["a","r","e","a"],
22 | ["r","e","a","d"],
23 | ["l","a","d","y"]
24 | ];
25 |
26 | let arr1 = [
27 | ["a","b","c","d"],
28 | ["b","n","r","t"],
29 | ["c","r","m","y"],
30 | ["d","t","y","e"]
31 | ];
32 |
33 |
34 | console.log(validWordSquare(arr)); // false
35 | console.log(validWordSquare(arr1)); // true
36 |
--------------------------------------------------------------------------------
/prototype.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
Prototype in JS
5 |
6 |
35 |
36 | Prototype in JavaScript
37 |
38 |
39 |
--------------------------------------------------------------------------------
/regexp.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Regular-Expression in JS
5 |
6 |
45 |
46 | Regular Expression in JavaScript
47 |
48 |
49 |
--------------------------------------------------------------------------------