├── day-24 ├── weather │ ├── style.css │ ├── index.html │ └── index.js ├── banner.png ├── index.html ├── pizzahub │ ├── ph.html │ ├── lib │ │ └── query.js │ └── ph.js ├── task.md └── README.md ├── api ├── .gitignore ├── inventory │ ├── package.json │ └── db.json ├── blog │ ├── server.js │ ├── package.json │ └── db.json └── pizzahub │ ├── package.json │ ├── db.json │ └── server.js ├── live ├── lets-code │ └── inventory │ │ ├── main.js │ │ ├── pages │ │ ├── input.css │ │ └── index.html │ │ ├── .gitignore │ │ ├── banner.png │ │ ├── image.png │ │ ├── README.md │ │ ├── package.json │ │ └── LICENSE └── live-one │ ├── index.html │ └── index.js ├── day-25 ├── download │ └── file.txt ├── banner.png ├── index.html ├── task.md └── README.md ├── day-40 ├── splitter │ ├── README.md │ ├── .gitignore │ ├── vite.config.js │ ├── src │ │ ├── models │ │ │ ├── user.js │ │ │ └── expense.js │ │ ├── utils │ │ │ └── toastUtil.js │ │ ├── ui │ │ │ └── domHelpers.js │ │ ├── main.js │ │ └── services │ │ │ └── userService.js │ ├── package.json │ └── LICENSE ├── banner.png ├── task.md └── README.md ├── .gitignore ├── day-01 ├── script.js ├── banner.png ├── test.js ├── first.html └── index.html ├── day-34 ├── library │ ├── src │ │ ├── index.css │ │ ├── models │ │ │ ├── Admin.js │ │ │ ├── User.js │ │ │ ├── Book.js │ │ │ └── Member.js │ │ └── services │ │ │ └── LibraryService.js │ ├── .gitignore │ ├── README.md │ ├── vite.config.js │ ├── package.json │ └── LICENSE ├── banner.png ├── task.md └── README.md ├── day-28 ├── country-explorer │ ├── src │ │ └── index.css │ ├── .gitignore │ ├── README.md │ ├── vite.config.js │ ├── package.json │ ├── LICENSE │ └── index.html ├── banner.png └── README.md ├── day-02 ├── banner.png ├── index.html ├── index.js └── README.md ├── day-03 ├── banner.png ├── index.html └── README.md ├── day-04 ├── banner.png ├── index.html └── README.md ├── day-05 ├── banner.png ├── index.html ├── task.md └── README.md ├── day-06 ├── banner.png ├── index.html └── README.md ├── day-07 ├── banner.png ├── rps │ └── rps.html ├── secret-number │ └── secret-number.html ├── index.html ├── task.md └── README.md ├── day-08 ├── banner.png ├── gec.js ├── index.js ├── fec.js ├── say-name.js ├── index.html ├── call-stack.js ├── task.md └── README.md ├── day-09 ├── banner.png ├── feh.js ├── fh.js ├── index.html ├── task.md ├── vh.js └── README.md ├── day-10 ├── banner.png └── index.html ├── day-11 ├── banner.png ├── index.html ├── README.md └── task.md ├── day-12 ├── banner.png ├── index.html └── oc.js ├── day-13 ├── banner.png ├── index.html ├── examples.js └── README.md ├── day-14 ├── banner.png ├── index.html └── README.md ├── day-15 ├── banner.png └── index.html ├── day-16 ├── banner.png ├── index.js ├── index.html ├── index.css └── README.md ├── day-17 ├── banner.png ├── index.html ├── README.md └── task.md ├── day-18 ├── banner.png ├── projects │ ├── toggle │ │ ├── logic.js │ │ ├── ui.css │ │ └── ui.html │ └── todo │ │ ├── ui.css │ │ ├── ui.html │ │ └── logic.js ├── index.css ├── task.md ├── index.html └── README.md ├── day-19 ├── banner.png ├── path │ ├── event.css │ └── event-path.html ├── projects │ ├── faq.css │ ├── faq.js │ └── faq.html ├── custom │ ├── custom-event.html │ └── custom-event.js ├── default │ ├── event-default.js │ └── event-default.html ├── index.html ├── README.md └── task.md ├── day-20 ├── banner.png ├── index.html ├── task.md └── README.md ├── day-21 ├── banner.png ├── index.html ├── style.css └── README.md ├── day-22 ├── banner.png ├── lib │ └── query.js ├── index.html ├── README.md └── task.md ├── day-23 ├── banner.png ├── promise.js ├── index.html ├── pizzahub │ ├── ph.html │ ├── lib │ │ └── query.js │ └── ph.js └── README.md ├── day-26 ├── banner.png ├── index.html └── README.md ├── day-27 ├── banner.png ├── index.html ├── index.js └── README.md ├── day-29 ├── banner.png ├── index.html ├── README.md └── task.md ├── day-30 ├── banner.png ├── index.html ├── oop │ ├── composition.js │ ├── encapsulation.js │ ├── polymorphism.js │ ├── abstraction.js │ └── inheritance.js └── README.md ├── day-31 ├── banner.png ├── task.md └── README.md ├── day-32 ├── banner.png ├── task.md └── README.md ├── day-33 ├── banner.png ├── index.html └── README.md ├── day-35 ├── banner.png ├── 3-this │ ├── unhappy.js │ ├── solution.js │ └── index.html ├── 5-order │ ├── index.html │ ├── track-order.js │ └── solution.js ├── 2-buttons │ ├── index.html │ ├── solution.js │ └── clickButtons.js ├── 4-payment │ ├── index.html │ ├── solution.js │ └── process-payment.js ├── 1-discount │ ├── index.html │ ├── solution.js │ └── calculateDiscount.js └── README.md ├── day-36 ├── banner.png ├── index.html ├── memory-leak │ ├── leak.html │ └── leak.js ├── throttle │ ├── scroll.js │ └── scroll.html ├── debounce │ ├── search.html │ └── search.js ├── memoization │ └── fibonacci │ │ ├── fib.js │ │ └── fib.html └── README.md ├── day-37 ├── banner.png ├── index.html ├── geolocation │ ├── geo.html │ └── geo.js ├── task.md ├── notification │ ├── noti.html │ └── noti.js ├── storage │ ├── session.js │ ├── session.html │ ├── ls.html │ └── ls.js ├── clipboard │ ├── clip.html │ └── clip.js ├── index.js └── README.md ├── day-38 ├── banner.png ├── index.js ├── task.md └── README.md ├── day-39 ├── banner.png ├── README.md └── index.js └── project-assignment └── expense-tracker.md /day-24/weather/style.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /api/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /live/lets-code/inventory/main.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /day-25/download/file.txt: -------------------------------------------------------------------------------- 1 | A dummy file. -------------------------------------------------------------------------------- /day-40/splitter/README.md: -------------------------------------------------------------------------------- 1 | # js-base-setup -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | Content-Slide.key 2 | 3 | .vscode -------------------------------------------------------------------------------- /day-01/script.js: -------------------------------------------------------------------------------- 1 | console.log("Hello from Node.js!"); 2 | -------------------------------------------------------------------------------- /day-34/library/src/index.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | -------------------------------------------------------------------------------- /day-28/country-explorer/src/index.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | -------------------------------------------------------------------------------- /live/lets-code/inventory/pages/input.css: -------------------------------------------------------------------------------- 1 | @import "tailwindcss"; 2 | -------------------------------------------------------------------------------- /day-34/library/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | .git 3 | package-lock.json 4 | yarn.lock 5 | dist -------------------------------------------------------------------------------- /day-40/splitter/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | .git 3 | package-lock.json 4 | yarn.lock 5 | dist -------------------------------------------------------------------------------- /live/lets-code/inventory/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .git 3 | package-lock.json 4 | yarn.lock -------------------------------------------------------------------------------- /day-01/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/HEAD/day-01/banner.png -------------------------------------------------------------------------------- /day-02/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/HEAD/day-02/banner.png -------------------------------------------------------------------------------- /day-03/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/HEAD/day-03/banner.png -------------------------------------------------------------------------------- /day-04/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/HEAD/day-04/banner.png -------------------------------------------------------------------------------- /day-05/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/HEAD/day-05/banner.png -------------------------------------------------------------------------------- /day-06/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/HEAD/day-06/banner.png -------------------------------------------------------------------------------- /day-07/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/HEAD/day-07/banner.png -------------------------------------------------------------------------------- /day-08/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/HEAD/day-08/banner.png -------------------------------------------------------------------------------- /day-08/gec.js: -------------------------------------------------------------------------------- 1 | var name = 'Tom'; 2 | 3 | function sayName() { 4 | console.log(this.name); 5 | } 6 | -------------------------------------------------------------------------------- /day-08/index.js: -------------------------------------------------------------------------------- 1 | var name = 'Tom'; 2 | 3 | function sayName() { 4 | console.log(this.name); 5 | } 6 | -------------------------------------------------------------------------------- /day-09/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/HEAD/day-09/banner.png -------------------------------------------------------------------------------- /day-09/feh.js: -------------------------------------------------------------------------------- 1 | test(); 2 | 3 | var test = function() { 4 | console.log('I am being tested'); 5 | } -------------------------------------------------------------------------------- /day-10/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/HEAD/day-10/banner.png -------------------------------------------------------------------------------- /day-11/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/HEAD/day-11/banner.png -------------------------------------------------------------------------------- /day-12/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/HEAD/day-12/banner.png -------------------------------------------------------------------------------- /day-13/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/HEAD/day-13/banner.png -------------------------------------------------------------------------------- /day-14/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/HEAD/day-14/banner.png -------------------------------------------------------------------------------- /day-15/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/HEAD/day-15/banner.png -------------------------------------------------------------------------------- /day-16/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/HEAD/day-16/banner.png -------------------------------------------------------------------------------- /day-17/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/HEAD/day-17/banner.png -------------------------------------------------------------------------------- /day-18/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/HEAD/day-18/banner.png -------------------------------------------------------------------------------- /day-19/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/HEAD/day-19/banner.png -------------------------------------------------------------------------------- /day-19/path/event.css: -------------------------------------------------------------------------------- 1 | form { 2 | margin: 5px; 3 | } 4 | 5 | .hidden { 6 | display: none; 7 | } -------------------------------------------------------------------------------- /day-20/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/HEAD/day-20/banner.png -------------------------------------------------------------------------------- /day-21/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/HEAD/day-21/banner.png -------------------------------------------------------------------------------- /day-22/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/HEAD/day-22/banner.png -------------------------------------------------------------------------------- /day-23/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/HEAD/day-23/banner.png -------------------------------------------------------------------------------- /day-24/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/HEAD/day-24/banner.png -------------------------------------------------------------------------------- /day-25/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/HEAD/day-25/banner.png -------------------------------------------------------------------------------- /day-26/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/HEAD/day-26/banner.png -------------------------------------------------------------------------------- /day-27/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/HEAD/day-27/banner.png -------------------------------------------------------------------------------- /day-28/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/HEAD/day-28/banner.png -------------------------------------------------------------------------------- /day-28/country-explorer/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | .git 3 | package-lock.json 4 | yarn.lock 5 | dist -------------------------------------------------------------------------------- /day-29/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/HEAD/day-29/banner.png -------------------------------------------------------------------------------- /day-30/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/HEAD/day-30/banner.png -------------------------------------------------------------------------------- /day-31/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/HEAD/day-31/banner.png -------------------------------------------------------------------------------- /day-32/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/HEAD/day-32/banner.png -------------------------------------------------------------------------------- /day-33/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/HEAD/day-33/banner.png -------------------------------------------------------------------------------- /day-34/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/HEAD/day-34/banner.png -------------------------------------------------------------------------------- /day-35/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/HEAD/day-35/banner.png -------------------------------------------------------------------------------- /day-36/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/HEAD/day-36/banner.png -------------------------------------------------------------------------------- /day-37/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/HEAD/day-37/banner.png -------------------------------------------------------------------------------- /day-38/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/HEAD/day-38/banner.png -------------------------------------------------------------------------------- /day-39/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/HEAD/day-39/banner.png -------------------------------------------------------------------------------- /day-40/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/HEAD/day-40/banner.png -------------------------------------------------------------------------------- /live/lets-code/inventory/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/HEAD/live/lets-code/inventory/banner.png -------------------------------------------------------------------------------- /live/lets-code/inventory/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/HEAD/live/lets-code/inventory/image.png -------------------------------------------------------------------------------- /day-08/fec.js: -------------------------------------------------------------------------------- 1 | var name = 'Tom'; 2 | 3 | function tom() { 4 | console.log(this.name + ' Runs'); 5 | } 6 | 7 | // Invoke the function tom() 8 | tom(); 9 | -------------------------------------------------------------------------------- /day-28/country-explorer/README.md: -------------------------------------------------------------------------------- 1 | # Country Explorer 2 | 3 | To Start the project, 4 | 5 | ```bash 6 | npm install 7 | 8 | npm run start 9 | ``` 10 | -------------------------------------------------------------------------------- /day-01/test.js: -------------------------------------------------------------------------------- 1 | console.log("I am a test script") 2 | 3 | function init() { 4 | document.getElementById("someId").innerText = "Some Div" 5 | } 6 | 7 | 8 | init(); -------------------------------------------------------------------------------- /day-34/library/README.md: -------------------------------------------------------------------------------- 1 | # Library Management System(LMS) 2 | 3 | To run the project locally do the followings: 4 | 5 | ```bash 6 | npm install 7 | npm start 8 | ``` 9 | 10 | Happy Building! 11 | -------------------------------------------------------------------------------- /day-34/library/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import tailwindcss from "@tailwindcss/vite"; 3 | export default defineConfig({ 4 | plugins: [tailwindcss()], 5 | server: { 6 | port: 3001, 7 | }, 8 | }); 9 | -------------------------------------------------------------------------------- /day-18/projects/toggle/logic.js: -------------------------------------------------------------------------------- 1 | console.log("Project: Toggle"); 2 | 3 | function toggleInfo() { 4 | console.log("Toggling"); 5 | const para = document.getElementById("myParagraph"); 6 | 7 | para.classList.toggle("hidden") 8 | } -------------------------------------------------------------------------------- /day-40/splitter/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import tailwindcss from "@tailwindcss/vite"; 3 | export default defineConfig({ 4 | plugins: [tailwindcss()], 5 | server: { 6 | port: 3001, 7 | }, 8 | }); 9 | -------------------------------------------------------------------------------- /day-28/country-explorer/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import tailwindcss from "@tailwindcss/vite"; 3 | export default defineConfig({ 4 | plugins: [tailwindcss()], 5 | server: { 6 | port: 3001, 7 | }, 8 | }); 9 | -------------------------------------------------------------------------------- /day-18/projects/todo/ui.css: -------------------------------------------------------------------------------- 1 | ul { 2 | list-style: none; 3 | padding: 0; 4 | } 5 | li { 6 | padding: 10px; 7 | border-bottom: 1px solid #ddd; 8 | } 9 | 10 | li.completed { 11 | text-decoration: line-through; 12 | } 13 | 14 | -------------------------------------------------------------------------------- /day-34/library/src/models/Admin.js: -------------------------------------------------------------------------------- 1 | import { User } from './User.js'; 2 | 3 | export class Admin extends User { 4 | constructor(name, email) { 5 | super(name, email); 6 | } 7 | 8 | getRole() { 9 | return 'Admin'; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /day-34/library/src/models/User.js: -------------------------------------------------------------------------------- 1 | export class User { 2 | constructor(name, email) { 3 | this.id = crypto.randomUUID(); 4 | this.name = name; 5 | this.email = email; 6 | } 7 | 8 | getRole() { 9 | return 'User'; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /day-08/say-name.js: -------------------------------------------------------------------------------- 1 | // More Code here 2 | // ... 3 | // .. 4 | // . 5 | 6 | fucntion sayName() { 7 | var name = "someName"; 8 | console.log("The name is, ", name) 9 | } 10 | 11 | sayName(); 12 | 13 | // More Code here 14 | // ... 15 | // .. 16 | // . -------------------------------------------------------------------------------- /day-34/library/src/models/Book.js: -------------------------------------------------------------------------------- 1 | export class Book { 2 | constructor(title, author, genre) { 3 | this.id = crypto.randomUUID(); 4 | this.title = title; 5 | this.author = author; 6 | this.genre = genre; 7 | this.isAvailable = true; 8 | } 9 | } -------------------------------------------------------------------------------- /day-18/projects/toggle/ui.css: -------------------------------------------------------------------------------- 1 | .info { 2 | margin-top: 20px; 3 | font-size: 18px; 4 | color: #333; 5 | } 6 | .action { 7 | padding: 10px 20px; 8 | font-size: 16px; 9 | cursor: pointer; 10 | } 11 | 12 | .hidden { 13 | display: none; 14 | } 15 | -------------------------------------------------------------------------------- /day-01/first.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | My First JavaScript 5 | 6 | 7 |

