├── .gitignore ├── Applicatons ├── 1.Text-editor │ ├── index.html │ ├── index.js │ └── style.css ├── 2. File-compressor │ ├── heap.js │ ├── huffman.js │ ├── index.html │ ├── sample.txt │ ├── script.js │ └── style.css ├── 3. Contact-list-search │ ├── Trie.js │ ├── index.html │ ├── person.png │ ├── script.js │ └── style.css ├── 4. Photo-editor │ ├── index.html │ ├── index.js │ └── style.css ├── 5. WhatsApp chat list │ ├── default-user.png │ ├── index.html │ ├── index.js │ └── style.css └── 6. Money splitwise │ ├── index.html │ ├── index.js │ └── style.css ├── Images ├── camera.jpg ├── contact-list.jpg ├── file-compressor.jpg ├── mario.png ├── money.png ├── text-editor.png ├── traveling.jpg └── whats-app.jpg ├── README.md ├── home.css ├── img ├── apple-touch-icon.png ├── black.jpg ├── counters-bg.jpg ├── favicon.png ├── intro-bg - Copy.jpg ├── intro-bg.jpg ├── overlay-bg.jpg ├── post-1.jpg ├── post-2.jpg ├── post-3.jpg ├── r1.png ├── r2.png ├── r3.png ├── r4.png ├── r5.png ├── r6.png ├── r7.png ├── testimonial-2.jpg ├── testimonial-4.jpg ├── work-1.jpg ├── work-2.jpg ├── work-3.jpg ├── work-4.jpg ├── work-5.jpg └── work-6.jpg ├── index.html └── index.php /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | firebase-debug.log* 8 | firebase-debug.*.log* 9 | 10 | # Firebase cache 11 | .firebase/ 12 | 13 | # Firebase config 14 | 15 | # Uncomment this if you'd like others to create their own Firebase project. 16 | # For a team working on the same Firebase project(s), it is recommended to leave 17 | # it commented so all members can deploy to the same project(s) in .firebaserc. 18 | # .firebaserc 19 | 20 | # Runtime data 21 | pids 22 | *.pid 23 | *.seed 24 | *.pid.lock 25 | 26 | # Directory for instrumented libs generated by jscoverage/JSCover 27 | lib-cov 28 | 29 | # Coverage directory used by tools like istanbul 30 | coverage 31 | 32 | # nyc test coverage 33 | .nyc_output 34 | 35 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 36 | .grunt 37 | 38 | # Bower dependency directory (https://bower.io/) 39 | bower_components 40 | 41 | # node-waf configuration 42 | .lock-wscript 43 | 44 | # Compiled binary addons (http://nodejs.org/api/addons.html) 45 | build/Release 46 | 47 | # Dependency directories 48 | node_modules/ 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Optional REPL history 57 | .node_repl_history 58 | 59 | # Output of 'npm pack' 60 | *.tgz 61 | 62 | # Yarn Integrity file 63 | .yarn-integrity 64 | 65 | # dotenv environment variables file 66 | .env 67 | -------------------------------------------------------------------------------- /Applicatons/1.Text-editor/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Text Editor 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 | 16 | 17 | Text Editor 18 | 19 | 26 | 31 |
32 |
33 | 34 |
35 | 36 | 37 | 38 |
39 | 40 | 41 | -------------------------------------------------------------------------------- /Applicatons/1.Text-editor/index.js: -------------------------------------------------------------------------------- 1 | class Stack{ 2 | arr_undo=[] 3 | arr_redo=[] 4 | buffer=4 5 | topelement = () => 6 | { 7 | return this.arr_undo[this.arr_undo.length-1] 8 | } 9 | popping = () => { 10 | if(this.arr_undo.length!=0) 11 | { 12 | let top = this.arr_undo.pop() 13 | return top 14 | } 15 | return [-1,""] 16 | } 17 | 18 | pushing = (type,charac) => { 19 | if(this.arr_undo.length==0) 20 | { 21 | if(type=="inserting") 22 | { 23 | this.arr_undo.push([type,charac]) 24 | } 25 | } 26 | else 27 | { 28 | let top = this.topelement() 29 | if(type===top[0] && top[1].length { 42 | let s = ""; 43 | let i=s1.length-1; 44 | while(i>=0) 45 | { 46 | s=s.concat(s1.substring(i,i+1)) 47 | i--; 48 | } 49 | return s; 50 | } 51 | } 52 | 53 | 54 | 55 | const textarea = document.getElementById("textarea") 56 | const undo = document.getElementById("undo") 57 | const redo = document.getElementById("redo") 58 | const stack = new Stack() 59 | 60 | textarea.addEventListener("keydown",(e) => { 61 | switch(e.key) 62 | { 63 | case 'Backspace': stack.pushing("deleting",textarea.value.substring(textarea.value.length-1,textarea.value.length)); 64 | break; 65 | default : stack.pushing("inserting",e.key); 66 | } 67 | }) 68 | 69 | undo.addEventListener("click",() => { 70 | let temp = stack.popping(); 71 | if(temp[0]!=-1) 72 | { 73 | stack.arr_redo.push([temp[0],temp[1]]) 74 | if(temp[0]=="inserting") 75 | { 76 | let templen = temp[1].length 77 | textarea.value = textarea.value.substring(0,textarea.value.length-templen) 78 | } 79 | else 80 | { 81 | textarea.value+=temp[1] 82 | } 83 | } 84 | }) 85 | 86 | redo.addEventListener("click",() => { 87 | let temp = stack.arr_redo.pop(); 88 | if(temp[0]=="inserting") 89 | { 90 | let s = stack.reverse(temp[1]) 91 | textarea.value+=s 92 | stack.pushing("inserting",temp[1]) 93 | } 94 | else 95 | { 96 | let templen = temp[1].length 97 | stack.pushing("deleting", temp[1]) 98 | textarea.value = textarea.value.substring(0,textarea.value.length-templen) 99 | } 100 | }) -------------------------------------------------------------------------------- /Applicatons/1.Text-editor/style.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900); 2 | @import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,600,700,300,200); 3 | 4 | 5 | 6 | 7 | 8 | body-body { 9 | font-family: 'Roboto', sans-serif; 10 | font-size: 14px; 11 | letter-spacing: 1px; 12 | line-height: 1.6em; 13 | font-weight: 300; 14 | color: white; 15 | } 16 | 17 | .body-body p { 18 | margin-bottom: 2em; 19 | color: white; 20 | } 21 | 22 | .header-body { 23 | border-bottom: solid 1px #e0e0e0; 24 | margin: 0 0 20px 0; 25 | } 26 | 27 | .pageTitle, 28 | .pageSubTitle { 29 | font-family: 'Titillium', sans-serif; 30 | text-transform: uppercase; 31 | color: white; 32 | } 33 | 34 | .pageTitle { 35 | color: #FF7600; 36 | } 37 | 38 | .pageTitle { 39 | font-size: 2em; 40 | font-weight: 700; 41 | line-height: 2em; 42 | } 43 | 44 | .pageSubTitle { 45 | margin-bottom: 1em; 46 | font-size: 1.4em; 47 | font-weight: 300; 48 | } 49 | 50 | .wrapper { 51 | width: 920px; 52 | padding: 40px; 53 | margin: 40px auto; 54 | background:black; 55 | box-shadow: 0px 3px 3px 1px rgba(0, 0, 0, 0.25); 56 | } 57 | 58 | .slogan { 59 | position: fixed; 60 | display: block; 61 | top: 700px; 62 | width: 100%; 63 | padding: 20px 0; 64 | text-align: center; 65 | background: #222; 66 | } 67 | 68 | .sloganTitle { 69 | font-size: 70px; 70 | font-weight: 700; 71 | line-height: 80px; 72 | color: #fff; 73 | 74 | text-shadow: 0px 2px 1px rgba(0, 0, 0, 0.25); 75 | } -------------------------------------------------------------------------------- /Applicatons/2. File-compressor/heap.js: -------------------------------------------------------------------------------- 1 | 2 | export { BinaryHeap } 3 | 4 | class BinaryHeap { 5 | 6 | constructor() { 7 | this.heap = []; 8 | } 9 | 10 | insert(value) { 11 | this.heap.push(value); 12 | this.bubbleUp(); 13 | } 14 | 15 | size() { 16 | return this.heap.length; 17 | } 18 | 19 | empty(){ 20 | return ( this.size()===0 ); 21 | } 22 | 23 | //using iterative approach 24 | bubbleUp() { 25 | let index = this.size() - 1; 26 | 27 | while (index > 0) { 28 | let element = this.heap[index], 29 | parentIndex = Math.floor((index - 1) / 2), 30 | parent = this.heap[parentIndex]; 31 | 32 | if (parent[0] >= element[0]) break; 33 | this.heap[index] = parent; 34 | this.heap[parentIndex] = element; 35 | index = parentIndex 36 | } 37 | } 38 | 39 | extractMax() { 40 | const max = this.heap[0]; 41 | const tmp = this.heap.pop(); 42 | if(!this.empty()) { 43 | this.heap[0] = tmp; 44 | this.sinkDown(0); 45 | } 46 | return max; 47 | } 48 | 49 | sinkDown(index) { 50 | 51 | let left = 2 * index + 1, 52 | right = 2 * index + 2, 53 | largest = index; 54 | const length = this.size(); 55 | 56 | // console.log(this.heap[left], left, length, this.heap[right], right, length, this.heap[largest]); 57 | 58 | if (left < length && this.heap[left][0] > this.heap[largest][0]) { 59 | largest = left 60 | } 61 | if (right < length && this.heap[right][0] > this.heap[largest][0]) { 62 | largest = right 63 | } 64 | // swap 65 | if (largest !== index) { 66 | let tmp = this.heap[largest]; 67 | this.heap[largest] = this.heap[index]; 68 | this.heap[index] = tmp; 69 | this.sinkDown(largest) 70 | } 71 | } 72 | } -------------------------------------------------------------------------------- /Applicatons/2. File-compressor/huffman.js: -------------------------------------------------------------------------------- 1 | 2 | import { BinaryHeap } from './heap.js'; 3 | 4 | export { HuffmanCoder } 5 | 6 | class HuffmanCoder{ 7 | 8 | stringify(node){ 9 | if(typeof(node[1])==="string"){ 10 | return '\''+node[1]; 11 | } 12 | 13 | return '0' + this.stringify(node[1][0]) + '1' + this.stringify(node[1][1]); 14 | } 15 | 16 | display(node, modify, index=1){ 17 | if(modify){ 18 | node = ['',node]; 19 | if(node[1].length===1) 20 | node[1] = node[1][0]; 21 | } 22 | 23 | if(typeof(node[1])==="string"){ 24 | return String(index) + " = " + node[1]; 25 | } 26 | 27 | let left = this.display(node[1][0], modify, index*2); 28 | let right = this.display(node[1][1], modify, index*2+1); 29 | let res = String(index*2)+" <= "+index+" => "+String(index*2+1); 30 | return res + '\n' + left + '\n' + right; 31 | } 32 | 33 | destringify(data){ 34 | let node = []; 35 | if(data[this.ind]==='\''){ 36 | this.ind++; 37 | node.push(data[this.ind]); 38 | this.ind++; 39 | return node; 40 | } 41 | 42 | this.ind++; 43 | let left = this.destringify(data); 44 | node.push(left); 45 | this.ind++; 46 | let right = this.destringify(data); 47 | node.push(right); 48 | 49 | return node; 50 | } 51 | 52 | getMappings(node, path){ 53 | if(typeof(node[1])==="string"){ 54 | this.mappings[node[1]] = path; 55 | return; 56 | } 57 | 58 | this.getMappings(node[1][0], path+"0"); 59 | this.getMappings(node[1][1], path+"1"); 60 | } 61 | 62 | encode(data){ 63 | 64 | this.heap = new BinaryHeap(); 65 | 66 | const mp = new Map(); 67 | for(let i=0;i 1){ 80 | const node1 = this.heap.extractMax(); 81 | const node2 = this.heap.extractMax(); 82 | 83 | const node = [node1[0]+node2[0],[node1,node2]]; 84 | this.heap.insert(node); 85 | } 86 | const huffman_encoder = this.heap.extractMax(); 87 | 88 | this.mappings = {}; 89 | this.getMappings(huffman_encoder, ""); 90 | 91 | let binary_string = ""; 92 | for(let i=0;i 2 | 3 | 4 | 5 | 6 | File Compressor 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 16 | 17 | 18 | 19 |
20 |
21 | 22 | 23 | File Compressor 24 | 25 | 32 | 37 |
38 |
39 |
40 |
41 | 42 | Tree Structure Will Be Displayed Here !! 43 | 44 |
45 |
46 | 47 | Operation info will be shown here !! 48 | 49 |
50 |
51 |
52 |
53 | 54 |
55 |
56 | 57 |
58 | 59 |
60 | 61 | 62 | -------------------------------------------------------------------------------- /Applicatons/2. File-compressor/sample.txt: -------------------------------------------------------------------------------- 1 | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 2 | 3 | Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 4 | 5 | Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 6 | 7 | Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. 8 | 9 | Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. 10 | 11 | At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. 12 | 13 | Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. -------------------------------------------------------------------------------- /Applicatons/2. File-compressor/script.js: -------------------------------------------------------------------------------- 1 | import { HuffmanCoder } from './huffman.js'; 2 | 3 | 4 | onload = function () { 5 | // Get reference to elements 6 | const treearea = document.getElementById('treearea'); 7 | const encode = document.getElementById('encode'); 8 | const decode = document.getElementById('decode'); 9 | const temptext = document.getElementById('temptext'); 10 | const upload = document.getElementById('uploadedFile'); 11 | 12 | const coder = new HuffmanCoder(); 13 | 14 | upload.addEventListener('change',()=>{ alert("File uploaded") }); 15 | 16 | encode.onclick = function () { 17 | 18 | const uploadedFile = upload.files[0]; 19 | if(uploadedFile===undefined){ 20 | alert("No file uploaded !"); 21 | return; 22 | } 23 | const fileReader = new FileReader(); 24 | fileReader.onload = function(fileLoadedEvent){ 25 | const text = fileLoadedEvent.target.result; 26 | if(text.length===0){ 27 | alert("Text can not be empty ! Upload another file !"); 28 | return; 29 | } 30 | let [encoded, tree_structure, info] = coder.encode(text); 31 | downloadFile(uploadedFile.name.split('.')[0] +'_encoded.txt', encoded); 32 | treearea.innerText = tree_structure; 33 | treearea.style.marginTop = '1200px'; 34 | temptext.innerText = info; 35 | }; 36 | fileReader.readAsText(uploadedFile, "UTF-8"); 37 | }; 38 | 39 | decode.onclick = function () { 40 | 41 | const uploadedFile = upload.files[0]; 42 | if(uploadedFile===undefined){ 43 | alert("No file uploaded !"); 44 | return; 45 | } 46 | const fileReader = new FileReader(); 47 | fileReader.onload = function(fileLoadedEvent){ 48 | const text = fileLoadedEvent.target.result; 49 | if(text.length===0){ 50 | alert("Text can not be empty ! Upload another file !"); 51 | return; 52 | } 53 | let [decoded, tree_structure, info] = coder.decode(text); 54 | downloadFile(uploadedFile.name.split('.')[0] +'_decoded.txt', decoded); 55 | treearea.innerText = tree_structure; 56 | treearea.style.marginTop = '1200px'; 57 | temptext.innerText = info; 58 | }; 59 | fileReader.readAsText(uploadedFile, "UTF-8"); 60 | }; 61 | 62 | }; 63 | 64 | function downloadFile(fileName, data){ 65 | let a = document.createElement('a'); 66 | a.href = "data:application/octet-stream,"+encodeURIComponent(data); 67 | a.download = fileName; 68 | a.click(); 69 | } -------------------------------------------------------------------------------- /Applicatons/2. File-compressor/style.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900); 2 | @import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,600,700,300,200); 3 | 4 | html, 5 | body { 6 | height: 100%; 7 | } 8 | 9 | .text_box { 10 | padding: 30px; 11 | width: 50%; 12 | height: 100%; 13 | border: 1px solid lightgray; 14 | display: flex; 15 | flex-wrap: wrap; 16 | align-content: center; 17 | } 18 | 19 | #container{ 20 | width: 100%; 21 | height: 70%; 22 | background-color: white; 23 | display: flex; 24 | margin: 0 auto; 25 | } 26 | 27 | .center_buttons{ 28 | margin:auto; 29 | display:block; 30 | } 31 | 32 | 33 | -------------------------------------------------------------------------------- /Applicatons/3. Contact-list-search/Trie.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by aarnavjindal on 07/05/20. 3 | */ 4 | 5 | export { Trie } 6 | 7 | class TrieNode{ 8 | constructor(){ 9 | this.children = Array(10).fill(null); 10 | this.parent = null; 11 | } 12 | } 13 | 14 | class ContactNode{ 15 | constructor(name, number, parent){ 16 | this.name = name; 17 | this.number = number; 18 | this.parent = parent; 19 | } 20 | } 21 | 22 | class Trie { 23 | constructor(){ 24 | this.root = new TrieNode(); 25 | this.current = this.root; 26 | 27 | let init = [ 28 | ["Aarnav", "123456"], 29 | ["Akul", "123546"], 30 | ["Shriya", "123654"], 31 | ["Prateek", "123465"] 32 | ]; 33 | 34 | for(let i=0;i 2 | 3 | 4 | 5 | 6 | Contact List Search 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 | 19 | 20 | Contact List Search 21 | 22 | 29 | 34 |
35 |
36 | 37 |
38 |
39 |
40 |
Type in the box below...
41 |
42 |
43 | 44 | 45 |
46 | 47 |
48 |
49 |
50 | 51 | 52 |
53 |
54 |
55 | 56 | 57 |
58 |
59 | 60 | 61 |
62 | 74 | 75 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /Applicatons/3. Contact-list-search/person.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DSA-REAL-LIFE-PROBLEMS/The-art-of-data-structures-and-algorithms/77cce22f17f99ffc40a65221badca6e363388e79/Applicatons/3. Contact-list-search/person.png -------------------------------------------------------------------------------- /Applicatons/3. Contact-list-search/script.js: -------------------------------------------------------------------------------- 1 | 2 | import {Trie} from './Trie.js'; 3 | 4 | onload = function () { 5 | 6 | const templates = document.getElementsByTagName('template')[0]; 7 | const contact_item = templates.content.querySelector("div"); 8 | const add = document.getElementById("add"); 9 | const contact_info = document.getElementById("contact_input"); 10 | const del = document.getElementById("del"); 11 | const delete_info = document.getElementById("delete_input"); 12 | const info = document.getElementById("info"); 13 | const contact_list = new Trie(); 14 | 15 | add.onclick = function () { 16 | let details = contact_info.value; 17 | details = details.split(','); 18 | if(details.length!==2){ 19 | alert("Incorrectly formatted input"); 20 | return; 21 | } 22 | details[0] = details[0].trim(); 23 | details[1] = details[1].trim(); 24 | if(details[1].length!==6){ 25 | alert("Incorrectly formatted input"); 26 | return; 27 | } 28 | contact_list.add(details[1], details[0]); 29 | info.innerHTML += details + " added to contact list
"; 30 | contact_info.value = ""; 31 | }; 32 | 33 | del.onclick = function () { 34 | let details = delete_info.value.trim(); 35 | if(details.length!==6){ 36 | alert("Incorrectly formatted input"); 37 | return; 38 | } 39 | contact_list.del(details); 40 | info.innerHTML += details + " deleted from contact list
"; 41 | delete_info.value = ""; 42 | }; 43 | 44 | let autocomplete = (inp) => { 45 | 46 | /*the autocomplete function takes two arguments, 47 | the text field element and an array of possible autocompleted values:*/ 48 | 49 | let currentFocus; 50 | inp.input = ""; 51 | 52 | /*execute a function when someone writes in the text field:*/ 53 | inp.addEventListener("input", function (e) { 54 | let a, //OUTER html: variable for listed content with html-content 55 | val = this.value; 56 | 57 | /*close any already open lists of autocompleted values*/ 58 | closeAllLists(); 59 | 60 | if( val.length>=7 ) 61 | return; 62 | 63 | currentFocus = -1; 64 | 65 | /*create a DIV element that will contain the items (values):*/ 66 | a = document.createElement("DIV"); 67 | 68 | a.setAttribute("id", this.id + "autocomplete-list"); 69 | a.setAttribute("class", "autocomplete-items list-group text-left"); 70 | 71 | /*append the DIV element as a child of the autocomplete container:*/ 72 | this.parentNode.appendChild(a); 73 | 74 | let arr = []; 75 | if(val.length === this.input.length){ 76 | arr = contact_list.findNext(-2); 77 | } else if(val.length < this.input.length){ 78 | this.input = val; 79 | arr = contact_list.findNext(-1); 80 | } else{ 81 | this.input = val; 82 | arr = contact_list.findNext(this.input[this.input.length-1]); 83 | } 84 | 85 | /*for each item in the array...*/ 86 | for (let i = 0; i < Math.min(arr.length,6) ; i++) { 87 | let item = contact_item.cloneNode(true); 88 | // Setting name, message, image to template item 89 | item.querySelector('#Name').innerText = arr[i].name; 90 | item.querySelector('#Number').innerHTML = "" + arr[i].number.substr(0, val.length) + 91 | "" + arr[i].number.substr(val.length); 92 | item.number = arr[i].number; 93 | 94 | /*execute a function when someone clicks on the item value (DIV element):*/ 95 | item.addEventListener("click", function (e) { 96 | /*insert the value for the autocomplete text field:*/ 97 | inp.value = ""; 98 | /*close the list of autocompleted values, 99 | (or any other open lists of autocompleted values:*/ 100 | closeAllLists(); 101 | alert("Calling "+item.number); 102 | }); 103 | a.appendChild(item); 104 | } 105 | }); 106 | 107 | /*execute a function presses a key on the keyboard:*/ 108 | inp.addEventListener("keydown", function (e) { 109 | let x = document.getElementById(this.id + "autocomplete-list"); 110 | if (x) x = x.getElementsByTagName("div"); 111 | if (e.keyCode === 40) { 112 | /*If the arrow DOWN key is pressed, 113 | increase the currentFocus variable:*/ 114 | currentFocus++; 115 | /*and and make the current item more visible:*/ 116 | addActive(x); 117 | } else if (e.keyCode === 38) { 118 | //up 119 | /*If the arrow UP key is pressed, 120 | decrease the currentFocus variable:*/ 121 | currentFocus--; 122 | /*and and make the current item more visible:*/ 123 | addActive(x); 124 | } else if (e.keyCode === 13) { 125 | /*If the ENTER key is pressed, prevent the form from being submitted,*/ 126 | e.preventDefault(); 127 | if (currentFocus > -1) { 128 | /*and simulate a click on the "active" item:*/ 129 | if (x) x[currentFocus*2].click(); 130 | } 131 | } 132 | }); 133 | 134 | let addActive = (x) => { 135 | /*a function to classify an item as "active":*/ 136 | if (!x) return false; 137 | /*start by removing the "active" class on all items:*/ 138 | removeActive(x); 139 | if (currentFocus >= x.length) currentFocus = 0; 140 | if (currentFocus < 0) currentFocus = x.length - 1; 141 | /*add class "autocomplete-active":*/ 142 | x[currentFocus*2].classList.add("active"); 143 | }; 144 | 145 | let removeActive = (x) => { 146 | /*a function to remove the "active" class from all autocomplete items:*/ 147 | for (let i = 0; i < x.length; i++) { 148 | x[i].classList.remove("active"); 149 | } 150 | }; 151 | 152 | let closeAllLists = (elmnt) => { 153 | /*close all autocomplete lists in the document, 154 | except the one passed as an argument:*/ 155 | const x = document.getElementsByClassName("autocomplete-items"); 156 | for (let i = 0; i < x.length; i++) { 157 | if (elmnt !== x[i] && elmnt !== inp) { 158 | x[i].parentNode.removeChild(x[i]); 159 | } 160 | } 161 | }; 162 | 163 | /*execute a function when someone clicks in the document:*/ 164 | document.addEventListener("click", function (e) { 165 | closeAllLists(e.target); 166 | }); 167 | 168 | }; 169 | 170 | /*initiate the autocomplete function on the "myInput" element, and pass along the countries array as possible autocomplete values:*/ 171 | autocomplete(document.getElementById("myInput")); 172 | }; -------------------------------------------------------------------------------- /Applicatons/3. Contact-list-search/style.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900); 2 | @import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,600,700,300,200); 3 | 4 | 5 | 6 | html, 7 | body { 8 | height: 100%; 9 | } 10 | * { 11 | box-sizing: border-box; 12 | } 13 | 14 | .bg-dark{ 15 | background-color:#DC2626; 16 | } 17 | 18 | .input-box input { 19 | width: 200px; 20 | } 21 | 22 | .font-light { 23 | font-weight: 900; 24 | } 25 | 26 | .bg-light{ 27 | background-color: #10B981; 28 | } 29 | 30 | .bg-med{ 31 | background-color: #2563EB; 32 | } 33 | 34 | /*the container must be positioned relative:*/ 35 | .autocomplete { 36 | position: relative; 37 | display: inline-block; 38 | } 39 | 40 | input { 41 | border: 1px solid transparent; 42 | background-color: #f1f1f1; 43 | padding: 10px; 44 | font-size: 16px; 45 | } 46 | 47 | input[type=text] { 48 | background-color: #f1f1f1; 49 | width: 100%; 50 | } 51 | 52 | input[type=submit] { 53 | background-color: DodgerBlue; 54 | color: #fff; 55 | cursor: pointer; 56 | } 57 | 58 | .autocomplete-items { 59 | position: absolute; 60 | border: 1px solid #d4d4d4; 61 | border-bottom: none; 62 | border-top: none; 63 | z-index: 99; 64 | top: 100%; 65 | left: 0; 66 | right: 0; 67 | } 68 | 69 | .autocomplete-items div { 70 | padding: 10px; 71 | cursor: pointer; 72 | } 73 | 74 | /*when hovering an item:*/ 75 | .autocomplete-items :hover { 76 | background-color: #e9e9e9; 77 | } 78 | 79 | /*when navigating through the items using the arrow keys:*/ 80 | .autocomplete-active { 81 | background-color: DodgerBlue !important; 82 | color: black; 83 | } 84 | .text_box { 85 | padding: 50px; 86 | width: 50%; 87 | align-content: center; 88 | border: 1px solid #eeeeee; 89 | } 90 | 91 | #container{ 92 | width: 100%; 93 | height: 60%; 94 | background-color: white; 95 | display: flex; 96 | margin: 0 auto; 97 | } 98 | 99 | .center_input { 100 | width: 40%; 101 | display: flex; 102 | margin: 20px auto auto; 103 | } 104 | 105 | 106 | body-body { 107 | font-family: 'Roboto', sans-serif; 108 | font-size: 14px; 109 | letter-spacing: 1px; 110 | line-height: 1.6em; 111 | font-weight: 300; 112 | color: white; 113 | } 114 | 115 | .body-body p { 116 | margin-bottom: 2em; 117 | color: white; 118 | } 119 | 120 | .header-body { 121 | border-bottom: solid 1px #e0e0e0; 122 | margin: 0 0 20px 0; 123 | } 124 | 125 | .pageTitle, 126 | .pageSubTitle { 127 | font-family: 'Titillium', sans-serif; 128 | text-transform: uppercase; 129 | color: white; 130 | } 131 | 132 | .pageTitle { 133 | color: #FF7600; 134 | } 135 | 136 | .pageTitle { 137 | font-size: 2em; 138 | font-weight: 700; 139 | line-height: 2em; 140 | } 141 | 142 | .pageSubTitle { 143 | margin-bottom: 1em; 144 | font-size: 1.4em; 145 | font-weight: 300; 146 | } 147 | 148 | .wrapper { 149 | width: 920px; 150 | padding: 40px; 151 | margin: 40px auto; 152 | background:black; 153 | box-shadow: 0px 3px 3px 1px rgba(0, 0, 0, 0.25); 154 | } 155 | 156 | .slogan { 157 | position: fixed; 158 | display: block; 159 | top: 700px; 160 | width: 100%; 161 | padding: 20px 0; 162 | text-align: center; 163 | background: #222; 164 | } 165 | 166 | .sloganTitle { 167 | font-size: 70px; 168 | font-weight: 700; 169 | line-height: 80px; 170 | color: #fff; 171 | 172 | text-shadow: 0px 2px 1px rgba(0, 0, 0, 0.25); 173 | } -------------------------------------------------------------------------------- /Applicatons/4. Photo-editor/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Photo Editor 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 | 17 | 18 | Photo Editor 19 | 20 | 27 | 32 |
33 |
34 | 35 |
36 |
37 |
38 |
39 | 40 |
41 |
42 |
43 | 44 |
45 |
46 | 47 | 48 |
49 |
50 | 51 | 52 |
53 |
54 | 55 | 56 |
57 |
58 |
59 | 60 | 61 | -------------------------------------------------------------------------------- /Applicatons/4. Photo-editor/index.js: -------------------------------------------------------------------------------- 1 | let canvas = document.getElementById('canvas'); 2 | let ctx = canvas.getContext('2d'); 3 | let image="" 4 | window.addEventListener('load', function() { 5 | document.getElementById('input').onchange = function(e) { 6 | var img = new Image(); 7 | img.src = URL.createObjectURL(this.files[0]); 8 | image = img 9 | }; 10 | }); 11 | 12 | draw = () => { 13 | canvas.width = image.width 14 | canvas.height = image.height 15 | ctx.drawImage(image, 0,0); 16 | alert("Image Successfully Upload") 17 | } 18 | 19 | getPixel = (row,col) => { 20 | let content = ctx.getImageData(0,0,col,row).data; 21 | var RGB = [] 22 | for(var i=0;i { 55 | let row = canvas.height 56 | let col = canvas.width 57 | let imagedata = getPixel(row,col) 58 | for(var i=0;i { 70 | let row = canvas.height 71 | let col = canvas.width 72 | let imagedata = getPixel(row,col) 73 | for(var i=0;i { 86 | let row = canvas.height 87 | let col = canvas.width 88 | let image = getPixel(row,col) 89 | rotateleft_image = [] 90 | for(let i=col-1;i>=0;i--) 91 | { 92 | eachrow=[] 93 | for(let j=0;j { 103 | let row = canvas.height 104 | let col = canvas.width 105 | let image = getPixel(row,col) 106 | rotateright_image = [] 107 | for(let i=0;i=0;j--) 111 | { 112 | eachrow.push(image[j][i]) 113 | } 114 | rotateright_image.push(eachrow) 115 | } 116 | setImageData(rotateright_image,col,row) 117 | } 118 | 119 | setColor = () => { 120 | let col = canvas.width 121 | let row = canvas.height 122 | let image = getPixel(row,col) 123 | for(let i=0;i 2 | 3 | 4 | 5 | 6 | WhatsApp Chat List 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 | 17 | 18 | WhatsApp Chat List 19 | 20 | 27 | 32 |
33 |
34 | 56 |
57 |
58 |
59 |
60 |
61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 |
71 |
72 | 73 |
74 |
75 | 76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 | 94 |

Select the Name below and Write the Message on message box.

95 |

Click on the Button below to send the message to selected name.

96 | 104 | 105 | 106 |
107 |
108 | 109 |
110 |
111 | 112 |
113 | 114 | 115 | -------------------------------------------------------------------------------- /Applicatons/5. WhatsApp chat list/index.js: -------------------------------------------------------------------------------- 1 | class LinkedList 2 | { 3 | data; 4 | next; 5 | constructor(data) 6 | { 7 | this.data=data 8 | this.next=null 9 | } 10 | } 11 | let new_data = (value, node) => { 12 | const newone = new LinkedList(value) 13 | if (node == null) { 14 | return newone; 15 | } 16 | newone.next = node 17 | node = newone 18 | return node; 19 | } 20 | let exist_node_shift = (node, value) => { 21 | c = node; 22 | p = null; 23 | while (c !== null) { 24 | if (c.data[0] == value[0]) { 25 | break; 26 | } 27 | p = c; 28 | c = c.next; 29 | } 30 | if (c == null) { 31 | return -1; 32 | } 33 | if (p == null) { 34 | node.data[1] = value[1] 35 | return 0; 36 | } 37 | p.next = c.next; 38 | return 1; 39 | } 40 | let LRU_deletion = (node) => { 41 | c = node 42 | while (c.next.next != null) { 43 | c = c.next; 44 | } 45 | c.next = null; 46 | return node 47 | } 48 | let count = 3; 49 | let chatbox = document.querySelector("#chatbox") 50 | let traverse = (node) => { 51 | let d = node 52 | chatbox.innerHTML = `` 53 | while (d != null) { 54 | if(d.data[1].length>25) 55 | { 56 | d.data[1] = d.data[1].substring(0,25) + "......."; 57 | } 58 | let content = document.createElement("ul") 59 | content.className="ks-items" 60 | content.innerHTML = ` 61 |
  • 62 | 63 | 64 | 65 | 66 |
    67 |
    68 | ${d.data[0]} 69 | ${new Date().getHours() + ":" + new Date().getMinutes()} 70 |
    71 |
    ${d.data[1]}
    72 |
    73 |     74 |
    • ` 75 | chatbox.appendChild(content) 76 | d = d.next 77 | } 78 | } 79 | let Chatnode = new LinkedList(["Priyam", "Hi!Whassup?"]); 80 | Chatnode = new_data(["Aman", "Bhai!"], Chatnode) 81 | Chatnode = new_data(["Anupam", "Bhai Pranam!"], Chatnode) 82 | traverse(Chatnode) 83 | 84 | document.querySelector("#send").addEventListener("click", () => { 85 | let name = document.getElementById("contactlist").value 86 | let message = document.getElementById("message").value 87 | if (message) { 88 | if (count == 5) { 89 | let indicator = exist_node_shift(Chatnode, [name, message]); 90 | if (indicator == -1) { 91 | Chatnode = LRU_deletion(Chatnode) 92 | console.log(Chatnode) 93 | Chatnode = new_data([name, message], Chatnode) 94 | traverse(Chatnode) 95 | } 96 | else if (indicator == 1) { 97 | Chatnode = new_data([name, message], Chatnode) 98 | traverse(Chatnode) 99 | } 100 | else { 101 | traverse(Chatnode) 102 | } 103 | } 104 | else { 105 | let indicator = exist_node_shift(Chatnode, [name, message]); 106 | if (indicator == -1) { 107 | count += 1; 108 | Chatnode = new_data([name, message], Chatnode) 109 | traverse(Chatnode) 110 | } 111 | else if (indicator == 1) { 112 | Chatnode = new_data([name, message], Chatnode) 113 | traverse(Chatnode) 114 | } 115 | else { 116 | traverse(Chatnode) 117 | } 118 | } 119 | } 120 | }) -------------------------------------------------------------------------------- /Applicatons/5. WhatsApp chat list/style.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900); 2 | @import url(https://fonts.googleapis.com/css?family=Titillium+Web:400,600,700,300,200); 3 | 4 | 5 | 6 | 7 | 8 | body-body { 9 | font-family: 'Roboto', sans-serif; 10 | font-size: 14px; 11 | letter-spacing: 1px; 12 | line-height: 1.6em; 13 | font-weight: 300; 14 | color: white; 15 | } 16 | 17 | .body-body p { 18 | margin-bottom: 2em; 19 | color: white; 20 | } 21 | 22 | .solve{ 23 | margin: 0 auto; 24 | } 25 | 26 | 27 | .header-body { 28 | border-bottom: solid 1px #e0e0e0; 29 | margin: 0 0 20px 0; 30 | } 31 | 32 | .pageTitle, 33 | .pageSubTitle { 34 | font-family: 'Titillium', sans-serif; 35 | text-transform: uppercase; 36 | color: white; 37 | } 38 | 39 | .pageTitle { 40 | color: #FF7600; 41 | } 42 | 43 | .pageTitle { 44 | font-size: 2em; 45 | font-weight: 700; 46 | line-height: 2em; 47 | } 48 | 49 | .pageSubTitle { 50 | margin-bottom: 1em; 51 | font-size: 1.4em; 52 | font-weight: 300; 53 | } 54 | 55 | .wrapper { 56 | width: 920px; 57 | padding: 40px; 58 | margin: 40px auto; 59 | background:black; 60 | box-shadow: 0px 3px 3px 1px rgba(0, 0, 0, 0.25); 61 | } 62 | 63 | .slogan { 64 | position: fixed; 65 | display: block; 66 | top: 700px; 67 | width: 100%; 68 | padding: 20px 0; 69 | text-align: center; 70 | background: #222; 71 | } 72 | 73 | .sloganTitle { 74 | font-size: 70px; 75 | font-weight: 700; 76 | line-height: 80px; 77 | color: #fff; 78 | 79 | text-shadow: 0px 2px 1px rgba(0, 0, 0, 0.25); 80 | } 81 | body{ 82 | height: 100%; 83 | } 84 | 85 | #container{ 86 | width: 100%; 87 | height: 70%; 88 | display: flex; 89 | margin: 0 auto; 90 | } 91 | 92 | .container2 { 93 | width: 50%; 94 | height: 100%; 95 | border: 1px solid lightgray; 96 | display: flex; 97 | flex-wrap: wrap; 98 | align-content: center; 99 | } 100 | 101 | .container3 { 102 | padding: 50px; 103 | display: flex; 104 | flex-wrap: wrap; 105 | align-content: center; 106 | } 107 | 108 | .ks-messenger { 109 | margin: auto; 110 | margin-top: 50px; 111 | display: -webkit-box; 112 | display: -webkit-flex; 113 | display: -ms-flexbox; 114 | display: inline-block; 115 | height: 100%; 116 | } 117 | 118 | .ks-messenger .ks-discussions { 119 | border-radius: 5px 5px 5px 5px; 120 | background: #fff; 121 | width: 340px; 122 | border-right: 1px solid #dee0e1 123 | } 124 | 125 | .ks-messenger .ks-discussions>.ks-header { 126 | display: -webkit-box; 127 | display: -webkit-flex; 128 | display: -ms-flexbox; 129 | display: flex; 130 | -webkit-box-align: center; 131 | -webkit-align-items: center; 132 | -ms-flex-align: center; 133 | align-items: center; 134 | height: 60px; 135 | border-bottom: 1px solid #dee0e1 136 | } 137 | 138 | .ks-messenger .ks-discussions>.ks-search .form-control { 139 | border: none; 140 | padding: 28px 20px 141 | } 142 | 143 | .ks-messenger .ks-discussions>.ks-search .icon-addon { 144 | color: rgba(58, 82, 155, .6) 145 | } 146 | 147 | .ks-messenger .ks-discussions>.ks-body .ks-items { 148 | list-style: none; 149 | padding: 0; 150 | margin: 0 151 | } 152 | 153 | .ks-messenger .ks-discussions>.ks-body .ks-items>.ks-item { 154 | border-bottom: 1px solid #dee0e1 155 | } 156 | 157 | .ks-messenger .ks-discussions>.ks-body .ks-items>.ks-item>a { 158 | display: -webkit-box; 159 | display: -webkit-flex; 160 | display: -ms-flexbox; 161 | -js-display: flex; 162 | display: flex; 163 | -webkit-box-align: center; 164 | -webkit-align-items: center; 165 | -ms-flex-align: center; 166 | align-items: center; 167 | color: #333; 168 | padding: 15px 20px 169 | } 170 | 171 | .ks-messenger .ks-discussions>.ks-body .ks-items>.ks-item>a>.ks-group-amount { 172 | position: relative; 173 | top: 3px; 174 | margin-right: 12px; 175 | width: 36px; 176 | height: 36px; 177 | background-color: rgba(57, 81, 155, .1); 178 | text-align: center; 179 | line-height: 36px; 180 | -webkit-border-radius: 50%; 181 | border-radius: 50% 182 | } 183 | 184 | .ks-messenger .ks-discussions>.ks-body .ks-items>.ks-item>a>.ks-group-amount>.ks-badge { 185 | position: absolute; 186 | bottom: -1px; 187 | right: -3px 188 | } 189 | 190 | .ks-messenger .ks-discussions>.ks-body .ks-items>.ks-item>a>.ks-avatar { 191 | position: relative; 192 | top: 3px; 193 | margin-right: 12px 194 | } 195 | 196 | .ks-messenger .ks-discussions>.ks-body .ks-items>.ks-item>a>.ks-avatar>img { 197 | width: 36px; 198 | height: 36px; 199 | -webkit-border-radius: 50%; 200 | border-radius: 50% 201 | } 202 | 203 | .ks-messenger .ks-discussions>.ks-body .ks-items>.ks-item>a>.ks-avatar>.ks-badge { 204 | position: absolute; 205 | bottom: -3px; 206 | right: -3px 207 | } 208 | 209 | .ks-messenger .ks-discussions>.ks-body .ks-items>.ks-item>a>.ks-body { 210 | -webkit-box-flex: 1; 211 | -webkit-flex-grow: 1; 212 | -ms-flex-positive: 1; 213 | flex-grow: 1 214 | } 215 | 216 | .ks-messenger .ks-discussions>.ks-body .ks-items>.ks-item>a>.ks-body>.ks-message { 217 | font-size: 12px; 218 | color: #858585; 219 | display: -webkit-box; 220 | display: -webkit-flex; 221 | display: -ms-flexbox; 222 | -js-display: flex; 223 | display: flex 224 | } 225 | 226 | .ks-messenger .ks-discussions>.ks-body .ks-items>.ks-item>a>.ks-body>.ks-message>img { 227 | position: relative; 228 | top: -2px; 229 | width: 18px; 230 | height: 18px; 231 | margin-right: 5px 232 | } 233 | 234 | .ks-messenger .ks-discussions>.ks-body .ks-items>.ks-item>a>.ks-body>.ks-name { 235 | display: -webkit-box; 236 | display: -webkit-flex; 237 | display: -ms-flexbox; 238 | -js-display: flex; 239 | display: flex; 240 | margin-bottom: 4px; 241 | -webkit-box-pack: justify; 242 | -webkit-justify-content: space-between; 243 | -ms-flex-pack: justify; 244 | justify-content: space-between 245 | } 246 | 247 | .ks-messenger .ks-discussions>.ks-body .ks-items>.ks-item>a>.ks-body>.ks-name>.ks-datetime { 248 | text-transform: uppercase; 249 | font-size: 10px; 250 | font-weight: 400; 251 | color: #858585; 252 | position: relative; 253 | top: 3px 254 | } 255 | 256 | .ks-messenger .ks-discussions>.ks-body .ks-items>.ks-item.ks-active { 257 | background: rgba(247, 202, 24, .1); 258 | color: #333; 259 | position: relative 260 | } 261 | 262 | .ks-messenger .ks-discussions>.ks-body .ks-items>.ks-item.ks-active::before { 263 | content: ''; 264 | width: 4px; 265 | height: 100%; 266 | background-color: rgba(222, 187, 12, .2); 267 | display: block; 268 | position: absolute; 269 | top: 0; 270 | left: 0 271 | } 272 | -------------------------------------------------------------------------------- /Applicatons/6. Money splitwise/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Money Splitwise 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
    17 |
    18 | 19 | 20 | Money Splitwise 21 | 22 | 29 | 34 |
    35 |
    36 | 37 |
    38 |
    39 |
    40 | 41 | 42 | 43 | 44 |
    45 |
    46 |
    47 |
    48 |

    Enter the Transaction Details

    49 |
    50 | 51 | 52 |
    53 |
    54 |
    55 | 56 |
    57 |
    58 |
    59 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /Applicatons/6. Money splitwise/index.js: -------------------------------------------------------------------------------- 1 | class Heap 2 | { 3 | constructor() 4 | { 5 | this.heap=[] 6 | } 7 | isEmpty = () => 8 | { 9 | return this.heap.length===0 10 | } 11 | add_new_element = (num) => 12 | { 13 | this.heap.push(num) 14 | let index = this.heap.length-1; 15 | while(index>0) 16 | { 17 | let parentIndex = Math.floor((index-1)/2) 18 | let t1 = this.heap[parentIndex] 19 | let t2 = this.heap[index] 20 | if(t1[0]>=t2[0]) 21 | { 22 | break; 23 | } 24 | this.heap[index] = t1 25 | this.heap[parentIndex] = t2 26 | index = parentIndex 27 | } 28 | } 29 | max_pop = () => { 30 | let top = this.heap[0]; 31 | let tmp = this.heap.pop(); 32 | if(!this.isEmpty()) 33 | { 34 | this.heap[0]=tmp; 35 | this.sinkdown(0) 36 | } 37 | return top 38 | } 39 | sinkdown = (index) => 40 | { 41 | let left =2*index+1; 42 | let right = 2*index+2; 43 | let large = index 44 | if(leftthis.heap[large][0]) 45 | { 46 | large=left 47 | } 48 | if(rightthis.heap[large][0]) 49 | { 50 | large=right 51 | } 52 | if(large!==index) 53 | { 54 | let t = this.heap[index] 55 | this.heap[index] = this.heap[large] 56 | this.heap[large] = t 57 | this.sinkdown(large) 58 | } 59 | } 60 | } 61 | onload = function () { 62 | 63 | let curr_data; 64 | const container = document.getElementById('mynetwork'); 65 | const container2 = document.getElementById('mynetwork2'); 66 | const genNew = document.getElementById('generate-graph'); 67 | const solve = document.getElementById('solve'); 68 | const temptext = document.getElementById('temptext'); 69 | const reset = document.getElementById('reset') 70 | const options = { 71 | edges: { 72 | arrows: { 73 | to: true 74 | }, 75 | labelHighlightBold: true, 76 | font: { 77 | size: 20 78 | } 79 | }, 80 | nodes: { 81 | font: '12px arial red', 82 | scaling: { 83 | label: true 84 | }, 85 | shape: 'icon', 86 | icon: { 87 | face: 'FontAwesome', 88 | code: '\uf183', 89 | size: 50, 90 | color: '#991133', 91 | } 92 | } 93 | }; 94 | let network = new vis.Network(container); 95 | network.setOptions(options); 96 | let network2 = new vis.Network(container2); 97 | network2.setOptions(options); 98 | var persons = []; 99 | var list_of_persons = []; 100 | var edge = []; 101 | 102 | function createData(){ 103 | first_person = document.querySelector("#first").value 104 | second_person = document.querySelector("#second").value 105 | amount = document.querySelector("#amount").value 106 | if(first_person==="" || second_person === "" || amount=== "" || 107 | isNaN(parseInt(first_person)) || isNaN(parseInt(second_person)) || isNaN(parseInt(amount))) 108 | { 109 | return; 110 | } 111 | if(!list_of_persons.includes(first_person)) 112 | { 113 | persons.push({id:first_person, label:"Person " + first_person}) 114 | list_of_persons.push(first_person) 115 | } 116 | if(!list_of_persons.includes(second_person)) 117 | { 118 | persons.push({id:second_person, label:"Person " + second_person}) 119 | list_of_persons.push(second_person) 120 | } 121 | list_of_persons.sort() 122 | var n = list_of_persons[list_of_persons.length-1] 123 | for(var i=1;i<=n;i++) 124 | { 125 | if(!list_of_persons.includes(i)) 126 | { 127 | list_of_persons.push(i); 128 | persons.push({id:i, label:"Person " + i}) 129 | } 130 | } 131 | list_of_persons.sort() 132 | edge.push({from: parseInt(first_person), to: parseInt(second_person), label: amount}) 133 | document.querySelector("#first").value = "" 134 | document.querySelector("#second").value = "" 135 | document.querySelector("#amount").value = "" 136 | } 137 | 138 | genNew.onclick = function () { 139 | createData() 140 | var node = new vis.DataSet(persons); 141 | curr_data = {nodes:node,edges:edge}; 142 | network.setData(curr_data); 143 | temptext.style.display = "inline"; 144 | container2.style.display = "none"; 145 | }; 146 | 147 | solve.onclick = function () { 148 | temptext.style.display = "none"; 149 | container2.style.display = "inline"; 150 | const solvedData = solveFinal(); 151 | network2.setData(solvedData); 152 | }; 153 | reset.onclick = function() 154 | { 155 | persons = []; 156 | list_of_persons = []; 157 | edge = []; 158 | k = 1; 159 | document.querySelector("#first").value = "" 160 | document.querySelector("#second").value = "" 161 | document.querySelector("#amount").value = "" 162 | node = new vis.DataSet(persons); 163 | data = {nodes:node,edges:edge} 164 | network.setData(data); 165 | temptext.style.display = "none" 166 | container2.style.display = "none"; 167 | } 168 | 169 | solveFinal = () => { 170 | let data = curr_data 171 | let datalen = data['nodes'].length 172 | let values = Array(datalen).fill(0) 173 | for(let i=0;i0) 184 | { 185 | pos_heap.add_new_element([values[i],i]) 186 | } 187 | else 188 | { 189 | neg_heap.add_new_element([-values[i],i]) 190 | values[i]*= -1 191 | } 192 | } 193 | let new_heap=[] 194 | while(!pos_heap.isEmpty() && !neg_heap.isEmpty()) 195 | { 196 | let mx = pos_heap.max_pop() 197 | let mn = neg_heap.max_pop() 198 | 199 | let dif = Math.min(mx[0],mn[0]) 200 | new_heap.push({from:mn[1]+1,to:mx[1]+1,label:String(Math.abs(dif))}) 201 | values[mx[1]] -= dif 202 | values[mn[1]] -= dif 203 | if(mx[0]>mn[0]) 204 | { 205 | pos_heap.add_new_element([values[mx[1]],mx[1]]) 206 | } 207 | else if(mx[0] 20 | 21 | 22 | 23 | App-1 Text Editor 24 | ------------------- 25 | 26 | This app consist of Undo and Redo features.A user can undo and redo the text that is written to the editor by the user.This app is made using the Stack Structure. 27 |
    28 | 29 |
    30 | 31 | App-2 File Compressor 32 | ------------------- 33 | This app is used to compress the file uploaded by the user and also user can download the compressed file and can use it. It supports only text file compressing. This app is made by using Huffmann Encoding. 34 |
    35 | 36 |
    37 | 38 | App-3 Contact List Search 39 | ------------------- 40 | This app consist of features like adding contact numbers by a person's name and his number, searching the contact number by typing the some starting letters of name and deleting the contact numbers.This app is made by using the Tries Structure. 41 |
    42 | 43 |
    44 | 45 | App-4 Whatsapp Chat List 46 | ------------------- 47 | This app consist of Whatsapp messaging features in which a user can select the name from the list and write the message to him.This app is made by using the LRU Cache and the Linked list Structure. 48 |
    49 | 50 |
    51 | 52 | App-5 Photo Editor 53 | ------------------- 54 | This app consist of Uploading the Photo, rotating the photo left and right, flipping the photo up and down and changing the color of pic to grey.This app is made by using 3D Array Concept. 55 |
    56 | 57 |
    58 | 59 | App-6 Money Splitwise 60 | ------------------- 61 | This app tells us how much money a user has to give to other user or has to take from other user.It is made by using Graphs.A User can see a directed graph structure containing how much money a user has to give to other user or user has to take from other user. 62 |
    63 | 64 |
    65 | 66 | 67 | 68 | https://dsa-real-life-problems.github.io/The-art-of-data-structures-and-algorithms/ 69 | -------------------------------------------------------------------------------- /home.css: -------------------------------------------------------------------------------- 1 | .cards-list { 2 | z-index: 0; 3 | width: 100%; 4 | display: flex; 5 | justify-content: space-around; 6 | flex-wrap: wrap; 7 | } 8 | 9 | 10 | .newhead{ 11 | font-size: 65px; 12 | } 13 | 14 | .card { 15 | margin: 30px ; 16 | width: 300px; 17 | height: 300px; 18 | border-radius: 40px; 19 | box-shadow: 5px 5px 30px 7px rgba(0,0,0,0.25), -5px -5px 30px 7px rgba(0,0,0,0.22); 20 | cursor: pointer; 21 | transition: 0.4s; 22 | } 23 | 24 | .card .card_image { 25 | width: inherit; 26 | height: inherit; 27 | border-radius: 40px; 28 | } 29 | 30 | .card .card_image img { 31 | width: 320px; 32 | height: 320px; 33 | border-radius: 40px; 34 | object-fit: cover; 35 | } 36 | 37 | .card .card_title { 38 | text-align: center; 39 | border-radius: 0px 0px 40px 40px; 40 | font-family: sans-serif; 41 | font-weight: bold; 42 | font-size: 30px; 43 | margin-top: -60px; 44 | margin-left: 18px; 45 | height: 40px; 46 | } 47 | 48 | .card:hover { 49 | transform: scale(0.9, 0.9); 50 | box-shadow: 5px 5px 30px 15px rgba(0,0,0,0.25), 51 | -5px -5px 30px 15px rgba(0,0,0,0.22); 52 | } 53 | 54 | .title-white { 55 | color: white; 56 | } 57 | 58 | .title-black { 59 | color: black; 60 | } 61 | 62 | @media all and (max-width: 500px) { 63 | .card-list { 64 | /* On small screens, we are no longer using row direction but column */ 65 | flex-direction: column; 66 | } 67 | } 68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /img/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DSA-REAL-LIFE-PROBLEMS/The-art-of-data-structures-and-algorithms/77cce22f17f99ffc40a65221badca6e363388e79/img/apple-touch-icon.png -------------------------------------------------------------------------------- /img/black.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DSA-REAL-LIFE-PROBLEMS/The-art-of-data-structures-and-algorithms/77cce22f17f99ffc40a65221badca6e363388e79/img/black.jpg -------------------------------------------------------------------------------- /img/counters-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DSA-REAL-LIFE-PROBLEMS/The-art-of-data-structures-and-algorithms/77cce22f17f99ffc40a65221badca6e363388e79/img/counters-bg.jpg -------------------------------------------------------------------------------- /img/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DSA-REAL-LIFE-PROBLEMS/The-art-of-data-structures-and-algorithms/77cce22f17f99ffc40a65221badca6e363388e79/img/favicon.png -------------------------------------------------------------------------------- /img/intro-bg - Copy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DSA-REAL-LIFE-PROBLEMS/The-art-of-data-structures-and-algorithms/77cce22f17f99ffc40a65221badca6e363388e79/img/intro-bg - Copy.jpg -------------------------------------------------------------------------------- /img/intro-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DSA-REAL-LIFE-PROBLEMS/The-art-of-data-structures-and-algorithms/77cce22f17f99ffc40a65221badca6e363388e79/img/intro-bg.jpg -------------------------------------------------------------------------------- /img/overlay-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DSA-REAL-LIFE-PROBLEMS/The-art-of-data-structures-and-algorithms/77cce22f17f99ffc40a65221badca6e363388e79/img/overlay-bg.jpg -------------------------------------------------------------------------------- /img/post-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DSA-REAL-LIFE-PROBLEMS/The-art-of-data-structures-and-algorithms/77cce22f17f99ffc40a65221badca6e363388e79/img/post-1.jpg -------------------------------------------------------------------------------- /img/post-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DSA-REAL-LIFE-PROBLEMS/The-art-of-data-structures-and-algorithms/77cce22f17f99ffc40a65221badca6e363388e79/img/post-2.jpg -------------------------------------------------------------------------------- /img/post-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DSA-REAL-LIFE-PROBLEMS/The-art-of-data-structures-and-algorithms/77cce22f17f99ffc40a65221badca6e363388e79/img/post-3.jpg -------------------------------------------------------------------------------- /img/r1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DSA-REAL-LIFE-PROBLEMS/The-art-of-data-structures-and-algorithms/77cce22f17f99ffc40a65221badca6e363388e79/img/r1.png -------------------------------------------------------------------------------- /img/r2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DSA-REAL-LIFE-PROBLEMS/The-art-of-data-structures-and-algorithms/77cce22f17f99ffc40a65221badca6e363388e79/img/r2.png -------------------------------------------------------------------------------- /img/r3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DSA-REAL-LIFE-PROBLEMS/The-art-of-data-structures-and-algorithms/77cce22f17f99ffc40a65221badca6e363388e79/img/r3.png -------------------------------------------------------------------------------- /img/r4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DSA-REAL-LIFE-PROBLEMS/The-art-of-data-structures-and-algorithms/77cce22f17f99ffc40a65221badca6e363388e79/img/r4.png -------------------------------------------------------------------------------- /img/r5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DSA-REAL-LIFE-PROBLEMS/The-art-of-data-structures-and-algorithms/77cce22f17f99ffc40a65221badca6e363388e79/img/r5.png -------------------------------------------------------------------------------- /img/r6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DSA-REAL-LIFE-PROBLEMS/The-art-of-data-structures-and-algorithms/77cce22f17f99ffc40a65221badca6e363388e79/img/r6.png -------------------------------------------------------------------------------- /img/r7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DSA-REAL-LIFE-PROBLEMS/The-art-of-data-structures-and-algorithms/77cce22f17f99ffc40a65221badca6e363388e79/img/r7.png -------------------------------------------------------------------------------- /img/testimonial-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DSA-REAL-LIFE-PROBLEMS/The-art-of-data-structures-and-algorithms/77cce22f17f99ffc40a65221badca6e363388e79/img/testimonial-2.jpg -------------------------------------------------------------------------------- /img/testimonial-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DSA-REAL-LIFE-PROBLEMS/The-art-of-data-structures-and-algorithms/77cce22f17f99ffc40a65221badca6e363388e79/img/testimonial-4.jpg -------------------------------------------------------------------------------- /img/work-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DSA-REAL-LIFE-PROBLEMS/The-art-of-data-structures-and-algorithms/77cce22f17f99ffc40a65221badca6e363388e79/img/work-1.jpg -------------------------------------------------------------------------------- /img/work-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DSA-REAL-LIFE-PROBLEMS/The-art-of-data-structures-and-algorithms/77cce22f17f99ffc40a65221badca6e363388e79/img/work-2.jpg -------------------------------------------------------------------------------- /img/work-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DSA-REAL-LIFE-PROBLEMS/The-art-of-data-structures-and-algorithms/77cce22f17f99ffc40a65221badca6e363388e79/img/work-3.jpg -------------------------------------------------------------------------------- /img/work-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DSA-REAL-LIFE-PROBLEMS/The-art-of-data-structures-and-algorithms/77cce22f17f99ffc40a65221badca6e363388e79/img/work-4.jpg -------------------------------------------------------------------------------- /img/work-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DSA-REAL-LIFE-PROBLEMS/The-art-of-data-structures-and-algorithms/77cce22f17f99ffc40a65221badca6e363388e79/img/work-5.jpg -------------------------------------------------------------------------------- /img/work-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DSA-REAL-LIFE-PROBLEMS/The-art-of-data-structures-and-algorithms/77cce22f17f99ffc40a65221badca6e363388e79/img/work-6.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Home 9 | 10 | 11 | 12 | 24 | 25 | 26 |
    27 |

    THE ART OF DATA STRUCTURES AND ALGORITHMS

    28 |

    29 |
    30 |
    31 |
    32 | 33 |
    34 | 35 | 36 |
    37 | 38 |
    39 |

    Text Editor

    40 |     41 |
    42 | 43 |
    44 | 45 |
    46 |
    47 | 48 | 49 |
    50 |
    51 |

    File Compressor

    52 |     53 |
    54 |
    55 | 56 |
    57 |
    58 | 59 | 60 |
    61 |
    62 |

    Contact List Search

    63 |     64 |
    65 |
    66 | 67 | 68 |
    69 |
    70 | 71 |
    72 |
    73 | 74 |
    75 |
    76 |

    Whatsapp Chat List

    77 |     78 |
    79 |
    80 | 81 |
    82 |
    83 | 84 | 85 |
    86 |
    87 |

    Photo Editor

    88 |     89 |
    90 |
    91 | 92 | 93 |
    94 |
    95 | 96 | 97 |
    98 |
    99 |

    Money SplitWise

    100 |     101 |
    102 |
    103 | 104 |
    105 | 106 | 107 | 108 | 109 | 110 | -------------------------------------------------------------------------------- /index.php: -------------------------------------------------------------------------------- 1 | --------------------------------------------------------------------------------