├── 1. JavaScript ├── 1. Variables and Function.PNG ├── 10. DOM Manipulation part 4.PNG ├── 11. HTML5 Canvas part1.PNG ├── 12. HTML5 Canvas part2.PNG ├── 13. HTML5 Canvas part3.PNG ├── 14. HTML5 Canvas part4.PNG ├── 15. Game Loop part 1.PNG ├── 15. Game Loop part 2.PNG ├── 15. Game Loop part 3.PNG ├── 16. Event Listeners part 1.PNG ├── 17. Event Listeners part 2.PNG ├── 2. Function Hoisting.PNG ├── 3. Array Objects & Functions.PNG ├── 4. JSON(Java Script Object Notation) part 1.PNG ├── 5. Classes and Objects part 2.PNG ├── 6. Classes and Objects part 3.PNG ├── 7. DOM Manipulation part 1.PNG ├── 8. DOM Manipulation part 2.PNG └── 9. DOM Manipulation part 3.PNG ├── 10. WhatsApp Chatlist (LRU Cache) ├── ChatHandler.js ├── images │ ├── avatar1.png │ ├── avatar2.png │ ├── avatar3.png │ ├── avatar4.png │ ├── avatar5.png │ ├── avatar6.png │ └── avatar7.png ├── index.html ├── index.php ├── readme.md ├── script.js └── style.css ├── 11. Text Editor (Stack)(Undo functionality) ├── Notes │ └── 11.Text Editor.pdf ├── index.html ├── index.php ├── readme.md ├── script.js ├── stack.js └── style.css ├── 12. File Zipper(Huffman Encoding) ├── Notes │ └── 12.Huffman Encoding File Zipper.pdf ├── README.md ├── heap.js ├── huffman.js ├── index.html ├── index.php ├── sample.txt ├── sample_encoded.txt ├── script.js ├── style.css ├── zip.png └── zip2.png ├── 13. Chatbot(APIs) ├── README.md ├── bot.png ├── chat_tree.json ├── index.html ├── index.php ├── script.js ├── style.css └── style2.css ├── 14. Photo_Editor ├── image-editor.css ├── index.html ├── readme.md ├── script.js └── style.css ├── 15. Contact_List_Search ├── README.md ├── Trie.js ├── index.html ├── index.php ├── person.png ├── script.js ├── style.css └── style2.css ├── 16. Jump_Froggy ├── README.md ├── assets │ ├── cloud.png │ ├── flag.png │ ├── player.png │ ├── sea.png │ ├── sun.png │ ├── tile.png │ └── wave.png ├── game.js ├── index.html ├── index.php ├── phaser.min.js └── style.css ├── 17. Mario_Game ├── assets │ ├── castle.gif │ ├── cloud.png │ ├── coin.png │ ├── coin_iormvy.png │ ├── enemy.png │ ├── flag.png │ ├── goomba_nmbtds.png │ ├── grass.png │ ├── ground.png │ ├── mario_wjlfy5.png │ ├── pipe1.gif │ ├── pipe2.gif │ └── tile.png ├── game.html ├── game.js ├── index.html ├── index.php ├── phaser.min.js ├── readme.md └── style.css ├── 2. Snake Game(OOPs) ├── Assets │ ├── apple.png │ ├── bg.jpg │ └── trophy.png ├── Notes │ ├── 1.jpeg │ ├── 2.jpeg │ └── Snake Game.pdf ├── Readme.md ├── Snake.PNG ├── index.html └── snake.js ├── 3. Covid Fighter Game(Arrays) ├── Assets │ ├── back.jpeg │ ├── gem.png │ ├── gem.svg │ ├── gemm.png │ ├── superhero.png │ ├── v1.png │ └── v2.png ├── Readme.md ├── fighter.js ├── fighter_img.PNG └── index.html ├── 4. Spin & Win (Arrays and Maths) ├── Assets │ ├── back.jpg │ ├── pin.png │ ├── stand.png │ └── wheel.png ├── JS │ ├── game.js │ └── phaser.js ├── Notes │ └── Spin and Win.pdf ├── README.md ├── index.html └── saw.PNG ├── 5. Interactive Mario Platformer ├── Assets │ ├── apple.png │ ├── background.png │ ├── bottomground.png │ ├── dude.png │ ├── grass.png │ ├── ray.png │ ├── topground.png │ └── tree.png ├── JS │ ├── game.js │ └── phaser.js ├── Notes │ └── Interactive Mario.pdf ├── README.md ├── index.html └── interactive_basicMario.PNG ├── 6. Sudoku (Backtracking) ├── Notes │ └── 6.Sudoku Backtracking.pdf ├── README.md ├── index.html ├── s1.PNG ├── script.js ├── style.css └── test.js ├── 7. Travel Plan(Graph) ├── Dijkstra.js ├── Graph.js ├── Practice │ ├── README.md │ ├── demoFile.PNG │ ├── practice.html │ ├── script.js │ └── style.css ├── README.md ├── index.html └── plane.js ├── 8. Splitwise Algorithm Design (C++)(Using Maps and Multisets) ├── .vscode │ └── settings.json ├── Notes │ └── 8.Splitwise Algorithm.pdf ├── README.md ├── algo.cpp ├── algo.exe └── algo.o ├── 9. Splitwise Cashflow Minimization (Heap) ├── Notes │ └── 9.Splitwise Cashflow Maxmizing.pdf ├── heap.js ├── index.html ├── index.php ├── script.js └── style.css ├── Assignment └── Spin And Win │ ├── Assets │ ├── back.jpg │ ├── button.jpg │ ├── button.png │ ├── oedipus_wizball_highscore.mp3 │ ├── pin.png │ ├── ray.png │ ├── stand.png │ └── wheel.png │ ├── JS │ ├── game.js │ └── phaser.js │ ├── README.md │ ├── index.html │ └── saw.PNG ├── Practice ├── practice1.html └── practice1.js └── README.md /1. JavaScript/1. Variables and Function.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/1. JavaScript/1. Variables and Function.PNG -------------------------------------------------------------------------------- /1. JavaScript/10. DOM Manipulation part 4.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/1. JavaScript/10. DOM Manipulation part 4.PNG -------------------------------------------------------------------------------- /1. JavaScript/11. HTML5 Canvas part1.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/1. JavaScript/11. HTML5 Canvas part1.PNG -------------------------------------------------------------------------------- /1. JavaScript/12. HTML5 Canvas part2.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/1. JavaScript/12. HTML5 Canvas part2.PNG -------------------------------------------------------------------------------- /1. JavaScript/13. HTML5 Canvas part3.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/1. JavaScript/13. HTML5 Canvas part3.PNG -------------------------------------------------------------------------------- /1. JavaScript/14. HTML5 Canvas part4.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/1. JavaScript/14. HTML5 Canvas part4.PNG -------------------------------------------------------------------------------- /1. JavaScript/15. Game Loop part 1.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/1. JavaScript/15. Game Loop part 1.PNG -------------------------------------------------------------------------------- /1. JavaScript/15. Game Loop part 2.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/1. JavaScript/15. Game Loop part 2.PNG -------------------------------------------------------------------------------- /1. JavaScript/15. Game Loop part 3.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/1. JavaScript/15. Game Loop part 3.PNG -------------------------------------------------------------------------------- /1. JavaScript/16. Event Listeners part 1.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/1. JavaScript/16. Event Listeners part 1.PNG -------------------------------------------------------------------------------- /1. JavaScript/17. Event Listeners part 2.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/1. JavaScript/17. Event Listeners part 2.PNG -------------------------------------------------------------------------------- /1. JavaScript/2. Function Hoisting.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/1. JavaScript/2. Function Hoisting.PNG -------------------------------------------------------------------------------- /1. JavaScript/3. Array Objects & Functions.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/1. JavaScript/3. Array Objects & Functions.PNG -------------------------------------------------------------------------------- /1. JavaScript/4. JSON(Java Script Object Notation) part 1.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/1. JavaScript/4. JSON(Java Script Object Notation) part 1.PNG -------------------------------------------------------------------------------- /1. JavaScript/5. Classes and Objects part 2.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/1. JavaScript/5. Classes and Objects part 2.PNG -------------------------------------------------------------------------------- /1. JavaScript/6. Classes and Objects part 3.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/1. JavaScript/6. Classes and Objects part 3.PNG -------------------------------------------------------------------------------- /1. JavaScript/7. DOM Manipulation part 1.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/1. JavaScript/7. DOM Manipulation part 1.PNG -------------------------------------------------------------------------------- /1. JavaScript/8. DOM Manipulation part 2.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/1. JavaScript/8. DOM Manipulation part 2.PNG -------------------------------------------------------------------------------- /1. JavaScript/9. DOM Manipulation part 3.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/1. JavaScript/9. DOM Manipulation part 3.PNG -------------------------------------------------------------------------------- /10. WhatsApp Chatlist (LRU Cache)/ChatHandler.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by aarnavjindal on 07/04/20. 3 | */ 4 | 5 | export { ChatHandler, chat_names} 6 | 7 | const chat_names = ["Prateek Bhaiya", "Arnav Bhaiya", "Munna Bhaiya", "Aarnav Jindal", "Shriya Chhabra", "Akul Jindal", "Abhinav Duggal"]; 8 | const chat_names_length = chat_names.length; 9 | const chat_msg = ["Why didn't he come and talk to me himse...", 10 | "Perfect, I am really glad to hear that!...", 11 | "This is what I understand you're telling me..", 12 | "I’m sorry, I don’t have the info on that.."]; 13 | const chat_msg_length = chat_msg.length; 14 | const chat_img_length = 7; 15 | 16 | class ChatHandler{ 17 | 18 | constructor(chat_template, chat_list){ 19 | this.hashmap = new Map(); 20 | this.linked_list = null; 21 | this.chat_template = chat_template; 22 | this.chat_list = chat_list; 23 | let clock = new Date(); 24 | this.hours = clock.getHours(); 25 | this.mins = clock.getMinutes(); 26 | } 27 | 28 | getTime(){ 29 | // Time Stamp creation for messages 30 | this.mins += 1; 31 | if(this.mins === 60){ 32 | this.hours += 1; 33 | this.mins = 0; 34 | } 35 | 36 | if(this.hours === 24){ 37 | this.hours = 0; 38 | } 39 | 40 | return ("0" + this.hours).slice(-2)+":"+("0" + this.mins).slice(-2); 41 | } 42 | 43 | createNode(id){ 44 | // Creating node element 45 | let node = {}; 46 | // Pointers to prev and next 47 | node['next'] = null; 48 | node['prev'] = null; 49 | // Create a copy of chat template 50 | let chat_item = this.chat_template.cloneNode(true); 51 | // Setting name, message, image to template item 52 | chat_item.querySelector('#Name').innerText = chat_names[id%chat_names_length]; 53 | chat_item.querySelector('#Message').innerText = chat_msg[id%chat_msg_length]; 54 | console.log("./images/avatar" + eval(1+(id%chat_img_length)) + ".png"); 55 | chat_item.querySelector('#Image').src = "./images/avatar" + eval(1+(id%chat_img_length)) + ".png"; 56 | node['chat_item'] = chat_item; 57 | return node; 58 | } 59 | 60 | newMsg(id){ 61 | let node = null; 62 | if((id in this.hashmap ) === false){ 63 | // If node not in linked list 64 | node = this.createNode(id); 65 | this.hashmap[id] = node; 66 | } else{ 67 | // If node in linked list 68 | node = this.getNodeFromList(id); 69 | } 70 | 71 | if(this.linked_list === null){ 72 | // Setting head of empty list 73 | this.linked_list = node; 74 | } else{ 75 | // Adding node to head of linked list 76 | node['next'] = this.linked_list; 77 | if(this.linked_list!==null) 78 | this.linked_list['prev'] = node; 79 | this.linked_list = node; 80 | } 81 | this.updateList(); 82 | } 83 | 84 | deleteMsg(id){ 85 | let node = this.getNodeFromList(id); 86 | // No use of node since it has been deleted 87 | delete this.hashmap[id]; 88 | // Clear entry from hashmap 89 | this.updateList(); 90 | } 91 | 92 | getNodeFromList(id){ 93 | let node = this.hashmap[id]; 94 | let prevNode = node['prev']; 95 | let nextNode = node['next']; 96 | 97 | // Update prev and next node pointers 98 | if(prevNode!==null) 99 | prevNode['next'] = nextNode; 100 | if(nextNode!==null) 101 | nextNode['prev'] = prevNode; 102 | 103 | // Update head of the linked list 104 | if(node===this.linked_list){ 105 | this.linked_list = nextNode; 106 | } 107 | node['next'] = null; 108 | node['prev'] = null; 109 | return node; 110 | } 111 | 112 | updateList(){ 113 | // Update the contents of the chat list 114 | let innerHTML = ''; 115 | let head = this.linked_list; 116 | while(head!==null){ 117 | let element = head['chat_item']; 118 | if(head===this.linked_list){ 119 | element.className = "ks-item ks-active"; 120 | element.querySelector('#Time').innerText = this.getTime(); 121 | } else{ 122 | element.className = "ks-item"; 123 | } 124 | innerHTML += element.outerHTML; 125 | head = head['next']; 126 | } 127 | this.chat_list.innerHTML = innerHTML; 128 | } 129 | 130 | } -------------------------------------------------------------------------------- /10. WhatsApp Chatlist (LRU Cache)/images/avatar1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/10. WhatsApp Chatlist (LRU Cache)/images/avatar1.png -------------------------------------------------------------------------------- /10. WhatsApp Chatlist (LRU Cache)/images/avatar2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/10. WhatsApp Chatlist (LRU Cache)/images/avatar2.png -------------------------------------------------------------------------------- /10. WhatsApp Chatlist (LRU Cache)/images/avatar3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/10. WhatsApp Chatlist (LRU Cache)/images/avatar3.png -------------------------------------------------------------------------------- /10. WhatsApp Chatlist (LRU Cache)/images/avatar4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/10. WhatsApp Chatlist (LRU Cache)/images/avatar4.png -------------------------------------------------------------------------------- /10. WhatsApp Chatlist (LRU Cache)/images/avatar5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/10. WhatsApp Chatlist (LRU Cache)/images/avatar5.png -------------------------------------------------------------------------------- /10. WhatsApp Chatlist (LRU Cache)/images/avatar6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/10. WhatsApp Chatlist (LRU Cache)/images/avatar6.png -------------------------------------------------------------------------------- /10. WhatsApp Chatlist (LRU Cache)/images/avatar7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/10. WhatsApp Chatlist (LRU Cache)/images/avatar7.png -------------------------------------------------------------------------------- /10. WhatsApp Chatlist (LRU Cache)/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | CB Chat List 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 22 |
23 |
24 |
25 |
26 |
27 | 28 | 29 | 30 | 31 | 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 | 62 | Click on generate new step to get updates !! 63 | 64 |
65 |
66 | 67 |
68 |
69 | 70 |
71 | 72 | 88 | 89 | 90 | -------------------------------------------------------------------------------- /10. WhatsApp Chatlist (LRU Cache)/index.php: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /10. WhatsApp Chatlist (LRU Cache)/readme.md: -------------------------------------------------------------------------------- 1 | ## Whatsapp Chatlist 2 | 3 | ### Description 4 | A chat application using Least Recently Used Cache. It provides insertion, deletion, and searching in constant time. 5 | 6 | ### Skills nurtured: 7 | - Caching concept. 8 | - LRU(Least Recently Used) Cache. 9 | - Linked List & defualt HashMaps. 10 | 11 | ### Tech. Stack: 12 | HTML, CSS, JS 13 | -------------------------------------------------------------------------------- /10. WhatsApp Chatlist (LRU Cache)/script.js: -------------------------------------------------------------------------------- 1 | 2 | import { ChatHandler, chat_names } from './ChatHandler.js'; 3 | 4 | onload = function () { 5 | 6 | const chatlist = document.getElementById('chat-list'); 7 | const add = document.getElementById('generate-step'); 8 | const text = document.getElementById('temptext'); 9 | 10 | const templates = document.getElementsByTagName('template')[0]; 11 | const chat_item = templates.content.querySelector("li"); 12 | 13 | const chatHandler = new ChatHandler(chat_item, chatlist); 14 | let chats = []; 15 | 16 | add.onclick = function () { 17 | if(Math.random()>0.75 && chats.length > 0){ 18 | let index = Math.floor(Math.random()*chats.length); 19 | let idToDelete = chats[index]; 20 | chatHandler.deleteMsg(idToDelete); 21 | text.innerHTML = "Deleted message from "+chat_names[idToDelete] + "
" + text.innerHTML; 22 | chats.splice(index, 1); 23 | } else{ 24 | let idOfMsg = Math.floor(Math.random()*7); 25 | if(chats.includes(idOfMsg)===false){ 26 | chats.push(idOfMsg); 27 | } 28 | chatHandler.newMsg(idOfMsg); 29 | text.innerHTML = "New message from "+chat_names[idOfMsg] + "
" + text.innerHTML; 30 | } 31 | }; 32 | }; -------------------------------------------------------------------------------- /10. WhatsApp Chatlist (LRU Cache)/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background:#ddd; 3 | height: 100%; 4 | } 5 | 6 | #container{ 7 | width: 100%; 8 | height: 70%; 9 | display: flex; 10 | margin: 0 auto; 11 | } 12 | 13 | .container2 { 14 | width: 50%; 15 | height: 100%; 16 | border: 1px solid lightgray; 17 | display: flex; 18 | flex-wrap: wrap; 19 | align-content: center; 20 | } 21 | 22 | .container3 { 23 | padding: 50px; 24 | display: flex; 25 | flex-wrap: wrap; 26 | align-content: center; 27 | } 28 | 29 | .ks-messenger { 30 | margin: auto; 31 | margin-top: 50px; 32 | display: -webkit-box; 33 | display: -webkit-flex; 34 | display: -ms-flexbox; 35 | display: inline-block; 36 | height: 100%; 37 | } 38 | 39 | .ks-messenger .ks-discussions { 40 | border-radius: 5px 5px 5px 5px; 41 | background: #fff; 42 | width: 340px; 43 | border-right: 1px solid #dee0e1 44 | } 45 | 46 | .ks-messenger .ks-discussions>.ks-header { 47 | display: -webkit-box; 48 | display: -webkit-flex; 49 | display: -ms-flexbox; 50 | display: flex; 51 | -webkit-box-align: center; 52 | -webkit-align-items: center; 53 | -ms-flex-align: center; 54 | align-items: center; 55 | height: 60px; 56 | border-bottom: 1px solid #dee0e1 57 | } 58 | 59 | .ks-messenger .ks-discussions>.ks-search .form-control { 60 | border: none; 61 | padding: 28px 20px 62 | } 63 | 64 | .ks-messenger .ks-discussions>.ks-search .icon-addon { 65 | color: rgba(58, 82, 155, .6) 66 | } 67 | 68 | .ks-messenger .ks-discussions>.ks-body .ks-items { 69 | list-style: none; 70 | padding: 0; 71 | margin: 0 72 | } 73 | 74 | .ks-messenger .ks-discussions>.ks-body .ks-items>.ks-item { 75 | border-bottom: 1px solid #dee0e1 76 | } 77 | 78 | .ks-messenger .ks-discussions>.ks-body .ks-items>.ks-item>a { 79 | display: -webkit-box; 80 | display: -webkit-flex; 81 | display: -ms-flexbox; 82 | -js-display: flex; 83 | display: flex; 84 | -webkit-box-align: center; 85 | -webkit-align-items: center; 86 | -ms-flex-align: center; 87 | align-items: center; 88 | color: #333; 89 | padding: 15px 20px 90 | } 91 | 92 | .ks-messenger .ks-discussions>.ks-body .ks-items>.ks-item>a>.ks-group-amount { 93 | position: relative; 94 | top: 3px; 95 | margin-right: 12px; 96 | width: 36px; 97 | height: 36px; 98 | background-color: rgba(57, 81, 155, .1); 99 | text-align: center; 100 | line-height: 36px; 101 | -webkit-border-radius: 50%; 102 | border-radius: 50% 103 | } 104 | 105 | .ks-messenger .ks-discussions>.ks-body .ks-items>.ks-item>a>.ks-group-amount>.ks-badge { 106 | position: absolute; 107 | bottom: -1px; 108 | right: -3px 109 | } 110 | 111 | .ks-messenger .ks-discussions>.ks-body .ks-items>.ks-item>a>.ks-avatar { 112 | position: relative; 113 | top: 3px; 114 | margin-right: 12px 115 | } 116 | 117 | .ks-messenger .ks-discussions>.ks-body .ks-items>.ks-item>a>.ks-avatar>img { 118 | width: 36px; 119 | height: 36px; 120 | -webkit-border-radius: 50%; 121 | border-radius: 50% 122 | } 123 | 124 | .ks-messenger .ks-discussions>.ks-body .ks-items>.ks-item>a>.ks-avatar>.ks-badge { 125 | position: absolute; 126 | bottom: -3px; 127 | right: -3px 128 | } 129 | 130 | .ks-messenger .ks-discussions>.ks-body .ks-items>.ks-item>a>.ks-body { 131 | -webkit-box-flex: 1; 132 | -webkit-flex-grow: 1; 133 | -ms-flex-positive: 1; 134 | flex-grow: 1 135 | } 136 | 137 | .ks-messenger .ks-discussions>.ks-body .ks-items>.ks-item>a>.ks-body>.ks-message { 138 | font-size: 12px; 139 | color: #858585; 140 | display: -webkit-box; 141 | display: -webkit-flex; 142 | display: -ms-flexbox; 143 | -js-display: flex; 144 | display: flex 145 | } 146 | 147 | .ks-messenger .ks-discussions>.ks-body .ks-items>.ks-item>a>.ks-body>.ks-message>img { 148 | position: relative; 149 | top: -2px; 150 | width: 18px; 151 | height: 18px; 152 | margin-right: 5px 153 | } 154 | 155 | .ks-messenger .ks-discussions>.ks-body .ks-items>.ks-item>a>.ks-body>.ks-name { 156 | display: -webkit-box; 157 | display: -webkit-flex; 158 | display: -ms-flexbox; 159 | -js-display: flex; 160 | display: flex; 161 | margin-bottom: 4px; 162 | -webkit-box-pack: justify; 163 | -webkit-justify-content: space-between; 164 | -ms-flex-pack: justify; 165 | justify-content: space-between 166 | } 167 | 168 | .ks-messenger .ks-discussions>.ks-body .ks-items>.ks-item>a>.ks-body>.ks-name>.ks-datetime { 169 | text-transform: uppercase; 170 | font-size: 10px; 171 | font-weight: 400; 172 | color: #858585; 173 | position: relative; 174 | top: 3px 175 | } 176 | 177 | .ks-messenger .ks-discussions>.ks-body .ks-items>.ks-item.ks-active { 178 | background: rgba(247, 202, 24, .1); 179 | color: #333; 180 | position: relative 181 | } 182 | 183 | .ks-messenger .ks-discussions>.ks-body .ks-items>.ks-item.ks-active::before { 184 | content: ''; 185 | width: 4px; 186 | height: 100%; 187 | background-color: rgba(222, 187, 12, .2); 188 | display: block; 189 | position: absolute; 190 | top: 0; 191 | left: 0 192 | } -------------------------------------------------------------------------------- /11. Text Editor (Stack)(Undo functionality)/Notes/11.Text Editor.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/11. Text Editor (Stack)(Undo functionality)/Notes/11.Text Editor.pdf -------------------------------------------------------------------------------- /11. Text Editor (Stack)(Undo functionality)/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 20 |
21 |
22 | Type in the box below 23 |

24 | 26 |
27 |
28 | 29 | Sequence of operations will be shown here ! 30 | 31 |
32 |
33 | 34 |
35 |
36 | 37 |
38 | 39 |
40 | 41 | 42 | -------------------------------------------------------------------------------- /11. Text Editor (Stack)(Undo functionality)/index.php: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /11. Text Editor (Stack)(Undo functionality)/readme.md: -------------------------------------------------------------------------------- 1 | 2 | https://user-images.githubusercontent.com/56497318/127524563-8c7b6ead-0211-4c95-835c-1ca082f59834.mp4 3 | 4 | 5 | ## Text Editor 6 | ## Description 7 | Write, Delete and Undo text operations. 8 | 9 | ## Skills nurtured: 10 | Used Stack for undo functionality. 11 | 12 | ## Tech. Stack: 13 | HTML, CSS, JS 14 | -------------------------------------------------------------------------------- /11. Text Editor (Stack)(Undo functionality)/script.js: -------------------------------------------------------------------------------- 1 | 2 | import { Stack } from './stack.js'; 3 | 4 | document.onkeydown = function(event) { 5 | if (event.ctrlKey || event.metaKey) { 6 | event.preventDefault(); 7 | } 8 | }; 9 | 10 | onload = function () { 11 | // Get reference to elements 12 | const textbox = document.getElementById('comment'); 13 | const undo = document.getElementById('undo'); 14 | const clear = document.getElementById('clear'); 15 | const temptext = document.getElementById('temptext'); 16 | 17 | textbox.value = ""; 18 | let text = ""; 19 | let stack = new Stack(); 20 | 21 | textbox.onclick = function () { 22 | textbox.selectionStart = textbox.selectionEnd = textbox.value.length; 23 | }; 24 | 25 | clear.onclick = function () { 26 | stack.clear(); 27 | text = ""; 28 | textbox.value = ""; 29 | temptext.innerHTML = "Sequence of operations will be shown here !"; 30 | }; 31 | 32 | textbox.oninput = function(event){ 33 | // console.log(event); 34 | switch(event.inputType){ 35 | case "insertText": 36 | stack.push(0, event.data); 37 | break; 38 | case "deleteContentBackward": 39 | stack.push(1, text[text.length-1]); 40 | break; 41 | } 42 | 43 | temptext.innerHTML = "On stack "+stack.top()+"
"+temptext.innerHTML; 44 | text = textbox.value; 45 | }; 46 | 47 | undo.onclick = function () { 48 | let operation = stack.pop(); 49 | if(operation[0]!==-1){ 50 | temptext.innerHTML = "Performing undo operation
"+temptext.innerHTML; 51 | if(operation[0] === 0){ 52 | let len = operation[1].length; 53 | textbox.value = textbox.value.substring(0,textbox.value.length-len); 54 | } else{ 55 | textbox.value += operation[1]; 56 | } 57 | text = textbox.value; 58 | } 59 | }; 60 | }; -------------------------------------------------------------------------------- /11. Text Editor (Stack)(Undo functionality)/stack.js: -------------------------------------------------------------------------------- 1 | export { Stack } 2 | 3 | class Stack{ 4 | constructor(){ 5 | this.size = 0; 6 | this.buffer = 4; 7 | this.stack = []; 8 | } 9 | 10 | clear(){ 11 | this.size = 0; 12 | this.stack = []; 13 | } 14 | 15 | isEmpty(){ 16 | return ( this.size === 0 ); 17 | } 18 | 19 | top(){ 20 | return this.stack[this.size-1]; 21 | } 22 | 23 | pop(){ 24 | if(!this.isEmpty()) { 25 | this.size--; 26 | return this.stack.pop(); 27 | } else{ 28 | return [-1,'']; 29 | } 30 | } 31 | 32 | push(type, char){ 33 | if(this.isEmpty()){ 34 | if(type===0) 35 | this.stack.push([type, char]); 36 | } else{ 37 | let tmp = this.top(); 38 | if(tmp[0]===type && tmp[1].length < this.buffer){ 39 | let top = this.pop(); 40 | top[1] = char + top[1]; 41 | this.stack.push(top); 42 | } else{ 43 | this.stack.push([type, char]); 44 | } 45 | } 46 | this.size++; 47 | } 48 | } -------------------------------------------------------------------------------- /11. Text Editor (Stack)(Undo functionality)/style.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | height: 100%; 4 | } 5 | 6 | .text_box { 7 | width: 50%; 8 | height: 100%; 9 | border: 1px solid lightgray; 10 | display: flex; 11 | flex-wrap: wrap; 12 | align-content: center; 13 | } 14 | 15 | #container{ 16 | width: 100%; 17 | height: 70%; 18 | background-color: white; 19 | display: flex; 20 | margin: 0 auto; 21 | } 22 | 23 | #undo{ 24 | margin:auto; 25 | display:block; 26 | } 27 | 28 | 29 | #clear{ 30 | margin:auto; 31 | display:block; 32 | } -------------------------------------------------------------------------------- /12. File Zipper(Huffman Encoding)/Notes/12.Huffman Encoding File Zipper.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/12. File Zipper(Huffman Encoding)/Notes/12.Huffman Encoding File Zipper.pdf -------------------------------------------------------------------------------- /12. File Zipper(Huffman Encoding)/README.md: -------------------------------------------------------------------------------- 1 | # CBHuffman 2 | CB Huffman 3 | -------------------------------------------------------------------------------- /12. File Zipper(Huffman Encoding)/heap.js: -------------------------------------------------------------------------------- 1 | export { BinaryHeap }//will be received by huffman.js 2 | 3 | class BinaryHeap { 4 | 5 | constructor() { 6 | this.heap = []; //array 7 | } 8 | 9 | insert(value) {//function to insert values in heap array 10 | this.heap.push(value);//pushed value in heap array 11 | this.bubbleUp();//called function heapify to manage heap(max node as parent) 12 | } 13 | 14 | size() { 15 | return this.heap.length; 16 | } 17 | 18 | empty(){ 19 | return ( this.size()===0 ); 20 | } 21 | 22 | //using iterative approach 23 | bubbleUp() {//heapify 24 | let index = this.size() - 1; 25 | 26 | while (index > 0) { 27 | let element = this.heap[index], 28 | parentIndex = Math.floor((index - 1) / 2), 29 | parent = this.heap[parentIndex]; 30 | 31 | if (parent[0] >= element[0]) break; 32 | this.heap[index] = parent; 33 | this.heap[parentIndex] = element; 34 | index = parentIndex 35 | } 36 | } 37 | 38 | extractMax() { 39 | const max = this.heap[0];//root node 40 | const tmp = this.heap.pop(); 41 | if(!this.empty()) { 42 | this.heap[0] = tmp; 43 | this.sinkDown(0); 44 | } 45 | return max; 46 | } 47 | 48 | sinkDown(index) { 49 | 50 | let left = 2 * index + 1, 51 | right = 2 * index + 2, 52 | largest = index; 53 | const length = this.size(); 54 | 55 | // console.log(this.heap[left], left, length, this.heap[right], right, length, this.heap[largest]); 56 | 57 | if (left < length && this.heap[left][0] > this.heap[largest][0]) { 58 | largest = left 59 | } 60 | if (right < length && this.heap[right][0] > this.heap[largest][0]) { 61 | largest = right 62 | } 63 | // swap 64 | if (largest !== index) { 65 | let tmp = this.heap[largest]; 66 | this.heap[largest] = this.heap[index]; 67 | this.heap[index] = tmp; 68 | this.sinkDown(largest) 69 | } 70 | } 71 | } -------------------------------------------------------------------------------- /12. File Zipper(Huffman Encoding)/huffman.js: -------------------------------------------------------------------------------- 1 | import { BinaryHeap } from './heap.js'; 2 | 3 | export { HuffmanCoder } //will be recieved by script.js 4 | 5 | class HuffmanCoder{ 6 | 7 | stringify(node){//para -> root node 8 | if(typeof(node[1])==="string"){ 9 | return '\''+node[1]; //leaf node ->adding additional '\' to detect char in string form 10 | } 11 | 12 | return '0' + this.stringify(node[1][0]) + '1' + this.stringify(node[1][1]); // inorder traversal 13 | } 14 | 15 | display(node, modify, index=1){ 16 | if(modify){ 17 | node = ['',node]; 18 | if(node[1].length===1) 19 | node[1] = node[1][0]; 20 | } 21 | 22 | if(typeof(node[1])==="string"){ 23 | return String(index) + " = " + node[1]; 24 | } 25 | 26 | let left = this.display(node[1][0], modify, index*2); 27 | let right = this.display(node[1][1], modify, index*2+1); 28 | let res = String(index*2)+" <= "+index+" => "+String(index*2+1); 29 | return res + '\n' + left + '\n' + right; 30 | } 31 | 32 | destringify(data){//creating tree again from string tree structure 33 | let node = []; 34 | if(data[this.ind]==='\''){ 35 | this.ind++; 36 | node.push(data[this.ind]); 37 | this.ind++; 38 | return node; 39 | } 40 | 41 | this.ind++; 42 | let left = this.destringify(data); 43 | node.push(left); 44 | this.ind++; 45 | let right = this.destringify(data); 46 | node.push(right); 47 | 48 | return node; 49 | } 50 | 51 | getMappings(node, path){//para->root node,empty string 52 | //node[0] -> freq 53 | //leaf node[1] = char else node[1] = array of children 54 | //node[1][0] -> left child 55 | //node[1][1] -> right child 56 | 57 | if(typeof(node[1])==="string"){//leaf node detection(will be be a char(a|b|c|d etc) js identifies char as type string) 58 | this.mappings[node[1]] = path; //saves path at index of ascii value of requested char in array MAPPINGS 59 | return; 60 | } 61 | 62 | //DFS 63 | this.getMappings(node[1][0], path+"0");//left child path+0 64 | this.getMappings(node[1][1], path+"1");//right child path+1 65 | } 66 | 67 | encode(data){//function to encode //will return values to script.js 68 | //'data'is from script.js(uploaded text file is 'data') 69 | this.heap = new BinaryHeap();//generate heap 70 | 71 | //STEP 1 -> CREATE FREQUENCY MAP 72 | const mp = new Map();//generate map named mp 73 | for(let i=0;i MAKE MIN HEAP 82 | for(const key in mp){ 83 | this.heap.insert([-mp[key], key]);//putting negative values to convert max heap to min heap 84 | } //value 10 2 if values are neg -10,-2 85 | //max heap-> 10 ,2 //min heap->-2,-10 86 | 87 | //STEP 3 -> TILL ONE NODE REMAINS 88 | // DO -> 1.EXTRACT TOP TWO MIN NODES 89 | // 2.CREATE A NODE WITH LEFT AND RIGHT CHILD AS EXTRACTED NODE 90 | //ITS FREQ = SUM OF FREQ OF BOTH EXTRACTED NODES 91 | // 3.INSERT NEW NODE IN HEAP 92 | while(this.heap.size() > 1){//till one node remains 93 | const node1 = this.heap.extractMax(); //extraction top two values 94 | const node2 = this.heap.extractMax(); 95 | //freq //char children 96 | const node = [node1[0]+node2[0],[node1,node2]]; 97 | this.heap.insert(node); //insert new node 98 | } 99 | const huffman_encoder = this.heap.extractMax(); //extract the last remaining root node 100 | 101 | this.mappings = {};//contains encoded value for each char 102 | this.getMappings(huffman_encoder, "");//function call 103 | 104 | let binary_string = ""; 105 | for(let i=0;i needed additional bits to make binary string multiple of 8 110 | let rem = (8 - binary_string.length%8)%8; //we need to convert binary string to ascii codes to save in text -> every 8 bit code = 1 ascii char ->hence we need bits to be multiple of 8 so as to convert all bits to ascii char 111 | //**LATER WE NEED TO REMOVE THSI ADDITIONAL BITS WHILE DECODING** 112 | let padding = ""; 113 | for(let i=0;ia),comp ratio 132 | return [final_res, this.display(huffman_encoder, false), info]; 133 | //values returned to script.js 134 | } 135 | 136 | decode(data){ 137 | data = data.split('\n');//getting 3 elements of final_res(tree in string,additional bits,encoded text) 138 | if(data.length===4){ 139 | // if there was a newline char in text 140 | data[0] = data[0] + '\n' + data[1]; 141 | data[1] = data[2]; 142 | data[2] = data[3]; 143 | data.pop(); 144 | } 145 | 146 | this.ind = 0; 147 | const huffman_decoder = this.destringify(data[0]);//get tree back 148 | const text = data[2];//encoded text 149 | 150 | let binary_string = ""; 151 | 152 | //converting encoded text(via ascii code) back to binary code 153 | for(let i=0;i GO LEFT IF 0 | GO RIGHT FOR 1 -> LEAF NODE = CHAR 171 | for(let i=0;i 2 | 3 | 4 | 5 | 6 | 7 | File Zipper 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 22 |
23 |
24 | 25 | Tree Structure Will Be Displayed Here !! 26 | 27 |
28 |
29 | 30 | Operation info will be shown here !! 31 | 32 |
33 |
34 | 35 |
36 |
37 | 38 |
39 |
40 | 41 |
42 | 43 |
44 | 45 | 46 | -------------------------------------------------------------------------------- /12. File Zipper(Huffman Encoding)/index.php: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /12. File Zipper(Huffman Encoding)/script.js: -------------------------------------------------------------------------------- 1 | import { HuffmanCoder } from './huffman.js'; 2 | 3 | 4 | onload = function () { 5 | // Get reference to elements 6 | const treearea = document.getElementById('treearea');//space for tree 7 | const encode = document.getElementById('encode');//encode button 8 | const decode = document.getElementById('decode');//decode button 9 | const temptext = document.getElementById('temptext');//space for text 10 | const upload = document.getElementById('uploadedFile');//uploaded file 11 | 12 | const coder = new HuffmanCoder(); 13 | 14 | upload.addEventListener('change',()=>{ alert("File uploaded") });//when file is uploaded will display an alert 15 | 16 | encode.onclick = function () {//on clicking encode button this function is triggered 17 | 18 | const uploadedFile = upload.files[0];//because we are uploading 1 file we need that first file uploaded by upload.files function 19 | if(uploadedFile===undefined){//if nothing is there in uploadedFile ->result = undefined 20 | alert("No file uploaded !"); 21 | return; 22 | } 23 | const fileReader = new FileReader(); 24 | fileReader.onload = function(fileLoadedEvent){//will see text file now 25 | const text = fileLoadedEvent.target.result;//will get all the written text in file 26 | if(text.length===0){//file is blank 27 | alert("Text can not be empty ! Upload another file !"); 28 | return; 29 | } 30 | let [encoded, tree_structure, info] = coder.encode(text);//trigger encode function in huffman.js and will recieve the returned values from function(encoded text,tree structure,compression ratio) 31 | downloadFile(uploadedFile.name.split('.')[0] +'_encoded.txt', encoded);//triggers function downloadFile 32 | treearea.innerText = tree_structure;//in left space for tree -> display a tree and .. 33 | treearea.style.marginTop = '2000px'; //.. 34 | temptext.innerText = info; //compression ratio 35 | }; 36 | fileReader.readAsText(uploadedFile, "UTF-8"); 37 | }; 38 | 39 | decode.onclick = function () {//on clicking decode button this function triggers 40 | 41 | const uploadedFile = upload.files[0];//because we are uploading 1 file we need that first file uploaded by upload.files function 42 | if(uploadedFile===undefined){//if nothing is there in uploadedFile ->result = undefined 43 | alert("No file uploaded !"); 44 | return; 45 | } 46 | const fileReader = new FileReader(); 47 | fileReader.onload = function(fileLoadedEvent){//will see text file now 48 | const text = fileLoadedEvent.target.result;//will get all the written text in file 49 | if(text.length===0){//file is blank 50 | alert("Text can not be empty ! Upload another file !"); 51 | return; 52 | } 53 | let [decoded, tree_structure, info] = coder.decode(text);//trigger decode function in huffman.js and will recieve the returned values from function(decoded text,tree structure,compression ratio) 54 | downloadFile(uploadedFile.name.split('.')[0] +'_decoded.txt', decoded);//triggers function downloadFile 55 | treearea.innerText = tree_structure;//in left space for tree -> display a tree and .. 56 | treearea.style.marginTop = '2000px'; 57 | temptext.innerText = info; //compression ratio 58 | }; 59 | fileReader.readAsText(uploadedFile, "UTF-8"); 60 | }; 61 | 62 | }; 63 | 64 | function downloadFile(fileName, data){//file name ->firstletter+_encoded.txt //data is encoded text recieved from encode function 65 | let a = document.createElement('a'); 66 | a.href = "data:application/octet-stream,"+encodeURIComponent(data); 67 | a.download = fileName; 68 | a.click(); 69 | } -------------------------------------------------------------------------------- /12. File Zipper(Huffman Encoding)/style.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | height: 100%; 4 | } 5 | 6 | p{ 7 | font-family:'Brush Script MT'; 8 | font-size :15mm; 9 | font-weight: bold; 10 | } 11 | 12 | .text_box { 13 | padding: 30px; 14 | width: 50%; 15 | height: 100%; 16 | border: 1px solid lightgray; 17 | display: flex; 18 | flex-wrap: wrap; 19 | align-content: center; 20 | } 21 | 22 | #container{ 23 | width: 100%; 24 | height: 70%; 25 | background-color: white; 26 | display: flex; 27 | margin: 0 auto; 28 | } 29 | 30 | .center_buttons{ 31 | margin:auto; 32 | display:block; 33 | } -------------------------------------------------------------------------------- /12. File Zipper(Huffman Encoding)/zip.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/12. File Zipper(Huffman Encoding)/zip.png -------------------------------------------------------------------------------- /12. File Zipper(Huffman Encoding)/zip2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/12. File Zipper(Huffman Encoding)/zip2.png -------------------------------------------------------------------------------- /13. Chatbot(APIs)/README.md: -------------------------------------------------------------------------------- 1 | # ChatBot 2 | ChatBot 3 | -------------------------------------------------------------------------------- /13. Chatbot(APIs)/bot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/13. Chatbot(APIs)/bot.png -------------------------------------------------------------------------------- /13. Chatbot(APIs)/chat_tree.json: -------------------------------------------------------------------------------- 1 | { 2 | "child_msg" : ["Want to hear a joke ?","What about some news ?","Wanna get motivated ?","Terminate chat"], 3 | "children" : [ 4 | { 5 | "child_msg" : ["Funny Joke","Very funny Joke","PJ :)","Terminate chat"], 6 | "children" : [ 7 | { 8 | "message" : "getJoke()", 9 | "type" : "function" 10 | }, 11 | { 12 | "message" : "Santa Banta Ha Ha Ha", 13 | "type" : "normal" 14 | }, 15 | { 16 | "message" : "Banta Santa", 17 | "type" : "normal" 18 | } 19 | ] 20 | }, 21 | { 22 | "child_msg" : ["Local News","National News","World News","Terminate chat"], 23 | "children" : [ 24 | { 25 | "message" : "getNews()", 26 | "type" : "function" 27 | }, 28 | { 29 | "message" : "India is the best", 30 | "type" : "normal" 31 | }, 32 | { 33 | "message" : "India becomes a super power", 34 | "type" : "normal" 35 | } 36 | ] 37 | }, 38 | { 39 | "message" : "You're amazing and everything you do will make a positive effect on the world" 40 | } 41 | ] 42 | } -------------------------------------------------------------------------------- /13. Chatbot(APIs)/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 10 | 11 | 12 | 13 | 14 | 18 | 19 | 20 | 21 | 22 | 23 | 30 |
31 |
32 |
33 |
34 |
35 | avatar 36 | 37 |
38 |
Chat with CB Bot
39 |
Code your way to Success
40 |
41 |
42 | 43 |
44 |
    45 |
46 | 47 |
48 | 49 |
50 | 51 | 52 |     53 | 54 | 55 | 56 | 57 |
58 | 59 |
60 | 61 |
62 | 63 | 74 | 75 | 86 | 87 |
88 |
89 | 90 | Hey there friends !
91 | This is a simple yet amazing chatbot tutorial
92 | You'll learn about JSON, Javascript promises and APIs
93 | After this tutorial you can even feed your own data to the bot and have fun with it !
94 | So let's begin interacting with the CB Bot.
95 | Send a simple hello message to begin 96 |
97 |
98 |
99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | -------------------------------------------------------------------------------- /13. Chatbot(APIs)/index.php: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /13. Chatbot(APIs)/script.js: -------------------------------------------------------------------------------- 1 | onload = function(){ 2 | // outputs a javascript object from the parsed json 3 | 4 | var chat = { 5 | messageToSend: '', 6 | messageResponses: [ 7 | 'Why did the web developer leave the restaurant? Because of the table layout.', 8 | 'How do you comfort a JavaScript bug? You console it.', 9 | 'An SQL query enters a bar, approaches two tables and asks: "May I join you?"', 10 | 'What is the most used language in programming? Profanity.', 11 | 'What is the object-oriented way to become wealthy? Inheritance.', 12 | 'An SEO expert walks into a bar, bars, pub, tavern, public house, Irish pub, drinks, beer, alcohol' 13 | ], 14 | init: async function() { 15 | this.chatTree = new ChatTree(); 16 | await this.chatTree.init(); 17 | this.cacheDOM(); 18 | this.bindEvents(); 19 | await this.render(); 20 | }, 21 | cacheDOM: function() { 22 | this.$chatHistory = $('.chat-history'); 23 | this.$button = $('button'); 24 | this.$textarea = $('#message-to-send'); 25 | this.$chatHistoryList = this.$chatHistory.find('ul'); 26 | }, 27 | bindEvents: function() { 28 | this.$button.on('click', this.addMessage.bind(this)); 29 | this.$textarea.on('keyup', this.addMessageEnter.bind(this)); 30 | }, 31 | render: async function() { 32 | this.scrollToBottom(); 33 | if (this.messageToSend.trim() !== '') { 34 | var template = Handlebars.compile( $("#message-template").html()); 35 | var context = { 36 | messageOutput: this.messageToSend, 37 | time: this.getCurrentTime() 38 | }; 39 | 40 | this.input = this.messageToSend; 41 | this.$chatHistoryList.append(template(context)); 42 | this.scrollToBottom(); 43 | this.$textarea.val(''); 44 | 45 | // responses 46 | var templateResponse = Handlebars.compile( $("#message-response-template").html()); 47 | var contextResponse = { 48 | response: await this.chatTree.getMessage(this.input), 49 | time: this.getCurrentTime() 50 | }; 51 | 52 | setTimeout(function() { 53 | this.$chatHistoryList.append(templateResponse(contextResponse)); 54 | this.scrollToBottom(); 55 | }.bind(this), 1000); 56 | 57 | } 58 | 59 | }, 60 | 61 | addMessage: function() { 62 | this.messageToSend = this.$textarea.val(); 63 | this.render(); 64 | }, 65 | addMessageEnter: function(event) { 66 | // enter was pressed 67 | if (event.keyCode === 13) { 68 | this.addMessage(); 69 | } 70 | }, 71 | scrollToBottom: function() { 72 | this.$chatHistory.scrollTop(this.$chatHistory[0].scrollHeight); 73 | }, 74 | getCurrentTime: function() { 75 | return new Date().toLocaleTimeString(). 76 | replace(/([\d]+:[\d]{2})(:[\d]{2})(.*)/, "$1$3"); 77 | } 78 | }; 79 | 80 | chat.init(); 81 | }; 82 | 83 | class ChatTree { 84 | 85 | constructor() { 86 | } 87 | 88 | async init(){ 89 | const data = await this.reset(); 90 | this.chat_tree = data; 91 | this.firstMsg = true; 92 | console.log("inside done"); 93 | return "Chat has now been terminated. Send hi to begin chat again !"; 94 | } 95 | 96 | async reset(){ 97 | const response = await fetch('chat_tree.json'); 98 | const jsonResponse = await response.json(); 99 | return jsonResponse; 100 | } 101 | 102 | async getMessage(input){ 103 | let resp = ''; 104 | //input = new String(input.trim()); 105 | //console.log(input); 106 | if(this.firstMsg===true) { 107 | this.firstMsg = false; 108 | resp += "Hey there buddy
"; 109 | } else { 110 | 111 | if(("message" in this.chat_tree) && (input.trim()==="Reset")) { 112 | return this.init(); 113 | } 114 | 115 | if(isNaN(parseInt(input)) || parseInt(input)<=0 || parseInt(input) > this.chat_tree['children'].length+1) 116 | return 'It seems like you gave a wrong input ! Go ahead try again !'; 117 | 118 | if(parseInt(input)-1===this.chat_tree['children'].length){ 119 | this.init(); 120 | } 121 | 122 | this.chat_tree = this.chat_tree['children'][parseInt(input)-1]; 123 | } 124 | 125 | if("message" in this.chat_tree){ 126 | let data; 127 | if(this.chat_tree['type']==="function"){ 128 | // console.log(String(this.chat_tree['message']),String("getJoke()")); 129 | if(this.chat_tree['message']==="getJoke()"){ 130 | data = await eval(this.chat_tree['message']); 131 | data = data.value.joke; 132 | } else{ 133 | data = await eval(this.chat_tree['message']); 134 | data = data.articles[0].title; 135 | } 136 | } else{ 137 | data = this.chat_tree['message']; 138 | } 139 | resp += data; 140 | resp += "

Please input Reset to reset chat now"; 141 | } else { 142 | for (let i in this.chat_tree['child_msg']) { 143 | resp += String(parseInt(i) + 1) + ". " + this.chat_tree['child_msg'][parseInt(i)] + "
"; 144 | } 145 | } 146 | return resp; 147 | } 148 | } 149 | 150 | async function getJoke() { 151 | const response = await fetch('http://api.icndb.com/jokes/random'); 152 | const jsonResp = await response.json(); 153 | return jsonResp; 154 | } 155 | 156 | async function getNews() { 157 | const response = await fetch('http://newsapi.org/v2/top-headlines?country=in&pageSize=1&apiKey=a876816f98574cdfa23ffdc7d531c7bc'); 158 | const jsonResp = await response.json(); 159 | return jsonResp; 160 | } -------------------------------------------------------------------------------- /13. Chatbot(APIs)/style.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | height: 100%; 4 | display: flex; 5 | flex-direction: column; 6 | } 7 | 8 | #chatdiv { 9 | width: 50%; 10 | height: 100%; 11 | border: 1px solid lightgray; 12 | } 13 | 14 | #chatdiv2 { 15 | width: 50%; 16 | height: 100%; 17 | border: 1px solid lightgray; 18 | display: flex; 19 | flex-wrap: wrap; 20 | align-content: center; 21 | } 22 | 23 | #maindiv{ 24 | width: 100%; 25 | flex: 1; 26 | background-color: white; 27 | display: flex; 28 | margin: 0 auto; 29 | } 30 | 31 | -------------------------------------------------------------------------------- /13. Chatbot(APIs)/style2.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Lato:400,700); 2 | *, *:before, *:after { 3 | box-sizing: border-box; 4 | } 5 | 6 | .container { 7 | margin: 0 auto; 8 | width: 100%; 9 | height: 100%; 10 | background: #444753; 11 | border-radius: 5px; 12 | } 13 | 14 | .chat { 15 | height: 100%; 16 | width: 100%; 17 | background: #F2F5F8; 18 | border-top-right-radius: 5px; 19 | border-bottom-right-radius: 5px; 20 | color: #434651; 21 | } 22 | .chat .chat-header { 23 | padding: 20px; 24 | border-bottom: 2px solid white; 25 | } 26 | .chat .chat-header img { 27 | float: left; 28 | } 29 | .chat .chat-header .chat-about { 30 | float: left; 31 | padding-left: 10px; 32 | margin-top: 6px; 33 | } 34 | .chat .chat-header .chat-with { 35 | font-weight: bold; 36 | font-size: 16px; 37 | } 38 | .chat .chat-header .chat-num-messages { 39 | color: #92959E; 40 | } 41 | .chat .chat-header .fa-star { 42 | float: right; 43 | color: #D8DADF; 44 | font-size: 20px; 45 | margin-top: 12px; 46 | } 47 | .chat .chat-history { 48 | padding: 30px 30px 20px; 49 | border-bottom: 2px solid white; 50 | overflow-y: scroll; 51 | height: 400px; 52 | } 53 | .chat .chat-history .message-data { 54 | margin-bottom: 15px; 55 | } 56 | .chat .chat-history .message-data-time { 57 | color: #a8aab1; 58 | padding-left: 6px; 59 | } 60 | .chat .chat-history .message { 61 | color: white; 62 | padding: 18px 20px; 63 | line-height: 26px; 64 | font-size: 16px; 65 | border-radius: 7px; 66 | margin-bottom: 30px; 67 | width: 70%; 68 | position: relative; 69 | } 70 | .chat .chat-history .message:after { 71 | bottom: 100%; 72 | left: 7%; 73 | border: solid transparent; 74 | content: " "; 75 | height: 0; 76 | width: 0; 77 | position: absolute; 78 | pointer-events: none; 79 | border-bottom-color: #86BB71; 80 | border-width: 10px; 81 | margin-left: -10px; 82 | } 83 | .chat .chat-history .my-message { 84 | background: #86BB71; 85 | } 86 | .chat .chat-history .other-message { 87 | background: #94C2ED; 88 | } 89 | .chat .chat-history .other-message:after { 90 | border-bottom-color: #94C2ED; 91 | left: 93%; 92 | } 93 | .chat .chat-message { 94 | padding: 30px; 95 | } 96 | .chat .chat-message textarea { 97 | width: 100%; 98 | border: none; 99 | padding: 10px 20px; 100 | font: 14px/22px "Lato", Arial, sans-serif; 101 | margin-bottom: 10px; 102 | border-radius: 5px; 103 | resize: none; 104 | } 105 | .chat .chat-message .fa-file-o, .chat .chat-message .fa-file-image-o { 106 | font-size: 16px; 107 | color: gray; 108 | cursor: pointer; 109 | } 110 | .chat .chat-message button { 111 | float: right; 112 | color: #94C2ED; 113 | font-size: 16px; 114 | text-transform: uppercase; 115 | border: none; 116 | cursor: pointer; 117 | font-weight: bold; 118 | background: #F2F5F8; 119 | } 120 | .chat .chat-message button:hover { 121 | color: #75b1e8; 122 | } 123 | 124 | .online, .offline, .me { 125 | margin-right: 3px; 126 | font-size: 10px; 127 | } 128 | 129 | .online { 130 | color: #86BB71; 131 | } 132 | 133 | .offline { 134 | color: #E38968; 135 | } 136 | 137 | .me { 138 | color: #94C2ED; 139 | } 140 | 141 | .align-left { 142 | text-align: left; 143 | } 144 | 145 | .align-right { 146 | text-align: right; 147 | } 148 | 149 | .float-right { 150 | float: right; 151 | } 152 | 153 | .clearfix:after { 154 | visibility: hidden; 155 | display: block; 156 | font-size: 0; 157 | content: " "; 158 | clear: both; 159 | height: 0; 160 | } 161 | -------------------------------------------------------------------------------- /14. Photo_Editor/image-editor.css: -------------------------------------------------------------------------------- 1 | #imageEditor { 2 | margin:auto; 3 | padding:20px; 4 | border:1px solid #4b4b4b; 5 | -moz-border-radius:8px; 6 | -webkit-border-radius:8px; 7 | border-radius:8px; 8 | background-color:#ababab; 9 | } 10 | 11 | #editorContainer { 12 | display:block; 13 | overflow: auto; 14 | width: 800px; 15 | height: 500px; 16 | } 17 | 18 | #editor { 19 | display:block; 20 | margin: auto; 21 | } 22 | 23 | #toolbar { 24 | display:block; 25 | margin-right: 50px; 26 | } 27 | 28 | #resizer { 29 | border:2px dashed #000 30 | } 31 | 32 | #toolbar button { 33 | padding: 10px 20px 10px 20px; 34 | } -------------------------------------------------------------------------------- /14. Photo_Editor/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 36 |
37 |
38 |
39 |
40 | 41 |
42 |
43 |
44 | 47 | 50 |
51 |
52 | 59 | 66 |
67 |
68 | 75 | 82 |
83 |
84 | 87 | 94 |
95 |
96 |
97 | 98 | 99 | -------------------------------------------------------------------------------- /14. Photo_Editor/readme.md: -------------------------------------------------------------------------------- 1 | ## Photo Editor 2 | 3 | https://user-images.githubusercontent.com/56497318/127525177-c5f99efa-f869-431e-a141-d4c29b8e009a.mp4 4 | 5 | 6 | 7 | ### Description 8 | - Functions:- 9 | - Upload and save photo, flip horizontal vertical, resize, rotate & greyscale. 10 | 11 | ### Skills nurtured: 12 | - 3D array to store rgb values of each pixel. 13 | - Learnt new concepts of RGB, Pixels and how its change affects the display. 14 | - Explored logics for different functions of editor. 15 | 16 | ### Tech. Stack: 17 | HTML, CSS, JS, CANVAS 18 | -------------------------------------------------------------------------------- /14. Photo_Editor/script.js: -------------------------------------------------------------------------------- 1 | onload = function () { 2 | const editor = document.getElementById("editor"); 3 | const context = editor.getContext("2d"); 4 | const toolbar = document.getElementById("toolbar"); 5 | 6 | const tools = { 7 | "upload" : function () { 8 | const upload = document.createElement('input'); 9 | upload.type = "file"; 10 | upload.click(); 11 | upload.onchange = function() { 12 | const img = new Image(); 13 | /*2*/img.onload = () => { 14 | editor.width = img.width; 15 | editor.height = img.height; 16 | context.drawImage(img, 0,0); 17 | }; 18 | img.onerror = () => { 19 | console.error("The provided file couldn't be loaded as an Image media"); 20 | }; 21 | 22 | /*1*/img.src = URL.createObjectURL(this.files[0]); //Iimg jo load hgi uske lie img.src chahie ,then onload 23 | }; 24 | }, 25 | "save" : function(){ 26 | const image = editor.toDataURL(); // return image url in canvas 27 | const link = document.createElement('a'); // link 28 | link.download = 'image.png'; // will be download as this name 29 | link.href = image; // url of image 30 | link.click(); //downloads 31 | }, 32 | "flipHor" : function(){ 33 | let cols = editor.width; // Width is number of columns 34 | let rows = editor.height; // Height is number of rows 35 | let image = getRGBArray(rows, cols); // array ->[[[r,g,b,d]]] of each cell 36 | 37 | /*_____ 38 | |_ _ _| swap about this middle line 39 | |_____| 40 | */ 41 | for(let i=0;i=0;i--){ 71 | let row = []; 72 | for(let j=0;j=0;j--){ 88 | row.push(image[j][i]); 89 | } 90 | rimage.push(row); 91 | } 92 | setImageData(rimage, cols, rows); 93 | }, 94 | // technique -> SAMPLING 95 | // IF YOU GO FROM SMALL TO BIG , YOU LOSE DATA -> "PIXELATION" 96 | "resize" : function(){ 97 | let cols = editor.width; // Width is number of columns 98 | let rows = editor.height; // Height is number of rows 99 | let image = getRGBArray(rows, cols); 100 | if (editor.toDataURL() == "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAEYklEQVR4Xu3UAQkAAAwCwdm/9HI83BLIOdw5AgQIRAQWySkmAQIEzmB5AgIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlACBB1YxAJfjJb2jAAAAAElFTkSuQmCC") { 101 | alert('please upload image'); 102 | return; 103 | } 104 | 105 | let inp = prompt('Current Width : '+cols + '\n' + 'Current Height : '+rows + '\n' + 'Give the new width and height in a space separated manner'+ '\n' +'Please refrain from giving dimension greater than ratio 3').split(' '); 106 | if(inp.length!==2){ 107 | alert('Incorrect dimensions in input'); 108 | return; 109 | } 110 | let ncols = parseInt(inp[0]); //width 111 | let nrows = parseInt(inp[1]); //height 112 | if(isNaN(ncols) || isNaN(nrows)){ // if not a no. 113 | alert('Input is not a proper number'); 114 | return; 115 | } 116 | 117 | let hratio = rows/nrows; 118 | let wratio = cols/ncols; 119 | 120 | // sampling -> adding pixels [i*hratio][j*wratio] 121 | let nimage = []; 122 | for(let i=0;i greyish component 142 | image[i][j][0] = image[i][j][1] = image[i][j][2] = shade; // r,g,b -> shade grey 143 | } 144 | } 145 | setImageData(image, rows, cols); 146 | } 147 | }; 148 | 149 | // all the buttons,eg save calls functions once clicked button 150 | for(let button of toolbar.children){ 151 | if(button.nodeName==="BUTTON") { // nodeName returns tagname in capitals 152 | button.onclick = function (event) { 153 | event.preventDefault(); //prevent default use 154 | tools[this.id].call(this); //tools[save].call(save btn ka reference) -> .call(this)=calls a function with a given this value and arguments 155 | } 156 | } 157 | } 158 | 159 | // AUXILARY FUNCTIONS - WE CAN DIRECTLY WORK WITH "DATA ARRAY" ,THIS FUNCTION ARE FOR VISUALISATION 160 | // gets pixel data and paints that data on canvas 161 | function setImageData(data, rows, cols) { 162 | const Image = Array.from({ length: rows*cols*4 }); // length = h*w*4 -> no. of rows = h,nocol=w,each cell has R,G,B,alpha value =*4 163 | for(let i = 0;i < rows; i++) { 164 | for (let j = 0; j < cols; j++) { 165 | for (let k = 0; k < 4; k++) { 166 | Image[(i * cols + j) * 4 + k] = data[i][j][k]; // canvas needs 1d array so 167 | // image[0]=r value of 0,0 pixel 168 | // image -> [r,g,b,a,r,g,b,a....] 169 | } 170 | } 171 | } //w h 172 | const idata = context.createImageData(cols, rows);// Creates a new, blank ImageData object with the specified dimensions 173 | idata.data.set(Image); // .data -> Is a Uint8ClampedArray representing a one-dimensional array containing the data in the RGBA order 174 | editor.width = cols; //editor = canvas 175 | editor.height = rows; 176 | context.putImageData(idata, 0, 0); // paints idata onto the canvas. 177 | } 178 | // get rgba data array from each cell 179 | function getRGBArray(rows, cols) { 180 | let data = context.getImageData(0, 0, cols, rows).data; // provide image data of specified portion of the canvas. 181 | const RGBImage = []; 182 | for(let i=0;i 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 23 |
24 |
25 |
26 |
Type in the box below...
27 |
28 |
29 | 30 | 31 |
32 | 33 |
34 |
35 |
36 | 37 | 38 |
39 |
40 |
41 | 42 | 43 |
44 |
45 | 46 | 47 |
48 | 60 | 61 | -------------------------------------------------------------------------------- /15. Contact_List_Search/index.php: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /15. Contact_List_Search/person.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/15. Contact_List_Search/person.png -------------------------------------------------------------------------------- /15. 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 = ""; // creating input on inp 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 | }; -------------------------------------------------------------------------------- /15. Contact_List_Search/style.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | height: 100%; 4 | } 5 | 6 | .text_box { 7 | padding: 50px; 8 | width: 50%; 9 | align-content: center; 10 | border: 1px solid #eeeeee; 11 | } 12 | 13 | #container{ 14 | width: 100%; 15 | height: 60%; 16 | background-color: white; 17 | display: flex; 18 | margin: 0 auto; 19 | } 20 | 21 | .center_input { 22 | width: 40%; 23 | display: flex; 24 | margin: 20px auto auto; 25 | } 26 | -------------------------------------------------------------------------------- /15. Contact_List_Search/style2.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | font: 16px Arial; 7 | } 8 | 9 | /*the container must be positioned relative:*/ 10 | .autocomplete { 11 | position: relative; 12 | display: inline-block; 13 | } 14 | 15 | input { 16 | border: 1px solid transparent; 17 | background-color: #f1f1f1; 18 | padding: 10px; 19 | font-size: 16px; 20 | } 21 | 22 | input[type=text] { 23 | background-color: #f1f1f1; 24 | width: 100%; 25 | } 26 | 27 | input[type=submit] { 28 | background-color: DodgerBlue; 29 | color: #fff; 30 | cursor: pointer; 31 | } 32 | 33 | .autocomplete-items { 34 | position: absolute; 35 | border: 1px solid #d4d4d4; 36 | border-bottom: none; 37 | border-top: none; 38 | z-index: 99; 39 | top: 100%; 40 | left: 0; 41 | right: 0; 42 | } 43 | 44 | .autocomplete-items div { 45 | padding: 10px; 46 | cursor: pointer; 47 | } 48 | 49 | /*when hovering an item:*/ 50 | .autocomplete-items :hover { 51 | background-color: #e9e9e9; 52 | } 53 | 54 | /*when navigating through the items using the arrow keys:*/ 55 | .autocomplete-active { 56 | background-color: DodgerBlue !important; 57 | color: black; 58 | } -------------------------------------------------------------------------------- /16. Jump_Froggy/README.md: -------------------------------------------------------------------------------- 1 | ## Jump Froggy 2 | 3 | 4 | 5 | https://user-images.githubusercontent.com/56497318/127526872-921f4734-a3d6-4bff-95ed-0e0d3c1ceacb.mp4 6 | 7 | 8 | 9 | ### Description 10 | Help Jack reach the destination in less moves. 11 | 12 | ### Skills nurtured: 13 | Used Dynamic Programming & Greedy Approach to calculate minimum moves. 14 | 15 | ### Tech. Stack: 16 | HTML, CSS, JS, PHASER 17 | -------------------------------------------------------------------------------- /16. Jump_Froggy/assets/cloud.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/16. Jump_Froggy/assets/cloud.png -------------------------------------------------------------------------------- /16. Jump_Froggy/assets/flag.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/16. Jump_Froggy/assets/flag.png -------------------------------------------------------------------------------- /16. Jump_Froggy/assets/player.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/16. Jump_Froggy/assets/player.png -------------------------------------------------------------------------------- /16. Jump_Froggy/assets/sea.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/16. Jump_Froggy/assets/sea.png -------------------------------------------------------------------------------- /16. Jump_Froggy/assets/sun.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/16. Jump_Froggy/assets/sun.png -------------------------------------------------------------------------------- /16. Jump_Froggy/assets/tile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/16. Jump_Froggy/assets/tile.png -------------------------------------------------------------------------------- /16. Jump_Froggy/assets/wave.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/16. Jump_Froggy/assets/wave.png -------------------------------------------------------------------------------- /16. Jump_Froggy/game.js: -------------------------------------------------------------------------------- 1 | onload = function () { 2 | const unit = 16; 3 | const move_step = unit * 5; 4 | const fly_step = unit * 8; 5 | let platforms_array = []; 6 | let moves = []; 7 | let pos = 0; 8 | let firstTime = true; 9 | let onGround = true; 10 | const game = new Phaser.Game(320, 240, Phaser.AUTO, 'mynetwork'); 11 | const game_length = 1850; 12 | const game_height = game.height; 13 | const ground_height = game_height - 2*unit; 14 | const result_font = { font:"20px",fill:"#000",align:"center"}; 15 | const refresh = document.getElementById('generate-problem'); 16 | refresh.onclick = function () { 17 | game.state.start("GameState"); // khudse ek state create kri 18 | }; 19 | var temptext = document.getElementById('temptext'); 20 | var solve = document.getElementById('solve'); 21 | let question = "QUESTION"; 22 | const text = 'You\'ll receive a jumps array as input. Each index stores the maximum islands you can jump ahead from current island. ' + 23 | 'You need to find least number of moves needed to reach the last island and return jump to be taken on each island.
' + 24 | 'Can you solve it ?

'+question.bold()+'
'; 25 | const text2 = 'Click on solve to get solution'; 26 | 27 | const BootState = { 28 | init : function () { 29 | game.stage.backgroundColor = '#5c94fc'; 30 | game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; 31 | }, 32 | create : function () { 33 | this.state.start("PreloadState"); 34 | } 35 | }; 36 | 37 | const PreloadState = { 38 | // preload 39 | preload : function () { 40 | game.load.spritesheet('mario', 'assets/player.png', 18, 20); 41 | game.load.spritesheet('flag', 'assets/flag.png', 33, 168); 42 | game.load.image('cloud', 'assets/cloud.png'); 43 | game.load.image('sun', 'assets/sun.png'); 44 | game.load.image('tile', 'assets/tile.png'); 45 | game.load.image('wave', 'assets/wave.png'); 46 | game.load.image('sea', 'assets/sea.png'); 47 | }, 48 | // create 49 | create : function () { 50 | this.state.start("GameState") // game starts 51 | } 52 | }; 53 | 54 | const GameState = { 55 | init: function() { 56 | createGame(); 57 | }, 58 | update: function() { 59 | updateState(); 60 | } 61 | }; 62 | 63 | game.state.add("BootState",BootState); 64 | game.state.add("PreloadState",PreloadState); 65 | game.state.add("GameState",GameState); 66 | game.state.start("BootState"); 67 | 68 | function createGame() { 69 | pos = 0; 70 | firstTime = true; // just reached 71 | onGround = true; 72 | platforms_array = []; 73 | game.world.setBounds(0,0,game_length,game_height); // world set starting from x,y to w,h 74 | game.physics.startSystem(Phaser.Physics.ARCADE); // laws of motion 75 | 76 | // 30 platforms 77 | for(let i=0;i<29;i++){ 78 | platforms_array.push(Math.floor(Math.random()*3)+1); // value btw 1-3 79 | } 80 | 81 | clouds = game.add.group(); 82 | let change = 15; 83 | for (let i = 70; i < game_length; i+= 240) { 84 | clouds.create(i, change + ground_height - 8*unit, 'cloud'); 85 | change *= -1; 86 | } 87 | 88 | sun = game.add.sprite(16 * unit, ground_height - 13.5 * unit, 'sun'); 89 | game.physics.arcade.enable(sun); 90 | 91 | platforms = game.add.group(); 92 | platforms.enableBody = true; 93 | for (i = 0; i < 30; i++) { 94 | let pos = i * 60 + 15; 95 | let platform = platforms.create(pos, ground_height, 'tile'); 96 | platform.body.immovable = true; 97 | game.add.text(pos + 10, ground_height-40, platforms_array[i], result_font); 98 | if(i===29){ 99 | platform.scale.setTo(2,1); 100 | } 101 | } 102 | 103 | const ground = game.add.tileSprite(0,ground_height+10, game_length, 6, 'wave'); 104 | game.physics.arcade.enable(ground); 105 | ground.body.immovable = true; 106 | game.add.tileSprite(0,ground_height+14, game_length, game.height, 'sea'); 107 | 108 | flag = game.add.sprite(1780, ground_height-168, 'flag'); 109 | flag.animations.add('celebrate'); 110 | 111 | player = game.add.sprite(24, ground_height - 20, 'mario'); 112 | game.physics.arcade.enable(player); 113 | player.body.collideWorldBounds = true; 114 | player.body.velocity.x = move_step; 115 | player.body.enable = false; 116 | 117 | temptext.innerHTML = text + platforms_array.toString() + '
' + text2; 118 | } 119 | 120 | function updateState() { 121 | game.physics.arcade.collide(player, platforms, groundOverlap); 122 | game.camera.follow(player, Phaser.Camera.FOLLOW_TOPDOWN); 123 | // if player movalbe 124 | if (player.body.enable) { 125 | if (onGround) { 126 | onGround = false; 127 | if(pos 15*unit){ 146 | sun.body.velocity.x = player.body.velocity.x; 147 | } else{ 148 | sun.body.velocity.x = 0; 149 | } 150 | } 151 | } 152 | 153 | function groundOverlap() { 154 | onGround = true; 155 | } 156 | 157 | solve.onclick = function () { 158 | if (!player.body.enable){ 159 | moves = solveProblem(platforms_array); 160 | let solution = "SOLUTION" 161 | temptext.innerHTML = temptext.innerHTML + "

" + solution.bold() +"
" + moves; 162 | player.body.enable = true; // make player movable 163 | } 164 | }; 165 | }; 166 | 167 | function solveProblem(input_arr){ 168 | let res = []; 169 | 170 | for(let i=0;i<30;i++){ 171 | res.push([-1,-1]); 172 | } 173 | 174 | res[29][0] = 0; 175 | 176 | 177 | for(let i=28;i>=0;i--){ 178 | let mini = 1000; 179 | let minj = 100; 180 | for(let j=1;j<=input_arr[i]&&i+j<30;j++){ 181 | if (mini > res[i + j][0]) { 182 | mini = res[i + j][0]; 183 | minj = j; 184 | } 185 | } 186 | console.log(minj, mini); 187 | res[i][0] = mini + 1; 188 | res[i][1] = minj; 189 | } 190 | let ans = []; 191 | let start = 0; 192 | while(start<29){ 193 | ans.push(res[start][1]); 194 | start += res[start][1]; 195 | } 196 | return ans; 197 | } -------------------------------------------------------------------------------- /16. Jump_Froggy/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 24 |
25 |
26 |
27 |
28 | 29 | 30 |
31 |
32 | 33 |
34 |
35 | 36 |
37 | 38 |
39 | 40 | 41 | -------------------------------------------------------------------------------- /16. Jump_Froggy/index.php: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /16. Jump_Froggy/style.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | height: 100%; 4 | } 5 | 6 | #mynetwork { 7 | width: 50%; 8 | height: 100%; 9 | border: 1px solid lightgray; 10 | } 11 | 12 | #container2 { 13 | width: 50%; 14 | height: 100%; 15 | border: 1px solid lightgray; 16 | display: flex; 17 | flex-wrap: wrap; 18 | align-content: center; 19 | } 20 | 21 | #container{ 22 | width: 100%; 23 | height: 70%; 24 | background-color: white; 25 | display: flex; 26 | margin: 0 auto; 27 | } 28 | 29 | #generate-problem{ 30 | margin:auto; 31 | display:block; 32 | } 33 | 34 | 35 | #solve{ 36 | margin:auto; 37 | display:block; 38 | } -------------------------------------------------------------------------------- /17. Mario_Game/assets/castle.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/17. Mario_Game/assets/castle.gif -------------------------------------------------------------------------------- /17. Mario_Game/assets/cloud.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/17. Mario_Game/assets/cloud.png -------------------------------------------------------------------------------- /17. Mario_Game/assets/coin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/17. Mario_Game/assets/coin.png -------------------------------------------------------------------------------- /17. Mario_Game/assets/coin_iormvy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/17. Mario_Game/assets/coin_iormvy.png -------------------------------------------------------------------------------- /17. Mario_Game/assets/enemy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/17. Mario_Game/assets/enemy.png -------------------------------------------------------------------------------- /17. Mario_Game/assets/flag.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/17. Mario_Game/assets/flag.png -------------------------------------------------------------------------------- /17. Mario_Game/assets/goomba_nmbtds.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/17. Mario_Game/assets/goomba_nmbtds.png -------------------------------------------------------------------------------- /17. Mario_Game/assets/grass.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/17. Mario_Game/assets/grass.png -------------------------------------------------------------------------------- /17. Mario_Game/assets/ground.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/17. Mario_Game/assets/ground.png -------------------------------------------------------------------------------- /17. Mario_Game/assets/mario_wjlfy5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/17. Mario_Game/assets/mario_wjlfy5.png -------------------------------------------------------------------------------- /17. Mario_Game/assets/pipe1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/17. Mario_Game/assets/pipe1.gif -------------------------------------------------------------------------------- /17. Mario_Game/assets/pipe2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/17. Mario_Game/assets/pipe2.gif -------------------------------------------------------------------------------- /17. Mario_Game/assets/tile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/17. Mario_Game/assets/tile.png -------------------------------------------------------------------------------- /17. Mario_Game/game.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /17. Mario_Game/game.js: -------------------------------------------------------------------------------- 1 | 2 | onload = function () { 3 | steps = 16; 4 | move_step = steps * 5; 5 | fly_step = steps * 15; 6 | ground_height = 0; 7 | asset_height = 16; 8 | platforms_array = []; 9 | moves = []; 10 | profit = []; 11 | pos = 0; 12 | onGround = true; 13 | 14 | BootState = { 15 | init : function () { 16 | game.stage.backgroundColor = '#5c94fc'; 17 | game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; 18 | // game.scale.pageAlignHorizontally = true; 19 | // game.scale.pageAlignVertically = true; 20 | }, 21 | create : function () { 22 | this.state.start("PreloadState"); 23 | } 24 | }; 25 | 26 | PreloadState = { 27 | preload : function () { 28 | game.load.spritesheet('enemy', 'assets/goomba_nmbtds.png', 16, 16); 29 | game.load.spritesheet('mario', 'assets/mario_wjlfy5.png', 16, 16); 30 | game.load.spritesheet('coin', 'assets/coin_iormvy.png', 16, 16); 31 | game.load.spritesheet('flag', 'assets/flag.png', 33, 168); 32 | game.load.image('cloud', 'assets/cloud.png'); 33 | game.load.image('grass', 'assets/grass.png'); 34 | game.load.image('tile', 'assets/tile.png'); 35 | game.load.image('pipe1', 'assets/pipe1.gif'); 36 | game.load.image('pipe2', 'assets/pipe2.gif'); 37 | game.load.image('castle', 'assets/castle.gif'); 38 | game.load.image('ground', 'assets/ground.png'); 39 | }, 40 | create : function () { 41 | this.state.start("GameState") 42 | } 43 | }; 44 | GameState = { 45 | init: function() { 46 | createGame(); 47 | }, 48 | update: function() { 49 | updateState(); 50 | } 51 | }; 52 | 53 | function createGame() { 54 | 55 | platforms_array = []; 56 | moves = []; 57 | profit = []; 58 | 59 | game.world.setBounds(0,0,game_length,game_height); 60 | game.physics.startSystem(Phaser.Physics.ARCADE); 61 | 62 | ground_height = game.height - 2*asset_height; 63 | clouds = game.add.group(); 64 | change = 15; 65 | for (var i = 70; i < game_length; i+= 240) { 66 | clouds.create(i, change + game.height / 6, 'cloud'); 67 | change *= -1; 68 | } 69 | 70 | grass = game.add.group(); 71 | for (var i = 130; i < game_length; i+= 290) { 72 | grass.create(i, ground_height - steps, 'grass'); 73 | } 74 | 75 | ground = game.add.tileSprite(0,ground_height, game_length, game.height, 'ground'); 76 | game.physics.arcade.enable(ground); 77 | ground.body.immovable = true; 78 | 79 | coins = game.add.group(); 80 | coins.enableBody = true; 81 | 82 | goombas = game.add.group(); 83 | goombas.enableBody = true; 84 | 85 | flag = game.add.sprite(1500, ground_height-168, 'flag'); 86 | flag.animations.add('celebrate'); 87 | 88 | game.add.sprite(300, ground_height-64, 'pipe2'); 89 | game.add.sprite(560, ground_height-132, 'castle').scale.setTo(0.75,0.75); 90 | game.add.sprite(900, ground_height-128, 'pipe1'); 91 | game.add.sprite(1200, ground_height-80, 'pipe2').scale.setTo(1.25,1.25); 92 | 93 | platforms = game.add.group(); 94 | platforms.enableBody = true; 95 | for (i = 0; i < 5; i++) { 96 | platforms_array.push([i * 300 + 60]); 97 | var cnt1=0, cnt2=0; 98 | for(j=0;j<8;j++) { 99 | var pos = i * 300 + j*asset_height + 100; 100 | var platform = platforms.create(pos, ground_height - 60, 'tile'); 101 | platform.body.immovable = true; 102 | 103 | if(j===2 || j===7){ 104 | if(Math.random()>0.5) { 105 | var goomba = goombas.create(pos, ground_height - asset_height - 60, 'enemy'); 106 | goomba.animations.add('walk', [0, 1]); 107 | goomba.animations.play('walk', 2, true); 108 | } 109 | if(Math.random()>0.5) { 110 | goomba = goombas.create(pos, ground_height - asset_height, 'enemy'); 111 | goomba.animations.add('walk', [0, 1]); 112 | goomba.animations.play('walk', 2, true); 113 | } 114 | } else{ 115 | if(Math.random()>0.5){ 116 | var coin = coins.create(pos, ground_height - asset_height - 60, 'coin'); 117 | coin.animations.add('spin', [0,0,1,2]); 118 | coin.animations.play('spin', 3, true); 119 | cnt1++; 120 | } 121 | if(Math.random()>0.5){ 122 | var coin = coins.create(pos, ground_height - asset_height, 'coin'); 123 | coin.animations.add('spin', [0,0,1,2]); 124 | coin.animations.play('spin', 3, true); 125 | cnt2++; 126 | } 127 | } 128 | } 129 | profit.push([cnt1, cnt2]); 130 | } 131 | 132 | player = game.add.sprite(16, game.height - 72, 'mario'); 133 | game.physics.arcade.enable(player); 134 | player.body.gravity.y = 370; 135 | player.body.collideWorldBounds = true; 136 | player.animations.add('walkRight', [1, 2, 3], 10); 137 | player.goesRight = true; 138 | player.body.enable = false; 139 | 140 | temptext.innerText = text + getString() + text2; 141 | } 142 | 143 | function getString(){ 144 | ret = ''; 145 | tmp = []; 146 | for(i=0;i<5;i++) 147 | ret = ret + '['+String(profit[i][0])+','+String(profit[i][1])+'] '; 148 | ret = '[ '+ret+']\n'; 149 | return ret; 150 | } 151 | 152 | function updateState() { 153 | game.physics.arcade.collide(player, ground, groundOverlap); 154 | game.physics.arcade.collide(player, platforms); 155 | game.physics.arcade.collide(goombas, ground); 156 | game.physics.arcade.overlap(player, goombas, goombaOverlap); 157 | game.physics.arcade.overlap(player, coins, coinOverlap); 158 | game.camera.follow(player, Phaser.Camera.FOLLOW_TOPDOWN); 159 | 160 | if (player.body.enable) { 161 | 162 | player.body.velocity.x = move_step; 163 | player.play('walkRight'); 164 | if (player.x+steps >= platforms_array[pos]){ 165 | if( moves[pos] === "1" && onGround) { 166 | onGround = false; 167 | player.body.velocity.y = -fly_step; 168 | player.animations.stop(); 169 | } 170 | pos++; 171 | } 172 | 173 | if (player.body.velocity.y != 0) { 174 | if (player.goesRight) player.frame = 5; 175 | else player.frame = 12; 176 | } 177 | 178 | if(player.x >= 1490 && player.y===ground_height-player.height) { 179 | player.body.enable = false; 180 | flag.animations.play('celebrate', 5); 181 | } 182 | } 183 | } 184 | 185 | function groundOverlap() { 186 | onGround = true; 187 | } 188 | 189 | function coinOverlap(player, coin) { 190 | coin.kill(); 191 | } 192 | 193 | function goombaOverlap(player, goomba) { 194 | goomba.animations.stop(); 195 | goomba.frame = 2; 196 | goomba.body.enable = false; 197 | player.body.velocity.y = -fly_step/2; 198 | game.time.events.add(Phaser.Timer.SECOND, function() { 199 | goomba.kill(); 200 | }); 201 | } 202 | 203 | var refresh = document.getElementById('generate-graph'); 204 | refresh.onclick = function () { 205 | game.state.start("GameState"); 206 | }; 207 | text = 'You\'ll receive a 2D array as input. Each column stores rewards on higher and lower platform. ' + 208 | 'You have to return an array stating 1 if you want to jump to higher platform, 0 otherwise. However, ' + 209 | 'after selecting 1 you have to select 0 the next time. Can you solve it ?\n'; 210 | text2 = 'Click on solve to get solution'; 211 | var temptext = document.getElementById('temptext'); 212 | var solve = document.getElementById('solve'); 213 | 214 | solve.onclick = function () { 215 | 216 | ans1 = profit[0][0]; 217 | ans2 = profit[0][1]; 218 | tmp = []; 219 | ans = ''; 220 | for(i=1;i<5;i++){ 221 | console.log(ans1,ans2); 222 | tans1 = ans2+profit[i][0]; 223 | if(ans1>ans2) 224 | tmp.push(1); 225 | else 226 | tmp.push(0); 227 | tans2 = profit[i][1]+Math.max(ans1,ans2); 228 | ans1 = tans1; 229 | ans2 = tans2; 230 | } 231 | prev = -1; 232 | if(ans1>ans2) 233 | prev = 1; 234 | else 235 | prev = 0; 236 | 237 | console.log(ans1,ans2,tmp); 238 | tpos = 3; 239 | while(tpos>=0){ 240 | ans = String(prev)+' '+ans; 241 | if(prev===1){ 242 | prev = 0; 243 | } else{ 244 | prev = tmp[tpos]; 245 | } 246 | tpos--; 247 | } 248 | if(prev===1) 249 | ans = '1 '+ans; 250 | else 251 | ans = '0 '+ans; 252 | temptext.innerText = temptext.innerText + '\n' + ans; 253 | moves = ans.split(' '); 254 | pos = 0; 255 | console.log(moves); 256 | player.body.enable = true; 257 | }; 258 | 259 | 260 | screen_width = window.document.getElementById("mynetwork").innerWidth; 261 | game_length = 1550; 262 | game_height = window.document.getElementById("mynetwork").innerHeight; 263 | game = new Phaser.Game(320, 240, Phaser.AUTO, 'mynetwork'); 264 | game.state.add("BootState",BootState); 265 | game.state.add("PreloadState",PreloadState); 266 | game.state.add("GameState",GameState); 267 | game.state.start("BootState"); 268 | }; 269 | -------------------------------------------------------------------------------- /17. Mario_Game/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 37 |
38 |
39 |
40 | 49 | You'll receive a 2D array as input. Each column stores 50 | rewards on higher and lower platform. You have to return an 51 | array stating 1 if you want to jump to higher platform, 0 52 | otherwise. However, after selecting 1 you have to select 0 53 | the next time. Can you solve it ? 54 | 55 |
56 |
57 | 58 |
59 |
60 | 63 |
64 | 67 |
68 | 69 | 70 | -------------------------------------------------------------------------------- /17. Mario_Game/index.php: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /17. Mario_Game/readme.md: -------------------------------------------------------------------------------- 1 | ## Mario 2 | 3 | 4 | 5 | 6 | 7 | https://user-images.githubusercontent.com/56497318/127527665-54ae3ff2-7c0f-4595-bf49-3e628765f077.mp4 8 | 9 | 10 | 11 | 12 | ### Description 13 | Help Mario to collect maximum coins. 14 | 15 | ### Skills nurtured: 16 | - Graph. 17 | - Used Dynamic Programming & Greedy Approach to get maximum coins at each level. 18 | 19 | ### Tech. Stack: 20 | HTML, CSS, JS, CANVAS, PHASER 21 | -------------------------------------------------------------------------------- /17. Mario_Game/style.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | height: 100%; 4 | } 5 | 6 | #mynetwork { 7 | width: 50%; 8 | height: 100%; 9 | border: 1px solid lightgray; 10 | } 11 | 12 | #container2 { 13 | width: 50%; 14 | height: 100%; 15 | border: 1px solid lightgray; 16 | display: flex; 17 | flex-wrap: wrap; 18 | align-content: center; 19 | } 20 | 21 | #container{ 22 | width: 100%; 23 | height: 70%; 24 | background-color: white; 25 | display: flex; 26 | margin: 0 auto; 27 | } 28 | 29 | #generate-graph{ 30 | margin:auto; 31 | display:block; 32 | } 33 | 34 | 35 | #solve{ 36 | margin:auto; 37 | display:block; 38 | } -------------------------------------------------------------------------------- /2. Snake Game(OOPs)/Assets/apple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/2. Snake Game(OOPs)/Assets/apple.png -------------------------------------------------------------------------------- /2. Snake Game(OOPs)/Assets/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/2. Snake Game(OOPs)/Assets/bg.jpg -------------------------------------------------------------------------------- /2. Snake Game(OOPs)/Assets/trophy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/2. Snake Game(OOPs)/Assets/trophy.png -------------------------------------------------------------------------------- /2. Snake Game(OOPs)/Notes/1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/2. Snake Game(OOPs)/Notes/1.jpeg -------------------------------------------------------------------------------- /2. Snake Game(OOPs)/Notes/2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/2. Snake Game(OOPs)/Notes/2.jpeg -------------------------------------------------------------------------------- /2. Snake Game(OOPs)/Notes/Snake Game.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/2. Snake Game(OOPs)/Notes/Snake Game.pdf -------------------------------------------------------------------------------- /2. Snake Game(OOPs)/Readme.md: -------------------------------------------------------------------------------- 1 | ## Snake Game 2 | 3 | 4 | 5 | https://user-images.githubusercontent.com/56497318/127527203-19455d98-c9e3-4766-991f-b1aa8e97973c.mp4 6 | 7 | 8 | 9 | ### Description 10 | Help Snake to increase its size and score by eating apples.Game ends when Snake hits wall. 11 | 12 | ### Skills nurtured: 13 | - Canvas API for UI design 14 | - Arrays Data Structure & OOPs to build Snake and game functions. 15 | - Maths logics to build snake, randomly generate apple, increase score etc. 16 | 17 | ### Tech. Stack: 18 | HTML, CSS, JS, CANVAS 19 | -------------------------------------------------------------------------------- /2. Snake Game(OOPs)/Snake.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/2. Snake Game(OOPs)/Snake.PNG -------------------------------------------------------------------------------- /2. Snake Game(OOPs)/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Snake Game 7 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /2. Snake Game(OOPs)/snake.js: -------------------------------------------------------------------------------- 1 | function init(){ 2 | canvas = document.getElementById('mycanvas'); 3 | W = H = canvas.width = canvas.height = 1000; 4 | pen = canvas.getContext('2d'); 5 | cell_size = 66; 6 | food = getrandomfood(); 7 | game_over = false; 8 | score = 0; 9 | 10 | //Create a Image Object for food 11 | food_img = new Image(); 12 | food_img.src = "Assets/apple.png"; 13 | 14 | //Create a Image Object for Score 15 | trophy = new Image(); 16 | trophy.src = "Assets/trophy.png"; 17 | 18 | snake = { 19 | init_len: 4, 20 | color: "blue", 21 | cells: [], 22 | direction: "right", 23 | 24 | createSnake: function(){ 25 | for (var i = this.init_len; i>0; i--){ 26 | this.cells.push({x:i, y:0}); 27 | } 28 | }, 29 | 30 | drawSnake: function(){ 31 | for(var i=0; i lastX || this.cells[0].y > lastY || 77 | this.cells[0].x < 0 || this.cells[0].y < 0){ 78 | game_over = true; 79 | } 80 | } 81 | }; 82 | 83 | snake.createSnake(); 84 | //Add a Event Listener on the Document Object 85 | function keyPressed(e){ 86 | if (e.key == 'ArrowRight'){ 87 | snake.direction = 'right'; 88 | } 89 | else if (e.key == 'ArrowLeft'){ 90 | snake.direction = 'left'; 91 | } 92 | else if (e.key == 'ArrowDown'){ 93 | snake.direction = 'down'; 94 | } 95 | else{ 96 | snake.direction = 'up'; 97 | } 98 | } 99 | 100 | document.addEventListener('keydown', keyPressed); 101 | } 102 | 103 | function draw(){ 104 | //erase the old frame 105 | pen.clearRect(0,0,W,H); 106 | snake.drawSnake(); 107 | 108 | // To display the food object/image 109 | pen.fillStyle = food.color; 110 | pen.drawImage(food_img, food.x*cell_size, food.y*cell_size, cell_size, cell_size); 111 | 112 | // To display the Score 113 | pen.drawImage(trophy, 18, 20, cell_size, cell_size); 114 | pen.fillStyle ="black"; 115 | pen.font = "25px Roboto"; 116 | pen.fillText(score, 45, 50); 117 | } 118 | 119 | function update(){ 120 | snake.updateSnake(); 121 | } 122 | 123 | function getrandomfood(){ 124 | var foodX = Math.round( Math.random()*(W-cell_size) / cell_size); 125 | var foodY = Math.round( Math.random()*(H-cell_size) / cell_size); 126 | 127 | var food = { 128 | x: foodX, 129 | y: foodY, 130 | color: "red", 131 | } 132 | 133 | return food; 134 | } 135 | 136 | function gameloop(){ 137 | if (game_over == true){ 138 | clearInterval(f); 139 | alert("Game Over"); 140 | return; 141 | } 142 | draw(); 143 | update(); 144 | } 145 | 146 | init(); 147 | var f = setInterval(gameloop, 100); -------------------------------------------------------------------------------- /3. Covid Fighter Game(Arrays)/Assets/back.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/3. Covid Fighter Game(Arrays)/Assets/back.jpeg -------------------------------------------------------------------------------- /3. Covid Fighter Game(Arrays)/Assets/gem.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/3. Covid Fighter Game(Arrays)/Assets/gem.png -------------------------------------------------------------------------------- /3. Covid Fighter Game(Arrays)/Assets/gem.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /3. Covid Fighter Game(Arrays)/Assets/gemm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/3. Covid Fighter Game(Arrays)/Assets/gemm.png -------------------------------------------------------------------------------- /3. Covid Fighter Game(Arrays)/Assets/superhero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/3. Covid Fighter Game(Arrays)/Assets/superhero.png -------------------------------------------------------------------------------- /3. Covid Fighter Game(Arrays)/Assets/v1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/3. Covid Fighter Game(Arrays)/Assets/v1.png -------------------------------------------------------------------------------- /3. Covid Fighter Game(Arrays)/Assets/v2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/3. Covid Fighter Game(Arrays)/Assets/v2.png -------------------------------------------------------------------------------- /3. Covid Fighter Game(Arrays)/Readme.md: -------------------------------------------------------------------------------- 1 | ## Covid Fighter 2 | 3 | 4 | 5 | 6 | https://user-images.githubusercontent.com/56497318/127527373-b8613676-1f56-41f2-9015-4ed3a9a9d236.mp4 7 | 8 | 9 | ### Description 10 | - Help Hero dodge 11 | - corona viruses and aquire diamond. 12 | 13 | ### Skills nurtured: 14 | - Canvas API for UI design. 15 | - Maths logics to make player and enemy move with variant speed. 16 | 17 | ### Tech. Stack: 18 | HTML, CSS, JS, CANVAS 19 | -------------------------------------------------------------------------------- /3. Covid Fighter Game(Arrays)/fighter.js: -------------------------------------------------------------------------------- 1 | function load_img(){ 2 | // Enemy Image 3 | enemy_img = new Image(); 4 | enemy_img.src = "Assets/v2.png"; 5 | 6 | // Player Image 7 | player_img = new Image(); 8 | player_img.src = "Assets/superhero.png"; 9 | 10 | // Gem Image 11 | gem_img = new Image(); 12 | gem_img.src = "Assets/gem.png"; 13 | 14 | } 15 | 16 | function init(){ 17 | canvas = document.getElementById("mycanvas"); 18 | W = canvas.width = 700; 19 | H = canvas.height = 400; 20 | 21 | // To draw on canvas 22 | pen = canvas.getContext("2d"); 23 | game_over = false; 24 | 25 | e1 = { 26 | x : 150, 27 | y : 50, 28 | w : 60, 29 | h : 60, 30 | speed : 20, 31 | }; 32 | e2 = { 33 | x : 300, 34 | y : 150, 35 | w : 60, 36 | h : 60, 37 | speed : 30, 38 | }; 39 | e3 = { 40 | x : 450, 41 | y : 20, 42 | w : 60, 43 | h : 60, 44 | speed : 40, 45 | }; 46 | 47 | enemy = [e1,e2,e3]; 48 | 49 | player = { 50 | x : 20, 51 | y : H/2, 52 | w : 50, 53 | h : 50, 54 | speed : 20, 55 | moving : false, 56 | health : 100, 57 | }; 58 | 59 | gem = { 60 | x : W-70, 61 | y : H/2, 62 | w : 60, 63 | h : 60, 64 | }; 65 | 66 | // When we click the mouse 67 | canvas.addEventListener("mousedown", function(){ 68 | player.moving = true; 69 | }) 70 | 71 | // When we release our click from the mouse 72 | canvas.addEventListener("mouseup", function(){ 73 | player.moving = false; 74 | }) 75 | } 76 | 77 | function isOverlap(rect1,rect2){ 78 | if (rect1.x < rect2.x + rect2.w && 79 | rect1.x + rect1.w > rect2.x && 80 | rect1.y < rect2.y + rect2.h && 81 | rect1.y + rect1.h > rect2.y) { 82 | return true 83 | } 84 | 85 | return false; 86 | 87 | } 88 | 89 | function draw(){ 90 | // To erase previous frame 91 | pen.clearRect(0, 0, W, H); 92 | 93 | // To display all enemies 94 | for (var i = 0; i < enemy.length; i++){ 95 | pen.drawImage(enemy_img, enemy[i].x, enemy[i].y, enemy[i].w, enemy[i].h); 96 | } 97 | 98 | //draw the player 99 | pen.drawImage(player_img, player.x, player.y, player.w, player.h); 100 | 101 | //draw the gem 102 | pen.drawImage(gem_img, gem.x, gem.y, gem.w, gem.h); 103 | 104 | // Display the Score 105 | for(let i=0;i= (H-enemy[i].h) ) || ( enemy[i].y < 0 )){ 147 | enemy[i].speed *= -1; 148 | } 149 | } 150 | } 151 | 152 | function gameloop(){ 153 | if(game_over == true){ 154 | clearInterval(f); 155 | } 156 | draw(); 157 | update(); 158 | } 159 | 160 | load_img(); 161 | init(); 162 | 163 | var f = setInterval(gameloop, 100); -------------------------------------------------------------------------------- /3. Covid Fighter Game(Arrays)/fighter_img.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/3. Covid Fighter Game(Arrays)/fighter_img.PNG -------------------------------------------------------------------------------- /3. Covid Fighter Game(Arrays)/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Covid Fighter 7 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /4. Spin & Win (Arrays and Maths)/Assets/back.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/4. Spin & Win (Arrays and Maths)/Assets/back.jpg -------------------------------------------------------------------------------- /4. Spin & Win (Arrays and Maths)/Assets/pin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/4. Spin & Win (Arrays and Maths)/Assets/pin.png -------------------------------------------------------------------------------- /4. Spin & Win (Arrays and Maths)/Assets/stand.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/4. Spin & Win (Arrays and Maths)/Assets/stand.png -------------------------------------------------------------------------------- /4. Spin & Win (Arrays and Maths)/Assets/wheel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/4. Spin & Win (Arrays and Maths)/Assets/wheel.png -------------------------------------------------------------------------------- /4. Spin & Win (Arrays and Maths)/JS/game.js: -------------------------------------------------------------------------------- 1 | //Hello World of Phaser = Basic Game = Single Scene in Spin & Win Game 2 | // How to create the basic skeleton for the game -> Game Loop 3 | 4 | let prizes_config = { 5 | count:12, 6 | prize_names : ["3000 Credits","35% Off","Nothing","70% OFF","Swagpack","100% OFF","Netflix","50% Off","Amazon Voucher","2 Extra Spin", "CB Tshirt","CB Book"] 7 | } 8 | 9 | let config = { 10 | type: Phaser.CANVAS, 11 | width: 800, 12 | height: 600, 13 | 14 | scene: { 15 | preload: preload, 16 | create: create, 17 | update: update, 18 | } 19 | }; 20 | 21 | let game = new Phaser.Game(config); 22 | 23 | function preload(){ 24 | console.log("Preload"); 25 | //load object, load some images 26 | this.load.image('background','../Assets/back.jpg'); 27 | console.log(this); 28 | this.load.image('wheel','../Assets/wheel.png'); 29 | this.load.image('pin','../Assets/pin.png'); 30 | this.load.image('stand','../Assets/stand.png'); 31 | } 32 | 33 | function create(){ 34 | console.log("Create"); 35 | //create the background image 36 | let W = game.config.width; 37 | let H = game.config.height; 38 | 39 | let background = this.add.sprite(0,0,'background'); 40 | background.setPosition(W/2,H/2); 41 | background.setScale(0.20); 42 | 43 | //lets create the stand 44 | let stand = this.add.sprite(W/2,H/2 + 250,'stand'); 45 | stand.setScale(0.25); 46 | 47 | //lets create a pin 48 | let pin = this.add.sprite(W/2,H/2-250,"pin"); 49 | pin.setScale(0.25); 50 | pin.depth = 1; // Jitne zada value utni zada dur rahega obj. 0 being max and 0 being min 51 | 52 | //let create wheel 53 | this.wheel = this.add.sprite(W/2,H/2,"wheel"); 54 | this.wheel.setScale(0.25); 55 | 56 | //event listener for mouse click 57 | this.input.on("pointerdown", spinwheel, this); 58 | 59 | //lets create text object 60 | font_style = { 61 | font: "bold 25px Arial", 62 | align: "center", 63 | color: "red", 64 | } 65 | this.game_text = this.add.text(10,10,"Welcome to Spin And Wheel", font_style); 66 | 67 | 68 | } 69 | 70 | //Game Loop 71 | function update(){ 72 | console.log("Updating Continously"); 73 | } 74 | 75 | function spinwheel(){ 76 | 77 | console.log("You clicked the mouse"); 78 | console.log("Start spinning"); 79 | //this.game_text.setText("You clicked the mouse!"); 80 | 81 | let rounds = Phaser.Math.Between(2,4); 82 | let degrees = Phaser.Math.Between(0,11)*30; // Take evry prize ke beech me ruke 83 | 84 | let total_angle = rounds*360 + degrees; 85 | console.log(total_angle); 86 | 87 | let idx = prizes_config.count - 1 - Math.floor(degrees/(360/prizes_config.count)); 88 | 89 | tween = this.tweens.add({ 90 | targets: this.wheel, 91 | angle: total_angle, 92 | ease: "Cubic.easeOut", 93 | duration: 6000, 94 | callbackScope:this, 95 | onComplete:function(){ 96 | this.game_text.setText("You Won: " + prizes_config.prize_names[idx]); 97 | }, 98 | }); 99 | } -------------------------------------------------------------------------------- /4. Spin & Win (Arrays and Maths)/Notes/Spin and Win.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/4. Spin & Win (Arrays and Maths)/Notes/Spin and Win.pdf -------------------------------------------------------------------------------- /4. Spin & Win (Arrays and Maths)/README.md: -------------------------------------------------------------------------------- 1 | 2 | ### Spin & Win: 3 | https://user-images.githubusercontent.com/56497318/127522189-e7cf005f-f309-45a3-8f7a-3d876a3866a1.mp4 4 | 5 |

In this game we implemented arrays ds and used some mathematical concepts.

6 | To build this game we used the 'Phaser' Framework.

7 | Logics and Concepts implemented in this game:

8 |
    9 |
  • GameLoop in Phaser
  • 10 |
  • Adding Images
  • 11 |
  • Animations
  • 12 |
  • Arrays
  • 13 |
  • Mathematical concepts
  • 14 |
  • Adding Music
  • 15 |
  • OOPs
  • 16 |
17 | 18 | 19 | -------------------------------------------------------------------------------- /4. Spin & Win (Arrays and Maths)/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Spin and Win 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /4. Spin & Win (Arrays and Maths)/saw.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/4. Spin & Win (Arrays and Maths)/saw.PNG -------------------------------------------------------------------------------- /5. Interactive Mario Platformer/Assets/apple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/5. Interactive Mario Platformer/Assets/apple.png -------------------------------------------------------------------------------- /5. Interactive Mario Platformer/Assets/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/5. Interactive Mario Platformer/Assets/background.png -------------------------------------------------------------------------------- /5. Interactive Mario Platformer/Assets/bottomground.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/5. Interactive Mario Platformer/Assets/bottomground.png -------------------------------------------------------------------------------- /5. Interactive Mario Platformer/Assets/dude.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/5. Interactive Mario Platformer/Assets/dude.png -------------------------------------------------------------------------------- /5. Interactive Mario Platformer/Assets/grass.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/5. Interactive Mario Platformer/Assets/grass.png -------------------------------------------------------------------------------- /5. Interactive Mario Platformer/Assets/ray.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/5. Interactive Mario Platformer/Assets/ray.png -------------------------------------------------------------------------------- /5. Interactive Mario Platformer/Assets/topground.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/5. Interactive Mario Platformer/Assets/topground.png -------------------------------------------------------------------------------- /5. Interactive Mario Platformer/Assets/tree.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/5. Interactive Mario Platformer/Assets/tree.png -------------------------------------------------------------------------------- /5. Interactive Mario Platformer/JS/game.js: -------------------------------------------------------------------------------- 1 | let config = { 2 | type: Phaser.AUTO, 3 | 4 | scale: { 5 | mode: Phaser.Scale.FIT, 6 | width: 800, 7 | height: 600 8 | }, 9 | 10 | backgroundColor: 0xffffcc, 11 | 12 | scene: { 13 | preload: preload, 14 | create: create, 15 | update: update 16 | }, 17 | 18 | physics: { 19 | default: "arcade", 20 | arcade: { 21 | gravity: { 22 | y: 1000, 23 | }, 24 | debug: false, 25 | } 26 | } 27 | }; 28 | 29 | // Player skills 30 | let player_config = { 31 | player_speed: 300, 32 | player_jumpspeed: -650, 33 | } 34 | 35 | let game = new Phaser.Game(config); 36 | 37 | function preload(){ 38 | this.load.image("ground", "../Assets/grass.png"); 39 | this.load.image("sky", "../Assets/background.png"); 40 | this.load.image("apple", "../Assets/apple.png"); 41 | this.load.image("ray", "../Assets/ray.png"); 42 | 43 | this.load.spritesheet("dude", "../Assets/dude.png", {frameWidth: 32, frameHeight: 48}); 44 | } 45 | 46 | function create(){ 47 | W = game.config.width; 48 | H = game.config.height; 49 | 50 | //To create a background 51 | let background = this.add.sprite(0,0,'sky'); 52 | background.setOrigin(0,0); 53 | background.displayWidth = W; // To update Width of background 54 | background.displayHeight = H; // To update Height of background 55 | background.depth = -2; 56 | 57 | //add tilesprites 58 | let ground = this.add.tileSprite(0, H-128, W, 128, "ground"); 59 | ground.setOrigin(0,0); 60 | 61 | // Create rays on top of the Background 62 | let rays = []; 63 | 64 | for (let i = -10; i <= 10; i++){ 65 | let ray = this.add.sprite(W/2, H-100, "ray"); 66 | ray.displayHeight = 1.2*H; 67 | ray.setOrigin(0.5, 1); 68 | ray.alpha = 0.2; 69 | ray.angle = i*20; 70 | ray.depth = -1; 71 | rays.push(ray); 72 | } 73 | 74 | // Sunlight Effect Tween 75 | this.tweens.add({ 76 | targets: rays, 77 | props: { 78 | angle: { 79 | value : "+= 200", 80 | }, 81 | }, 82 | duration: 8000, 83 | repeat: -1, 84 | }); 85 | 86 | //Add the fruits 87 | let fruits = this.physics.add.group({ 88 | key: "apple", 89 | repeat: 8, 90 | setScale: {x: 0.2, y: 0.2}, 91 | setXY: {x: 10, y: 0, stepX: 100}, 92 | }) 93 | 94 | // Add our player with Physics concepts 95 | this.player = this.physics.add.sprite(100, 100, "dude", 4); 96 | this.physics.add.existing(ground, true); 97 | this.player.setCollideWorldBounds(true); 98 | 99 | // Add the platforms and include "ground" in platforms container 100 | let platforms = this.physics.add.staticGroup(); 101 | platforms.create(500, 400, "ground").setScale(2, 0.5).refreshBody(); 102 | platforms.create(700, 200, "ground").setScale(2, 0.5).refreshBody(); 103 | platforms.create(150, 200, "ground").setScale(2, 0.5).refreshBody(); 104 | platforms.add(ground); 105 | 106 | // Handling all Collisions 107 | this.physics.add.collider(platforms, fruits); 108 | this.physics.add.collider(platforms, this.player); 109 | 110 | // Adding Bouncing Effect on PLayer and Apples 111 | this.player.setBounce(0.2); 112 | 113 | fruits.children.iterate(function(f){ 114 | f.setBounce(Phaser.Math.FloatBetween(0.4, 0.7)); 115 | }) 116 | 117 | // Player Animation and Player Movements 118 | this.anims.create({ 119 | key: "left", 120 | frames: this.anims.generateFrameNumbers("dude", {start: 0, end: 3}), 121 | frameRate: 10, 122 | repeat: -1, 123 | }); 124 | this.anims.create({ 125 | key: "center", 126 | frames: this.anims.generateFrameNumbers("dude", {start: 4, end: 4}), 127 | frameRate: 10, 128 | repeat: -1, 129 | }); 130 | this.anims.create({ 131 | key: "right", 132 | frames: this.anims.generateFrameNumbers("dude", {start: 5, end: 8}), 133 | frameRate: 10, 134 | repeat: -1, 135 | }); 136 | 137 | // cursor obj will store which key is pressed, 138 | // and then in update function we'll check which key is pressed, 139 | // and the move in the resp. direction 140 | this.cursor = this.input.keyboard.createCursorKeys(); 141 | 142 | // OVERLAP: When player eats/overlaps the fruits 143 | this.physics.add.overlap(this.player, fruits, eatFruit, null, this); 144 | 145 | // Create Camera: To just focus a part on our frame. And that part moves with our player 146 | this.cameras.main.setBounds(0, 0, W, H); 147 | this.physics.world.setBounds(0, 0, W, H); 148 | 149 | this.cameras.main.startFollow(this.player, true, true); 150 | this.cameras.main.setZoom(1.5); 151 | } 152 | 153 | function update(){ 154 | // When pressed left, righ or up key do player movement in resp. directions 155 | if (this.cursor.left.isDown){ 156 | this.player.setVelocityX(-player_config.player_speed); 157 | this.player.anims.play("left", true); 158 | } 159 | else if (this.cursor.right.isDown){ 160 | this.player.setVelocityX(player_config.player_speed); 161 | this.player.anims.play("right", true); 162 | } 163 | else{ 164 | this.player.setVelocityX(0); 165 | this.player.anims.play("center", true); 166 | } 167 | 168 | if (this.cursor.up.isDown && this.player.body.touching.down){ 169 | this.player.setVelocityY(player_config.player_jumpspeed); 170 | } 171 | } 172 | 173 | function eatFruit(player, fruit){ 174 | fruit.disableBody(true, true); 175 | } -------------------------------------------------------------------------------- /5. Interactive Mario Platformer/Notes/Interactive Mario.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/5. Interactive Mario Platformer/Notes/Interactive Mario.pdf -------------------------------------------------------------------------------- /5. Interactive Mario Platformer/README.md: -------------------------------------------------------------------------------- 1 | ### Preview: 2 | 3 | 4 | https://user-images.githubusercontent.com/56497318/127526916-9572bdaf-db36-44c0-a616-88414770c0d6.mp4 5 | 6 |

In this game we implemented arrays ds.

7 | To build this game we used the 'Phaser' Framework.

8 | Logics and Concepts implemented in this game:

9 |
    10 |
  • Physics Concepts
  • 11 |
      12 |
    1. Jump
    2. 13 |
    3. Bounce
    4. 14 |
    5. Gravity
    6. 15 |
    7. Speed
    8. 16 |
    17 |
  • How to use Keyboard for activity
  • 18 |
  • Animations
  • 19 |
  • Tweens(For moving sunrays effect in background using Arrays ds)
  • 20 |
  • Camera Control
  • 21 |
  • Dynamic and Static group logic
  • 22 |
  • Collision and Overlap logic
  • 23 |
24 | -------------------------------------------------------------------------------- /5. Interactive Mario Platformer/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Interactive Mario Platformer 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /5. Interactive Mario Platformer/interactive_basicMario.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/5. Interactive Mario Platformer/interactive_basicMario.PNG -------------------------------------------------------------------------------- /6. Sudoku (Backtracking)/Notes/6.Sudoku Backtracking.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/6. Sudoku (Backtracking)/Notes/6.Sudoku Backtracking.pdf -------------------------------------------------------------------------------- /6. Sudoku (Backtracking)/README.md: -------------------------------------------------------------------------------- 1 | ### Preview: 2 |

In this Sudoku Web Application we implemented Backtracking.

3 | To build this game we used the JavaScript and Bootstrap.

4 | Logics and Concepts implemented in this game:

5 |
    6 |
  • Backtracking
  • 7 |
  • Mathematics
  • 8 |
  • Buttons
  • 9 |
  • Dynamic and Static logic
  • 10 |
11 | 12 | ###### This is how the game looks. 13 | Trulli


14 | -------------------------------------------------------------------------------- /6. Sudoku (Backtracking)/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 21 |

22 |
23 | 24 |
25 | 26 |
27 | 28 |
29 | 30 |
31 | 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 |
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 |
95 | 96 |
97 | 98 |
99 | 100 |
101 | 102 |
103 | 104 |
105 |
106 | 107 |
108 | 109 |
110 | 111 |
112 |
113 | 114 |
115 | 116 |
117 | 118 |
119 |
120 | 121 |
122 | 123 |
124 | 125 |
126 | 127 |
128 | 129 |
130 | 131 |
132 | 133 |
134 | 135 |
136 | 137 |
138 |
139 | 140 |
141 | 142 |
143 | 144 |
145 |
146 | 147 |
148 | 149 |
150 | 151 |
152 |
153 | 154 |
155 | 156 |
157 | 158 |
159 | 160 |
161 | 162 |
163 | 164 |
165 |
166 | 167 |
168 | 169 |
170 |
171 | 172 |
173 | 174 |
175 | 176 |
177 |
178 | 179 |
180 | 181 |
182 | 183 |
184 |
185 | 186 |
187 | 188 |
189 | 190 |
191 | 192 |
193 | 194 |
195 | 196 |
197 | 198 |
199 | 200 |
201 | 202 |
203 |
204 | 205 |
206 | 207 |
208 | 209 |
210 |
211 | 212 |
213 | 214 |
215 | 216 |
217 |
218 | 219 |
220 | 221 |
222 | 223 |
224 | 225 |
226 | 227 |
228 | 229 |
230 | 231 |
232 | 233 |
234 | 235 |
236 |
237 | 238 |
239 | 240 |
241 | 242 |
243 |
244 | 245 |
246 | 247 |
248 | 249 |
250 |
251 | 252 |
253 | 254 |
255 | 256 |
257 | 258 |
259 | 260 |
261 | 262 |
263 | 264 |
265 | 266 |
267 | 268 |
269 |
270 | 271 |
272 | 273 |
274 | 275 |
276 |
277 | 278 |
279 | 280 |
281 | 282 |
283 |
284 | 285 |
286 | 287 |
288 | 289 |
290 | 291 |
292 | 293 |
294 | 295 |
296 | 297 |
298 | 299 |
300 | 301 |
302 |
303 | 304 |
305 | 306 |
307 | 308 |
309 |
310 | 311 |
312 | 313 |
314 | 315 |
316 |
317 | 318 |
319 | 320 | 321 |
322 |
323 |
324 |      326 | 327 |
328 | 329 | 330 | -------------------------------------------------------------------------------- /6. Sudoku (Backtracking)/s1.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/6. Sudoku (Backtracking)/s1.PNG -------------------------------------------------------------------------------- /6. Sudoku (Backtracking)/script.js: -------------------------------------------------------------------------------- 1 | var arr = [[], [], [], [], [], [], [], [], []] 2 | var temp = [[], [], [], [], [], [], [], [], []] 3 | 4 | for (var i = 0; i < 9; i++) { 5 | for (var j = 0; j < 9; j++) { 6 | arr[i][j] = document.getElementById(i * 9 + j); 7 | 8 | } 9 | } 10 | 11 | function initializeTemp(temp) { 12 | 13 | for (var i = 0; i < 9; i++) { 14 | for (var j = 0; j < 9; j++) { 15 | temp[i][j] = false; 16 | 17 | } 18 | } 19 | } 20 | 21 | 22 | function setTemp(board, temp) { 23 | 24 | for (var i = 0; i < 9; i++) { 25 | for (var j = 0; j < 9; j++) { 26 | if (board[i][j] != 0) { 27 | temp[i][j] = true; 28 | } 29 | 30 | } 31 | } 32 | } 33 | 34 | 35 | function setColor(temp) { 36 | 37 | for (var i = 0; i < 9; i++) { 38 | for (var j = 0; j < 9; j++) { 39 | if (temp[i][j] == true) { 40 | arr[i][j].style.color = "#DC3545"; 41 | } 42 | 43 | } 44 | } 45 | } 46 | 47 | function resetColor() { 48 | 49 | for (var i = 0; i < 9; i++) { 50 | for (var j = 0; j < 9; j++) { 51 | 52 | arr[i][j].style.color = "green"; 53 | 54 | 55 | } 56 | } 57 | } 58 | 59 | var board = [[], [], [], [], [], [], [], [], []] 60 | 61 | 62 | let button = document.getElementById('generate-sudoku') 63 | let solve = document.getElementById('solve') 64 | 65 | console.log(arr) 66 | function changeBoard(board) { 67 | for (var i = 0; i < 9; i++) { 68 | for (var j = 0; j < 9; j++) { 69 | if (board[i][j] != 0) { 70 | 71 | arr[i][j].innerText = board[i][j] 72 | } 73 | 74 | else 75 | arr[i][j].innerText = '' 76 | } 77 | } 78 | } 79 | 80 | 81 | button.onclick = function () { 82 | var xhrRequest = new XMLHttpRequest() 83 | xhrRequest.onload = function () { 84 | var response = JSON.parse(xhrRequest.response) 85 | console.log(response) 86 | initializeTemp(temp) 87 | resetColor() 88 | 89 | board = response.board 90 | setTemp(board, temp) 91 | setColor(temp) 92 | changeBoard(board) 93 | } 94 | xhrRequest.open('get', 'https://sugoku.herokuapp.com/board?difficulty=easy') 95 | //we can change the difficulty of the puzzle the allowed values of difficulty are easy, medium, hard and random 96 | xhrRequest.send() 97 | } 98 | 99 | //to be completed by student 100 | function isSafe(board, sr, sc, val) { 101 | for (var i = 0; i < 9; i++){ 102 | if (board[i][sc] ==val || board[sr][i] == val){ 103 | return false; 104 | } 105 | } 106 | 107 | var r = sr - sr % 3; 108 | var c = sc - sc % 3; 109 | 110 | for (var cr = r; cr < r + 3; cr++) { 111 | for (var cc = c; cc < c + 3; cc++) { 112 | if (board[cr][cc] == val) { 113 | return false; 114 | } 115 | } 116 | } 117 | return true; 118 | 119 | } 120 | 121 | //to be completed by student 122 | function solveSudokuHelper(board, sr, sc) { 123 | console.log("1234") 124 | if (sr == 9){ 125 | changeBoard(board); 126 | return; 127 | } 128 | 129 | if (sc == 9){ 130 | solveSudokuHelper(board, sr+1, 0) 131 | return; 132 | } 133 | 134 | if (board[sr][sc] != 0){ 135 | solveSudokuHelper(board, sr, sc+1); 136 | return; 137 | } 138 | 139 | for (var i=1; i<=9; i++){ 140 | if (isSafe(board, sr, sc, i)){ 141 | board[sr][sc] = i; 142 | solveSudokuHelper(board, sr, sc+1); 143 | board[sr][sc] = 0; 144 | } 145 | } 146 | } 147 | 148 | function solveSudoku(board) { 149 | solveSudokuHelper(board, 0, 0) 150 | } 151 | 152 | solve.onclick = function () { 153 | solveSudoku(board) 154 | 155 | } 156 | 157 | 158 | 159 | -------------------------------------------------------------------------------- /6. Sudoku (Backtracking)/style.css: -------------------------------------------------------------------------------- 1 | #container{ 2 | height: auto; 3 | width: 540px; 4 | background-color: white; 5 | display: flex; 6 | flex-wrap: wrap; 7 | justify-content: space-evenly; 8 | align-content: space-evenly ; 9 | margin: 0 auto; 10 | } 11 | 12 | #generate-sudoku{ 13 | margin:auto; 14 | display:block;; 15 | } 16 | 17 | 18 | #solve{ 19 | margin:auto; 20 | display:block;; 21 | } 22 | 23 | #container div{ 24 | background-color: whitesmoke; 25 | height: 60px; 26 | width: 60px; 27 | box-sizing: border-box; 28 | font-family: sans-serif; 29 | text-align: center; 30 | vertical-align: middle; 31 | line-height: 60px; 32 | font-size: 30px; 33 | color: green; 34 | 35 | } 36 | 37 | #container div:hover{ 38 | background-color: lightskyblue; 39 | } 40 | 41 | .lsb{ 42 | border-left: black 2px solid; 43 | } 44 | 45 | .bsb{ 46 | border-bottom: black 2px solid; 47 | } 48 | 49 | .rsb{ 50 | border-right: black 2px solid; 51 | } 52 | 53 | .tsb{ 54 | border-top: black 2px solid; 55 | } 56 | 57 | 58 | .ldb{ 59 | border-left: black 0.6px dashed; 60 | } 61 | 62 | .bdb{ 63 | border-bottom: black 0.6px dashed; 64 | } 65 | 66 | .rdb{ 67 | border-right: black 0.6px dashed; 68 | } 69 | 70 | .tdb{ 71 | border-top: black 0.6px dashed; 72 | } -------------------------------------------------------------------------------- /6. Sudoku (Backtracking)/test.js: -------------------------------------------------------------------------------- 1 | //to be completed by student 2 | function isSafe(board, sr, sc, val) { 3 | for (var row = 0; row < 9; row++) { 4 | if (board[row][sc] == val) { 5 | return false; 6 | } 7 | } 8 | 9 | for (var col = 0; col < 9; col++) { 10 | if (board[sr][col] == val) { 11 | return false; 12 | } 13 | } 14 | 15 | var x = (sr/3)*3; 16 | var y = (sc/3)*3; 17 | 18 | for (var i=x; idist[mn][0]+edge[1]){ 35 | dist[edge[0]][0] = dist[mn][0]+edge[1]; 36 | dist[edge[0]][1] = mn; 37 | } 38 | } 39 | } 40 | 41 | return dist; 42 | } 43 | 44 | let src = 0; 45 | let V = 9; 46 | let E = [[0,1,4], [0,7,8], [1,7,11], [1,2,8], [7,8,7], [6,7,1], [2,8,2], 47 | [6,8,6], [5,6,2], [2,5,4], [2,3,7], [3,5,14], [3,4,9], [4,5,10]]; 48 | 49 | let graph = createGraph(V,E); 50 | let distances = djikstra(graph,V,0); 51 | console.log(distances); -------------------------------------------------------------------------------- /7. Travel Plan(Graph)/Graph.js: -------------------------------------------------------------------------------- 1 | function createGraph(V, E){ 2 | let adjacency_list = []; 3 | 4 | for (let i=0; i<=V; i++){ 5 | adjacency_list.push([]); 6 | } 7 | 8 | for (let i=0; i


3 | -------------------------------------------------------------------------------- /7. Travel Plan(Graph)/Practice/demoFile.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/7. Travel Plan(Graph)/Practice/demoFile.PNG -------------------------------------------------------------------------------- /7. Travel Plan(Graph)/Practice/practice.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 |

VIS.js

20 |
21 |
22 |
23 |
24 |
25 | 26 |
27 | 28 | -------------------------------------------------------------------------------- /7. Travel Plan(Graph)/Practice/script.js: -------------------------------------------------------------------------------- 1 | onload = function () { 2 | 3 | // create a network 4 | const container = document.getElementById('container'); 5 | const genNew = document.getElementById('generate-graph'); 6 | 7 | // initialise graph options 8 | const options = { 9 | edges: { 10 | labelHighlightBold: true, 11 | font: { 12 | size: 20 13 | } 14 | }, 15 | nodes: { 16 | font: '12px arial darkred', 17 | scaling: { 18 | label: true 19 | }, 20 | shape: 'icon', 21 | icon: { 22 | face: 'FontAwesome', 23 | code: '\uf015', 24 | size: 40, 25 | color: '#991133', 26 | } 27 | } 28 | }; 29 | 30 | // initialize your network! 31 | const network = new vis.Network(container); 32 | network.setOptions(options); 33 | 34 | function createData(){ 35 | const cities = ['Delhi', 'Mumbai', 'Gujarat', 'Goa', 'Kanpur', 'Jammu', 'Hyderabad', 'Bangalore', 'Gangtok', 'Meghalaya']; 36 | 37 | // Initialising number of nodes in graoh dynamically 38 | const V = Math.floor(Math.random() * cities.length) + 3; 39 | 40 | // Preparing node data for Vis.js 41 | let vertices = []; 42 | for(let i=0;i 2 | 3 | 4 | 5 | 6 | Travel Plan 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /7. Travel Plan(Graph)/plane.js: -------------------------------------------------------------------------------- 1 | let plane = 0; 2 | let p1=-1, p2=-1; 3 | for(let pos in data['edges']){ 4 | let edge = data['edges'][pos]; 5 | if(edge['type']===1){ 6 | let to = edge['to']-1; 7 | let from = edge['from']-1; 8 | let wght = parseInt(edge['label']); 9 | if(dist1[to][0]+wght+dist2[from][0] < mn_dist){ 10 | plane = wght; 11 | p1 = to; 12 | p2 = from; 13 | mn_dist = dist1[to][0]+wght+dist2[from][0]; 14 | } 15 | if(dist2[to][0]+wght+dist1[from][0] < mn_dist){ 16 | plane = wght; 17 | p2 = to; 18 | p1 = from; 19 | mn_dist = dist2[to][0]+wght+dist1[from][0]; 20 | } 21 | } 22 | } -------------------------------------------------------------------------------- /8. Splitwise Algorithm Design (C++)(Using Maps and Multisets)/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "files.associations": { 3 | "map": "cpp" 4 | } 5 | } -------------------------------------------------------------------------------- /8. Splitwise Algorithm Design (C++)(Using Maps and Multisets)/Notes/8.Splitwise Algorithm.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/8. Splitwise Algorithm Design (C++)(Using Maps and Multisets)/Notes/8.Splitwise Algorithm.pdf -------------------------------------------------------------------------------- /8. Splitwise Algorithm Design (C++)(Using Maps and Multisets)/README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ## Splitwise 4 | https://user-images.githubusercontent.com/56497318/127523960-86589587-376e-41a4-867d-805c6c7cf300.mp4 5 | 6 | 7 | ### Description 8 | Simplifies dense cash flows 9 | 10 | ### Skills nurtured: 11 | - Heap & Graph. 12 | - Splitwise algorithm to remove unnecessary edges(cash flow) of graph. 13 | 14 | ### Tech. Stack: 15 | HTML, CSS, JS, CANVAS 16 | -------------------------------------------------------------------------------- /8. Splitwise Algorithm Design (C++)(Using Maps and Multisets)/algo.cpp: -------------------------------------------------------------------------------- 1 | #include 2 | #include 3 | #include 4 | 5 | using namespace std; 6 | 7 | int main(){ 8 | int no_of_transactions, friends; 9 | cin >> no_of_transactions >> friends; 10 | 11 | string x,y; 12 | int amount; 13 | 14 | mapnet; 15 | 16 | int onot = no_of_transactions; 17 | while (no_of_transactions--){ 18 | cin >> x >> y >> amount; 19 | 20 | if (net.count(x) == 0){ 21 | net[x] = 0; 22 | } 23 | 24 | if (net.count(y) == 0){ 25 | net[y] = 0; 26 | } 27 | 28 | net[x] -= amount; 29 | net[y] += amount; 30 | } 31 | 32 | multiset< pair > m; 33 | for (auto p: net){ 34 | string person = p.first; 35 | int amount = p.second; 36 | 37 | if (net[person] != 0){ 38 | m.insert( make_pair(amount, person) ); 39 | } 40 | } 41 | 42 | int count = 0; 43 | while(!m.empty()){ 44 | auto low = m.begin(); 45 | auto high = prev( m.end() ); 46 | 47 | int debit = low->first; 48 | string debit_person = low->second; 49 | 50 | int credit = high->first; 51 | string credit_person = high->second; 52 | 53 | m.erase(low); 54 | m.erase(high); 55 | 56 | int settlement_amount = min(-debit, credit); 57 | debit += settlement_amount; 58 | credit -= settlement_amount; 59 | 60 | cout << debit_person << " will pay " << settlement_amount << " to " << credit_person << endl; 61 | 62 | if (debit != 0){ 63 | m.insert( make_pair(debit, debit_person) ); 64 | } 65 | 66 | if (credit != 0){ 67 | m.insert( make_pair(credit, credit_person) ); 68 | } 69 | 70 | count += 1; 71 | } 72 | cout << endl; 73 | cout << "Without Algorithm it took: " << onot << " transacions" << endl; 74 | cout << "With Algorithm it took: " << count << " transacions"; 75 | cout << endl; 76 | 77 | } 78 | -------------------------------------------------------------------------------- /8. Splitwise Algorithm Design (C++)(Using Maps and Multisets)/algo.exe: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/8. Splitwise Algorithm Design (C++)(Using Maps and Multisets)/algo.exe -------------------------------------------------------------------------------- /8. Splitwise Algorithm Design (C++)(Using Maps and Multisets)/algo.o: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/8. Splitwise Algorithm Design (C++)(Using Maps and Multisets)/algo.o -------------------------------------------------------------------------------- /9. Splitwise Cashflow Minimization (Heap)/Notes/9.Splitwise Cashflow Maxmizing.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/9. Splitwise Cashflow Minimization (Heap)/Notes/9.Splitwise Cashflow Maxmizing.pdf -------------------------------------------------------------------------------- /9. Splitwise Cashflow Minimization (Heap)/heap.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by aarnavjindal on 30/03/20. 3 | */ 4 | 5 | export { BinaryHeap } 6 | 7 | class BinaryHeap { 8 | 9 | constructor() { 10 | this.heap = []; 11 | } 12 | 13 | insert(value) { 14 | console.log(value); 15 | this.heap.push(value); 16 | this.bubbleUp(); 17 | } 18 | 19 | size() { 20 | return this.heap.length; 21 | } 22 | 23 | empty(){ 24 | return ( this.size()===0 ); 25 | } 26 | 27 | //using iterative approach 28 | bubbleUp() { 29 | let index = this.size() - 1; 30 | 31 | while (index > 0) { 32 | let element = this.heap[index], 33 | parentIndex = Math.floor((index - 1) / 2), 34 | parent = this.heap[parentIndex]; 35 | 36 | if (parent[0] >= element[0]) break; 37 | this.heap[index] = parent; 38 | this.heap[parentIndex] = element; 39 | index = parentIndex 40 | } 41 | } 42 | 43 | extractMax() { 44 | const max = this.heap[0]; 45 | const tmp = this.heap.pop(); 46 | if(!this.empty()) { 47 | this.heap[0] = tmp; 48 | this.sinkDown(0); 49 | } 50 | return max; 51 | } 52 | 53 | sinkDown(index) { 54 | 55 | let left = 2 * index + 1, 56 | right = 2 * index + 2, 57 | largest = index; 58 | const length = this.size(); 59 | 60 | // console.log(this.heap[left], left, length, this.heap[right], right, length, this.heap[largest]); 61 | 62 | if (left < length && this.heap[left][0] > this.heap[largest][0]) { 63 | largest = left 64 | } 65 | if (right < length && this.heap[right][0] > this.heap[largest][0]) { 66 | largest = right 67 | } 68 | // swap 69 | if (largest !== index) { 70 | let tmp = this.heap[largest]; 71 | this.heap[largest] = this.heap[index]; 72 | this.heap[index] = tmp; 73 | this.sinkDown(largest) 74 | } 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /9. Splitwise Cashflow Minimization (Heap)/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 24 |
25 |
26 |
27 | 28 | Click on solve to get Solution !! 29 | 30 | 31 |
32 |
33 | 34 |
35 |
36 | 37 |
38 | 39 |
40 | 41 | 42 | -------------------------------------------------------------------------------- /9. Splitwise Cashflow Minimization (Heap)/index.php: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /9. Splitwise Cashflow Minimization (Heap)/script.js: -------------------------------------------------------------------------------- 1 | 2 | import { BinaryHeap } from './heap.js'; 3 | 4 | onload = function () { 5 | // create a network 6 | let curr_data; 7 | const container = document.getElementById('mynetwork'); 8 | const container2 = document.getElementById('mynetwork2'); 9 | const genNew = document.getElementById('generate-graph'); 10 | const solve = document.getElementById('solve'); 11 | const temptext = document.getElementById('temptext'); 12 | // initialise graph options 13 | const options = { 14 | edges: { 15 | arrows: { 16 | to: true 17 | }, 18 | labelHighlightBold: true, 19 | font: { 20 | size: 20 21 | } 22 | }, 23 | nodes: { 24 | font: '12px arial red', 25 | scaling: { 26 | label: true 27 | }, 28 | shape: 'icon', 29 | icon: { 30 | face: 'FontAwesome', 31 | code: '\uf183', 32 | size: 50, 33 | color: '#991133', 34 | } 35 | } 36 | }; 37 | // initialize your network! 38 | let network = new vis.Network(container); 39 | network.setOptions(options); 40 | let network2 = new vis.Network(container2); 41 | network2.setOptions(options); 42 | 43 | function createData(){ 44 | const sz = Math.floor(Math.random() * 8) + 2; 45 | 46 | // Adding people to nodes array 47 | let nodes = []; 48 | for(let i=1;i<=sz;i++){ 49 | nodes.push({id:i, label:"Person "+i}) 50 | } 51 | nodes = new vis.DataSet(nodes); 52 | 53 | // Dynamically creating edges with random amount to be paid from one to another friend 54 | const edges = []; 55 | for(let i=1;i<=sz;i++){ 56 | for(let j=i+1;j<=sz;j++){ 57 | // Modifies the amount of edges added in the graph 58 | if(Math.random() > 0.5){ 59 | // Controls the direction of cash flow on edge 60 | if(Math.random() > 0.5) 61 | edges.push({from: i, to: j, label: String(Math.floor(Math.random()*100)+1)}); 62 | else 63 | edges.push({from: j, to: i, label: String(Math.floor(Math.random()*100)+1)}); 64 | } 65 | } 66 | } 67 | const data = { 68 | nodes: nodes, 69 | edges: edges 70 | }; 71 | return data; 72 | } 73 | 74 | genNew.onclick = function () { 75 | const data = createData(); 76 | curr_data = data; 77 | network.setData(data); 78 | temptext.style.display = "inline"; 79 | container2.style.display = "none"; 80 | }; 81 | 82 | solve.onclick = function () { 83 | temptext.style.display = "none"; 84 | container2.style.display = "inline"; 85 | const solvedData = solveData(); 86 | network2.setData(solvedData); 87 | }; 88 | 89 | function solveData() { 90 | let data = curr_data; 91 | const sz = data['nodes'].length; 92 | const vals = Array(sz).fill(0); 93 | // Calculating net balance of each person 94 | for(let i=0;i0){ 105 | pos_heap.insert([vals[i],i]); 106 | } else{ 107 | neg_heap.insert(([-vals[i],i])); 108 | vals[i] *= -1; 109 | } 110 | } 111 | 112 | const new_edges = []; 113 | while(!pos_heap.empty() && !neg_heap.empty()){ 114 | const mx = pos_heap.extractMax(); 115 | const mn = neg_heap.extractMax(); 116 | 117 | const amt = Math.min(mx[0],mn[0]); 118 | const to = mx[1]; 119 | const from = mn[1]; 120 | 121 | new_edges.push({from: from+1, to: to+1, label: String(Math.abs(amt))}); 122 | vals[to] -= amt; 123 | vals[from] -= amt; 124 | 125 | if(mx[0] > mn[0]){ 126 | pos_heap.insert([vals[to],to]); 127 | } else if(mx[0] < mn[0]){ 128 | neg_heap.insert([vals[from],from]); 129 | } 130 | } 131 | 132 | data = { 133 | nodes: data['nodes'], 134 | edges: new_edges 135 | }; 136 | return data; 137 | } 138 | 139 | genNew.click(); 140 | 141 | }; -------------------------------------------------------------------------------- /9. Splitwise Cashflow Minimization (Heap)/style.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | height: 100%; 4 | } 5 | 6 | #mynetwork { 7 | width: 50%; 8 | height: 100%; 9 | border: 1px solid lightgray; 10 | } 11 | 12 | #container2 { 13 | width: 50%; 14 | height: 100%; 15 | border: 1px solid lightgray; 16 | display: flex; 17 | flex-wrap: wrap; 18 | align-content: center; 19 | } 20 | 21 | #mynetwork2{ 22 | width: 100%; 23 | height: 100%; 24 | } 25 | 26 | #container{ 27 | width: 100%; 28 | height: 70%; 29 | background-color: white; 30 | display: flex; 31 | margin: 0 auto; 32 | } 33 | 34 | #generate-graph{ 35 | margin:auto; 36 | display:block; 37 | } 38 | 39 | 40 | #solve{ 41 | margin:auto; 42 | display:block; 43 | } -------------------------------------------------------------------------------- /Assignment/Spin And Win/Assets/back.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/Assignment/Spin And Win/Assets/back.jpg -------------------------------------------------------------------------------- /Assignment/Spin And Win/Assets/button.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/Assignment/Spin And Win/Assets/button.jpg -------------------------------------------------------------------------------- /Assignment/Spin And Win/Assets/button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/Assignment/Spin And Win/Assets/button.png -------------------------------------------------------------------------------- /Assignment/Spin And Win/Assets/oedipus_wizball_highscore.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/Assignment/Spin And Win/Assets/oedipus_wizball_highscore.mp3 -------------------------------------------------------------------------------- /Assignment/Spin And Win/Assets/pin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/Assignment/Spin And Win/Assets/pin.png -------------------------------------------------------------------------------- /Assignment/Spin And Win/Assets/ray.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/Assignment/Spin And Win/Assets/ray.png -------------------------------------------------------------------------------- /Assignment/Spin And Win/Assets/stand.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/Assignment/Spin And Win/Assets/stand.png -------------------------------------------------------------------------------- /Assignment/Spin And Win/Assets/wheel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/Assignment/Spin And Win/Assets/wheel.png -------------------------------------------------------------------------------- /Assignment/Spin And Win/JS/game.js: -------------------------------------------------------------------------------- 1 | //Hello World of Phaser = Basic Game = Single Scene in Spin & Win Game 2 | // How to create the basic skeleton for the game -> Game Loop 3 | 4 | let prizes_config = { 5 | count:12, 6 | prize_names : ["3000 Credits","35% Off","Nothing","70% OFF","Swagpack","100% OFF","Netflix","50% Off","Amazon Voucher","2 Extra Spin", "CB Tshirt","CB Book"] 7 | } 8 | 9 | let config = { 10 | type: Phaser.CANVAS, 11 | width: 800, 12 | height: 600, 13 | 14 | scene: { 15 | preload: preload, 16 | create: create, 17 | update: update, 18 | }, 19 | audio: { 20 | disableWebAudio: false, 21 | } 22 | }; 23 | 24 | let game = new Phaser.Game(config); 25 | 26 | function preload(){ 27 | console.log("Preload"); 28 | //load object, load some images 29 | this.load.image('background','../Assets/back.jpg'); 30 | console.log(this); 31 | this.load.image('wheel','../Assets/wheel.png'); 32 | this.load.image('pin','../Assets/pin.png'); 33 | this.load.image('stand','../Assets/stand.png'); 34 | this.load.image('button','../Assets/button.png'); 35 | this.load.image("ray", "../Assets/ray.png"); 36 | 37 | // For Audio 38 | this.load.audio('theme', 'assets/oedipus_wizball_highscore.mp3'); 39 | } 40 | 41 | function create(){ 42 | console.log("Create"); 43 | //create the background image 44 | let W = game.config.width; 45 | let H = game.config.height; 46 | 47 | let background = this.add.sprite(0,0,'background'); 48 | background.setPosition(W/2,H/2); 49 | background.setScale(0.20); 50 | 51 | // Create rays on top of the Background 52 | let rays = []; 53 | 54 | for (let i = -10; i <= 10; i++){ 55 | let ray = this.add.sprite(W/2, H-300, "ray"); 56 | ray.displayHeight = 1.2*H; 57 | ray.setOrigin(0.5, 1); 58 | ray.alpha = 0.2; 59 | ray.angle = i*20; 60 | rays.push(ray); 61 | } 62 | 63 | // Sunlight Effect Tween 64 | this.tweens.add({ 65 | targets: rays, 66 | props: { 67 | angle: { 68 | value : "+= 200", 69 | }, 70 | }, 71 | duration: 4000, 72 | repeat: -1, 73 | }); 74 | 75 | // Creating a button for the spin 76 | button_font_style = { 77 | font: "bold 35px Arial", 78 | align: "center", 79 | color: "red", 80 | } 81 | this.textbutton = this.add.text(W-200, H-50, "Tap to Spin", button_font_style); 82 | this.textbutton.setInteractive(); 83 | 84 | //lets create the stand 85 | let stand = this.add.sprite(W/2,H/2 + 250,'stand'); 86 | stand.setScale(0.25); 87 | 88 | //lets create a pin 89 | let pin = this.add.sprite(W/2,H/2-250,"pin"); 90 | pin.setScale(0.25); 91 | pin.depth = 1; // Jitne zada value utni zada dur rahega obj. 0 being max and 0 being min 92 | 93 | //let create wheel 94 | this.wheel = this.add.sprite(W/2,H/2,"wheel"); 95 | this.wheel.setScale(0.25); 96 | 97 | //event listener for mouse click 98 | this.isSpinning = false; 99 | this.textbutton.on('pointerdown', () => { 100 | this.input.on("pointerdown", spinwheel, this); 101 | }); 102 | 103 | 104 | //lets create text object 105 | font_style = { 106 | font: "bold 25px Arial", 107 | align: "center", 108 | color: "red", 109 | } 110 | this.game_text = this.add.text(10,10,"Welcome to Spin And Wheel", font_style); 111 | 112 | 113 | } 114 | 115 | //Game Loop 116 | function update(){ 117 | console.log("Updating Continously"); 118 | } 119 | 120 | function spinwheel(){ 121 | 122 | this.textbutton.on('pointerdown', () => { // Button pe click karo then only it'll spin 123 | if (this.isSpinning == false){ // To disable spin while already spinning 124 | 125 | // Audio 126 | var music = this.sound.add("theme"); 127 | music.play(); 128 | 129 | // So that wheel would'nt spin again 130 | this.isSpinning = true; 131 | 132 | console.log("You clicked the mouse"); 133 | console.log("Start spinning"); 134 | //this.game_text.setText("You clicked the mouse!"); 135 | 136 | let rounds = Phaser.Math.Between(2,4); 137 | let degrees = Phaser.Math.Between(0,11)*30; // Take evry prize ke beech me ruke 138 | 139 | let total_angle = rounds*360 + degrees; 140 | console.log(total_angle); 141 | 142 | let idx = prizes_config.count - 1 - Math.floor(degrees/(360/prizes_config.count)); 143 | 144 | tween = this.tweens.add({ 145 | targets: this.wheel, 146 | angle: total_angle, 147 | ease: "Cubic.easeOut", 148 | duration: 6000, 149 | callbackScope:this, 150 | onComplete:function(){ 151 | this.game_text.setText("You Won: " + prizes_config.prize_names[idx]); 152 | this.isSpinning = false; // To spin again 153 | music.stop(); // To stop music 154 | }, 155 | }); 156 | } 157 | }); 158 | } -------------------------------------------------------------------------------- /Assignment/Spin And Win/README.md: -------------------------------------------------------------------------------- 1 | ### Preview: 2 |

In this game we implemented arrays ds and used some mathematical concepts.

3 | To build this game we used the 'Phaser' Framework.

4 | Logics and Concepts implemented in this game:

5 |
    6 |
  • GameLoop in Phaser
  • 7 |
  • Adding Images
  • 8 |
  • Animations
  • 9 |
  • Arrays
  • 10 |
  • Mathematical concepts
  • 11 |
  • Adding Music
  • 12 |
  • OOPs
  • 13 |
14 | 15 |

Here are some improvements to the game that we build as a part of the assignment. 16 | 17 | Disable Spin 18 | 19 | 1) Disable Spin, if the wheel is already in spinning state. The current version doesn't check if the wheel is in spinning state or not. User should be able get the next spin only when the first spin is stopped. Implement this feature in the code. 20 | 21 | Add Tap to Spin Button 22 | 23 | 2) Instead of Mouse Click, add a button "Tap to Spin" which triggers the spin_wheel function. Refer this example - https://phaser.io/examples/v2/buttons/action-on-click 24 | 25 | Add Music 26 | 27 | 3) Play background music when the wheel is spinning. Refer examples here - http://phaser.io/examples/v3/category/audio/html5-audio 28 | 29 | Add New Feature 30 | 31 | 4) Add any 1 new feature of your choice to make the game more engaging and attractive. 32 |

33 | 34 | ###### This is how the game looks. 35 | 36 | Trulli


37 | -------------------------------------------------------------------------------- /Assignment/Spin And Win/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Spin and Win 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /Assignment/Spin And Win/saw.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fsiddh/Data-Structures-in-Real-Life-Projects/837705d13cc46efc18f5fce61a4585fda7d0eda3/Assignment/Spin And Win/saw.PNG -------------------------------------------------------------------------------- /Practice/practice1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Practice Session 4 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Practice/practice1.js: -------------------------------------------------------------------------------- 1 | class test{ 2 | constructor(color, shape){ 3 | this.color = color; 4 | this.shape = shape; 5 | } 6 | }; 7 | 8 | 9 | 10 | var c = document.getElementById('my_canvas'); 11 | console.log(c); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Data-Structures-in-Real-Life-Projects --------------------------------------------------------------------------------