Welcome to JavaScript!

8 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /day-23/promise.js: -------------------------------------------------------------------------------- 1 | function getPromise(URL) { 2 | return fetch(URL) 3 | .then((response) => { 4 | if (!response.ok) { 5 | throw new Error(`HTTP error ${response.status}`); 6 | } 7 | return response.json(); 8 | }); 9 | } 10 | -------------------------------------------------------------------------------- /day-02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Day 02 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /day-08/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /day-35/3-this/unhappy.js: -------------------------------------------------------------------------------- 1 | const user = { 2 | name: "Tapas", 3 | clicks: 0, 4 | handleClick: () => { 5 | document.getElementById("clickBtn").addEventListener("click", () => { 6 | this.clicks++; 7 | console.log(`User ${this.name} clicked ${this.clicks} times`); 8 | }); 9 | } 10 | }; 11 | 12 | user.handleClick(); -------------------------------------------------------------------------------- /day-09/fh.js: -------------------------------------------------------------------------------- 1 | // Invoke a function, chase() 2 | chase(); 3 | 4 | // Declare a function, chase() 5 | function chase() { 6 | console.log('Tom chases Jerry!'); 7 | // Invoke a function, caught(); 8 | caught(); 9 | } 10 | 11 | // Declare a function, caught() 12 | function caught() { 13 | console.log('Tom caught Jerry :(') 14 | } 15 | -------------------------------------------------------------------------------- /day-35/3-this/solution.js: -------------------------------------------------------------------------------- 1 | const user = { 2 | name: "Tapas", 3 | clicks: 0, 4 | handleClick: function () { 5 | document.getElementById("clickBtn").addEventListener("click", () => { 6 | this.clicks++; 7 | console.log(`${this.name} clicked ${this.clicks} times`); 8 | }); 9 | } 10 | }; 11 | 12 | user.handleClick(); -------------------------------------------------------------------------------- /day-19/projects/faq.css: -------------------------------------------------------------------------------- 1 | .faq-item { 2 | border: 1px solid #ddd; 3 | margin: 10px 0; 4 | padding: 10px; 5 | } 6 | 7 | .question { 8 | font-weight: bold; 9 | cursor: pointer; 10 | } 11 | 12 | .answer { 13 | display: none; 14 | margin-top: 5px; 15 | } 16 | 17 | .answer.show { 18 | display: block; 19 | } -------------------------------------------------------------------------------- /day-01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Script Loading 7 | 8 | 9 | 10 |
11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /day-27/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Event Loop 7 | 8 | 9 | 10 |

40 Days of JavaScript - Event Loop

11 | 12 | -------------------------------------------------------------------------------- /day-33/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Data Structures 7 | 8 | 9 | 10 |

Welcome to Day 33 of 40 Days of JS

11 | 12 | -------------------------------------------------------------------------------- /day-37/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Day 37: Web APIs 7 | 8 | 9 | 10 |

Day 37 - JavaScript Web APIS

11 | 12 | -------------------------------------------------------------------------------- /day-03/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Day 03 7 | 8 | 9 | 10 |

Welcome to the Day 03 of "40 Days of JavaScript!"

11 | 12 | -------------------------------------------------------------------------------- /day-05/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Day 05 7 | 8 | 9 | 10 |

Welcome to the Day 05 of "40 Days of JavaScript!"

11 | 12 | -------------------------------------------------------------------------------- /day-06/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Day 06 7 | 8 | 9 | 10 |

Welcome to the Day 06 of "40 Days of JavaScript!"

11 | 12 | -------------------------------------------------------------------------------- /day-07/rps/rps.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Rock Paper Scissors 7 | 8 | 9 | 10 |

Day 07 - Rock Paper Scissors Project

11 | 12 | -------------------------------------------------------------------------------- /day-04/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Day 04 7 | 8 | 9 | 10 |

Welcome to the Day 04 of "40 Days of JavaScript!"

11 | 12 | -------------------------------------------------------------------------------- /day-09/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Hoisting 7 | 8 | 9 | 10 |

Welcome to the Day 09 of "40 Days of JavaScript!"

11 | 12 | -------------------------------------------------------------------------------- /day-11/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Closure 7 | 8 | 9 | 10 |

Welcome to the Day 11 of "40 Days of JavaScript!"

11 | 12 | -------------------------------------------------------------------------------- /day-12/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Objects 7 | 8 | 9 | 10 |

Welcome to the Day 12 of "40 Days of JavaScript!"

11 | 12 | -------------------------------------------------------------------------------- /live/live-one/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Live 01 7 | 8 | 9 | 10 |

Welcome to the LIVE! - 40 Days of JavaScript by tapaScript

11 | 12 | -------------------------------------------------------------------------------- /day-26/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Common Promise Mistakes 7 | 8 | 9 | 10 |

40 Days of JavaScript - Common Promise Mistakes

11 | 12 | -------------------------------------------------------------------------------- /day-10/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Scope and Scope Chain 7 | 8 | 9 | 10 |

Welcome to the Day 10 of "40 Days of JavaScript!"

11 | 12 | -------------------------------------------------------------------------------- /day-12/oc.js: -------------------------------------------------------------------------------- 1 | console.log("Optional Chaining...") 2 | 3 | const employee = { 4 | salary: { 5 | bonus: 300 6 | } 7 | }; 8 | 9 | console.log(employee.department); // undefined 10 | 11 | //console.log(employee.department.name); // Error 12 | 13 | // const name = employee.department && employee.department.name 14 | 15 | const name = employee.department?.name 16 | console.log(name) -------------------------------------------------------------------------------- /day-13/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | The "this" keyword 7 | 8 | 9 | 10 | 11 |

Welcome to the Day 13 of "40 Days of JavaScript!"

12 | 13 | -------------------------------------------------------------------------------- /day-14/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | The Error Handling 7 | 8 | 9 | 10 | 11 |

