├── .gitignore ├── LICENSE ├── README.md ├── api ├── .gitignore ├── blog │ ├── db.json │ ├── package.json │ ├── server.js │ └── yarn.lock ├── inventory │ ├── db.json │ ├── package.json │ └── yarn.lock └── pizzahub │ ├── db.json │ ├── package.json │ ├── server.js │ └── yarn.lock ├── day-01 ├── README.md ├── banner.png ├── first.html ├── index.html ├── script.js └── test.js ├── day-02 ├── README.md ├── banner.png ├── index.html └── index.js ├── day-03 ├── README.md ├── banner.png ├── index.html ├── index.js └── task.md ├── day-04 ├── README.md ├── banner.png ├── index.html ├── index.js └── task.md ├── day-05 ├── README.md ├── banner.png ├── index.html ├── index.js └── task.md ├── day-06 ├── README.md ├── banner.png ├── index.html ├── index.js └── task.md ├── day-07 ├── README.md ├── banner.png ├── index.html ├── rps │ ├── rps.html │ └── rps.js ├── secret-number │ ├── secret-number.html │ └── secret-number.js └── task.md ├── day-08 ├── README.md ├── banner.png ├── call-stack.js ├── fec.js ├── gec.js ├── index.html ├── index.js ├── say-name.js └── task.md ├── day-09 ├── README.md ├── banner.png ├── feh.js ├── fh.js ├── index.html ├── task.md └── vh.js ├── day-10 ├── README.md ├── banner.png ├── index.html ├── index.js └── task.md ├── day-11 ├── README.md ├── banner.png ├── index.html ├── index.js └── task.md ├── day-12 ├── README.md ├── banner.png ├── destructuring.js ├── index.html ├── index.js ├── oc.js └── task.md ├── day-13 ├── README.md ├── banner.png ├── examples.js ├── index.html ├── index.js └── task.md ├── day-14 ├── README.md ├── banner.png ├── index.html ├── index.js └── task.md ├── day-15 ├── README.md ├── banner.png ├── index.html ├── index.js └── task.md ├── day-16 ├── README.md ├── banner.png ├── index.css ├── index.html └── index.js ├── day-17 ├── README.md ├── banner.png ├── index.html ├── index.js └── task.md ├── day-18 ├── README.md ├── banner.png ├── index.css ├── index.html ├── index.js ├── projects │ ├── todo │ │ ├── logic.js │ │ ├── ui.css │ │ └── ui.html │ └── toggle │ │ ├── logic.js │ │ ├── ui.css │ │ └── ui.html └── task.md ├── day-19 ├── README.md ├── banner.png ├── custom │ ├── custom-event.html │ └── custom-event.js ├── default │ ├── event-default.html │ └── event-default.js ├── index.html ├── index.js ├── path │ ├── event-path.html │ ├── event-path.js │ └── event.css ├── projects │ ├── faq.css │ ├── faq.html │ └── faq.js └── task.md ├── day-20 ├── README.md ├── banner.png ├── index.html ├── index.js └── task.md ├── day-21 ├── README.md ├── banner.png ├── index.html ├── index.js └── style.css ├── day-22 ├── README.md ├── banner.png ├── index.html ├── index.js ├── lib │ └── query.js └── task.md ├── day-23 ├── README.md ├── banner.png ├── index.html ├── index.js ├── pizzahub │ ├── lib │ │ └── query.js │ ├── ph.html │ └── ph.js ├── promise.js └── task.md ├── day-24 ├── README.md ├── banner.png ├── index.html ├── index.js ├── pizzahub │ ├── lib │ │ └── query.js │ ├── ph.html │ └── ph.js ├── task.md └── weather │ ├── index.html │ ├── index.js │ └── style.css ├── day-25 ├── README.md ├── banner.png ├── download │ └── file.txt ├── index.html ├── index.js └── task.md ├── day-26 ├── README.md ├── banner.png ├── index.html └── index.js ├── day-27 ├── README.md ├── banner.png ├── index.html ├── index.js └── task.md ├── day-28 ├── README.md ├── banner.png └── country-explorer │ ├── .gitignore │ ├── LICENSE │ ├── README.md │ ├── index.html │ ├── package.json │ ├── src │ ├── index.css │ └── main.js │ └── vite.config.js ├── day-29 ├── README.md ├── banner.png ├── index.html ├── index.js └── task.md ├── day-30 ├── README.md ├── banner.png ├── index.html ├── index.js ├── oop │ ├── abstraction.js │ ├── composition.js │ ├── encapsulation.js │ ├── inheritance.js │ └── polymorphism.js └── task.md ├── day-31 ├── README.md ├── banner.png └── task.md ├── live ├── lets-code │ └── inventory │ │ ├── .gitignore │ │ ├── LICENSE │ │ ├── README.md │ │ ├── banner.png │ │ ├── image.png │ │ ├── main.js │ │ ├── package.json │ │ └── pages │ │ ├── index.html │ │ ├── input.css │ │ ├── inventory.js │ │ └── output.css └── live-one │ ├── index.html │ ├── index.js │ └── questions.md └── project-assignment ├── expense-tracker.md └── recipe-finder.md /.gitignore: -------------------------------------------------------------------------------- 1 | Content-Slide.key 2 | 3 | .vscode -------------------------------------------------------------------------------- /api/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /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 | } -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/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 | } -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | } -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /api/pizzahub/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 | // ✅ GET /api/pizzahub → shop IDs 13 | server.get('/api/pizzahub', (req, res) => { 14 | const db = JSON.parse(fs.readFileSync('db.json', 'utf-8')); 15 | const pizzas = db.pizzas || []; 16 | const shops = db.shops || {}; 17 | const shopIds = [...new Set(pizzas.map(p => p.shopId).filter(shopId => shops[shopId]))]; 18 | res.json(shopIds); 19 | }); 20 | 21 | // ✅ POST /api/order → create a new order 22 | server.post('/api/order', (req, res) => { 23 | const { pizzaId, beverageId } = req.body; 24 | 25 | if (!pizzaId || !beverageId) { 26 | return res.status(400).json({ error: 'pizzaId and beverageId are required' }); 27 | } 28 | 29 | const dbFile = path.join(__dirname, 'db.json'); 30 | const db = JSON.parse(fs.readFileSync(dbFile, 'utf-8')); 31 | 32 | const orders = db.orders || []; 33 | const newOrder = { 34 | id: orders.length + 1, 35 | pizzaId, 36 | beverageId, 37 | createdAt: new Date().toISOString() 38 | }; 39 | 40 | orders.push(newOrder); 41 | //db.orders = orders; 42 | 43 | //fs.writeFileSync(dbFile, JSON.stringify(db, null, 2), 'utf-8'); 44 | res.status(201).json(newOrder); 45 | }); 46 | 47 | // ✅ Rewrite routes 48 | server.use( 49 | jsonServer.rewriter({ 50 | '/api/pizzahub/pizzas': '/pizzas', 51 | '/api/pizzahub/pizzas/:shopId': '/pizzas?shopId=:shopId', 52 | '/api/pizzahub/beverages/:pizzaid': '/beverages?pizzaId=:pizzaid' 53 | }) 54 | ); 55 | 56 | server.use(router); 57 | 58 | server.listen(3000, () => { 59 | console.log('✅ JSON Server running at http://localhost:3000'); 60 | }); -------------------------------------------------------------------------------- /day-01/README.md: -------------------------------------------------------------------------------- 1 | # Day 01 - 40 Days of JavaScript 2 | 3 | ## **🎯 Goal of This Lesson** 4 | 5 | - Welcome to the "40 Days of JavaScript" series! 6 | - How to follow the progress tracker? 7 | - What is JavaScript, and why should you learn it? 8 | - Setting up your development environment (VS Code, browser, and Node.js). 9 | - Writing and running your first JavaScript code. 10 | - Loading JavaScript in different ways (`async`, `defer`). 11 | - Quick roadmap of what’s coming in this series. 12 | - Task and How to Submit 13 | 14 | ## 🫶 Support 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 | 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)**. 24 | 25 | ## Video 26 | Here is the video for you to go through and learn: 27 | 28 | [![day-01](./banner.png)](https://youtu.be/t8QXF85YovE "Video") 29 | 30 | ## **👩‍💻 🧑‍💻 Assignment Tasks** 31 | 32 | ### ✅ Task 1: Setting Up Your Environment 33 | 1. Install VS Code (if not installed). 34 | 2. Set up Live Server or open the HTML file directly in a browser. 35 | 3. Open the DevTools Console (Right-click → Inspect → Console). 36 | 37 | ### ✅ Task 2: Write Your First JavaScript Code 38 | 1. Create a new file: index.html. 39 | 2. Add a ` 11 | 12 | 13 | -------------------------------------------------------------------------------- /day-01/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Script Loading 7 | 8 | 9 | 10 |
11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /day-01/script.js: -------------------------------------------------------------------------------- 1 | console.log("Hello from Node.js!"); 2 | -------------------------------------------------------------------------------- /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-02/README.md: -------------------------------------------------------------------------------- 1 | # Day 02 - 40 Days of JavaScript 2 | 3 | ## **🎯 Goal of This Lesson** 4 | 5 | - What is Variable? 6 | - How to visialize variables? 7 | - How Variables get stored? 8 | - JavaScript Data Types 9 | - How JavaScript sees code? 10 | 11 | ## 🫶 Support 12 | Your support means a lot. 13 | 14 | - Please SUBSCRIBE to [tapaScript YouTube Channel](https://youtube.com/tapasadhikary) if not done already. A Big Thank You! 15 | - 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. 16 | 17 | > Many Thanks to all the `Stargazers` who have supported this project with stars(⭐) 18 | 19 | ### 🤝 Sponsor My Work 20 | 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)**. 21 | 22 | ## Video 23 | Here is the video for you to go through and learn: 24 | 25 | [![day-02](./banner.png)](https://www.youtube.com/watch?v=tVqy4Tw0i64 "Video") 26 | 27 | ## **👩‍💻 🧑‍💻 Assignment Tasks** 28 | 29 | - ✅ Task 1: Declare variables for a person’s name, age, isStudent status, and favorite programming language. 30 | - ✅ Task 2: Print the values to the console. 31 | - ✅ Task 3: Try reassigning values to let and const variables and observe errors. 32 | - ✅ Task 4: Create an object and an array, assign them to new variables, modify, and observe changes. 33 | -------------------------------------------------------------------------------- /day-02/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/fc63718202c60f50b1e96513b0e65bd4c7fb6539/day-02/banner.png -------------------------------------------------------------------------------- /day-02/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Day 02 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /day-02/index.js: -------------------------------------------------------------------------------- 1 | console.log("Day 02"); 2 | 3 | // Variables: Variables are used to store data in JavaScript 4 | 5 | // - `var`: Function-scoped, can be redeclared (not recommended) 6 | // - `let`: Block-scoped, can be reassigned 7 | // - `const`: Block-scoped, **cannot** be reassigned 8 | 9 | const address = "Bangalore"; 10 | 11 | console.log(address); 12 | 13 | // address = "USA"; 14 | 15 | // console.log(address); 16 | 17 | let age = 12; 18 | 19 | age = 52; 20 | 21 | let name, salary, department; 22 | 23 | salary = null; 24 | 25 | /* 26 | - **Primitive Data Types:** 27 | - `String` - Text values ("Hello") 28 | - `Number` - Numeric values (25, 3.14) 29 | - `Boolean` - True/False (true, false) 30 | - `Undefined` - A variable declared but not assigned (let x;) 31 | - `Null` - Represents "nothing" (let y = null;) 32 | - `BigInt` - Large numbers (BigInt(12345678901234567890)) 33 | - `Symbol` - Unique identifiers (Symbol("id")) 34 | - **Non-Primitive (Reference) Data Types:** 35 | - `Object` - Collection of key-value pairs 36 | - `Array` - Ordered list of values 37 | - `Function` - Code that can be executed 38 | */ 39 | 40 | let student = { 41 | name: "Alice", 42 | age: 22, 43 | isEnrolled: true 44 | }; 45 | console.log(student.name); // Output: Alice 46 | 47 | let arr = [1,2,4,5] 48 | 49 | 50 | let a = 10; 51 | let b = a; // 10 52 | b = 20; // 20 53 | console.log(a); // 10 (original remains unchanged) 54 | -------------------------------------------------------------------------------- /day-03/README.md: -------------------------------------------------------------------------------- 1 | # Day 03 - 40 Days of JavaScript 2 | 3 | ## **🎯 Goal of This Lesson** 4 | 5 | - What are Operands, Operators, Expressions? 6 | - What are difefrent types of Operators? 7 | - Arithmetic Operators 8 | - Assignment Operators 9 | - Comparison Operators 10 | - Logical Operators 11 | - Conditional Ternary Operator 12 | - Bitwise Operator 13 | - Relational Operator 14 | - Grouping and Precedence 15 | - typeof Operator 16 | - instanceof Operator 17 | - Tasks and Practices 18 | 19 | ## 🫶 Support 20 | Your support means a lot. 21 | 22 | - Please SUBSCRIBE to [tapaScript YouTube Channel](https://youtube.com/tapasadhikary) if not done already. A Big Thank You! 23 | - 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. 24 | 25 | > Many Thanks to all the `Stargazers` who have supported this project with stars(⭐) 26 | 27 | ### 🤝 Sponsor My Work 28 | 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)**. 29 | 30 | ## Video 31 | Here is the video for you to go through and learn: 32 | 33 | [![day-03](./banner.png)](https://youtu.be/vI95K-_JLOw "Video") 34 | 35 | ## **👩‍💻 🧑‍💻 Assignment Tasks** 36 | 37 | Please find the task assignments in the [Task File](./task.md). -------------------------------------------------------------------------------- /day-03/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/fc63718202c60f50b1e96513b0e65bd4c7fb6539/day-03/banner.png -------------------------------------------------------------------------------- /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-03/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. Odd or Even? 7 | - [ ] Take a number and find if the number is an odd or even number. 8 | - [ ] Print the number and result in the console. 9 | 10 | ## 2. Do you have a Driving License? 11 | Let's check if you are eligible to get a driving license. The eligibility to get a driving licence is 18 years. 12 | 13 | - [ ] Manage `age` as a variable. 14 | - [ ] Check if the age is elligible for a driving license and print it on the console accordingly. 15 | 16 | ## 3. Calculate CTC with a Bonus 17 | Let's calculate how much you earn from your office. 18 | 19 | - [ ] You get 12,300 rupees as your monthly salary. 20 | - [ ] You get a 20% bonus on your annual salary. 21 | - [ ] How much money do you make per annum as a CTC? 22 | 23 | ## 4. Write a program for the Traffic Light Simulation. 24 | Red Light... Green Light... Let's Play! 25 | 26 | - [ ] Create a `color` variable. 27 | - [ ] Based on the color variable's value print in the console if a traveller needs to STOP or GO. The Red color is for STOP and the Green color is for GO. 28 | 29 | ## 5. Create an Electricity Bill Calculator 30 | Let's calculate how much you pay for electricity bills per month and annually. 31 | 32 | - [ ] Create a `units` variable. Based on this value you will calculate the total electricity bill for a months. 33 | - [ ] If each day you consume the `units` and each unit cost 150 rupees, how much will you be charged per month? 34 | - [ ] If there is a 20% discount on the annual payment, how much will you be charged for an annual payment? 35 | 36 | ## 6. Leap Year Checker 37 | Is 2025 a Leap Year? 38 | 39 | - [ ] Take `year` as input. 40 | - [ ] Use the arithmetic operator and ternary operator to print if a year is a leap year or not. 41 | 42 | ## 7. Max of Three Numbers 43 | Find the max number from the lot. 44 | 45 | - [ ] Take three numbers and assign them to variables p, q, and r. 46 | - [ ] Now find the maximum of these three numbers using the comparison operators. 47 | 48 | ## 8. Bitwise Doubling 49 | A tricky one for you 50 | 51 | - [ ] Create a variable `count` and assign a value, say, 5. 52 | - [ ] Now use the Bitwise shift operator to make the number double. 53 | - [ ] Print it on the console. 54 | -------------------------------------------------------------------------------- /day-04/README.md: -------------------------------------------------------------------------------- 1 | # Day 04 - 40 Days of JavaScript 2 | 3 | ## **🎯 Goal of This Lesson** 4 | 5 | - What is Control Flow and Branching 6 | - Understanding if-else all possible scenarios 7 | - Undersatanding switch-case all possible scenarios 8 | - Comparioson study between if-else and switch-case 9 | - Test and Assignments 10 | 11 | ## 🫶 Support 12 | Your support means a lot. 13 | 14 | - Please SUBSCRIBE to [tapaScript YouTube Channel](https://youtube.com/tapasadhikary) if not done already. A Big Thank You! 15 | - 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. 16 | 17 | > Many Thanks to all the `Stargazers` who have supported this project with stars(⭐) 18 | 19 | ### 🤝 Sponsor My Work 20 | 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)**. 21 | 22 | ## Video 23 | Here is the video for you to go through and learn: 24 | 25 | [![day-04](./banner.png)](https://youtu.be/Fn_DhBu3VyU "Video") 26 | 27 | ## **👩‍💻 🧑‍💻 Assignment Tasks** 28 | 29 | Please find the task assignments in the [Task File](./task.md). -------------------------------------------------------------------------------- /day-04/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/fc63718202c60f50b1e96513b0e65bd4c7fb6539/day-04/banner.png -------------------------------------------------------------------------------- /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-04/index.js: -------------------------------------------------------------------------------- 1 | console.log("Day 04"); 2 | 3 | let catchingBus = false; 4 | 5 | if (catchingBus) { 6 | console.log("I will Reach home on time"); 7 | } else { 8 | console.log("I will be late to reach"); 9 | } 10 | 11 | catchingBus ? console.log("I will Reach home on time") : console.log("I will be late to reach") 12 | 13 | let age = 8; 14 | 15 | if (age >= 18) { 16 | console.log("You are Eligible to Vote"); 17 | } else { 18 | console.log("You are NOT Eligible to Vote"); 19 | } 20 | 21 | // Let's build a grading system 22 | // if score is >= 90, Grade A 23 | // if score if >= 80, Grade B 24 | // If score if >= 70, Grade C 25 | // Fail 26 | 27 | let score = 76; 28 | 29 | if (score >= 90) { 30 | console.log("Grade A"); 31 | } else if (score >= 80) { 32 | console.log("Grade B"); 33 | } else if (score >= 70) { 34 | console.log("Grade C"); 35 | } else if (score < 70) { 36 | console.log("Fail"); 37 | } 38 | 39 | let x = 0; 40 | 41 | if (x === 0) { 42 | console.log(0); 43 | } else if (x >= 0) { 44 | console.log("Greater than 0"); 45 | } else if (x <= 0) { 46 | console.log("Less than 0"); 47 | } 48 | 49 | const condition = false; 50 | const innerCondition = false; 51 | 52 | if (condition) { 53 | console.log("Outer if"); 54 | if (innerCondition) { 55 | console.log("Inner if"); 56 | } else { 57 | console.log("Inner else"); 58 | } 59 | } else { 60 | console.log("Outer else"); 61 | } 62 | 63 | /*else { 64 | console.log("I am alone else") 65 | }*/ 66 | 67 | let position = 10; 68 | 69 | switch (position) { 70 | case 1: 71 | console.log("Print 1"); 72 | break; 73 | case 2: 74 | console.log("Print 2"); 75 | break; 76 | case 3: 77 | console.log("Print 3"); 78 | break; 79 | case 4: 80 | console.log("Print 4"); 81 | break; 82 | 83 | default: 84 | console.log("Nothing is matched"); 85 | } 86 | 87 | let day = 51; 88 | 89 | switch (day) { 90 | case 1: 91 | console.log("Monday"); 92 | break; 93 | case 2: 94 | console.log("Tuesday"); 95 | break; 96 | case 3: 97 | console.log("Wednesday"); 98 | break; 99 | case 4: 100 | console.log("Thursday"); 101 | break; 102 | case 5: 103 | console.log("Friday"); 104 | break; 105 | case 6: 106 | console.log("Saturday"); 107 | break; 108 | case 7: 109 | console.log("Sunday"); 110 | break; 111 | 112 | default: 113 | console.log("Invalid Day Number") 114 | } 115 | 116 | let name = "Google" 117 | 118 | switch(name) { 119 | case "tapaScript": 120 | console.log("Teaching 40 days of Js") 121 | break; 122 | case "google": 123 | console.log("Giving answer to all searches"); 124 | break; 125 | default: 126 | console.log("You are neither google, nor tapaScript!") 127 | } 128 | 129 | const city = "Bangalore"; 130 | switch (city) { 131 | case "Bangalore": 132 | case "Kolkata": 133 | case "Agra": 134 | case "Jaipur": 135 | console.log("All these are in India"); 136 | break; 137 | case "New York": 138 | default: 139 | console.log("It is in USA"); 140 | } 141 | 142 | 143 | 144 | 145 | -------------------------------------------------------------------------------- /day-04/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. What will be the output of this code snippet and why? 7 | ```js 8 | let day = "Monday"; 9 | 10 | switch (day) { 11 | case "monday": 12 | console.log("It's the start of the week."); 13 | break; 14 | default: 15 | console.log("It's a normal day."); 16 | } 17 | ``` 18 | 19 | ## 2. Build an ATM Cash Withdrawal System 20 | Rajan goes to the Axis bank ATM. He enters an amount to withdraw. The ATM only allows multiples of 100. Print “Withdrawal successful” if valid, otherwise print “Invalid amount”. 21 | 22 | ## 3. Build a Calculator with switch-case 23 | Write a simple calculator that takes an operator (+, -, , /, %) as input, and performs the operation on two numbers. Print the output on the console. 24 | 25 | ## 4. Pay for your movie ticket 26 | Imagine, the INOX charges ticket prices based on age: 27 | - Children (<18 years): $3 28 | - Adults (18 - 60 years): $10 29 | - Seniors (60+ years): $8 30 | 31 | Write a program that prints the ticket price based on the person’s age. 32 | 33 | ## 5. Horoscope Sign Checker 34 | Write a program that prints the zodiac sign(Aries, Taurus, Gemini, etc.) based on a person’s birth month. Make it month bases, not date based. Like March and April borns are Aries, Aplil and May born are Taurus, and so on. Do not use if-else. 35 | 36 | ## 6. Which Triangle? 37 | A triangle has 3 sides. A Triangle type is determined by its sides: 38 | - All sides equal is called, `Equilateral Triangle`. 39 | - Two sides equal is called, `Isosceles Triangle`. 40 | - All sides different is called, `Scalene Triangle`. 41 | 42 | Take the sides of a triangle as input and write a program to determine the triangle type. Change the inputs everytime manually to see if the output changes correctly. 43 | -------------------------------------------------------------------------------- /day-05/README.md: -------------------------------------------------------------------------------- 1 | # Day 06 - 40 Days of JavaScript 2 | 3 | ## **🎯 Goal of This Lesson** 4 | 5 | - ✅ Logic Building and DSA 6 | - ✅ Loops in JavaScript 7 | - ✅ The for Loop 8 | - ✅ The for Loop Flow Chart 9 | - ✅ for Loop Examples 10 | - ✅ Nested Loop 11 | - ✅ The break and continue 12 | - ✅ Handling Multiple Counters 13 | - ✅ The while Loop 14 | - ✅ The do-while Loop 15 | - ✅ Infinite Loop 16 | - ✅ Task and Wrap Up 17 | 18 | ## 🫶 Support 19 | Your support means a lot. 20 | 21 | - Please SUBSCRIBE to [tapaScript YouTube Channel](https://youtube.com/tapasadhikary) if not done already. A Big Thank You! 22 | - 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. 23 | 24 | > Many Thanks to all the `Stargazers` who have supported this project with stars(⭐) 25 | 26 | ### 🤝 Sponsor My Work 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 | Here is the video for you to go through and learn: 31 | 32 | [![day-05](./banner.png)](https://www.youtube.com/watch?v=MDR43-2GvtA&list=PLIJrr73KDmRw2Fwwjt6cPC_tk5vcSICCu&index=5 "Video") 33 | 34 | ## **👩‍💻 🧑‍💻 Assignment Tasks** 35 | 36 | Please find the task assignments in the [Task File](./task.md). -------------------------------------------------------------------------------- /day-05/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/fc63718202c60f50b1e96513b0e65bd4c7fb6539/day-05/banner.png -------------------------------------------------------------------------------- /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-05/index.js: -------------------------------------------------------------------------------- 1 | console.log("day 05"); 2 | 3 | // for loop 4 | // “A for loop is best when we know exactly how many times we need to run a block of code.” 5 | 6 | /* 7 | for (initialization; condition; update) { 8 | // Code 9 | } 10 | */ 11 | 12 | for (let count=1; count <= 5; count++ ) { 13 | console.log("Iteration/Loop", count) 14 | } 15 | 16 | // Addition of even numbers between 1 to 100 17 | 18 | let sum = 0; 19 | for (let i = 1; i<= 100; i++) { 20 | if (i % 2 === 0) { 21 | //console.log("i", i) 22 | //sum = sum + i; 23 | sum += i; 24 | } 25 | } 26 | 27 | console.log("Sum is", sum); 28 | 29 | let language = "JavaScript"; 30 | 31 | for (let i = 0; i < language.length; i++) { 32 | console.log(language.charAt(i)) 33 | } 34 | 35 | // Nested Loop 36 | 37 | for(let i =1; i<=3; i++) { 38 | for(let j=1; j<=3; j++) { 39 | console.log("Row", i, "Col", j) 40 | } 41 | } 42 | 43 | // Break and Continue 44 | 45 | for (let i=1; i<=5; i++) { 46 | if (i===3) break; 47 | console.log(i) 48 | } 49 | 50 | // Continue 51 | 52 | for (let i=1; i<=5; i++) { 53 | if (i===3) continue; 54 | console.log(i) 55 | } 56 | 57 | // Multiple Counters for single loop 58 | 59 | for(let i=1, j=10; i<=10 && j>=1 ; i++, j--) { 60 | console.log(i, j); 61 | } 62 | 63 | /* 64 | * 65 | * * 66 | * * * 67 | * * * * 68 | * * * * * 69 | */ 70 | 71 | // While Loop 72 | // “A while loop runs as long as a given condition is true. It’s best when we don’t know in advance how many iterations are needed.” 73 | /* 74 | while(condition) { 75 | // Code 76 | } 77 | */ 78 | 79 | let counter = 1; 80 | while(counter <=5) { 81 | console.log(counter); 82 | counter++; 83 | } 84 | 85 | // do-while 86 | // “A do-while loop ensures that the code executes at least once before checking the condition.” 87 | /* 88 | do { 89 | // Code 90 | } while(condition); 91 | */ 92 | 93 | let num = 1; 94 | do { 95 | console.log(num); 96 | num++; 97 | } while(num <=5) 98 | 99 | 100 | // Infinite Loop 101 | 102 | for(;;){ 103 | console.log("I am looping forever!!!") 104 | } 105 | 106 | while(true) { 107 | 108 | } 109 | 110 | do { 111 | // Code 112 | } while(true) 113 | -------------------------------------------------------------------------------- /day-05/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. Generate a Pyramid Pattern using Nested Loop as it is shown below: 7 | 8 | ```bash 9 | * 10 | * * 11 | * * * 12 | * * * * 13 | * * * * * 14 | ``` 15 | 16 | ## 2. Craete Multiplication Table (Using for loop) 17 | Write a program to print the multiplication table of a given number up to 10. 18 | For Example: If N = 3, output should be: 19 | 20 | ```bash 21 | 3 x 1 = 3 22 | 3 x 2 = 6 23 | ... 24 | 3 x 10 = 30 25 | ``` 26 | 27 | ## 3. Find the summation of all odd numbers between 1 to 500 and print them on teh console log. 28 | 29 | ## 4. Skipping Multiples of 3 30 | Write a program to print numbers from 1 to 20, but skip multiples of 3. 31 | 32 | ## 5. Reverse Digits of a Number (Using while loop) 33 | Write a program to reverse the digits of a given number using a while loop. 34 | 35 | Example: 36 | 37 | ```bash 38 | Input: 6789 39 | Output: 9876 40 | ``` 41 | 42 | ## 6. Write your understanding on the difefrences between for, while, and do-while loop. Create their flow charts. 43 | -------------------------------------------------------------------------------- /day-06/README.md: -------------------------------------------------------------------------------- 1 | # Day 06 - 40 Days of JavaScript 2 | 3 | ## **🎯 Goal of This Lesson** 4 | 5 | - ✅ What Will We Learn 6 | - ✅ What is Function 7 | - ✅ Define a Function 8 | - ✅ Invoking a Function 9 | - ✅ Function as Expression 10 | - ✅ Parameter and Argument 11 | - ✅ Default Parameters 12 | - ✅ Rest parameter 13 | - ✅ Nested Functions 14 | - ✅ Callback Function 15 | - ✅ Pure Function 16 | - ✅ Higher Order Function 17 | - ✅ Arrow Function 18 | - ✅ IIFE 19 | - ✅ Call Stack 20 | - ✅ Recursion 21 | - ✅ Task and Wrap Up 22 | 23 | ## 🫶 Support 24 | Your support means a lot. 25 | 26 | - Please SUBSCRIBE to [tapaScript YouTube Channel](https://youtube.com/tapasadhikary) if not done already. A Big Thank You! 27 | - 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. 28 | 29 | > Many Thanks to all the `Stargazers` who have supported this project with stars(⭐) 30 | 31 | ### 🤝 Sponsor My Work 32 | 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)**. 33 | 34 | ## Video 35 | Here is the video for you to go through and learn: 36 | 37 | [![day-06](./banner.png)](https://www.youtube.com/watch?v=6UJ9SyHvkJY "Video") 38 | 39 | ## **👩‍💻 🧑‍💻 Assignment Tasks** 40 | 41 | Please find the task assignments in the [Task File](./task.md). 42 | -------------------------------------------------------------------------------- /day-06/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/fc63718202c60f50b1e96513b0e65bd4c7fb6539/day-06/banner.png -------------------------------------------------------------------------------- /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-06/index.js: -------------------------------------------------------------------------------- 1 | console.log("Day 06"); 2 | 3 | // Define or Declare a Function 4 | function printThis() { 5 | console.log("Printing...") 6 | } 7 | 8 | // Call or Invoke a Function 9 | printThis(); 10 | 11 | // Function as an Expression 12 | let printMe = function() { 13 | console.log("Print Me") 14 | } 15 | 16 | printMe(); 17 | 18 | // Parameters & Arguments 19 | function sum(a, b) { 20 | const result = a + b; 21 | //console.log(result); 22 | return result; 23 | } 24 | 25 | let result = sum(10, 9); 26 | console.log(result) 27 | 28 | function double(x) { 29 | return 2*x; 30 | } 31 | console.log(double(result)); 32 | 33 | // Default Parameters 34 | 35 | function calc(a=0, b=0) { 36 | return (2 * (a + b )) 37 | } 38 | 39 | const resVar = calc() 40 | console.log(resVar); 41 | 42 | 43 | // Rest Parameter 44 | function calculateThis(x, y, ...rest){ 45 | console.log(x, y, rest) 46 | } 47 | 48 | calculateThis(1,2,3,4,5,6,7,8,9) 49 | 50 | // Nested Fucntion 51 | 52 | function outer() { 53 | console.log("Outer"); 54 | 55 | return function inner() { 56 | console.log("inner") 57 | } 58 | //inner(); 59 | } 60 | 61 | let retFunc = outer(); 62 | 63 | console.log(retFunc()); 64 | 65 | 66 | // callback function 67 | const toCallBuz = false; 68 | 69 | function foo(func) { 70 | console.log("foo"); 71 | if (toCallBuz){ 72 | func(); 73 | } 74 | } 75 | 76 | const buz = function() { 77 | console.log("buz") 78 | } 79 | 80 | foo(buz); 81 | 82 | // Pure function 83 | let greeetingMsg = "Hola " 84 | 85 | function greeting(name) { 86 | return greeetingMsg + name; 87 | } 88 | 89 | console.log(greeting("tapaScript")); 90 | console.log(greeting("tapaScript")); 91 | 92 | greeetingMsg = "Namaste " 93 | 94 | console.log(greeting("tapaScript")); 95 | console.log(greeting("tapaScript")); 96 | console.log(greeting("tapaScript")); 97 | 98 | 99 | // Higher Order Function 100 | 101 | function getCamera(camera) { 102 | camera(); 103 | } 104 | 105 | getCamera(function() { 106 | console.log("Sony") 107 | }) 108 | 109 | function returnFunc(param) { 110 | return function() { 111 | if (param === 1) { 112 | console.log("Hello") 113 | } 114 | 115 | } 116 | } 117 | 118 | const retFun = returnFunc(3); 119 | retFun(); 120 | 121 | 122 | // Arrow Function 123 | 124 | let greetMe = (greetingMsg) => { 125 | // 126 | // 127 | return greetingMsg + " great" 128 | } 129 | 130 | console.log(greetMe("Hola")); 131 | 132 | 133 | // IIFE(Immediately Invoked Function Expression) 134 | (function(count){ 135 | console.log("IIFE", count) 136 | })(1) 137 | 138 | 139 | // Recursion 140 | 141 | /*function foo() { 142 | foo(); 143 | }*/ 144 | 145 | function fetchWater(count) { 146 | console.log("Fetching Water...", count); 147 | if (count === 0) { 148 | console.log("No more water is left to fetch..."); 149 | return; 150 | } 151 | fetchWater(count - 1) 152 | } 153 | 154 | fetchWater(5) 155 | 156 | 157 | 158 | 159 | 160 | 161 | -------------------------------------------------------------------------------- /day-06/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. Write a Function to Convert Celsius to Fahrenheit 7 | Create a function celsiusToFahrenheit(celsius) that converts a temperature from Celsius to Fahrenheit. 8 | Formula: (Celsius * 9/5) + 32 = Fahrenheit 9 | 10 | ## 2. Create a Function to Find the Maximum of Two Numbers 11 | Write a function findMax(num1, num2) that returns the larger of the two numbers. It should work for negative numbers as well. 12 | 13 | ## 3. Function to Check if a String is a Palindrome 14 | Create a function isPalindrome(str) that checks if a given string is a palindrome (reads the same forward and backward). You can not use any string function that we have not learned in the series so far. 15 | 16 | ## 4. Write a Function to Find Factorial of a Number 17 | Create a function factorial(n) that returns the factorial of n. 18 | Example 5! = 5 * 4 * 3 * 2 * 1 19 | 20 | ## 5. Write a function to Count Vowels in a String 21 | Write a function countVowels(str) that counts the number of vowels (a, e, i, o, u) in a given string. 22 | 23 | ## 6. Write a Function to Capitalize the First Letter of Each Word in a Sentence 24 | Write a function capitalizeWords(sentence) that takes a sentence and capitalizes the first letter of each word. You can use the toUpperCase() method of string to convert the lowercase to uppercase. 25 | 26 | ## 7. Use an IIFE to Print “Hello, JavaScript!” 27 | Write an IIFE that prints "Hello, JavaScript!" to the console. Here the Second word must be supplied using paramneter and argument. 28 | 29 | ## 8. Create a Simple Callback Function 30 | Write a function greet(name, callback), where callback prints a message using the name parameter. 31 | 32 | ## 9. Create Call Stack Execution Diagram for this flow 33 | 34 | ```js 35 | function f1() {} 36 | function f2() { 37 | f1(); 38 | } 39 | f2(); 40 | ``` 41 | 42 | ## 10. Create Call Stack Execution Diagram for this flow 43 | 44 | ```js 45 | function f1() {} 46 | function f2() {} 47 | function f3() { 48 | f1(); 49 | } 50 | f2(); 51 | f3(); 52 | f1(); 53 | ``` -------------------------------------------------------------------------------- /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-07/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/fc63718202c60f50b1e96513b0e65bd4c7fb6539/day-07/banner.png -------------------------------------------------------------------------------- /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-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-07/rps/rps.js: -------------------------------------------------------------------------------- 1 | /** 2 | * The Rock 🪨, Paper 🧻, or Scissors ✂️ Game 3 | * This game will be played between the computer and human. Once Human will select Rock, Paper, or Scissors and in the next turn the computer will select Rock, Paper, or Scissors. 4 | * The Winner will be selected based on these rules: 5 | * - Rock can Break Scissors => Rock Wins 6 | * - Paper can wrap Rock => paper Wins 7 | * - Scissors can cut Paper => Scissors Wins 8 | * Ask the input from user and randomly select a computer selection to continue the game. 9 | */ 10 | 11 | // Assumptions: 12 | // 1. We have to prompt the user to get their inputs. 13 | // 2. The Computer's selection will be random. 14 | // 3. We have to compare user and computer's choice 15 | // 4. We need to announce the winner. 16 | // 5. After the Winner announcement, we may want to ask the user to play again or quit from the game. 17 | 18 | function rockPaperScissorsGame() { 19 | console.log("Getting Started With the Rock 🪨, Paper 🧻, or Scissors ✂️ Game"); 20 | const userChoicePrompt = prompt("Enter Rock 🪨, Paper 🧻, or Scissors ✂️"); 21 | const userChoice = userChoicePrompt.toLowerCase(); 22 | 23 | let computerChoice; 24 | const randomNumber = Math.floor(Math.random() * 3) + 1; 25 | 26 | if (randomNumber === 1) { 27 | computerChoice = "rock"; 28 | } else if (randomNumber === 2) { 29 | computerChoice = "paper"; 30 | } else { 31 | computerChoice = "scissors"; 32 | } 33 | 34 | console.log("User selected", userChoice); 35 | console.log("Computer selected", computerChoice); 36 | 37 | if ( 38 | (userChoice === "rock" && computerChoice === "scissors") || 39 | (userChoice === "paper" && computerChoice === "rock") || 40 | (userChoice === "scissors" && computerChoice === "paper") 41 | ) { 42 | console.log("You the User WIN, yay!!!!"); 43 | } else if ( userChoice === computerChoice) { 44 | console.log("The Game is a Tie"); 45 | } else if( 46 | (userChoice === "rock" && computerChoice === "paper") || 47 | (userChoice === "paper" && computerChoice === "scissors") || 48 | (userChoice === "scissors" && computerChoice === "rock") 49 | ) { 50 | console.log("Oh Ho... Computer Wins!!!!"); 51 | } else { 52 | console.log("Please check the input, We didn't understand it.") 53 | } 54 | 55 | const playAgainPrompt = prompt("Do You Want to Play Again? (yes/no)") 56 | const playAgain = playAgainPrompt ? playAgainPrompt.toLowerCase() : "no"; 57 | 58 | if (playAgain === "yes") { 59 | rockPaperScissorsGame(); 60 | } else { 61 | console.log("Thanks for Playing! See you Next Time") 62 | } 63 | } 64 | 65 | // Start This Game 66 | rockPaperScissorsGame(); -------------------------------------------------------------------------------- /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-07/secret-number/secret-number.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Let us play a number guessing game. 3 | * You will ask user for a number between 1 to 10. Once user will enter a number, you will tell user if the entered number is lower or higher. With this information, user will change the number and finally guess the right number. You also need to show the number of attempts made by users to rach to this right guess. 4 | */ 5 | 6 | // max number 7 | // min number 8 | 9 | // secret number is a random number between the min and max 10 | 11 | // get the prommpt from the user as a guess 12 | 13 | // Create a variable to store the number of attempts 14 | 15 | // Write the logic to check if the guess and the secret number are same. If not continue a loop to ask again. 16 | 17 | // Inside loop check if the guess is less than the secret or greater than, accordingly tell if the guess it low or high 18 | 19 | // Give the option to play again 20 | 21 | const MIN_NUMBER = 1; 22 | const MAX_NUMBER = 10; 23 | 24 | function startSecretNumberGame() { 25 | const secretNumber = Math.floor(Math.random() * MAX_NUMBER) + 1; 26 | let attempts = 0; 27 | let guess = null; 28 | 29 | console.log("Welcome to the Number Guessing Game!"); 30 | console.log("Try to guess a number between 1 and 10."); 31 | 32 | while (guess !== secretNumber) { 33 | const guessPrompt = prompt("Enter your guess: "); 34 | guess = parseInt(guessPrompt); 35 | 36 | if (isNaN(guess) || guess < MIN_NUMBER || guess > MAX_NUMBER) { 37 | console.log(`Invalid input! Please enter a number between ${MIN_NUMBER} and ${MAX_NUMBER}.`); 38 | continue; 39 | } 40 | 41 | attempts++; 42 | 43 | if (guess < secretNumber) { 44 | console.log("Too Low! Try again."); 45 | } else if (guess > secretNumber) { 46 | console.log("Too High! Try again."); 47 | } else { 48 | console.log(`🎉 Congrats! You guessed the number in ${attempts} attempts.`); 49 | break; 50 | } 51 | } 52 | 53 | const playAgainPrompt = prompt("Do you want to play again? (yes/no)"); 54 | console.log(playAgainPrompt); 55 | const playAgain = playAgainPrompt ? playAgainPrompt.toLocaleLowerCase() : "no"; 56 | if (playAgain === "yes") { 57 | startSecretNumberGame(); 58 | } else { 59 | console.log("Thanks for playing! See you next time."); 60 | } 61 | } 62 | 63 | // Start the game 64 | startSecretNumberGame(); -------------------------------------------------------------------------------- /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/README.md: -------------------------------------------------------------------------------- 1 | # Day 08 - 40 Days of JavaScript 2 | 3 | ## **🎯 Goal of This Lesson** 4 | 5 | - ✅ Welcome to Module 2 6 | - ✅ Why Execution Context 7 | - ✅ Lexical Environment 8 | - ✅ Execution Context 9 | - ✅ Global Execution Context 10 | - ✅ Function Execution Context 11 | - ✅ GEC and FEC With Complex Examples 12 | - ✅ Memory Management With Call Stack and Heap 13 | - ✅ Task for YOU! 14 | 15 | ## 🫶 Support 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 | 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 | Here is the video for you to go through and learn: 28 | 29 | [![day-08](./banner.png)](https://youtu.be/ylx5F7hbzVQ "Video") 30 | 31 | ## **👩‍💻 🧑‍💻 Assignment Tasks** 32 | 33 | Please find the task assignments in the [Task File](./task.md). 34 | -------------------------------------------------------------------------------- /day-08/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/fc63718202c60f50b1e96513b0e65bd4c7fb6539/day-08/banner.png -------------------------------------------------------------------------------- /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-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-08/gec.js: -------------------------------------------------------------------------------- 1 | var name = 'Tom'; 2 | 3 | function sayName() { 4 | console.log(this.name); 5 | } 6 | -------------------------------------------------------------------------------- /day-08/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /day-08/index.js: -------------------------------------------------------------------------------- 1 | var name = 'Tom'; 2 | 3 | function sayName() { 4 | console.log(this.name); 5 | } 6 | -------------------------------------------------------------------------------- /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-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-09/README.md: -------------------------------------------------------------------------------- 1 | # Day 09 - 40 Days of JavaScript 2 | 3 | ## **🎯 Goal of This Lesson** 4 | 5 | - ✅ Intro 6 | - ✅ Misconception About Hoisting 7 | - ✅ Variable Hoisting 8 | - ✅ Hoisting and let and const 9 | - ✅ Temporal Dead Zone(TDZ) 10 | - ✅ Functional Hoisting 11 | - ✅ Hoisting and Function As an Expression 12 | - ✅ Task and What’s Next? 13 | 14 | ## 🫶 Support 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 | 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)**. 24 | 25 | ## Video 26 | Here is the video for you to go through and learn: 27 | 28 | [![day-09](./banner.png)](https://youtu.be/OqMxh1QdYEg "Video") 29 | 30 | ## **👩‍💻 🧑‍💻 Assignment Tasks** 31 | 32 | Please find the task assignments in the [Task File](./task.md). 33 | -------------------------------------------------------------------------------- /day-09/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/fc63718202c60f50b1e96513b0e65bd4c7fb6539/day-09/banner.png -------------------------------------------------------------------------------- /day-09/feh.js: -------------------------------------------------------------------------------- 1 | test(); 2 | 3 | var test = function() { 4 | console.log('I am being tested'); 5 | } -------------------------------------------------------------------------------- /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-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-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-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-10/README.md: -------------------------------------------------------------------------------- 1 | # Day 10 - 40 Days of JavaScript 2 | 3 | ## **🎯 Goal of This Lesson** 4 | 5 | - ✅ Intro 6 | - ✅ Misconception About Hoisting 7 | - ✅ Variable Hoisting 8 | - ✅ Hoisting and let and const 9 | - ✅ Temporal Dead Zone(TDZ) 10 | - ✅ Functional Hoisting 11 | - ✅ Hoisting and Function As an Expression 12 | - ✅ Task and What’s Next? 13 | 14 | ## 🫶 Support 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 | 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)**. 24 | 25 | ## Video 26 | Here is the video for you to go through and learn: 27 | 28 | [![day-10](./banner.png)](https://youtu.be/14H2TsrjcLo "Video") 29 | 30 | ## The Scope Table 31 | ## Comparison Table: `var` vs `let` vs `const` 32 | 33 | | Feature | `var` | `let` | `const` | 34 | |-----------------------|-----------------------------|-----------------------------|-----------------------------| 35 | | **Scope** | Function scope | Block scope `{}` | Block scope `{}` | 36 | | **Hoisting** | Hoisted & initialized as `undefined` | Hoisted but in **Temporal Dead Zone (TDZ)** | Hoisted but in **Temporal Dead Zone (TDZ)** | 37 | | **Attached to `window`?** | ✅ Yes | ❌ No | ❌ No | 38 | | **Can be Re-declared?** | ✅ Yes | ❌ No | ❌ No | 39 | | **Can be Reassigned?** | ✅ Yes | ✅ Yes | ❌ No | 40 | | **Initial Value Required?** | ❌ No | ❌ No | ✅ Yes (Must be initialized) | 41 | | **Mutability** | Mutable | Mutable | Immutable (Can't be reassigned but mutable if it's an object or array) | 42 | | **Use in Loops** | Allowed but not recommended (function scope issues) | ✅ Recommended | ❌ Not recommended for changing values | 43 | 44 | 45 | ## **👩‍💻 🧑‍💻 Assignment Tasks** 46 | 47 | Please find the task assignments in the [Task File](./task.md). 48 | -------------------------------------------------------------------------------- /day-10/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/fc63718202c60f50b1e96513b0e65bd4c7fb6539/day-10/banner.png -------------------------------------------------------------------------------- /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-10/index.js: -------------------------------------------------------------------------------- 1 | console.log("Day 10"); 2 | 3 | // 4 Types of Scope in JavaScript 4 | // 1. Global Scope 5 | // 2. Function Scope 6 | // 3. Block Scope 7 | // 4. Module Scope 8 | 9 | // Global Scope 10 | // Variables declared outside of any function or block scope 11 | // are in the global scope 12 | 13 | let name = "Tapas"; 14 | 15 | function greeting() { 16 | console.log("Hello ", name); 17 | } 18 | 19 | greeting(); 20 | 21 | console.log(name);// "Tapas" 22 | 23 | { 24 | console.log("Inside Block", name) 25 | } 26 | 27 | // Function Scope: Variables declared inside a function are only 28 | // accessible within that function. 29 | 30 | function toDo() { 31 | let task = "Learning 40 days of JS" 32 | console.log(task); 33 | } 34 | 35 | toDo(); 36 | 37 | // console.log(task); 38 | 39 | // Block Scope: Variables declared using let and const inside {} cannot be accessed outside the block. 40 | 41 | { 42 | let count = 10; 43 | console.log(count) 44 | } 45 | 46 | // console.log(count) 47 | 48 | // Scope Chain 49 | 50 | let globalVar = "I am a Global Variable"; 51 | 52 | function outer() { 53 | let outerVar = "I am an Outer Variable"; 54 | 55 | function inner() { 56 | let innerVar = "I am an Inner Variable"; 57 | 58 | console.log(innerVar); // "I am an Inner Variable" 59 | console.log(outerVar); // "I am an Outer Variable" 60 | console.log(globalVar); // "I am a Global Variable" 61 | } 62 | 63 | inner(); 64 | } 65 | 66 | outer(); 67 | 68 | console.log(outerVar); // Reference Error 69 | 70 | 71 | 72 | var count = 10; 73 | 74 | function outer() { 75 | // var count = 20; 76 | 77 | function inner() { 78 | //var count = 30; 79 | console.log(count); // 10 80 | } 81 | inner(); 82 | console.log(count); // 10 83 | } 84 | 85 | outer(); 86 | console.log(count); // 10 87 | 88 | 89 | // Variable Shadowing 90 | 91 | let message = "I am doing great" 92 | 93 | function situation() { 94 | let message = "I am not doing great" 95 | console.log(message); // I am not doing great 96 | } 97 | 98 | situation(); 99 | console.log(message); // I am doing great -------------------------------------------------------------------------------- /day-10/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. What will be the output of the following code and why? 7 | ```js 8 | let user = "Alice"; 9 | 10 | function outer() { 11 | function inner() { 12 | console.log(user); 13 | } 14 | let user = "Bob"; 15 | inner(); 16 | } 17 | 18 | outer(); 19 | ``` 20 | 21 | ## 2. What is the mistake in the code below? 22 | ```js 23 | let total = 0; // Global, bad practice 24 | 25 | function add(num) { 26 | total += num; 27 | } 28 | 29 | add(5); 30 | add(10); 31 | console.log(total); 32 | ``` 33 | 34 | ## 3. Create a function with a nested function and log a variable from the parent function. 35 | 36 | ## 4. Use a loop inside a function and declare a variable inside the loop. Can you access it outside? 37 | 38 | ## 5. Write a function that tries to access a variable declared inside another function. 39 | 40 | ## 6. What will be the output and why? 41 | ```js 42 | console.log(a); 43 | let a = 10; 44 | ``` 45 | 46 | ## 7. Where is the `age` variable accessible? 47 | ```js 48 | function showAge() { 49 | let age = 25; 50 | console.log(age); 51 | } 52 | 53 | console.log(age); 54 | ``` 55 | 56 | Options: 57 | - A: In Global 58 | - B: Only inside showAge 59 | - C: It will cause an error 60 | - D: None of the above 61 | 62 | ## 8. What will be the output and explain the output? 63 | ```js 64 | let message = "Hello"; 65 | 66 | function outer() { 67 | let message = "Hi"; 68 | 69 | function inner() { 70 | console.log(message); 71 | } 72 | 73 | inner(); 74 | } 75 | 76 | outer(); 77 | ``` 78 | 79 | ## 9. What will be the output and why? 80 | ```js 81 | let x = "Global"; 82 | 83 | function outer() { 84 | let x = "Outer"; 85 | 86 | function inner() { 87 | let x = "Inner"; 88 | console.log(x); 89 | } 90 | 91 | inner(); 92 | } 93 | 94 | outer(); 95 | ``` 96 | ## 10. What will be the output and why? 97 | ```js 98 | function counter() { 99 | let count = 0; 100 | return function () { 101 | count--; 102 | console.log(count); 103 | }; 104 | } 105 | 106 | const reduce = counter(); 107 | reduce(); 108 | reduce(); 109 | ``` 110 | -------------------------------------------------------------------------------- /day-11/README.md: -------------------------------------------------------------------------------- 1 | # Day 11 - 40 Days of JavaScript 2 | 3 | ## **🎯 Goal of This Lesson** 4 | 5 | - ✅ Day 11 6 | - ✅ What is Closure in JavaScript? 7 | - ✅ Understanding Closure With Lexical Scope 8 | - ✅ Closure Memorizing Outer Values 9 | - ✅ Closure Real World Use Case 10 | - ✅ Function Factory With Closure 11 | - ✅ Closure & Memory Leak 12 | - ✅ Advantages of Closure 13 | - ✅ Closure & Event Handlers 14 | 15 | ## 🫶 Support 16 | 17 | Your support means a lot. 18 | 19 | - Please SUBSCRIBE to [tapaScript YouTube Channel](https://youtube.com/tapasadhikary) if not done already. A Big Thank You! 20 | - 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. 21 | 22 | > Many Thanks to all the `Stargazers` who have supported this project with stars(⭐) 23 | 24 | ### 🤝 Sponsor My Work 25 | 26 | 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)**. 27 | 28 | ## Video 29 | 30 | Here is the video for you to go through and learn: 31 | 32 | [![day-11](./banner.png)](https://youtu.be/lA7CGz3iHyI "Video") 33 | 34 | ## **👩‍💻 🧑‍💻 Assignment Tasks** 35 | 36 | Please find the task assignments in the [Task File](./task.md). 37 | -------------------------------------------------------------------------------- /day-11/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/fc63718202c60f50b1e96513b0e65bd4c7fb6539/day-11/banner.png -------------------------------------------------------------------------------- /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-11/index.js: -------------------------------------------------------------------------------- 1 | console.log("Day 11 - Closure"); 2 | 3 | // Outher Inner 4 | function outer() { 5 | let x = 10; 6 | 7 | return function inner() { 8 | console.log(x); 9 | }; 10 | } 11 | 12 | const func = outer(); 13 | console.log(func()); 14 | 15 | // Count Closure 16 | function outerCount() { 17 | let count = 0; 18 | 19 | return function innerCount() { 20 | count++; 21 | console.log(count); 22 | }; 23 | } 24 | 25 | const retVal = outerCount(); 26 | 27 | retVal(); // 1 28 | retVal(); // 2 29 | retVal(); // 3 30 | 31 | // Real World Example 32 | 33 | function createBankAccount(initialBalance) { 34 | let balance = initialBalance; 35 | 36 | return { 37 | deposit: (amount) => { 38 | balance = balance + amount; 39 | console.log("Deposited ", amount, " Current Balance ", balance); 40 | }, 41 | 42 | withdraw: (amount) => { 43 | if (amount > balance) { 44 | console.warn("Insifficient Fund"); 45 | } else { 46 | balance = balance - amount; 47 | console.log("Withdrawn ", amount, " Current Balance ", balance); 48 | } 49 | }, 50 | 51 | checkBalance: () => console.log("Current Balance", balance), 52 | }; 53 | } 54 | 55 | const tapaScriptAccount = createBankAccount(100); 56 | 57 | console.log(tapaScriptAccount) 58 | 59 | console.log(tapaScriptAccount.deposit(300)); // 400 60 | 61 | console.log(tapaScriptAccount.withdraw(50)); // 350 62 | 63 | console.log(tapaScriptAccount.withdraw(20)); // 330 64 | 65 | console.log(tapaScriptAccount.withdraw(50)); // 280 66 | 67 | console.log(tapaScriptAccount.withdraw(150)); // 130 68 | 69 | console.log(tapaScriptAccount.checkBalance()); // 130 70 | 71 | 72 | function dealingWithBigData() { 73 | let bigData = new Array(10000000).fill("*") 74 | 75 | return function() { 76 | console.log(bigData[3]) 77 | } 78 | } 79 | 80 | const variable12 = dealingWithBigData(); 81 | 82 | console.log(variable12()) 83 | 84 | 85 | // Usefulness of Closure 86 | 87 | // 1. You can keep the variables private without exposing them. 88 | // 2. You can stop variable pollution. 89 | // 3. You can create a function factory. 90 | // 4. You can keep a variable alive between multiple calls. 91 | 92 | function timer() { 93 | let secs = 0; 94 | 95 | return function() { 96 | secs++; 97 | console.log("elaspsed seconds ", secs) 98 | } 99 | } 100 | 101 | const timerInstance = timer(); 102 | timerInstance(); // 1 103 | timerInstance(); // 2 104 | timerInstance(); // 3 105 | 106 | 107 | // Closure in Event handler 108 | 109 | function setupButton() { 110 | let clickCount = 0; 111 | 112 | document.getElementById("myButton").addEventListener("click", function() { 113 | clickCount++; 114 | console.log(`Button clicked ${clickCount} times`); 115 | }); 116 | } 117 | 118 | setupButton(); -------------------------------------------------------------------------------- /day-11/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. What will be the output of the following code and why? 7 | ```js 8 | function outer() { 9 | let count = 0; 10 | return function inner() { 11 | count++; 12 | console.log(count); 13 | }; 14 | } 15 | const counter = outer(); 16 | counter(); 17 | counter(); 18 | ``` 19 | 20 | ## 2. What will be the output and why? 21 | ```js 22 | function testClosure() { 23 | let x = 10; 24 | return function () { 25 | return x * x; 26 | }; 27 | } 28 | console.log(testClosure()()); 29 | ``` 30 | 31 | ## 3. Create a button dynamically and attach a click event handler using a closure. The handler should count and log how many times the button was clicked. 32 | 33 | ## 4. Write a function `createMultiplier(multiplier)` that returns another function to multiply numbers. 34 | 35 | ## 5. What happens if a closure references an object? 36 | - 1) The object is garbage collected immediately 37 | - 2) The object remains in memory as long as the closure exists 38 | - 3) The object is automatically cloned 39 | - 4) None of the Above. 40 | 41 | ## 6. Write a function factory of counter to increment, decrement, and reset a counter. Use closure to refer the count value across the functuions. 42 | -------------------------------------------------------------------------------- /day-12/README.md: -------------------------------------------------------------------------------- 1 | # Day 12 - 40 Days of JavaScript 2 | 3 | ## **🎯 Goal of This Lesson** 4 | 5 | - ✅ Welcome To Day 12 6 | - ✅ What Will We Cover? 7 | - ✅ JavaScript Objects 8 | - ✅ Create Objects with Literal Syntax 9 | - ✅ Accessing Object Properties 10 | - ✅ Adding New Property to Object 11 | - ✅ Keys With Special Characters 12 | - ✅ Modifying Existing Property Value 13 | - ✅ Deleting a Key From Object 14 | - ✅ Accessing Dynamic Key Value 15 | - ✅ Create Object With Dynamic Values 16 | - ✅ Constructor Function To Create Objects 17 | - ✅ Using Object Constructor 18 | - ✅ Using Factory Function 19 | - ✅ Object Shorthand 20 | - ✅ Object Methods 21 | - ✅ Nested Objects 22 | - ✅ The “in” operator 23 | - ✅ The for…in loop 24 | - ✅ Object.keys() method 25 | - ✅ Object References 26 | - ✅ B.R.E.A.K 27 | - ✅ Object.assign() 28 | - ✅ Shallow Copy vs. Deep Copy 29 | - ✅ Convert an Object to an Array 30 | - ✅ Concert Map or Array to Object 31 | - ✅ Immutability with freeze() 32 | - ✅ Immutability with seal() 33 | - ✅ The hasOwn() Method 34 | - ✅ What is Object Destructuring? 35 | - ✅ Create a New Variable 36 | - ✅ Aliases 37 | - ✅ Nested Object Destructuring 38 | - ✅ Destructuring to Function Parameter 39 | - ✅ Destructure a Function Return Value 40 | - ✅ Destructuring in Loops 41 | - ✅ Optional Chaining 42 | - ✅ Are You Tired? 43 | 44 | ## 🫶 Support 45 | 46 | Your support means a lot. 47 | 48 | - Please SUBSCRIBE to [tapaScript YouTube Channel](https://youtube.com/tapasadhikary) if not done already. A Big Thank You! 49 | - 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. 50 | 51 | > Many Thanks to all the `Stargazers` who have supported this project with stars(⭐) 52 | 53 | ### 🤝 Sponsor My Work 54 | 55 | 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)**. 56 | 57 | ## Video 58 | 59 | Here is the video for you to go through and learn: 60 | 61 | [![day-12](./banner.png)](https://youtu.be/c5vEfYj5yZM "Video") 62 | 63 | ## **👩‍💻 🧑‍💻 Assignment Tasks** 64 | 65 | Please find the task assignments in the [Task File](./task.md). 66 | -------------------------------------------------------------------------------- /day-12/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/fc63718202c60f50b1e96513b0e65bd4c7fb6539/day-12/banner.png -------------------------------------------------------------------------------- /day-12/destructuring.js: -------------------------------------------------------------------------------- 1 | console.log("Learn Object Destructuring....") 2 | 3 | const student = { 4 | 'name': 'John Williamson', 5 | 'age': 9, 6 | 'std': 3, 7 | 'subjects': ['Maths', 'English', 'EVS'], 8 | 'parents': { 9 | 'father': 'Brown Williamson', 10 | 'mother': 'Sophia', 11 | 'email': 'john-parents@abcde.com' 12 | }, 13 | 'address': { 14 | 'street': '65/2, brooklyn road', 15 | 'city': 'Carterton', 16 | 'country': 'New Zealand', 17 | 'zip': 5791 18 | } 19 | } 20 | 21 | const {name, age, meal="bread"} = student; 22 | console.log(name, age, meal); 23 | 24 | const {subjects, numberOfSubjects = subjects.length} = student; 25 | console.log(numberOfSubjects); // 3 26 | 27 | const {std: standard} = student; 28 | console.log(standard) 29 | 30 | const {address: {zip}} = student; 31 | console.log(zip); 32 | 33 | function sendEmail({parents: {email}}) { 34 | console.log(`Sent an email to ${email}`) 35 | } 36 | 37 | sendEmail(student); 38 | 39 | 40 | 41 | const getStudent = () => { 42 | return { 43 | 'name': 'John Williamson', 44 | 'age': 9, 45 | 'std': 3, 46 | 'subjects': ['Maths', 'English', 'EVS'], 47 | 'parents': { 48 | 'father': 'Brown Williamson', 49 | 'mother': 'Sophia', 50 | 'email': 'john-parents@abcde.com' 51 | }, 52 | 'address': { 53 | 'street': '65/2, brooklyn road', 54 | 'city': 'Carterton', 55 | 'country': 'New Zealand', 56 | 'zip': 5791 57 | } 58 | } 59 | } 60 | 61 | const {name: anotherName, subjects: anotherSubs} = getStudent(); 62 | console.log(anotherName, anotherSubs) 63 | 64 | 65 | const students = [ 66 | { 67 | 'name': 'William', 68 | 'grade': 'A' 69 | }, 70 | { 71 | 'name': 'Tom', 72 | 'grade': 'A+' 73 | }, 74 | { 75 | 'name': 'Bob', 76 | 'grade': 'B' 77 | } 78 | ]; 79 | 80 | for ( let {name, grade} of students) { 81 | console.log(name, grade) 82 | } 83 | 84 | 85 | 86 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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-12/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. What will be the output and why? 8 | 9 | ```js 10 | const user = { name: "Alex", age: undefined }; 11 | console.log(user.age ?? "Not provided"); 12 | ``` 13 | 14 | ## 2. What will happen if we try to modify a frozen object? 15 | 16 | ```js 17 | const obj = Object.freeze({ a: 1 }); 18 | obj.a = 2; 19 | console.log(obj.a); 20 | ``` 21 | 22 | ## 3. Given an object with deeply nested properties, extract name, company, and address.city using destructuring 23 | 24 | ```js 25 | const person = { 26 | name: "Tapas", 27 | company: { 28 | name: "tapaScript", 29 | location: { 30 | city: "Bangalore", 31 | zip: "94107" 32 | } 33 | } 34 | }; 35 | ``` 36 | 37 | ## 4. Build a Student Management System 38 | 39 | - Store student details in an object (name, age, grades). 40 | - Implement a method to calculate the average grade. 41 | 42 | ## 5. Book Store Inventory System 43 | 44 | - Store books in an object. 45 | - Add functionality to check availability and restock books. 46 | 47 | ## 6. What is the difference between Object.keys() and Object.entries()? Explain with examples 48 | 49 | ## 7. How do you check if an object has a certain property? 50 | 51 | ## 8. What will be the output and why? 52 | 53 | ```js 54 | const person = { name: "John" }; 55 | const newPerson = person; 56 | newPerson.name = "Doe"; 57 | console.log(person.name); 58 | ``` 59 | 60 | ## 9. What’s the best way to deeply copy a nested object? Expalin with examples 61 | 62 | ## 10. Loop and print values using Object destructuiring 63 | 64 | ```js 65 | const users = [ 66 | { 67 | 'name': 'Alex', 68 | 'address': '15th Park Avenue', 69 | 'age': 43 70 | }, 71 | { 72 | 'name': 'Bob', 73 | 'address': 'Canada', 74 | 'age': 53 75 | }, 76 | { 77 | 'name': 'Carl', 78 | 'address': 'Bangalore', 79 | 'age': 26 80 | } 81 | ]; 82 | ``` 83 | -------------------------------------------------------------------------------- /day-13/README.md: -------------------------------------------------------------------------------- 1 | # Day 13 - 40 Days of JavaScript 2 | 3 | ## **🎯 Goal of This Lesson** 4 | 5 | - ✅ Welcome to Day 13 6 | - ✅ What is “this”? 7 | - ✅ this in Global 8 | - ✅ Implicit Binding 9 | - ✅ this Inside an Arrow Function 10 | - ✅ Explicit Binding 11 | - ✅ The call() method 12 | - ✅ The apply() method 13 | - ✅ The bind() method 14 | - ✅ The new Keyword and this Keyword 15 | - ✅ A Quick Recap 16 | - ✅ Interview Questions and Answers 17 | - ✅ Task and What’s Next? 18 | 19 | ## 🫶 Support 20 | 21 | Your support means a lot. 22 | 23 | - Please SUBSCRIBE to [tapaScript YouTube Channel](https://youtube.com/tapasadhikary) if not done already. A Big Thank You! 24 | - 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. 25 | 26 | > Many Thanks to all the `Stargazers` who have supported this project with stars(⭐) 27 | 28 | ### 🤝 Sponsor My Work 29 | 30 | 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)**. 31 | 32 | ## Video 33 | 34 | Here is the video for you to go through and learn: 35 | 36 | [![day-13](./banner.png)](https://youtu.be/9mfb0j9PcHw "Video") 37 | 38 | ## **👩‍💻 🧑‍💻 Assignment Tasks** 39 | 40 | Please find the task assignments in the [Task File](./task.md). 41 | -------------------------------------------------------------------------------- /day-13/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/fc63718202c60f50b1e96513b0e65bd4c7fb6539/day-13/banner.png -------------------------------------------------------------------------------- /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-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-13/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 table of two columns, `situation` and `value`. Now add the rows for every situations and the value of `this` in that situation. Please cover the following situations 8 | 9 | - At the Global 10 | - Inside an Object Method 11 | - Inside the Satandalone non-Arrow Function 12 | - Inside an Arrow Function(standalone) 13 | - Inside an Arrow Function(as object method) 14 | - Inside an object created with the Constructor Function 15 | 16 | Please add examples for each of the scenarios. 17 | 18 | ## 2. What is the problem here? Fix it to log the correct name and explain the fix 19 | 20 | ```js 21 | const user = { 22 | name: "tapaScript", 23 | greet: () => { 24 | console.log(`Hello, ${this.name}!`); 25 | }, 26 | }; 27 | 28 | user.greet(); 29 | ``` 30 | 31 | ## 3. Can you explain what is the problem here and fix the issue to log the correct name? 32 | 33 | ```js 34 | const obj = { 35 | name: "Tom", 36 | greet: function () { 37 | console.log(`Hello, ${this.name}!`); 38 | }, 39 | }; 40 | 41 | const greetFn = obj.greet; 42 | greetFn(); 43 | ``` 44 | 45 | ## 4. What is the problem with the following code? Why isn't it logging the name correctly? 46 | 47 | ```js 48 | const user = { 49 | name: "Alex", 50 | greet: function () { 51 | function inner() { 52 | console.log(`Hello, ${this.name}!`); 53 | } 54 | inner(); 55 | }, 56 | }; 57 | 58 | user.greet(); 59 | ``` 60 | 61 | ## 5. Create a `Sports` constructor function that takes `name` and `number of players` as arguments and assigns them using `this` keyword. Then, create two sports instances and log their details 62 | 63 | ## 6. Can you attach the car1's `describe()` method to car2 object? Give all possible solutions that you can think of 64 | 65 | ```js 66 | const car1 = { 67 | brand: "Audi", 68 | model: "A8", 69 | describe: function () { 70 | console.log(`This car is a ${this.brand} ${this.model}.`); 71 | }, 72 | }; 73 | 74 | const car2 = { 75 | brand: "BMW", 76 | model: "X1", 77 | }; 78 | ``` 79 | 80 | ## 7. What will be the output of the following code and why? 81 | 82 | ```js 83 | const person = { 84 | name: "Charlie", 85 | sayHello: function () { 86 | console.log(this.name); 87 | }, 88 | sayHelloArrow: () => { 89 | console.log(this.name); 90 | }, 91 | }; 92 | 93 | person.sayHello(); 94 | person.sayHelloArrow(); 95 | ``` 96 | 97 | Options are: 98 | 99 | - A: "Charlie" and "Charlie" 100 | - B: "Charlie" and undefined 101 | - C: "Charlie" and "" (empty string) 102 | - D: undefined and "Charlie" 103 | -------------------------------------------------------------------------------- /day-14/README.md: -------------------------------------------------------------------------------- 1 | # Day 14 - 40 Days of JavaScript 2 | 3 | ## **🎯 Goal of This Lesson** 4 | 5 | - ✅ Why Error Handling 6 | - ✅ What Will We Learn? 7 | - ✅ Errors in JavaScript 8 | - ✅ Handling Errors With try and catch 9 | - ✅ The Error Object 10 | - ✅ Real World Use Cases 11 | - ✅ Throwing Error 12 | - ✅ A Few More Error Cases 13 | - ✅ Rethrowing Error 14 | - ✅ The finally 15 | - ✅ Custom Errors 16 | - ✅ The Self Assignment Operator(dream so far!) 17 | - ✅ Task and What’s Next? 18 | 19 | ## 🫶 Support 20 | 21 | Your support means a lot. 22 | 23 | - Please SUBSCRIBE to [tapaScript YouTube Channel](https://youtube.com/tapasadhikary) if not done already. A Big Thank You! 24 | - 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. 25 | 26 | > Many Thanks to all the `Stargazers` who have supported this project with stars(⭐) 27 | 28 | ### 🤝 Sponsor My Work 29 | 30 | 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)**. 31 | 32 | ## Video 33 | 34 | Here is the video for you to go through and learn: 35 | 36 | [![day-14](./banner.png)](https://youtu.be/XpMW-gxNYD8 "Video") 37 | 38 | ## **👩‍💻 🧑‍💻 Assignment Tasks** 39 | 40 | Please find the task assignments in the [Task File](./task.md). 41 | -------------------------------------------------------------------------------- /day-14/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/fc63718202c60f50b1e96513b0e65bd4c7fb6539/day-14/banner.png -------------------------------------------------------------------------------- /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-14/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. What will be the output of the following code? 8 | 9 | ```js 10 | try { 11 | let r = p + 50; 12 | console.log(r); 13 | } catch (error) { 14 | console.log("An error occurred:", error.name); 15 | } 16 | ``` 17 | 18 | - ReferenceError 19 | - SyntaxError 20 | - TypeError 21 | - No error, it prints 10 22 | 23 | ## 2. Write a function processPayment(amount) that checks if the amount is positive and not exceeding balance. If any condition fails, throw appropriate errors 24 | 25 | ## 3. Implement a custom error handling system for an e-commerce website that categorizes errors as 26 | 27 | - UserError 28 | - PaymentError 29 | - ServerError 30 | - EmailError 31 | 32 | ## 4. Simulate an API call function fetchData(url). If the URL does not start with "https", throw an "Invalid URL" error. Handle it using try...catch 33 | 34 | ## 5. Implement a custom error type ValidationError using constructor functions to handle form validation errors 35 | 36 | Example: 37 | 38 | ```js 39 | const userInput = { username: "", age: -2 }; 40 | validateUser(userInput); 41 | 42 | // Output: 43 | // ValidationError: Username cannot be empty 44 | // ValidationError: Age must be a positive number 45 | ``` 46 | 47 | ## 6. Write a function readFile(filePath) that simulates reading a file. If the file does not exist (simulate with a condition), throw a "File not found" error. Handle the error with try...catch. Make sure you have code to handle releasing the IO resources 48 | 49 | Please note, you do not have to implement the actual IO operation here. Just use the console.log to simulate them. 50 | 51 | ## 7. Write a function parseJson(str) that takes a JSON string and tries to parse it using JSON.parse(). If parsing fails, catch the error and return "Invalid JSON" 52 | 53 | ## 8. What is the purpose of throw in JavaScript? 54 | 55 | - It catches an error 56 | - It stops the execution of a program 57 | - It creates a new error manually 58 | - It prints an error message 59 | 60 | ## 9. What does the finally block do in a try...catch statement? 61 | 62 | - Runs only if an error occurs 63 | - Runs only if no error occurs 64 | - Runs regardless of whether an error occurs or not 65 | - Stops the execution of the script 66 | 67 | ## 10. Create a table exaplaining the usages of try, catch, throw, rethrow, error object 68 | -------------------------------------------------------------------------------- /day-15/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/fc63718202c60f50b1e96513b0e65bd4c7fb6539/day-15/banner.png -------------------------------------------------------------------------------- /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-16/README.md: -------------------------------------------------------------------------------- 1 | # Day 16 - 40 Days of JavaScript - JavaScript Debugging 2 | 3 | ## **🎯 Goal of This Lesson** 4 | 5 | - ✅ Introduction 6 | - ✅ What is Debugging? 7 | - ✅ Application to Debug 8 | - ✅ The famous console.log 9 | - ✅ DevTools Overview 10 | - ✅ The Source Panel 11 | - ✅ Setting Debug Points 12 | - ✅ Debugging Code 13 | - ✅ Conditional Breakpoint 14 | - ✅ Debug Handlers 15 | - ✅ Debug DOM Changes 16 | - ✅ The "debugger" Handle 17 | - ✅ Debugging Scope 18 | - ✅ Observing Call Stack 19 | - ✅ Watching Variable Expressions 20 | - ✅ Edit and Save on Run Time 21 | - ✅ Workspace 22 | - ✅ Debugguing with VS Code 23 | - ✅ A Few Debugging Tips 24 | 25 | ## 🫶 Support 26 | 27 | Your support means a lot. 28 | 29 | - Please SUBSCRIBE to [tapaScript YouTube Channel](https://youtube.com/tapasadhikary) if not done already. A Big Thank You! 30 | - 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. 31 | 32 | > Many Thanks to all the `Stargazers` who have supported this project with stars(⭐) 33 | 34 | ### 🤝 Sponsor My Work 35 | 36 | 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)**. 37 | 38 | ## Video 39 | 40 | Here is the video for you to go through and learn: 41 | 42 | [![day-16](./banner.png)](https://youtu.be/VInAd-GJZec "Video") 43 | -------------------------------------------------------------------------------- /day-16/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/fc63718202c60f50b1e96513b0e65bd4c7fb6539/day-16/banner.png -------------------------------------------------------------------------------- /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-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-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-17/README.md: -------------------------------------------------------------------------------- 1 | # Day 17 - 40 Days of JavaScript - Intro to JavaScript DOM 2 | 3 | ## **🎯 Goal of This Lesson** 4 | 5 | - ✅ Module 3 & DOM 6 | - ✅ Expense Tracker Project 7 | - ✅ What is DOM? 8 | - ✅ DOM and JavaScript 9 | - ✅ What else to Cover? 10 | - ✅ DOM Types 11 | - ✅ Accessing DOM 12 | - ✅ Get Element By ID 13 | - ✅ Get Element By Class Name 14 | - ✅ Get Element By Tag Name 15 | - ✅ Query Selector 16 | - ✅ Query Selector All 17 | - ✅ Mini Project 1 18 | - ✅ Mini Project 2 19 | - ✅ About Task 20 | - ✅ Playing With DOM on DevTools 21 | 22 | ## 🫶 Support 23 | 24 | Your support means a lot. 25 | 26 | - Please SUBSCRIBE to [tapaScript YouTube Channel](https://youtube.com/tapasadhikary) if not done already. A Big Thank You! 27 | - 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. 28 | 29 | > Many Thanks to all the `Stargazers` who have supported this project with stars(⭐) 30 | 31 | ### 🤝 Sponsor My Work 32 | 33 | 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)**. 34 | 35 | ## Video 36 | 37 | Here is the video for you to go through and learn: 38 | 39 | [![day-17](./banner.png)](https://youtu.be/F4mVSaj6uls "Video") 40 | 41 | ## **👩‍💻 🧑‍💻 Assignment Tasks** 42 | 43 | Please find the task assignments in the [Task File](./task.md). 44 | -------------------------------------------------------------------------------- /day-17/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/fc63718202c60f50b1e96513b0e65bd4c7fb6539/day-17/banner.png -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /day-17/index.js: -------------------------------------------------------------------------------- 1 | console.log("Day 17 - Introduction to DOM"); 2 | 3 | /* 4 | - What is DOM? 5 | - Understanding DOM Types 6 | - Accessing DOM 7 | - Mini Project(s) 8 | - DevTools and DOM 9 | - Tasks 10 | */ 11 | 12 | // DOM Types 13 | // 1. Document - Represents the entire page and it is the root node of the DOM tree. 14 | console.log(document); 15 | // 2. Node - A generic term for any elements in the DOM tree. Element Node, Text Node, Attribute Node. 16 | // 3. Element - A specific type of node that represents HTML tags/elements 17 | // 4. NodeList - An array of Nodes. 18 | // 5. Attr - repesents the attribute of a node. 19 | // some image 20 | // 6. NameNodeMap - A collection of Attr. 21 | 22 | 23 | // Accessing DOM 24 | 25 | 26 | // By id 27 | let titleElem = document.getElementById("heading"); 28 | console.log(titleElem); 29 | 30 | // By class 31 | let infoElems = document.getElementsByClassName("info"); 32 | console.log(infoElems); 33 | console.log(infoElems[0], infoElems[1]); 34 | [...infoElems].forEach((elem) => { 35 | console.log(elem); 36 | }); 37 | 38 | // By tag name 39 | 40 | let pTagElems = document.getElementsByTagName("p"); 41 | console.log(pTagElems) 42 | 43 | // Selctors - Query Selector and Query Selector All 44 | 45 | // Query Selector - querySelector() 46 | 47 | let para = document.querySelector("p.info"); 48 | console.log("using query selector", para); 49 | 50 | // Query Selector All 51 | let paras = document.querySelectorAll("p.info"); 52 | console.log("using query selector all", paras); 53 | 54 | let hOne = document.querySelector("#heading"); 55 | console.log("using query selector", hOne); 56 | 57 | // DOM Access Methods: 58 | 59 | // 1. getElementById(id) 60 | // 2. getElementsByClassName(className) 61 | // 3. getElementsByTagName(tagName) 62 | //4. querySelector(cssSelector) 63 | //5. querySelectorAll(cssSelector) 64 | 65 | // Mini Project - 1: Highlighter App 66 | 67 | function highlightText() { 68 | console.log("About to highlight a text..."); 69 | 70 | let elements = document.querySelectorAll("p.info"); 71 | 72 | elements.forEach((element) => { 73 | element.style.backgroundColor = "yellow"; 74 | }) 75 | } 76 | 77 | function filterList() { 78 | const inputElem = document.getElementById("searchInput"); 79 | const input = inputElem.value; 80 | 81 | const items = document.querySelectorAll("ul#itemList li"); 82 | 83 | items.forEach((item) => { 84 | item.style.display = item.innerText.toLowerCase().includes(input.toLowerCase()) ? "block" : "none"; 85 | }) 86 | 87 | } 88 | 89 | 90 | 91 | 92 | -------------------------------------------------------------------------------- /day-17/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. Find the Most Frequent Word in a Paragraph 8 | 9 | Consider the follwoing HTML: 10 | 11 | ```html 12 |
This is a test. This test is only a test.
13 | ``` 14 | 15 | Now, find and display the most frequently occurring word. Also put a count of occurance beside it. 16 | 17 | Hints: 18 | 19 | - Use document.querySelector() or getElementById() to select the paragraph. 20 | - Convert the text into an array of words. 21 | - Use querySelector() to display the most frequent word along with the count inside another `
`. 22 | 23 | ## 2. Create a zebra pattern 24 | 25 | Consider the following HTML: 26 | 27 | ```html 28 | 38 | ``` 39 | 40 | Now put alternate colors and background colors to each of the list tags. for example, 41 | 42 | - If tne BMW is in white color text, the background should be in black color. 43 | - Then for the next car it will be reversed, the color is black and the background is white. 44 | - Then again the next one is white color and background black 45 | - So on. 46 | 47 | ## 3. Write different ways we can access DOM and what they returns 48 | 49 | ## 4. Find and Replace Text Inside a Page 50 | 51 | Write a script that finds all occurrences of a word inside a `

