├── Autocomplete_using_tries
├── index.css
├── index.html
├── index.js
└── trie.js
├── OpaqueCalendar
├── calendar.js
├── index.css
├── index.html
└── index.js
├── README.md
└── WindowSwitcher_using_linkedlist
├── LinkedList.js
├── index.css
├── index.html
└── index.js
/Autocomplete_using_tries/index.css:
--------------------------------------------------------------------------------
1 | .top{
2 | margin-top: 50px;
3 | }
4 |
5 | .clickable{
6 | cursor: pointer;
7 | }
--------------------------------------------------------------------------------
/Autocomplete_using_tries/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
10 | Autocomplete Application
11 |
12 |
13 |
14 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
28 |
29 |
Varun's Calendar
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/OpaqueCalendar/index.js:
--------------------------------------------------------------------------------
1 | const appointments = [
2 | [7, 9],
3 | [9, 10],
4 | [12, 16],
5 | [13, 14],
6 | [14.5, 15.5],
7 | [21, 22],
8 | ];
9 |
10 | const list = document.getElementById("list");
11 |
12 | list.innerHTML += `12 am`;
13 |
14 | for (let slot of getFullCalendar(getBusySlots(appointments))) {
15 | list.innerHTML += `
18 | `;
19 |
20 | list.innerHTML += `${slot[1] % 12 === 0 ? 12 : slot[1] % 12} ${
21 | slot[1] >= 12 && slot[1] < 24 ? "pm" : "am"
22 | }`;
23 | }
24 |
25 | const fullCal = getBusySlots(appointments);
26 | console.log(fullCal);
27 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Javascript-Applications
2 | This is the repository for the youtube series you can find [here](Link_here).
3 |
4 | ## Installation
5 | You can run these applications by simply cloning this repository or downloading it via github and then starting a http server in the root directory and clicking on the application you wanna run. I use the [`http-server`](https://www.npmjs.com/package/http-server) utility to do this.
6 |
7 | 
8 |
9 | ## Contributing
10 | You are more than welcome to hack any of the applications here and add features or improve the UI. If you have any ideas about which application I should do next, please feel free to open an issue and we can discuss more. Happy coding! :D
11 |
--------------------------------------------------------------------------------
/WindowSwitcher_using_linkedlist/LinkedList.js:
--------------------------------------------------------------------------------
1 | function Linkedlist() {
2 | function Node(content) {
3 | this.content = content;
4 | this.next = this;
5 | this.prev = this;
6 | }
7 |
8 | this.head = null;
9 | this.tail = null;
10 |
11 | this.add = function(content) {
12 | if (!this.head) {
13 | this.head = this.tail = new Node(content);
14 | }
15 | else {
16 | this.tail.next = new Node(content);
17 | this.tail.next.prev = this.tail;
18 | this.tail = this.tail.next;
19 | this.tail.next = this.head;
20 | this.head.prev = this.tail;
21 | }
22 | }
23 |
24 | this.move_to_front = function(node) {
25 | if (node === this.head) {
26 | return;
27 | }
28 |
29 | let temp = this.head;
30 | let isTailNode = false;
31 |
32 | while (temp.next !== node)
33 | temp = temp.next;
34 |
35 | if (temp.next === this.tail)
36 | isTailNode = true;
37 |
38 | if(!isTailNode){
39 | temp.next = node.next;
40 | node.next.prev = temp;
41 | }
42 | else{
43 | this.tail = this.tail.prev;
44 | }
45 |
46 | node.next = this.head;
47 | this.head.prev = node;
48 | this.head = node;
49 | this.tail.next = this.head;
50 | this.head.prev = this.tail;
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/WindowSwitcher_using_linkedlist/index.css:
--------------------------------------------------------------------------------
1 | body{
2 | text-align: center;
3 | }
4 |
5 | #box{
6 | text-align: center;
7 | }
8 |
9 | .sel{
10 | color: red;
11 | background-color: rgb(202, 199, 199) !important;
12 | }
13 |
14 | #tab-switcher{
15 | margin-top: 40px;
16 | }
17 |
18 | li > img{
19 | height: 3rem;
20 | text-align: center;
21 | }
--------------------------------------------------------------------------------
/WindowSwitcher_using_linkedlist/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
10 |
11 | Window Switcher
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
Card title
22 |
23 |
24 |
25 |
${data[temp.content.id].title}
`;
71 | temp = temp.next;
72 | }while(temp !== list.head);
73 |
74 | children = tab_switcher.childNodes;
75 | children[0].classList.add("sel");
76 | offset = 0;
77 |
78 | }
--------------------------------------------------------------------------------