Welcome to the Day 14 of "40 Days of JavaScript!"

12 | 13 | -------------------------------------------------------------------------------- /day-36/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | JavaScript Performance 7 | 8 | 9 | 10 |

Day 36: Performance Optimization in JavaScript and Best Practices

11 | 12 | -------------------------------------------------------------------------------- /day-07/secret-number/secret-number.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Guess The Secret Number 7 | 8 | 9 | 10 |

Day 07 - Guess The Secret Number Project

11 | 12 | -------------------------------------------------------------------------------- /day-36/memory-leak/leak.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Memory Leak 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /day-24/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | async/await 7 | 8 | 9 | 10 |

40 Days of JavaScript - async/await

11 | Weather App 12 | 13 | -------------------------------------------------------------------------------- /day-30/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | ES6 Classes 7 | 8 | 9 | 10 |

Day 30/40 Days of JavaScript

11 |

Today we are learning about JavaScript Classes

12 | 13 | -------------------------------------------------------------------------------- /day-35/5-order/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Track Order 7 | 8 | 9 | 10 | 11 |

05 - Tracking Order Problem

12 | 13 | -------------------------------------------------------------------------------- /day-29/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | OOP - The Concept 7 | 8 | 9 | 10 |

Welcome to 40 Days of JavaScript

11 |

We are Learning the OOP Concepts today!

12 | 13 | -------------------------------------------------------------------------------- /day-30/oop/composition.js: -------------------------------------------------------------------------------- 1 | // Composition 2 | 3 | // Definition: Use of other classes to build functionality. 4 | 5 | class Engine { 6 | start() { 7 | console.log("Engine started"); 8 | } 9 | } 10 | 11 | class Car { 12 | constructor() { 13 | this.engine = new Engine(); 14 | } 15 | 16 | startCar() { 17 | this.engine.start(); 18 | } 19 | } 20 | 21 | const car = new Car(); 22 | car.startCar(); -------------------------------------------------------------------------------- /day-35/2-buttons/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Calculate Discount 7 | 8 | 9 | 10 | 11 |

02 - Closure Confusion Problem