` tag and replaces them with another word dynamically. 52 | 53 | ## 5. Extract and Count Unique Links from a Page 54 | 55 | Count all the unique hyperlinks (``) in a page and display their count. 56 | -------------------------------------------------------------------------------- /day-18/README.md: -------------------------------------------------------------------------------- 1 | # Day 18 - 40 Days of JavaScript - DOM Manipulations 2 | 3 | ## **🎯 Goal of This Lesson** 4 | 5 | - ✅ Module 3 & DOM 6 | - ✅ Intro to DOM Manipulation 7 | - ✅ What Will We Learn? 8 | - ✅ Create Elements 9 | - ✅ Inserting Elements - Before 10 | - ✅ Inserting Elements - After 11 | - ✅ Modify Content - innerHTML 12 | - ✅ Security Risk of innerHTML 13 | - ✅ Modify Content - textContent 14 | - ✅ Removing Elements 15 | - ✅ Travarsing DOM 16 | - ✅ Manipulating Styles 17 | - ✅ Manipulating Classes 18 | - ✅ Working with classLIst 19 | - ✅ Controlling Visibility 20 | - ✅ Project 1 - Toggle Me 21 | - ✅ Project 2 - Task Manager 22 | 0- ✅ Tasks and Wrapping Up 23 | 24 | ## 🫶 Support 25 | 26 | Your support means a lot. 27 | 28 | - Please SUBSCRIBE to [tapaScript YouTube Channel](https://youtube.com/tapasadhikary) if not done already. A Big Thank You! 29 | - 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. 30 | 31 | > Many Thanks to all the `Stargazers` who have supported this project with stars(⭐) 32 | 33 | ### 🤝 Sponsor My Work 34 | 35 | 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)**. 36 | 37 | ## Video 38 | 39 | Here is the video for you to go through and learn: 40 | 41 | [![day-18](./banner.png)](https://www.youtube.com/watch?v=BoYgn_Mf0hA "Video") 42 | 43 | ## **👩‍💻 🧑‍💻 Assignment Tasks** 44 | 45 | Please find the task assignments in the [Task File](./task.md). 46 | -------------------------------------------------------------------------------- /day-18/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/fc63718202c60f50b1e96513b0e65bd4c7fb6539/day-18/banner.png -------------------------------------------------------------------------------- /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-18/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | DOM Manipulations 8 | 9 | 10 | 11 | 12 | 13 |

Welcome to the Day 18

14 |

Hope you are enjoying 40 days of JavaScript

15 |
16 |

test

17 |
18 |
I am going to be removed
19 | 26 | 27 | some image 28 | 29 | 30 |
31 |

32 | I love DOM 33 |

34 | 35 |
36 | 37 |
38 |

Something

39 |

Somethign More

40 |

Somethign Even more

41 |
42 | 43 |

Let's do some style

44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /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-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-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-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-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-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-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-19/README.md: -------------------------------------------------------------------------------- 1 | # Day 19 - 40 Days of JavaScript - JavaScript Events 2 | 3 | ## **🎯 Goal of This Lesson** 4 | 5 | - ✅ What Will We Learn Today? 6 | - ✅ What is an Event? 7 | - ✅ Event Handling in markup 8 | - ✅ Event Handling in Script 9 | - ✅ addEventListener 10 | - ✅ removeEventListener 11 | - ✅ Handling Multiple Listeners 12 | - ✅ DOM Content Loaded 13 | - ✅ Anatomy of Event Object 14 | - ✅ Event Bubbling 15 | - ✅ Event Capturing 16 | - ✅ Event Delegation 17 | - ✅ Stop Propagation 18 | - ✅ Preventing Defaults 19 | - ✅ Custom Events 20 | - ✅ Project - FAQ 21 | - ✅ The Task and Wrap Up 22 | 23 | ## 🫶 Support 24 | 25 | Your support means a lot. 26 | 27 | - Please SUBSCRIBE to [tapaScript YouTube Channel](https://youtube.com/tapasadhikary) if not done already. A Big Thank You! 28 | - 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. 29 | 30 | > Many Thanks to all the `Stargazers` who have supported this project with stars(⭐) 31 | 32 | ### 🤝 Sponsor My Work 33 | 34 | 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)**. 35 | 36 | ## Video 37 | 38 | Here is the video for you to go through and learn: 39 | 40 | [![day-19](./banner.png)](https://youtu.be/ybgI5vVE668 "Video") 41 | 42 | ## **👩‍💻 🧑‍💻 Assignment Tasks** 43 | 44 | Please find the task assignments in the [Task File](./task.md). 45 | -------------------------------------------------------------------------------- /day-19/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/fc63718202c60f50b1e96513b0e65bd4c7fb6539/day-19/banner.png -------------------------------------------------------------------------------- /day-19/custom/custom-event.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Custom Events 7 | 8 | 9 | 10 |

Welcome!

11 | 12 | 13 | -------------------------------------------------------------------------------- /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-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-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-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-19/index.js: -------------------------------------------------------------------------------- 1 | console.log("Day 19 - JavaScript Events"); 2 | 3 | // What will we learn today? 4 | 5 | // - What is an Event? 6 | // - Event Handling and Why? 7 | // - Event Handling in Markup 8 | // - Event Handling in Script 9 | // - addEventListener and removeEventListener 10 | // - DOM Content Loaded 11 | // - Event Object 12 | // - Event Capturing and Bubbling 13 | // - Event Delegation 14 | // - Event Default Behaviour 15 | // - Custom Events 16 | // - Project(s) 17 | // - Tasks 18 | 19 | // Event Handling in Markup 20 | function handleClick(greeting) { 21 | console.log(`Button Clicked with a ${greeting}`); 22 | } 23 | 24 | // Event Handling in Script 25 | const myBtn2Elem = document.getElementById("myBtn2"); 26 | myBtn2Elem.onclick = function() { 27 | console.log("My Button 2 Clicked"); 28 | } 29 | // Can not add multiple 30 | myBtn2Elem.onclick = function() { 31 | console.log("My Button 2 Clicked Again"); 32 | } 33 | // Separating fundtion 34 | myBtn2Elem.onclick = handleClick; 35 | myBtn2Elem.onclick = () => handleClick("Hola"); 36 | 37 | // addEventListener and removeEventListener 38 | let counter = 0; 39 | const counBtnElem = document.getElementById("countBtn"); 40 | const handleCount = function() { 41 | console.log(counter); 42 | counter++; 43 | } 44 | const greetMe = function() { 45 | console.log("Thank You!"); 46 | } 47 | /* 48 | counBtnElem.addEventListener("click", function() { 49 | console.log(counter); 50 | counter++; 51 | }) 52 | 53 | counBtnElem.removeEventListener("click", function() { 54 | console.log(counter); 55 | counter++; 56 | }) 57 | */ 58 | 59 | counBtnElem.addEventListener("click", handleCount); 60 | counBtnElem.addEventListener("click", greetMe); 61 | counBtnElem.removeEventListener("click", handleCount); 62 | 63 | // DOM Conetnt Loaded 64 | 65 | // will never run 66 | document.onDOMContentLoaded = function() { 67 | console.log("DOM Content Loaded..."); 68 | }; 69 | 70 | // this will run 71 | document.addEventListener("DOMContentLoaded", function() { 72 | console.log("DOM Content Loaded..."); 73 | }); 74 | 75 | 76 | // Event Object 77 | const searchElem = document.getElementById("search-id"); 78 | function handleChange(event) { 79 | console.log(event); 80 | console.log("Target:", event.target); 81 | console.log("Target Name:", event.target.name); 82 | console.log("Target Value:", event.target.value); 83 | console.log("Event Type:", event.type); 84 | console.log("Current Target:", event.currentTarget); 85 | console.log("this:", this); 86 | } 87 | searchElem.addEventListener("change", handleChange); 88 | 89 | 90 | 91 | -------------------------------------------------------------------------------- /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-19/path/event-path.js: -------------------------------------------------------------------------------- 1 | console.log("Event Bubbling, Capturing, and Delegation"); 2 | 3 | // Event Capturing and Bubbling 4 | 5 | // In event bubbling, the event starts from the target element and bubbles upwards through its ancestors (parent → grandparent → etc.). 6 | 7 | // The Flow is: Child → Parent → Grandparent → Document 8 | 9 | // Bubbling 10 | 11 | document.getElementById("grandparent").addEventListener("click", () => { 12 | console.log("Grandparent clicked"); 13 | }); 14 | 15 | document.getElementById("parent").addEventListener("click", () => { 16 | console.log("Parent clicked"); 17 | }); 18 | 19 | document.getElementById("child").addEventListener("click", () => { 20 | console.log("Child clicked"); 21 | }); 22 | 23 | // Capturing 24 | 25 | // In event capturing, the event flows from the outermost ancestor down to the target element before the actual target handles it. 26 | 27 | // The Flow is: Document → Grandparent → Parent → Child 28 | 29 | // Rarely used, but useful if you want to catch events before they reach the target. 30 | 31 | document.getElementById("grandparent").addEventListener( 32 | "click", 33 | () => { 34 | console.log("Captured at Grandparent"); 35 | }, 36 | true // Capture phase 37 | ); 38 | 39 | document.getElementById("parent").addEventListener( 40 | "click", 41 | () => { 42 | console.log("Captured at Parent"); 43 | }, 44 | true // Capture phase 45 | ); 46 | 47 | document.getElementById("child").addEventListener( 48 | "click", 49 | () => { 50 | console.log("Captured at Child"); 51 | }, 52 | true // Capture phase 53 | ); 54 | 55 | // Event Delegation - it is a technique where you add a single event listener to a parent element instead of each child. It uses event bubbling to handle events from dynamically added or existing child elements. 56 | 57 | // Efficient for handling events on lists, tables, or any repeated/dynamic content. 58 | 59 | document.getElementById("itemList").addEventListener("click", (event) => { 60 | if (event.target.tagName === "LI") { 61 | console.log(`You clicked on ${event.target.textContent}`); 62 | } 63 | }); 64 | 65 | // Dynamically add a new list item 66 | let newItemElem = document.createElement("li"); 67 | newItemElem.textContent = "Item 3"; 68 | document.getElementById("itemList").appendChild(newItemElem); 69 | 70 | 71 | // event.stopPropagation() - event.stopPropagation() is a method used inside an event handler to stop the event from bubbling up (or propagating further) through the DOM tree 72 | 73 | document.getElementById("parent").addEventListener("click", () => { 74 | console.log("Parent clicked"); 75 | }); 76 | 77 | document.getElementById("child").addEventListener("click", (e) => { 78 | // e.stopPropagation(); 79 | console.log("Child clicked"); 80 | }); 81 | -------------------------------------------------------------------------------- /day-19/path/event.css: -------------------------------------------------------------------------------- 1 | form { 2 | margin: 5px; 3 | } 4 | 5 | .hidden { 6 | display: none; 7 | } -------------------------------------------------------------------------------- /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-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-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-19/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 Dynamic Tabbed Interface 8 | 9 | Build a clean, accessible tab component where clicking on a tab header displays the corresponding tab content. It mimics real-world use like dashboards, profile settings, or pricing plans. 10 | 11 | ### Functional Requirements 12 | 13 | - ✅ Clicking a tab title shows the corresponding content. 14 | - ✅ Only one tab content is visible at a time. 15 | - ✅ The active tab should have a visual highlight. 16 | - ✅ Add a keyboard shortcut: pressing 1, 2, or 3 switches to that tab. 17 | 18 | Example: 19 | 20 | ```js 21 | document.addEventListener("keydown", (e) => { 22 | if (e.key === "1") switchToTab(1); 23 | if (e.key === "2") switchToTab(2); 24 | if (e.key === "3") switchToTab(3); 25 | }); 26 | ``` 27 | 28 | - ✅ Use event delegation to handle tab clicks. 29 | - ✅ Use classList to manage active state. 30 | - ✅ Use a custom event to broadcast when a tab is changed (log tab name to console). 31 | - ✅ Use stopPropagation() if needed during advanced control. 32 | 33 | ### Basic HTML Structure 34 | 35 | ```html 36 |
37 |
38 | 39 | 40 | 41 |
42 |
43 |
Welcome to Home
44 |
About us page here.
45 |
Contact info displayed here.
46 |
47 |
48 | ``` 49 | -------------------------------------------------------------------------------- /day-20/README.md: -------------------------------------------------------------------------------- 1 | # Day 20 - 40 Days of JavaScript - Advanced DOM Tips and Tricks 2 | 3 | ## **🎯 Goal of This Lesson** 4 | 5 | - ✅ Intro 6 | - ✅ Efficient DOM Travarsal 7 | - ✅ Template and Cloning 8 | - ✅ Document Fragment 9 | - ✅ Range 10 | - ✅ Shadow DOM 11 | - ✅ Advanced Class Manipulations 12 | - ✅ Handling Large-Scale Updates 13 | - ✅ Mutation Observer 14 | 15 | ## 🫶 Support 16 | 17 | Your support means a lot. 18 | 19 | - Please SUBSCRIBE to [tapaScript YouTube Channel](https://youtube.com/tapasadhikary) if not done already. A Big Thank You! 20 | - 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. 21 | 22 | > Many Thanks to all the `Stargazers` who have supported this project with stars(⭐) 23 | 24 | ### 🤝 Sponsor My Work 25 | 26 | 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)**. 27 | 28 | ## Video 29 | 30 | Here is the video for you to go through and learn: 31 | 32 | [![day-20](./banner.png)](https://youtu.be/aNhPav1DgTY "Video") 33 | 34 | ## **👩‍💻 🧑‍💻 Assignment Tasks** 35 | 36 | Please find the task assignments in the [Task File](./task.md). 37 | -------------------------------------------------------------------------------- /day-20/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tapascript/40-days-of-javascript/fc63718202c60f50b1e96513b0e65bd4c7fb6539/day-20/banner.png -------------------------------------------------------------------------------- /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-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 `