12 | 13 | -------------------------------------------------------------------------------- /api/inventory/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "inventory", 3 | "version": "1.0.0", 4 | "description": "This is an inventory API", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "npx json-server db.json -p 3001" 8 | }, 9 | "keywords": [ 10 | "json", 11 | "api" 12 | ], 13 | "author": "tapaScript", 14 | "license": "MIT", 15 | "dependencies": { 16 | "json-server": "^1.0.0-beta.3" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /day-19/custom/custom-event.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Custom Events 7 | 8 | 9 | 10 |

Welcome!

11 | 12 | 13 | -------------------------------------------------------------------------------- /day-35/4-payment/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Process Payment 7 | 8 | 9 | 10 | 11 |

04 - Process Payment Problem

12 | 13 | -------------------------------------------------------------------------------- /day-18/index.css: -------------------------------------------------------------------------------- 1 | .main-class { 2 | font-size: large; 3 | padding: 2px; 4 | border: 2px solid red; 5 | background-color: pink; 6 | border-radius: 5px; 7 | } 8 | 9 | .secondary-class { 10 | font-size: large; 11 | padding: 2px; 12 | border: 2px solid green; 13 | background-color: teal; 14 | border-radius: 5px; 15 | } 16 | 17 | .layout { 18 | display: flex; 19 | flex-direction: column; 20 | } -------------------------------------------------------------------------------- /day-35/1-discount/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Calculate Discount 7 | 8 | 9 | 10 | 11 |

01 - Calculate Discount Problem

12 | 13 | -------------------------------------------------------------------------------- /day-37/geolocation/geo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Geo Location 8 | 9 | 10 | 11 | 12 | 13 |

Location info will appear here...

14 | 15 | 16 | -------------------------------------------------------------------------------- /day-30/oop/encapsulation.js: -------------------------------------------------------------------------------- 1 | // Encapsulation 2 | 3 | // Definition: Group related properties and methods, and restrict direct access to internal data. 4 | // In Code: Use # for private fields. 5 | 6 | class Car { 7 | #speed = 0; 8 | 9 | accelerate() { 10 | this.#speed += 10; 11 | } 12 | 13 | getSpeed() { 14 | return this.#speed; 15 | } 16 | } 17 | 18 | const car = new Car(); 19 | car.accelerate(); 20 | console.log(car.getSpeed()); // 10 -------------------------------------------------------------------------------- /day-07/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Day 07 8 | 9 | 10 | 11 |
12 | Rock Paper Scissors 13 | 14 | Guess The Secret Number Name 15 |
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /day-37/task.md: -------------------------------------------------------------------------------- 1 | # Tasks 2 | 3 | Please complete the following tasks and post them on the tapaScript Discord under "40 Days of JavaScript". 4 | 5 | The only task you have now is to start contributing to an Open Source Project, called `Web APIs Playground`. 6 | 7 | Please check out the video session to understand how to get started. Looking forward to see your contributions soon. 8 | 9 | > [Web APIs Playground](https://github.com/atapas/webapis-playground) 10 | -------------------------------------------------------------------------------- /day-35/3-this/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Unhappy Button Click 7 | 8 | 9 | 10 | 11 |

03 - Unhappy Button Problem

12 | 13 | 14 | -------------------------------------------------------------------------------- /day-37/notification/noti.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Notifications 8 | 9 | 10 | 11 | 12 |

Send a Web Notification

13 | 14 |

15 | 16 | 17 | -------------------------------------------------------------------------------- /day-22/lib/query.js: -------------------------------------------------------------------------------- 1 | // You no need to learn this method now. We will leaern it deeper in the future sessions. 2 | function query(endpoint, callback, options) { 3 | fetch(`http://localhost:3000/${endpoint}`, options) 4 | .then(function (response) { 5 | return response.json(); 6 | }) 7 | .then(function (json) { 8 | setTimeout(() => { 9 | callback(json) 10 | }, 2000); 11 | }); 12 | } 13 | -------------------------------------------------------------------------------- /day-30/oop/polymorphism.js: -------------------------------------------------------------------------------- 1 | // Polymorphism 2 | 3 | // Definition: Methods behave differently based on object type. 4 | // In Code: Override a method in child class. 5 | 6 | class Car { 7 | drive() { 8 | console.log("Driving on fuel"); 9 | } 10 | } 11 | 12 | class ElectricCar extends Car { 13 | drive() { 14 | console.log("Driving on electricity"); 15 | } 16 | } 17 | 18 | const myCars = [new Car(), new ElectricCar()]; 19 | myCars.forEach(car => car.drive()); -------------------------------------------------------------------------------- /day-19/default/event-default.js: -------------------------------------------------------------------------------- 1 | console.log("Event Defaults"); 2 | 3 | document.getElementById("websiteLink").addEventListener("click", function (e) { 4 | console.log("Navigating to website!"); 5 | // e.preventDefault(); 6 | // console.log("Default link behavior prevented!"); 7 | }); 8 | 9 | document.getElementById("loginForm").addEventListener("submit", function (e) { 10 | // e.preventDefault(); 11 | console.log("Form submission prevented!"); 12 | }); 13 | -------------------------------------------------------------------------------- /day-23/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Promise - PizzaHub 7 | 8 | 9 | 10 | 11 |

40 Days of JavaScript - Promises

12 | PizzaHub with Promises 13 | 14 | -------------------------------------------------------------------------------- /day-24/weather/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Weather Snap 6 | 7 | 8 | 9 | 10 |

🌤️ Weather App

11 | 12 | 13 |
14 |
15 | 16 | -------------------------------------------------------------------------------- /day-13/examples.js: -------------------------------------------------------------------------------- 1 | console.log("**** Examples ****") 2 | 3 | const user = { 4 | name: "Tapas", 5 | greet: function () { 6 | const inner = () => { 7 | console.log(`Hello, ${this.name}!`); 8 | } 9 | inner(); 10 | }, 11 | }; 12 | 13 | user.greet(); 14 | 15 | 16 | 17 | const obj = { 18 | name: "John", 19 | greet: function () { 20 | console.log(`Hello, ${this.name}!`); 21 | }, 22 | }; 23 | 24 | const greetFn = obj.greet; 25 | 26 | greetFn.call(obj) 27 | -------------------------------------------------------------------------------- /day-37/storage/session.js: -------------------------------------------------------------------------------- 1 | const textarea = document.getElementById('messageInput'); 2 | const draftNotice = document.getElementById('draftNotice'); 3 | 4 | const savedDraft = sessionStorage.getItem('draft'); 5 | if (savedDraft) { 6 | textarea.value = savedDraft; 7 | draftNotice.textContent = 'Draft loaded from sessionStorage'; 8 | } 9 | 10 | // Save on input 11 | textarea.addEventListener('input', () => { 12 | sessionStorage.setItem('draft', textarea.value); 13 | draftNotice.textContent = 'Draft saved!'; 14 | }); -------------------------------------------------------------------------------- /day-34/library/src/services/LibraryService.js: -------------------------------------------------------------------------------- 1 | 2 | export class LibrarySystem { 3 | #books; 4 | 5 | constructor() { 6 | this.#books = []; 7 | } 8 | 9 | addBook(book) { 10 | this.#books.push(book); 11 | } 12 | 13 | getAvailableBooks() { 14 | return this.#books.filter(book => book.isAvailable); 15 | } 16 | 17 | getAllBooks() { 18 | return this.#books; 19 | } 20 | 21 | getBookById(id) { 22 | return this.#books.find(b => b.id === id); 23 | } 24 | } -------------------------------------------------------------------------------- /day-40/splitter/src/models/user.js: -------------------------------------------------------------------------------- 1 | export class User { 2 | constructor(name) { 3 | if (!name || typeof name !== 'string') { 4 | throw new Error('User name must be a non-empty string'); 5 | } 6 | this.name = name.trim(); 7 | this.id = this.generateId(); 8 | } 9 | 10 | generateId() { 11 | return crypto.randomUUID(); 12 | } 13 | 14 | toJSON() { 15 | return { 16 | id: this.id, 17 | name: this.name 18 | }; 19 | } 20 | } -------------------------------------------------------------------------------- /day-25/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | The fetch() API 7 | 8 | 9 | 10 |

40 Days of JavaScript - The fetch() API

11 |
12 |

Cancel fetch demo

13 | 14 | 15 |
16 | 17 | -------------------------------------------------------------------------------- /day-36/memory-leak/leak.js: -------------------------------------------------------------------------------- 1 | function showModal() { 2 | const modal = document.getElementById("modal"); 3 | modal.innerHTML = `

This is a modal

`; 4 | 5 | document.body.addEventListener("click", () => { 6 | console.log("Body clicked"); 7 | }); 8 | 9 | // Clean it up after 5 seconds (just an example) 10 | setTimeout(() => { 11 | document.body.removeEventListener("click", handleBodyClick); 12 | }, 5000); 13 | } 14 | 15 | document.getElementById("open").addEventListener("click", showModal); 16 | -------------------------------------------------------------------------------- /day-37/storage/session.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Session Storage 8 | 9 | 10 | 11 | 12 |
13 | 17 |
18 |

19 | 20 | 21 | -------------------------------------------------------------------------------- /day-37/clipboard/clip.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Copy to Clipboard 8 | 9 | 10 | 11 | 12 |
13 | 14 |
15 | 16 |

17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /day-22/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Callback - PizzaHub 7 | 8 | 9 | 10 | 11 |
12 |

PizzaHub - Order Here

13 |

14 |

15 |

16 |

17 |
18 | 19 | -------------------------------------------------------------------------------- /day-23/pizzahub/ph.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Promise - PizzaHub 7 | 8 | 9 | 10 | 11 |
12 |

PizzaHub - Order Here

13 |

14 |

15 |

16 |

17 |
18 | 19 | -------------------------------------------------------------------------------- /day-24/pizzahub/ph.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Promise - PizzaHub 7 | 8 | 9 | 10 | 11 |
12 |

PizzaHub - Order Here

13 |

14 |

15 |

16 |

17 |
18 | 19 | -------------------------------------------------------------------------------- /day-07/task.md: -------------------------------------------------------------------------------- 1 | # Tasks 2 | Please complete the following tasks and post them on the tapaScript Discord under "40 Days of JavaScript". 3 | 4 | > **DO NOT USE AI to FIND ANSWERS**. If you are stuck, let's discuss it on DISCORD and learn. Also, please note that none of the answers need you to create any UI. Just focus on the logic building and print the output on the browser console. 5 | 6 | ## 1. Change the RPS Project 7 | Change the if-else to switch-case as asked in the video(at 15:42). 8 | 9 | ## 2. Build the Secret Number Guessing Game 10 | Create the project as explained in the video. -------------------------------------------------------------------------------- /day-08/call-stack.js: -------------------------------------------------------------------------------- 1 | console.log("Inside Global Execution Context"); 2 | var a = 5; 3 | function testMe() { 4 | console.log("Inside testMe Execution context"); 5 | var b = 10; 6 | var user = { 7 | name: "tapas", 8 | country: "India" 9 | } 10 | function testAgain() { 11 | console.log("Inside testAgain Execution Context"); 12 | console.log("Exiting testAgain Execution Context"); 13 | } 14 | testAgain(); 15 | console.log("Exiting testMe execution context"); 16 | } 17 | testMe(); 18 | console.log("Exiting global execution context"); -------------------------------------------------------------------------------- /day-23/pizzahub/lib/query.js: -------------------------------------------------------------------------------- 1 | function query(endpoint, options) { 2 | return new Promise((resolve, reject) => { 3 | setTimeout(() => { 4 | fetch(`http://localhost:3000/${endpoint}`, options) 5 | .then((response) => { 6 | if (!response.ok) { 7 | throw new Error(`HTTP error ${response.status}`); 8 | } 9 | return response.json(); 10 | }) 11 | .then(resolve) 12 | .catch(reject); 13 | }, 2000); 14 | }); 15 | } 16 | -------------------------------------------------------------------------------- /day-24/pizzahub/lib/query.js: -------------------------------------------------------------------------------- 1 | function query(endpoint, options) { 2 | return new Promise((resolve, reject) => { 3 | setTimeout(() => { 4 | fetch(`http://localhost:3000/${endpoint}`, options) 5 | .then((response) => { 6 | if (!response.ok) { 7 | throw new Error(`HTTP error ${response.status}`); 8 | } 9 | return response.json(); 10 | }) 11 | .then(resolve) 12 | .catch(reject); 13 | }, 2000); 14 | }); 15 | } 16 | -------------------------------------------------------------------------------- /day-09/task.md: -------------------------------------------------------------------------------- 1 | # Tasks 2 | Please complete the following tasks and post them on the tapaScript Discord under "40 Days of JavaScript". 3 | 4 | > **DO NOT USE AI to FIND ANSWERS**. If you are stuck, let's discuss it on DISCORD and learn. Also, please note that none of the answers need you to create any UI. Just focus on the logic building and print the output on the browser console. 5 | 6 | ## 1. Expian Temporal Dead Zone by creating 3 variables in side a block. Post the code as your answer. 7 | 8 | ## 2. Explain Variable and Function Hoisting with Example. Post the code as your answer. 9 | 10 | -------------------------------------------------------------------------------- /day-30/oop/abstraction.js: -------------------------------------------------------------------------------- 1 | // Abstraction 2 | 3 | // Definition: Hiding internal details and showing only essential features. 4 | // In Code: Provide public methods like startEngine() while hiding what happens inside. 5 | 6 | class Car { 7 | startEngine() { 8 | this.#injectFuel(); 9 | this.#ignite(); 10 | console.log("Engine started"); 11 | } 12 | 13 | #injectFuel() { 14 | console.log("Fuel injected"); 15 | } 16 | 17 | #ignite() { 18 | console.log("Spark generated"); 19 | } 20 | } 21 | 22 | // Only startEngine() is visible to users; internal complexity is abstracted. -------------------------------------------------------------------------------- /day-21/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Quiz App 7 | 8 | 9 | 10 | 11 |
12 |
⏱️ 15
13 |

Loading...

14 |
15 | 16 |
17 |
18 | 19 | -------------------------------------------------------------------------------- /day-37/storage/ls.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 13 | Local Storage 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |

Current Theme: Light

22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /day-18/projects/toggle/ui.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Toggle 8 | 9 | 10 | 11 | 12 | 13 |

Toggle Paragraph Example

14 | 15 |

This is a paragraph that can be shown or hidden by clicking the button above.

16 | 17 | 18 | -------------------------------------------------------------------------------- /day-16/index.js: -------------------------------------------------------------------------------- 1 | 2 | const print = function() { 3 | const name = document.getElementById('m_name').value; 4 | const wish = document.getElementById('m_wish').value; 5 | 6 | const message = 'Hello ' 7 | + name 8 | + ', Your wish `' 9 | + wish 10 | + '` may come true!'; 11 | logger(message); 12 | document.getElementById('output').innerHTML = '' + message + ''; 13 | } 14 | 15 | const logger = function(text) { 16 | console.log('**** I am a logger function ****'); 17 | console.log(text); 18 | } -------------------------------------------------------------------------------- /day-34/library/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "js-base-setup", 3 | "version": "1.0.0", 4 | "description": "javascript setup with tailwindcss and vite", 5 | "main": "main.js", 6 | "scripts": { 7 | "start": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "keywords": [ 12 | "javascript", 13 | "base" 14 | ], 15 | "author": "tapaScript | learn@tapascript.io", 16 | "license": "MIT", 17 | "type": "module", 18 | "dependencies": { 19 | "@tailwindcss/cli": "^4.1.2", 20 | "@tailwindcss/vite": "^4.1.7", 21 | "tailwindcss": "^4.1.7", 22 | "vite": "^6.3.5" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /day-40/splitter/src/utils/toastUtil.js: -------------------------------------------------------------------------------- 1 | export function showSuccessToast(message) { 2 | Toastify({ 3 | text: message, 4 | duration: 3000, 5 | gravity: "bottom", 6 | position: "right", 7 | stopOnFocus: true, 8 | }).showToast(); 9 | } 10 | 11 | export function showErrorToast(message) { 12 | Toastify({ 13 | text: message, 14 | duration: 3000, 15 | gravity: "bottom", 16 | position: "right", 17 | stopOnFocus: true, 18 | style: { 19 | background: "linear-gradient(to right, #8B0000, #FFCCCB)", 20 | }, 21 | }).showToast(); 22 | } 23 | -------------------------------------------------------------------------------- /day-28/country-explorer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "js-base-setup", 3 | "version": "1.0.0", 4 | "description": "javascript setup with tailwindcss and vite", 5 | "main": "main.js", 6 | "scripts": { 7 | "start": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "keywords": [ 12 | "javascript", 13 | "base" 14 | ], 15 | "author": "tapaScript | learn@tapascript.io", 16 | "license": "MIT", 17 | "type": "module", 18 | "dependencies": { 19 | "@tailwindcss/cli": "^4.1.2", 20 | "@tailwindcss/vite": "^4.1.7", 21 | "tailwindcss": "^4.1.7", 22 | "vite": "^6.3.5" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /day-40/splitter/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "splitter", 3 | "version": "1.0.0", 4 | "description": "A JavaScript App to help you with your expense settlements", 5 | "main": "main.js", 6 | "scripts": { 7 | "start": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview" 10 | }, 11 | "keywords": [ 12 | "javascript", 13 | "base" 14 | ], 15 | "author": "tapaScript | learn@tapascript.io", 16 | "license": "MIT", 17 | "type": "module", 18 | "dependencies": { 19 | "@tailwindcss/cli": "^4.1.2", 20 | "@tailwindcss/vite": "^4.1.7", 21 | "tailwindcss": "^4.1.7", 22 | "vite": "^6.3.5" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /day-18/projects/todo/ui.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | TODO 8 | 9 | 10 | 11 | 12 | 13 |

Task Manager

14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /day-36/throttle/scroll.js: -------------------------------------------------------------------------------- 1 | function throttle(fn, delay) { 2 | let lastCall = 0; 3 | return function (...args) { 4 | const now = Date.now(); 5 | if (now - lastCall >= delay) { 6 | lastCall = now; 7 | fn.apply(this, args); 8 | } 9 | }; 10 | } 11 | 12 | 13 | function handleScroll() { 14 | const scrollY = window.scrollY; 15 | document.getElementById("tracker").textContent = `Scroll Y: ${scrollY}`; 16 | console.log("Scroll event fired at", new Date().toLocaleTimeString()); 17 | } 18 | 19 | const throttledScroll = throttle(handleScroll, 400); 20 | 21 | window.addEventListener("scroll", throttledScroll); 22 | -------------------------------------------------------------------------------- /live/lets-code/inventory/README.md: -------------------------------------------------------------------------------- 1 | # Inventory Dashboard 2 | 3 | Let us create an Invetory Dashboard together. 4 | 5 | ![Inventory Dashboard](image.png) 6 | 7 | ## Run the API Server 8 | 9 | To run the API server, 10 | 11 | ```bash 12 | cd api/inventory 13 | npm install 14 | npm run start 15 | ``` 16 | 17 | The API Server will run on `localhost:3001`. 18 | 19 | ## Run the UI 20 | 21 | To run the UI, 22 | 23 | ```bash 24 | npm install 25 | npm run start 26 | ``` 27 | 28 | The UI will run on `localhost:3000`. 29 | 30 | ## LIVE Video 31 | 32 | Please find the LIVE CODING video here: 33 | 34 | [![live-lets-code](./banner.png)](https://www.youtube.com/live/Ub1a28GYMuA "Video") 35 | -------------------------------------------------------------------------------- /day-37/index.js: -------------------------------------------------------------------------------- 1 | 2 | // - What will we learning today? 3 | 4 | // 1. What are Web APIs? 5 | // 2. How Web APIs Work? 6 | // 3. Core Web APIs 7 | // a. DOM 8 | // b. Events 9 | // c. Timer 10 | // d. Fetch 11 | // e. Console 12 | // f. Copy 13 | // g. Storage 14 | // h. Geolocation 15 | // i. Notification 16 | // j. EyeDropper 17 | // ... and 100s more. 18 | // 4. An Open Source Project to Contribute 19 | 20 | 21 | // 1. What are Web APIs? 22 | 23 | /* 24 | A Web API in JavaScript is a browser-provided interface that lets your JavaScript code interact with features outside the core language — like the DOM, network, clipboard, camera, etc. 25 | */ -------------------------------------------------------------------------------- /day-19/default/event-default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Event Default 8 | 9 | 10 | 11 | 12 | Go to Website 13 | 14 |
15 | 16 |
17 | 18 | 19 | 20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /day-35/2-buttons/solution.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | function createButtons() { 4 | const buttons = []; 5 | 6 | for (let i = 1; i <= 3; i++) { 7 | buttons.push(function () { 8 | console.log(`Button ${i} clicked`); 9 | }); 10 | } 11 | 12 | return buttons; 13 | } 14 | 15 | const [btn1, btn2, btn3] = createButtons(); 16 | 17 | btn1(); // ? 18 | btn2(); // ? 19 | btn3(); // ? 20 | 21 | 22 | /* 23 | 24 | Now let gives each iteration its own block scope — each closure captures a different i. 25 | 26 | In the original code, var is function-scoped — all the closures reference the same i, which ends up as 4 after the loop ends. That’s why all the buttons log: 27 | 28 | Button 4 clicked 29 | 30 | */ 31 | -------------------------------------------------------------------------------- /api/blog/server.js: -------------------------------------------------------------------------------- 1 | const jsonServer = require("json-server"); 2 | const fs = require("fs"); 3 | const path = require("path"); 4 | 5 | const server = jsonServer.create(); 6 | const router = jsonServer.router("db.json"); 7 | const middlewares = jsonServer.defaults(); 8 | 9 | server.use(middlewares); 10 | server.use(jsonServer.bodyParser); 11 | 12 | server.post("/login", (req, res) => { 13 | console.log("Headers:", req.headers); 14 | console.log("Body:", req.body); 15 | 16 | res.json({ 17 | message: "LoggedIn successfully!" 18 | }); 19 | }); 20 | 21 | server.use(router); 22 | 23 | server.listen(3000, () => { 24 | console.log("✅ JSON Server running at http://localhost:3000"); 25 | }); 26 | -------------------------------------------------------------------------------- /api/blog/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "blog", 3 | "version": "1.0.0", 4 | "description": "The Blog API Services used in the tutorials", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "node server.js" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/tapascript/40-days-of-javascript.git" 12 | }, 13 | "keywords": [ 14 | "API" 15 | ], 16 | "author": "Tapas Adhikary | tapaScript", 17 | "license": "MIT", 18 | "bugs": { 19 | "url": "https://github.com/tapascript/40-days-of-javascript/issues" 20 | }, 21 | "homepage": "https://github.com/tapascript/40-days-of-javascript#readme", 22 | "dependencies": { 23 | "json-server": "0.17.3" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /day-27/index.js: -------------------------------------------------------------------------------- 1 | // JavaScript is Synchronous 2 | // There can be async behaviours 3 | // - With Browser APIs/Web APIs - setTimeout, setInterval 4 | // - With Promises 5 | // - With Event Handlers 6 | 7 | // Event Loop 8 | // - Call Stack 9 | // - Web APIs 10 | // - Callback Queue: 11 | // - MicroTask Queue/Job Queue: 12 | // - Event Loop: 13 | 14 | function f1() { 15 | console.log("f1"); 16 | } 17 | 18 | function f2() { 19 | console.log("f2"); 20 | } 21 | 22 | function main() { 23 | console.log("main"); 24 | setTimeout(f1, 0); 25 | new Promise((resolve, reject) => { 26 | resolve("I am a promise!"); 27 | }).then((resolve) => console.log(resolve)); 28 | f2(); 29 | } 30 | main(); 31 | 32 | 33 | -------------------------------------------------------------------------------- /day-37/storage/ls.js: -------------------------------------------------------------------------------- 1 | const toggleBtn = document.getElementById('toggleTheme'); 2 | const themeStatus = document.getElementById('themeStatus'); 3 | 4 | 5 | const savedTheme = localStorage.getItem('theme') || 'light'; 6 | document.body.className = savedTheme; 7 | themeStatus.textContent = `Current Theme: ${capitalize(savedTheme)}`; 8 | 9 | toggleBtn.addEventListener('click', () => { 10 | const newTheme = document.body.className === 'dark' ? 'light' : 'dark'; 11 | 12 | document.body.className = newTheme; 13 | localStorage.setItem('theme', newTheme); 14 | themeStatus.textContent = `Current Theme: ${capitalize(newTheme)}`; 15 | }); 16 | 17 | function capitalize(str) { 18 | return str.charAt(0).toUpperCase() + str.slice(1); 19 | } -------------------------------------------------------------------------------- /day-19/projects/faq.js: -------------------------------------------------------------------------------- 1 | console.log("Project: FAQ"); 2 | 3 | 4 | 5 | const faq = document.querySelector(".faq"); 6 | 7 | // Event Delegation: Handle clicks on all questions 8 | faq.addEventListener("click", function (e) { 9 | if (e.target.classList.contains("question")) { 10 | e.stopPropagation(); 11 | 12 | const currentItem = e.target.parentElement; 13 | const currentAnswer = currentItem.querySelector(".answer"); 14 | 15 | currentAnswer.classList.toggle("show"); 16 | } 17 | }); 18 | 19 | // Click outside to collapse all 20 | document.addEventListener("click", function () { 21 | const allAnswers = document.querySelectorAll(".answer.show"); 22 | allAnswers.forEach(answer => answer.classList.remove("show")); 23 | }); -------------------------------------------------------------------------------- /day-30/oop/inheritance.js: -------------------------------------------------------------------------------- 1 | // Inheritance 2 | 3 | // Definition: Child classes inherit behavior from a parent class. 4 | 5 | class Car { 6 | constructor(make, model) { 7 | this.make = make; 8 | this.model = model; 9 | } 10 | drive() { 11 | console.log("Driving on fuel"); 12 | } 13 | } 14 | 15 | class ElectricCar extends Car { 16 | constructor(make, model, batteryLevel) { 17 | super(make, model); 18 | this.batteryLevel = batteryLevel; 19 | } 20 | 21 | charge() { 22 | console.log("Charging battery..."); 23 | } 24 | } 25 | 26 | const tesla = new ElectricCar("Tesla", "Model S", 90); 27 | tesla.drive(); // Inherited from Car 28 | tesla.charge(); // Own method 29 | -------------------------------------------------------------------------------- /api/pizzahub/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "pizzahub", 3 | "version": "1.0.0", 4 | "description": "The pizzahub API Services used in the tutorials", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "node server.js" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/tapascript/40-days-of-javascript.git" 12 | }, 13 | "keywords": [ 14 | "API" 15 | ], 16 | "author": "Tapas Adhikary | tapaScript", 17 | "license": "MIT", 18 | "bugs": { 19 | "url": "https://github.com/tapascript/40-days-of-javascript/issues" 20 | }, 21 | "homepage": "https://github.com/tapascript/40-days-of-javascript#readme", 22 | "dependencies": { 23 | "json-server": "0.17.3" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /live/lets-code/inventory/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "js-base-setup", 3 | "version": "1.0.0", 4 | "description": "javascript setup", 5 | "main": "main.js", 6 | "scripts": { 7 | "start": "concurrently \"serve pages -p 3000\" \"npx @tailwindcss/cli -i ./pages/input.css -o ./pages/output.css --watch\"", 8 | "build": "npx @tailwindcss/cli -i ./pages/input.css -o ./pages/output.css" 9 | }, 10 | "keywords": [ 11 | "javascript", 12 | "base" 13 | ], 14 | "author": "tapaScript | learn@tapascript.io", 15 | "license": "MIT", 16 | "devDependencies": { 17 | "concurrently": "^9.1.2", 18 | "serve": "^14.2.4" 19 | }, 20 | "dependencies": { 21 | "@tailwindcss/cli": "^4.1.2", 22 | "tailwindcss": "^4.1.2" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /day-35/4-payment/solution.js: -------------------------------------------------------------------------------- 1 | function processPayment(paymentData) { 2 | try { 3 | if (!paymentData.amount) throw new Error("Invalid amount!"); 4 | if (!paymentData.method) throw new Error("Payment method missing!"); 5 | 6 | simulatePayment(paymentData); 7 | 8 | console.log("Payment processed successfully!"); 9 | } catch (error) { 10 | console.error("Error:", error instanceof Error ? error.message : error); 11 | } finally { 12 | console.log("Payment attempt logged."); 13 | } 14 | } 15 | 16 | function simulatePayment(data) { 17 | if (Math.random() > 0.5) { 18 | throw new Error("Payment gateway timeout!"); 19 | } 20 | } 21 | 22 | processPayment({ amount: 100, method: "card" }); 23 | // processPayment({ amount: 100 }); 24 | // processPayment({ method: "upi" }); -------------------------------------------------------------------------------- /day-35/4-payment/process-payment.js: -------------------------------------------------------------------------------- 1 | function processPayment(paymentData) { 2 | try { 3 | if (!paymentData.amount) throw "Invalid amount!"; 4 | if (!paymentData.method) throw new Error("Payment method missing!"); 5 | 6 | simulatePayment(paymentData); 7 | 8 | console.log("Payment processed successfully!"); 9 | } catch (error) { 10 | console.error("Error:", error.message); 11 | } finally { 12 | console.log("Payment attempt logged."); 13 | } 14 | } 15 | 16 | function simulatePayment(data) { 17 | // Simulate random failure 18 | if (Math.random() > 0.5) { 19 | throw new Error("Payment gateway timeout!"); 20 | } 21 | } 22 | 23 | processPayment({ amount: 100, method: "card" }); 24 | // processPayment({ amount: 100 }); 25 | // processPayment({ method: "upi" }); 26 | 27 | -------------------------------------------------------------------------------- /day-37/clipboard/clip.js: -------------------------------------------------------------------------------- 1 | const copyBtn = document.getElementById("copyBtn"); 2 | const textArea = document.getElementById("textToCopy"); 3 | const statusMsg = document.getElementById("statusMsg"); 4 | 5 | copyBtn.addEventListener("click", async () => { 6 | try { 7 | const text = textArea.value; 8 | if (!navigator.clipboard) { 9 | console.warn('Clipboard API not supported on this browser.'); 10 | return; 11 | } 12 | await navigator.clipboard.writeText(text); 13 | statusMsg.textContent = "Text copied to clipboard!"; 14 | statusMsg.style.color = "green"; 15 | } catch (err) { 16 | statusMsg.textContent = "Failed to copy!"; 17 | statusMsg.style.color = "red"; 18 | console.error("Copy failed:", err); 19 | } 20 | }); 21 | -------------------------------------------------------------------------------- /day-36/throttle/scroll.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Throttle: Scroll 7 | 25 | 26 | 27 | 28 |
Scroll Y: 0
29 | 30 | 31 | -------------------------------------------------------------------------------- /day-37/notification/noti.js: -------------------------------------------------------------------------------- 1 | const notifyBtn = document.getElementById('notifyBtn'); 2 | const statusMsg = document.getElementById('statusMsg'); 3 | 4 | notifyBtn.addEventListener('click', async () => { 5 | if (!('Notification' in window)) { 6 | statusMsg.textContent = 'Notifications not supported in this browser.'; 7 | return; 8 | } 9 | 10 | const permission = await Notification.requestPermission(); 11 | 12 | if (permission === 'granted') { 13 | new Notification('Hello from TapasScript!', { 14 | body: 'This is your notification demo!' 15 | }); 16 | statusMsg.textContent = '✅ Notification sent!'; 17 | } else if (permission === 'denied') { 18 | statusMsg.textContent = '❌ Notification permission denied.'; 19 | } else { 20 | statusMsg.textContent = 'Notification permission not decided.'; 21 | } 22 | }); -------------------------------------------------------------------------------- /day-16/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Wish - Debugging App 4 | 5 | 6 | 7 | 8 | 9 |
10 |

Let's Wish

11 |
12 |
13 |

14 |
15 |

16 | 17 |
18 | 19 |
20 |
21 | 22 | -------------------------------------------------------------------------------- /day-35/2-buttons/clickButtons.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | function createButtons() { 4 | const buttons = []; 5 | 6 | for (var i = 1; i <= 3; i++) { 7 | buttons.push(function () { 8 | console.log(`Button ${i} clicked`); 9 | }); 10 | } 11 | 12 | return buttons; 13 | } 14 | 15 | const [btn1, btn2, btn3] = createButtons(); 16 | 17 | btn1(); // ? 18 | btn2(); // ? 19 | btn3(); // ? 20 | 21 | 22 | /* 23 | 24 | What’s the Expected Behavior? 25 | 26 | Each button should log: 27 | 28 | Button 1 clicked 29 | Button 2 clicked 30 | Button 3 clicked 31 | 32 | But it doesn’t. Why? 33 | 34 | */ 35 | 36 | /* 37 | 38 | Hint: 39 | 40 | This is a classic closure inside a loop issue. Ask yourself: 41 | 42 | - What does var do in a loop? 43 | - Does the function remember the value at the time it was created? 44 | - What if you replace var with let? 45 | 46 | */ 47 | -------------------------------------------------------------------------------- /api/blog/db.json: -------------------------------------------------------------------------------- 1 | { 2 | "posts": [ 3 | { 4 | "title": "What is 40 Days of JavaScript?", 5 | "views": 160, 6 | "id": "a9057951-515e-3da2-9793-af29719d0e33" 7 | }, 8 | { 9 | "id": "a9057951-215e-4da2-9793-af29719d0e33", 10 | "title": "How to Split a String?", 11 | "views": 201 12 | }, 13 | { 14 | "id": "4b9d7b5c-4a6d-4149-988e-7536ed90a518", 15 | "title": "How to use fetch() API for POST?", 16 | "views": 0 17 | } 18 | ], 19 | "comments": [ 20 | { 21 | "id": "1", 22 | "text": "Great Post", 23 | "postId": "a9057951-515e-3da2-9793-af29719d0e33" 24 | }, 25 | { 26 | "id": "2", 27 | "text": "Learned something new", 28 | "postId": "a9057951-515e-3da2-9793-af29719d0e33" 29 | } 30 | ], 31 | "profile": { 32 | "name": "tapaScript" 33 | } 34 | } -------------------------------------------------------------------------------- /day-15/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | The Array Master Course 8 | 9 | 10 | 11 | 12 | 13 |

Welcome to the Day 15 of "40 Days of JavaScript!"

14 | 15 |
16 | 30 |
31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /day-34/library/src/models/Member.js: -------------------------------------------------------------------------------- 1 | import { User } from "./User.js"; 2 | 3 | const borrowedMap = new WeakMap(); 4 | 5 | export class Member extends User { 6 | constructor(name, email) { 7 | super(name, email); 8 | const borrowedFromStorage = JSON.parse(localStorage.getItem('borrowedBooks')) || []; 9 | borrowedMap.set(this, borrowedFromStorage); 10 | } 11 | 12 | borrowBook(book) { 13 | const borrowed = borrowedMap.get(this); 14 | borrowed.push(book); 15 | book.isAvailable = false; 16 | localStorage.setItem('borrowedBooks', JSON.stringify(borrowed)); 17 | } 18 | 19 | returnBook(bookId) { 20 | // TODO: Implement This. It is your task. 21 | } 22 | 23 | getBorrowedBooks() { 24 | return borrowedMap.get(this); 25 | } 26 | 27 | getRole() { 28 | return 'Member'; 29 | } 30 | } -------------------------------------------------------------------------------- /day-38/index.js: -------------------------------------------------------------------------------- 1 | 2 | // - What Will We Learn Today 3 | 4 | // 1. JavaScript Memory Management 5 | // 2. Reachability Theory 6 | // 3. Garbage Collection(GC) 7 | // 4. Resources to Go More Depth 8 | 9 | // Reachability 10 | 11 | let gb = 10; 12 | 13 | function someFunc(b) { 14 | let a; 15 | someOtherFunction() 16 | return a + 30; 17 | } 18 | 19 | function someOtherFunction() { 20 | let c = {}; 21 | } 22 | 23 | // roots 24 | 25 | let employee = {salary: 10000}; 26 | 27 | employee = null; 28 | 29 | 30 | function createCycle(objA, objB) { 31 | objA.ref = objB; // objA references objB 32 | objB.ref = objA; // objB references objA 33 | 34 | return { 35 | "A": objA, 36 | "B": objB 37 | } 38 | } 39 | 40 | const cycle = createCycle({sal: 100}, {sal: 200}); 41 | 42 | 43 | const dept = { 44 | name: "finance" 45 | } 46 | 47 | const department = dept; 48 | -------------------------------------------------------------------------------- /day-16/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #000000; 3 | color: #ffffff; 4 | font-family: "Roboto Mono", monospace; 5 | } 6 | 7 | .container { 8 | padding: 30px; 9 | } 10 | 11 | .btn { 12 | font-size: 1em; 13 | padding: 0.25em 1em; 14 | border: 2px solid #dbd270; 15 | border-radius: 3px; 16 | background: white; 17 | color: palevioletred; 18 | cursor: pointer; 19 | } 20 | 21 | .content { 22 | align-items: center; 23 | margin-top: 30px; 24 | } 25 | 26 | .message { 27 | background: palevioletred; 28 | color: white; 29 | padding: 5px; 30 | text-align: center; 31 | font-size: 22px; 32 | } 33 | 34 | .input { 35 | margin-top: 10px; 36 | border: 1px solid #ccc; 37 | border-radius: 4px; 38 | } 39 | 40 | textarea { 41 | height: 80px; 42 | width: 350px; 43 | } 44 | 45 | input[type="text"] { 46 | height: 30px; 47 | width: 350px; 48 | } 49 | -------------------------------------------------------------------------------- /day-17/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Introduction to DOM 8 | 9 | 10 | 11 | 12 |

Welcome to the Day 17

13 |

Hope you are enjoying 40 days of JavaScript!

14 |

Make sure to Subscribe to tapaScript!

15 |

Hope you are enjoying it!

16 | 17 | 18 |
19 | 20 | 21 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /api/inventory/db.json: -------------------------------------------------------------------------------- 1 | { 2 | "products": [ 3 | { 4 | "id": "1", 5 | "name": "Laptop", 6 | "category": "Electronics", 7 | "stock": 4, 8 | "sold": 15, 9 | "price": 799.99, 10 | "lastUpdated": "2025-05-23" 11 | }, 12 | { 13 | "id": "2", 14 | "name": "Desk Chair", 15 | "category": "Furniture", 16 | "stock": 7, 17 | "sold": 10, 18 | "price": 129.99, 19 | "lastUpdated": "2025-05-22" 20 | }, 21 | { 22 | "id": "3", 23 | "name": "Notebook", 24 | "category": "Stationery", 25 | "stock": 15, 26 | "sold": 25, 27 | "price": 3.49, 28 | "lastUpdated": "2025-05-21" 29 | }, 30 | { 31 | "id": "1b9d", 32 | "name": "Car", 33 | "category": "Vchl", 34 | "stock": 40, 35 | "sold": 15, 36 | "price": 2345799.99, 37 | "lastUpdated": "2025-05-29" 38 | } 39 | ] 40 | } -------------------------------------------------------------------------------- /day-36/debounce/search.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Search 8 | 28 | 29 | 30 | 31 | 32 |

🔍 Debounced Search in Large Array

33 | 34 |
35 | 36 | 37 | -------------------------------------------------------------------------------- /day-19/custom/custom-event.js: -------------------------------------------------------------------------------- 1 | // Step 1: Create a CustomEvent 2 | const myEvent = new CustomEvent("userLoggedIn", { 3 | detail: { 4 | username: "tapascript", 5 | role: "admin", 6 | }, 7 | }); 8 | 9 | // Step 2: Listen for the Custom Event 10 | document.addEventListener("userLoggedIn", (e) => { 11 | console.log("User login detected:", e.detail.username); 12 | }); 13 | 14 | // Step 3: Dispatch the Custom Event 15 | document.dispatchEvent(myEvent); 16 | 17 | // Auth Module Example 18 | 19 | // Module 1: Authentication logic 20 | function loginUser(username) { 21 | const event = new CustomEvent("userLoggedIn", { 22 | detail: { username }, 23 | }); 24 | document.dispatchEvent(event); 25 | } 26 | 27 | // Module 2: Navbar or Sidebar 28 | document.addEventListener("userLoggedIn", (e) => { 29 | const user = e.detail.username; 30 | document.getElementById("welcome").textContent = `Welcome, ${user}!`; 31 | }); 32 | 33 | -------------------------------------------------------------------------------- /day-09/vh.js: -------------------------------------------------------------------------------- 1 | // With var 2 | { 3 | console.log('name is ', name); 4 | var name = "tom"; 5 | name = 'tom'; 6 | console.log('name is ', name); 7 | } 8 | 9 | // With let 10 | { 11 | console.log('name is ', name); 12 | let name = "tom"; 13 | name = 'tom'; 14 | console.log('name is ', name); 15 | } 16 | 17 | // With const 18 | { 19 | console.log('name is ', name); 20 | const name = "tom"; 21 | //name = 'tom'; 22 | console.log('name is ', name); 23 | } 24 | 25 | 26 | // Temporal Dead Zone(TDZ) 27 | 28 | // TDZ = an area where you can not access a variable until it is initialized 29 | 30 | // ReferenceError 31 | 32 | { 33 | // === name variable's TDZ started here 34 | // 35 | //console.log(name); // RerenceError 36 | // 37 | console.log(address); // RerenceError 38 | let address = "bangalore"; 39 | // 40 | let name = "tapaScript" // === name variable's TDZ ends here 41 | console.log(name); 42 | // 43 | // 44 | } -------------------------------------------------------------------------------- /day-34/task.md: -------------------------------------------------------------------------------- 1 | # Tasks 2 | 3 | Please complete the following tasks and post them on the tapaScript Discord under "40 Days of JavaScript". 4 | 5 | > **DO NOT USE AI to FIND ANSWERS**. If you are stuck, let's discuss it on DISCORD and learn. Also, please note that none of the answers need you to create any UI. Just focus on the logic building and print the output on the browser console. 6 | 7 | ## 1. Add the functionality to return a book 8 | 9 | Add the functionality to return a book. The JavaScript logic should take care of removing the borrowed book and bring back the `Borrow` button in the available books section for that book. 10 | The Local Storage implementation must be maintained as it is. 11 | 12 | ## 2. Code Clean up 13 | 14 | Do the code cleanup bu utilizing the utilities. The hint is given in the session. 15 | 16 | ## 3. (Bonus) Preserve the All Books Data 17 | 18 | Preserve all books data in the localstorage for a member. Render the book data from the localtorage. 19 | -------------------------------------------------------------------------------- /api/pizzahub/db.json: -------------------------------------------------------------------------------- 1 | { 2 | "pizzas": [ 3 | { 4 | "id": 1, 5 | "shopId": "Dominos", 6 | "name": "Pepperoni", 7 | "type": "veg", 8 | "price": 12, 9 | "unit": "usd" 10 | }, 11 | { 12 | "id": 2, 13 | "shopId": "PizzaHut", 14 | "name": "Margherita", 15 | "type": "veg", 16 | "price": 10, 17 | "unit": "usd" 18 | }, 19 | { 20 | "id": 3, 21 | "shopId": "Dominos", 22 | "name": "Cheese Burst", 23 | "type": "non-veg", 24 | "price": 22, 25 | "unit": "usd" 26 | } 27 | ], 28 | "beverages": [ 29 | { 30 | "id": 1, 31 | "pizzaId": 1, 32 | "name": "Coke", 33 | "price": "10", 34 | "unit": "usd" 35 | }, 36 | { 37 | "id": 2, 38 | "pizzaId": 2, 39 | "name": "Pepsi", 40 | "price": "11", 41 | "unit": "usd" 42 | } 43 | ], 44 | "shops": { 45 | "Dominos": false, 46 | "PizzaHut": true 47 | } 48 | } -------------------------------------------------------------------------------- /day-40/splitter/src/models/expense.js: -------------------------------------------------------------------------------- 1 | export class Expense { 2 | constructor(paidBy, amount, description = 'No description') { 3 | if (!paidBy || typeof paidBy !== 'string') { 4 | throw new Error('PaidBy must be a non-empty string'); 5 | } 6 | if (!amount || typeof amount !== 'number' || amount <= 0) { 7 | throw new Error('Amount must be a positive number'); 8 | } 9 | 10 | this.id = this.generateId(); 11 | this.paidBy = paidBy.trim(); 12 | this.amount = parseFloat(amount.toFixed(2)); 13 | this.description = description.trim(); 14 | this.timestamp = new Date().toISOString(); 15 | } 16 | 17 | generateId() { 18 | return crypto.randomUUID(); 19 | } 20 | 21 | toJSON() { 22 | return { 23 | id: this.id, 24 | paidBy: this.paidBy, 25 | amount: this.amount, 26 | description: this.description, 27 | timestamp: this.timestamp 28 | }; 29 | } 30 | } -------------------------------------------------------------------------------- /live/lets-code/inventory/pages/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Inventory Dashboard 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |

Inventory Dashboard

16 | 17 |
18 | 19 |
Loading...
20 |
21 | 22 |
23 |

Stock vs Sold Chart

24 | 25 |
26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /day-19/path/event-path.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Event Bubbling, Capturing, and Delegation 8 | 9 | 10 | 11 | 12 | 13 |

Event Bubbling, Capturing, and Delegation

14 |
15 |
16 | 17 |
18 |
19 | 20 |
21 | 25 | 26 |
27 | 30 | 31 |
32 | 33 |
34 | Parent 35 | 36 |
37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /day-20/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | DOM - Advanced 8 | 9 | 10 | 11 | 12 |

Day 20 - DOM Advanced Tips

13 | 14 |
15 |
16 |
17 |
18 | 19 | 25 | 26 | 27 | 28 |

Hello world and universe!

29 | 30 |
31 |

Title

32 |

Description here

33 |
34 | 35 |
36 | 37 | 38 | 39 |
Hello
40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /day-08/task.md: -------------------------------------------------------------------------------- 1 | # Tasks 2 | Please complete the following tasks and post them on the tapaScript Discord under "40 Days of JavaScript". 3 | 4 | > **DO NOT USE AI to FIND ANSWERS**. If you are stuck, let's discuss it on DISCORD and learn. Also, please note that none of the answers need you to create any UI. Just focus on the logic building and print the output on the browser console. 5 | 6 | ## 1. Draw the Execution Context Diagram of the follwoing code and share as explained below: 7 | 8 | ```js 9 | const message = "I can do it"; 10 | 11 | fucntion sum(a, b) { 12 | const result = a + b; 13 | return result; 14 | } 15 | 16 | function mul(a, b) { 17 | const result = a * b; 18 | return result; 19 | } 20 | function calc(a, b) { 21 | return (sum(a, b) + mul(a,b))/2; 22 | } 23 | 24 | function getResult(a, b) { 25 | return calc(a, b); 26 | } 27 | 28 | getResult(8, 5); 29 | ``` 30 | 31 | - Create the GEC and FEC with CP and EP flow 32 | - Create the Stack and Heap Flow 33 | - Create the Stack Diagram 34 | - Create a Readme file with all the above diagram and share on Discord. 35 | 36 | -------------------------------------------------------------------------------- /day-18/projects/todo/logic.js: -------------------------------------------------------------------------------- 1 | console.log("Project: TODO"); 2 | 3 | function addTask() { 4 | const taskInput = document.getElementById("taskInput"); 5 | const taskList = document.getElementById("taskList"); 6 | 7 | const task = taskInput.value; 8 | 9 | if (task.trim() === "") return; 10 | 11 | const li = document.createElement("li"); 12 | 13 | li.innerText = task; 14 | 15 | const completeBtn = document.createElement("button"); 16 | completeBtn.innerText = "✅"; 17 | completeBtn.style.marginLeft = "5px"; 18 | completeBtn.onclick = function () { 19 | li.classList.toggle("completed"); 20 | }; 21 | li.appendChild(completeBtn); 22 | 23 | const deleteBtn = document.createElement("button"); 24 | deleteBtn.innerText = "❌"; 25 | deleteBtn.style.marginLeft = "5px"; 26 | deleteBtn.onclick = function () { 27 | li.remove(); 28 | }; 29 | li.appendChild(deleteBtn); 30 | 31 | taskList.appendChild(li); 32 | 33 | taskInput.value = ""; 34 | } 35 | 36 | function filterTasks() { 37 | // Implement the filter functionality 38 | } 39 | -------------------------------------------------------------------------------- /day-19/projects/faq.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | FAQ 9 | 10 | 11 | 12 | 13 |
14 |
15 |
What is JavaScript?
16 |
JavaScript is a scripting language used to create dynamic content.
17 |
18 |
19 |
What is the DOM?
20 |
The DOM is the Document Object Model representing the page structure.
21 |
22 |
23 |
What is 40 Days of JavaScript?
24 |
It is an initiative by tapaScript Family to win over JavaScript with fundamentals and code.
25 |
26 | 27 |
28 | 29 | 30 | -------------------------------------------------------------------------------- /day-40/splitter/src/ui/domHelpers.js: -------------------------------------------------------------------------------- 1 | export class DOMHelpers { 2 | static getElementById(id) { 3 | const element = document.getElementById(id); 4 | if (!element) { 5 | throw new Error(`Element with id '${id}' not found`); 6 | } 7 | return element; 8 | } 9 | 10 | static createListItem(text, className = '') { 11 | const li = document.createElement('li'); 12 | li.textContent = text; 13 | if (className) { 14 | li.className = className; 15 | } 16 | return li; 17 | } 18 | 19 | static createOption(text, value) { 20 | return new Option(text, value); 21 | } 22 | 23 | static clearElement(element) { 24 | while (element.firstChild) { 25 | element.removeChild(element.firstChild); 26 | } 27 | } 28 | 29 | static appendFragment(parent, items, createItemFn) { 30 | const fragment = document.createDocumentFragment(); 31 | items.forEach(item => { 32 | fragment.appendChild(createItemFn(item)); 33 | }); 34 | parent.appendChild(fragment); 35 | } 36 | } -------------------------------------------------------------------------------- /day-38/task.md: -------------------------------------------------------------------------------- 1 | # Tasks 2 | 3 | Please complete the following tasks and post them on the tapaScript Discord under "40 Days of JavaScript". 4 | 5 | ## 1. Identify Reachable vs Unreachable Objects 6 | 7 | Write a small program where: 8 | 9 | - You create an object user 10 | - Create a second object profile that references user 11 | - Then set user = null 12 | 13 | Is the original user object still reachable? Why or why not? 14 | 15 | ## 2. Simulate and Break a Cyclic Reference 16 | 17 | Observe how cyclic references can cause memory retention. 18 | 19 | - Create two objects a and b 20 | - Make them reference each other (a.ref = b and b.ref = a) 21 | - Nullify external references to both 22 | 23 | Explain why this may or may not cause a memory leak. Add a.ref = null; b.ref = null; and explain how it helps 24 | 25 | ## 3. DOM Leak Detection and Fix 26 | 27 | Learn how DOM elements and closures can create memory leaks. 28 | 29 | - Create a button using JavaScript 30 | - Add an event listener that references a variable outside the listener 31 | - Remove the button from the DOM, but not the event listener 32 | 33 | Identify the leak & fix it. 34 | -------------------------------------------------------------------------------- /day-35/1-discount/solution.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | function calculateDiscount(total) { 4 | let discount = 0; 5 | if (total >= 500) { 6 | discount = 0.2; 7 | } else if (total >= 300) { 8 | discount = 0.15; 9 | } else if (total >= 100) { 10 | discount = 0.1; 11 | } 12 | 13 | return total - total * discount; 14 | } 15 | 16 | // Test Cases 17 | console.log(calculateDiscount(50)); // Expected: 50 (no discount) 18 | console.log(calculateDiscount(150)); // Expected: 135 19 | console.log(calculateDiscount(350)); // Expected: 297.5 20 | console.log(calculateDiscount(600)); // Expected: 480 21 | 22 | 23 | /* 24 | 25 | What Was the Issue? 26 | 27 | - In the original code, the conditions might have been written in ascending order. This logic fails for higher totals like 500, because the first condition total >= 100 matches and short-circuits the rest — so 20% Discount is never reached. 28 | 29 | TIPS: 30 | 31 | - When using if...else if...else, always write conditions from the most specific/highest value to the least. 32 | - Debugging tip: Use console.log() to inspect which condition block your input hits. 33 | 34 | */ -------------------------------------------------------------------------------- /day-35/5-order/track-order.js: -------------------------------------------------------------------------------- 1 | async function getOrder(orderId) { 2 | return new Promise((resolve, reject) => { 3 | setTimeout(() => { 4 | if (orderId === "123") { 5 | resolve({ id: "123", item: "Book", status: "Processing" }); 6 | } else { 7 | reject("Order not found!"); 8 | } 9 | }, 1000); 10 | }); 11 | } 12 | 13 | async function getTrackingInfo(order) { 14 | 15 | return new Promise((resolve, reject) => { 16 | setTimeout(() => { 17 | if (!order?.id) { 18 | reject("No Order ID"); 19 | } else { 20 | resolve({ orderId: order.id, location: "Warehouse", eta: "2 days" }); 21 | } 22 | 23 | }, 1000); 24 | }); 25 | } 26 | 27 | async function trackOrder(orderId) { 28 | try { 29 | const order = getOrder(orderId); 30 | const tracking = await getTrackingInfo(order); 31 | console.log(`Tracking Order: ${tracking.orderId}`); 32 | console.log(`Current Location: ${tracking.location}`); 33 | console.log(`Estimated Delivery: ${tracking.eta}`); 34 | } catch (err) { 35 | console.error("Error:", err); 36 | } 37 | } 38 | 39 | trackOrder("123"); -------------------------------------------------------------------------------- /day-35/5-order/solution.js: -------------------------------------------------------------------------------- 1 | async function getOrder(orderId) { 2 | return new Promise((resolve, reject) => { 3 | setTimeout(() => { 4 | if (orderId === "123") { 5 | resolve({ id: "123", item: "Book", status: "Processing" }); 6 | } else { 7 | reject("Order not found!"); 8 | } 9 | }, 1000); 10 | }); 11 | } 12 | 13 | async function getTrackingInfo(order) { 14 | 15 | return new Promise((resolve, reject) => { 16 | setTimeout(() => { 17 | if (!order?.id) { 18 | reject("No Order ID"); 19 | } else { 20 | resolve({ orderId: order.id, location: "Warehouse", eta: "2 days" }); 21 | } 22 | 23 | }, 1000); 24 | }); 25 | } 26 | 27 | async function trackOrder(orderId) { 28 | try { 29 | const order = await getOrder(orderId); 30 | const tracking = await getTrackingInfo(order); 31 | console.log(`Tracking Order: ${tracking.orderId}`); 32 | console.log(`Current Location: ${tracking.location}`); 33 | console.log(`Estimated Delivery: ${tracking.eta}`); 34 | } catch (err) { 35 | console.error("Error:", err); 36 | } 37 | } 38 | 39 | trackOrder("123"); -------------------------------------------------------------------------------- /day-19/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Events 7 | 8 | 9 | 10 |

Welcome to the Day 19 - Events

11 |

Hope you are enjoying 40 days of JavaScript!

12 | 13 |
14 |

Event Handling

15 | 16 | 17 | 18 | 19 | 20 |
21 |

Event Object

22 | 23 | 24 |
25 | Event Bubbling, Capturing, and Delegation 26 | 27 |
28 | Event Default Behaviour 29 | 30 |
31 | Custom Event 32 | 33 |
34 | Project: FAQ 35 | 36 | 37 | -------------------------------------------------------------------------------- /day-34/library/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2025 tapaScript 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /day-40/splitter/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2025 tapaScript 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /day-28/country-explorer/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2025 tapaScript 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /live/lets-code/inventory/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2025 tapaScript 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /day-07/README.md: -------------------------------------------------------------------------------- 1 | # Day 07 - 40 Days of JavaScript 2 | 3 | ## **🎯 Goal of This Lesson** 4 | 5 | - ✅ Build the Project 6 | - ✅ Give an Assignment Project to Build 7 | 8 | ## 🫶 Support 9 | Your support means a lot. 10 | 11 | - Please SUBSCRIBE to [tapaScript YouTube Channel](https://youtube.com/tapasadhikary) if not done already. A Big Thank You! 12 | - Liked my work? It takes months of hard work to create quality content and present it to you. You can show your support to me with a STAR(⭐) to this repository. 13 | 14 | > Many Thanks to all the `Stargazers` who have supported this project with stars(⭐) 15 | 16 | ### 🤝 Sponsor My Work 17 | I am an independent educator and open-source enthusiast who creates meaningful projects to teach programming on my YouTube Channel. **You can support my work by [Sponsoring me on GitHub](https://github.com/sponsors/atapas) or [Buy Me a Cofee](https://buymeacoffee.com/tapasadhikary)**. 18 | 19 | ## Video 20 | Here is the video for you to go through and learn: 21 | 22 | [![day-07](./banner.png)](https://youtu.be/fydbEttef04 "Video") 23 | 24 | ## **👩‍💻 🧑‍💻 Assignment Tasks** 25 | 26 | Please find the task assignments in the [Task File](./task.md). 27 | -------------------------------------------------------------------------------- /day-27/README.md: -------------------------------------------------------------------------------- 1 | # Day 27 - 40 Days of JavaScript - Event Loop 2 | 3 | ## **🎯 Goal of This Lesson** 4 | 5 | - ✅ The Chef’s Story 6 | - ✅ Functions and Call Stack 7 | - ✅ Async Code 8 | - ✅ Event Loop 9 | - ✅ Callback Queue 10 | - ✅ Job Queue 11 | - ✅ Tasks and What’s Next? 12 | 13 | ## 🫶 Support 14 | 15 | Your support means a lot. 16 | 17 | - Please SUBSCRIBE to [tapaScript YouTube Channel](https://youtube.com/tapasadhikary) if not done already. A Big Thank You! 18 | - Liked my work? It takes months of hard work to create quality content and present it to you. You can show your support to me with a STAR(⭐) to this repository. 19 | 20 | > Many Thanks to all the `Stargazers` who have supported this project with stars(⭐) 21 | 22 | ### 🤝 Sponsor My Work 23 | 24 | I am an independent educator and open-source enthusiast who creates meaningful projects to teach programming on my YouTube Channel. **You can support my work by [Sponsoring me on GitHub](https://github.com/sponsors/atapas) or [Buy Me a Cofee](https://buymeacoffee.com/tapasadhikary)**. 25 | 26 | ## Video 27 | 28 | Here is the video for you to go through and learn: 29 | 30 | [![day-27](./banner.png)](https://youtu.be/4IYcwOfW3BM "Video") 31 | -------------------------------------------------------------------------------- /day-26/README.md: -------------------------------------------------------------------------------- 1 | # Day 26 - 40 Days of JavaScript - Common Mistakes 2 | 3 | ## **🎯 Goal of This Lesson** 4 | 5 | - ✅ Introduction 6 | - ✅ Promises and Loop 7 | - ✅ Chain or No-Chain 8 | - ✅ Not Handling Errors 9 | - ✅ Missing Callback 10 | - ✅ Synchronous Operation 11 | - ✅ Unnecessary try/catch 12 | - ✅ Quick Recap 13 | 14 | ## 🫶 Support 15 | 16 | Your support means a lot. 17 | 18 | - Please SUBSCRIBE to [tapaScript YouTube Channel](https://youtube.com/tapasadhikary) if not done already. A Big Thank You! 19 | - Liked my work? It takes months of hard work to create quality content and present it to you. You can show your support to me with a STAR(⭐) to this repository. 20 | 21 | > Many Thanks to all the `Stargazers` who have supported this project with stars(⭐) 22 | 23 | ### 🤝 Sponsor My Work 24 | 25 | I am an independent educator and open-source enthusiast who creates meaningful projects to teach programming on my YouTube Channel. **You can support my work by [Sponsoring me on GitHub](https://github.com/sponsors/atapas) or [Buy Me a Cofee](https://buymeacoffee.com/tapasadhikary)**. 26 | 27 | ## Video 28 | 29 | Here is the video for you to go through and learn: 30 | 31 | [![day-26](./banner.png)](https://youtu.be/c_zcXUz1neo "Video") 32 | -------------------------------------------------------------------------------- /day-18/task.md: -------------------------------------------------------------------------------- 1 | # Tasks 2 | 3 | Please complete the following tasks and post them on the tapaScript Discord under "40 Days of JavaScript". 4 | 5 | > **DO NOT USE AI to FIND ANSWERS**. If you are stuck, let's discuss it on DISCORD and learn. Also, please note that none of the answers need you to create any UI. Just focus on the logic building and print the output on the browser console. 6 | 7 | ## 1. Create a form dynamically using JavaScript and manipulate its behavior 8 | 9 | - Add input fields dynamically based on user selection e.g., text, email, number 10 | - Add a submit button that logs all the input values as an object. 11 | - Add a reset button that clears the form. 12 | - Use createElement, appendChild, setAttribute, and addEventListener. 13 | 14 | ## 2. Add, delete, and search rows in a dynamic table 15 | 16 | - A form to add rows (Name, Age, Role). 17 | - Each row should have a “Delete” button to remove it. 18 | - Add a search input that filters the rows by name. 19 | - Use insertRow, deleteRow, and textContent/innerText. 20 | 21 | ## 3. Theme Switcher with Persistence 22 | 23 | - Toggle theme using a button or switch. 24 | - Persist the theme in localStorage and apply on page load. 25 | - Change background and text color based on the theme. 26 | -------------------------------------------------------------------------------- /day-36/memoization/fibonacci/fib.js: -------------------------------------------------------------------------------- 1 | function fib(n) { 2 | if (n <= 2) return 1; 3 | return fib(n - 1) + fib(n - 2); 4 | } 5 | 6 | // 0, 1, 1, 2, 3, 5, 8, 13, 21, and so on. 7 | 8 | 9 | const memo = {}; 10 | function fibMemo(n) { 11 | if (n in memo) return memo[n]; 12 | if (n <= 2) return 1; 13 | memo[n] = fibMemo(n - 1) + fibMemo(n - 2); 14 | return memo[n]; 15 | } 16 | 17 | function runNormal() { 18 | const n = parseInt(document.getElementById("num").value); 19 | const output = document.getElementById("output"); 20 | const start = Date.now(); 21 | console.log(start); 22 | const result = fib(n); 23 | const end = Date.now(); 24 | console.log(end); 25 | output.innerHTML = `🔁 Normal Fib(${n}) = ${result}
⏱️ Time: ${( 26 | end - start 27 | )}ms`; 28 | } 29 | 30 | function runMemo() { 31 | const n = parseInt(document.getElementById("num").value); 32 | const output = document.getElementById("output"); 33 | const start = Date.now(); 34 | console.log(start); 35 | const result = fibMemo(n); 36 | const end = Date.now(); 37 | console.log(end); 38 | output.innerHTML = `🧠 Memoized Fib(${n}) = ${result}
⏱️ Time: ${( 39 | end - start 40 | )}ms`; 41 | } 42 | -------------------------------------------------------------------------------- /day-28/README.md: -------------------------------------------------------------------------------- 1 | # Day 28 - Building a Country Explorer App 2 | 3 | ## **🎯 Goal of This Lesson** 4 | 5 | - ✅ Before We Start 6 | - ✅ REST Country APIs 7 | - ✅ What Are We Building? 8 | - ✅ The Project Setup 9 | - ✅ The HTML Structure 10 | - ✅ Fetching Countries 11 | - ✅ Showing Details 12 | - ✅ The Map 13 | - ✅ The Time & TimeZone 14 | - ✅ What’s Next? 15 | 16 | ## 🫶 Support 17 | 18 | Your support means a lot. 19 | 20 | - Please SUBSCRIBE to [tapaScript YouTube Channel](https://youtube.com/tapasadhikary) if not done already. A Big Thank You! 21 | - Liked my work? It takes months of hard work to create quality content and present it to you. You can show your support to me with a STAR(⭐) to this repository. 22 | 23 | > Many Thanks to all the `Stargazers` who have supported this project with stars(⭐) 24 | 25 | ### 🤝 Sponsor My Work 26 | 27 | I am an independent educator and open-source enthusiast who creates meaningful projects to teach programming on my YouTube Channel. **You can support my work by [Sponsoring me on GitHub](https://github.com/sponsors/atapas) or [Buy Me a Cofee](https://buymeacoffee.com/tapasadhikary)**. 28 | 29 | ## Video 30 | 31 | Here is the video for you to go through and learn: 32 | 33 | [![day-28](./banner.png)](https://www.youtube.com/watch?v=jXS0VURNqxA "Video") 34 | -------------------------------------------------------------------------------- /day-20/task.md: -------------------------------------------------------------------------------- 1 | # Tasks 2 | 3 | Please complete the following tasks and post them on the tapaScript Discord under "40 Days of JavaScript". 4 | 5 | > **DO NOT USE AI to FIND ANSWERS**. If you are stuck, let's discuss it on DISCORD and learn. Also, please note that none of the answers need you to create any UI. Just focus on the logic building and print the output on the browser console. 6 | 7 | ## 1. Traverse and Toggle Classes 8 | 9 | Build a navigation menu. On click of a list item: 10 | 11 | - Traverse up to parent `