├── Lessons ├── tempCodeRunnerFile.js ├── Promise-API │ ├── style.css │ ├── index.html │ └── script.js ├── AttributesMethods │ ├── index.html │ └── script.js ├── Variables.js ├── Promise.js ├── AsyncAwait │ ├── index.html │ └── script.js ├── InsertionMethods │ ├── index.html │ └── script.js ├── WhileLoop.js ├── IIFE.js ├── Navigation │ ├── style.css │ ├── index.html │ └── script.js ├── ForLoop.js ├── PromiseChaining.js ├── introduction.md ├── Primitives.js ├── Strings.js ├── Arrays.js ├── SessionStorage.html ├── Inheritance.js ├── JScookies.html ├── StringMethods.js ├── LocalStorage.html ├── ConditionalStatements.js ├── Destructuring.js ├── ErrorObject.html ├── VarLetConst.js ├── FunctionInJS.js ├── FetchAPI.html ├── MultipleHandlers.html ├── Finally.html ├── Windows.md ├── Prototype.html ├── Classes&Objects.html ├── OverridingConstructor.js ├── CallBack.js ├── BrowserEvents.md ├── TryCatch.html ├── getters&setters.html ├── ThenCatch.html ├── Constructors.html ├── LoopsInArray.js ├── ArrayMethods.js ├── DOM-Methods │ └── index.html ├── Operators.js └── ConsoleTypes.js ├── Exercises ├── Ex-4 │ ├── bg.png │ ├── hacker.png │ ├── index.html │ ├── style.css │ └── script.js ├── Ex-7 │ ├── beep.mp3 │ ├── index.html │ ├── script.js │ └── style.css ├── Ex-2 │ ├── style.css │ ├── index.html │ └── script.js ├── Ex-6 │ ├── style.css │ ├── script.js │ └── index.html ├── Ex-3 │ ├── script.js │ └── index.html ├── Ex-1.js └── Ex-5 │ ├── index.html │ └── script.js └── README.md /Lessons/tempCodeRunnerFile.js: -------------------------------------------------------------------------------- 1 | g(a, b) 2 | -------------------------------------------------------------------------------- /Lessons/Promise-API/style.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | height: 100%; 3 | width: 100%; 4 | } 5 | -------------------------------------------------------------------------------- /Exercises/Ex-4/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubham-Bhoite/JavaScript-Programming/main/Exercises/Ex-4/bg.png -------------------------------------------------------------------------------- /Exercises/Ex-4/hacker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubham-Bhoite/JavaScript-Programming/main/Exercises/Ex-4/hacker.png -------------------------------------------------------------------------------- /Exercises/Ex-7/beep.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Shubham-Bhoite/JavaScript-Programming/main/Exercises/Ex-7/beep.mp3 -------------------------------------------------------------------------------- /Lessons/AttributesMethods/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | SHUBHAM 5 | 6 | 7 |

8 | Hey, I am the first div 9 |

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /Lessons/Variables.js: -------------------------------------------------------------------------------- 1 | // Variables: Variables are used to store data. 2 | 3 | 4 | console.log("Hello! Welcome my JavaScript Programming") 5 | var a = 22 // a contains 22 6 | console.log(a) 7 | a = "Shubham" 8 | console.log(a) 9 | // let 4shubham = 4 // Not allowed this will throw an error 10 | 11 | 12 | -------------------------------------------------------------------------------- /Lessons/Promise.js: -------------------------------------------------------------------------------- 1 | let promise = new Promise(function(resolve, reject){ 2 | resolve(44) 3 | }); 4 | 5 | console.log("Hey, how are you?") 6 | setTimeout(function() { 7 | console.log("Hello, i'm fine!") 8 | }, 3000) 9 | 10 | console.log("My name is " + "Official shubhya") 11 | console.log(promise) 12 | -------------------------------------------------------------------------------- /Lessons/AsyncAwait/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Async/Await 7 | 8 | 9 | Hello, kaise ho aap? 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /Exercises/Ex-2/style.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | height: 100%; 3 | width: 100%; 4 | } 5 | 6 | 7 | #joke{ 8 | background-color: #160606; 9 | color: #e7d6d6; 10 | font-size: 1.5em; 11 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 12 | padding: 10px; 13 | text-align: center; 14 | width: 100%; 15 | } 16 | -------------------------------------------------------------------------------- /Lessons/InsertionMethods/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Insertion Methods 4 | 5 | 6 | I am outside div (start) 7 |

8 | I am start of this container 9 |

I am first element

10 | I am end of this container 11 |

12 | I am outside div(end) 13 | 14 | 15 | -------------------------------------------------------------------------------- /Lessons/Promise-API/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Promise API 8 | 9 | 10 | 11 | 12 | See in the console 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Lessons/WhileLoop.js: -------------------------------------------------------------------------------- 1 | // While Loop: 2 | let input = prompt("Enter a number"); 3 | input = Number(input); 4 | let i = 0; 5 | 6 | while (i < input) { 7 | console.log(i); // print the current value of i 8 | i++; // increment i by 1 9 | } 10 | 11 | 12 | // Do-While Loop: 13 | let n= prompt("Enter the value of n") 14 | n=Number.parseInt(n) 15 | 16 | let a=0; 17 | do{ 18 | console.log(a) 19 | a++; 20 | }while (a { 4 | return new Promise((resolve, reject) => { 5 | setTimeout(() => { 6 | resolve("Hey, bro") 7 | }, 3000) 8 | }) 9 | } 10 | 11 | (async () => { 12 | let b = await a() 13 | console.log(b) 14 | let c = await a() 15 | console.log(c) 16 | let d = await a() 17 | console.log(d) 18 | })() 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /Lessons/Navigation/style.css: -------------------------------------------------------------------------------- 1 | html, body{ 2 | margin: 0; 3 | padding: 0; 4 | font-family: 'Roboto', sans-serif; 5 | font-size: 16px; 6 | color: #333; 7 | background-color: #f5f5f5; 8 | } 9 | 10 | ul{ 11 | text-align: center;; 12 | background-color: #333; 13 | color: #f5f5f5; 14 | margin: 0; 15 | padding: 29; 16 | list-style: none; 17 | } 18 | 19 | ul li{ 20 | display: inline-block; 21 | margin: 0 10px; 22 | } -------------------------------------------------------------------------------- /Lessons/ForLoop.js: -------------------------------------------------------------------------------- 1 | // For Loop: 2 | for (let i = 1; i <= 15; i++) { 3 | console.log(i); 4 | } 5 | 6 | 7 | // For-In Loop: 8 | let person = { 9 | name: "Shubham", 10 | age: 21, 11 | gender: "male" 12 | }; 13 | 14 | for (let x in person) { 15 | console.log(x + ": " + person[x]); 16 | } 17 | 18 | 19 | // For-Of Loop: 20 | let numbers = [1, 2, 3, 4, 5]; 21 | 22 | for (let number of numbers) { 23 | console.log(number); 24 | } -------------------------------------------------------------------------------- /Lessons/Navigation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Portfolio 5 | 6 | 7 | 8 | 15 | 16 |

17 |

Hey, this is a simple test website

18 |

19 | 20 | 21 | -------------------------------------------------------------------------------- /Lessons/PromiseChaining.js: -------------------------------------------------------------------------------- 1 | let p1 = new Promise((resolve, reject) =>{ 2 | setTimeout(() =>{ 3 | console.log("Resolved after 3 seconds") 4 | resolve(22) 5 | }, 3000) 6 | }) 7 | 8 | p1.then((value) =>{ 9 | console.log(value) 10 | return new Promise((resolve, reject) => { 11 | setTimeout(()=>{ 12 | resolve("Promise 2") 13 | }, 2000) 14 | }) 15 | }).then((value) => { 16 | console.log("We are done") 17 | return 2 18 | }).then((value)=>{ 19 | console.log("kay haal hai bhai!") 20 | }) -------------------------------------------------------------------------------- /Lessons/Navigation/script.js: -------------------------------------------------------------------------------- 1 | // Accessing the first child node of the body 2 | let firstChild = document.body.firstChild; 3 | console.log(firstChild); // #text 4 | 5 | // Accessing the first element child node of the body 6 | let firstElementChild = document.body.firstElementChild; 7 | console.log(firstElementChild); //

8 | 9 | // Accessing the last element child node of the body 10 | let lastElementChild = document.body.lastElementChild; 11 | console.log(lastElementChild); // 26 | 27 | -------------------------------------------------------------------------------- /Lessons/Inheritance.js: -------------------------------------------------------------------------------- 1 | class Animal { 2 | constructor(name, color) { 3 | this.name = name 4 | this.color = color 5 | } 6 | run() { 7 | console.log(this.name + " is running!") 8 | } 9 | shout() { 10 | console.log(this.name + " is barking!") 11 | } 12 | } 13 | 14 | class Monkey extends Animal { 15 | eatBanana() { 16 | console.log(this.name + " is eating banana") 17 | } 18 | hide() { 19 | console.log(`${this.name} is hiding`) 20 | } 21 | } 22 | 23 | let ani = new Animal("Tigre", "brown") 24 | let m = new Monkey("chimpanji", "orange") 25 | 26 | ani.shout() 27 | m.eatBanana() 28 | m.hide() 29 | // ani.hide() //This will throw an error -------------------------------------------------------------------------------- /Lessons/JScookies.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | JavaScript Cookies 7 | 8 | 9 | To see cookies, plzzz go through the console 10 | 11 | 22 | 23 | -------------------------------------------------------------------------------- /Lessons/StringMethods.js: -------------------------------------------------------------------------------- 1 | let myname = "Shubham" 2 | console.log(myname.length) // string length 3 | 4 | console.log(myname.toUpperCase()) //toUppercase 5 | 6 | console.log(myname.toLowerCase()) //toLowercase 7 | 8 | console.log(myname.slice(2, 4)) //slice 9 | console.log(myname.slice(2)) 10 | 11 | console.log(myname.replace("am", "ya")) //replace 12 | 13 | let friend = "Rahul" 14 | console.log(myname.concat(" is a friend of ", friend)) //concatenate 15 | 16 | let friend2 = " Mrunal " 17 | console.log(friend2.trim()) //trim 18 | 19 | let fr3="Priti"; 20 | console.log(fr3); 21 | console.log(fr3[0]); 22 | console.log(fr3[1]); 23 | console.log(fr3[2]); // Indexing 24 | 25 | -------------------------------------------------------------------------------- /Lessons/LocalStorage.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Local Storage 7 | 8 | 9 | Local storage topic 10 | 11 | 29 | 30 | -------------------------------------------------------------------------------- /Exercises/Ex-2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | JokeSite 8 | 9 | 10 | 11 | 12 |

This is a Random joke

13 | 14 | 15 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /Lessons/ConditionalStatements.js: -------------------------------------------------------------------------------- 1 | //Getting User Input: 2 | let age = prompt("Enter your age"); 3 | console.log(typeof age); //age is of string datatype 4 | 5 | // if statement==> 6 | let input = prompt("Enter a string"); 7 | if(input === "Hello"){ 8 | console.log("Hello World"); 9 | } 10 | 11 | 12 | // if-else statement==> 13 | let place = prompt("Enter a string"); 14 | if(input === "Hello"){ 15 | console.log("Hello World"); 16 | } 17 | else{ 18 | console.log("Goodbye World"); 19 | } 20 | 21 | 22 | // if-else if-else statement==> 23 | let take = prompt("Enter a string"); 24 | if(input === "Hello"){ 25 | console.log("Hello World"); 26 | } 27 | else if(input === "Goodbye"){ 28 | console.log("Goodbye World"); 29 | } 30 | else{ 31 | console.log("Invalid Input"); 32 | } -------------------------------------------------------------------------------- /Lessons/Destructuring.js: -------------------------------------------------------------------------------- 1 | // Destructuring ==> 2 | let arr = [3, 5, 8, 9, 12, 14] 3 | let [a, b, c, d, ...rest] = arr 4 | console.log(a, b, c, d, rest) 5 | 6 | let [a, , b, ...rest] = arr 7 | console.log(a, b, rest) 8 | 9 | let { a, b } = { a: 1, b: 5 } 10 | console.log(a, b) 11 | 12 | 13 | 14 | // Spread Operator 15 | let arr1 = [3, 5, 8] 16 | let obj1 = { ...arr1 } 17 | console.log(obj1) 18 | 19 | function sum(v1, v2, v3) { 20 | return v1 + v2 + v3 21 | } 22 | 23 | console.log(sum(...arr1)) 24 | 25 | let obj2 = { 26 | name: "shubham", 27 | company: "Amazon", 28 | address: "pune" 29 | } 30 | 31 | console.log({ ...obj2, name: "Arjun", company: "Flipcart" }) 32 | // console.log({ name: "Prashant", company: "Jio", ...obj2 }) // This will print the obj2 object without changing any values 33 | -------------------------------------------------------------------------------- /Lessons/ErrorObject.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Error Object 7 | 8 | 9 | Error object see in the console 10 | 11 | 27 | 28 | - -------------------------------------------------------------------------------- /Lessons/VarLetConst.js: -------------------------------------------------------------------------------- 1 | // 1) Var: The var keyword is used to declare variables in JavaScript 2 | var name = "Shubham"; 3 | console.log(name); 4 | 5 | //we can also reassign the value of a variable declared using the var keyword==> 6 | var name = "Prashant"; 7 | name = "Arjun"; 8 | console.log(name); 9 | 10 | 11 | // 2) let : This means that if a variable is declared with let inside a block, it is only accessible within that block. 12 | let a = 21 13 | 14 | let b = " Shubham"; 15 | { 16 | let b = "Hello"; 17 | console.log(b); //output: Hello 18 | } 19 | console.log(b); //output: Shubham 20 | 21 | 22 | // 3) Const: The value of a variable declared with const cannot be changed. 23 | const name = " Varad"; 24 | name = "Rahul"; 25 | console.log(name); //output: Uncaught TypeError: Assignment to constant variable. -------------------------------------------------------------------------------- /Lessons/Promise-API/script.js: -------------------------------------------------------------------------------- 1 | let p1 = new Promise((resolve, reject) => { 2 | setTimeout(() => { 3 | resolve("Value 1"); 4 | }, 11000); 5 | }); 6 | 7 | let p2 = new Promise((resolve, reject) => { 8 | setTimeout(() => { 9 | resolve("Value 2"); 10 | //reject(new Error("Error")); 11 | }, 2000); 12 | }); 13 | 14 | let p3 = new Promise((resolve, reject) => { 15 | setTimeout(() => { 16 | resolve("Value 3"); 17 | }, 3000); 18 | }); 19 | 20 | //let promise_all = Promise.reject(new Error("Shubham")) 21 | //let promise_all = Promise.allSettled([p1, p2, p3]) 22 | //let promise_all = Promise.race([p1, p2, p3]) 23 | //let promise_all = Promise.resolve(6) 24 | let promise_all = Promise.all([p1, p2, p3]) 25 | promise_all.then((value) => { 26 | console.log(value) 27 | }) 28 | -------------------------------------------------------------------------------- /Exercises/Ex-6/style.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | height: 100%; 3 | width: 100%; 4 | } 5 | 6 | #disp{ 7 | width:94vw; 8 | max-width:350px; 9 | height:50px; 10 | font-size:1.4rem; 11 | } 12 | #redio-cont{ 13 | width:90vw; 14 | max-width: 320px; 15 | padding: 12px; 16 | } 17 | .radio{ 18 | width:85%; 19 | } 20 | .container{ 21 | width:98vw; 22 | max-width:380px; 23 | border-radius:20px; 24 | box-shadow: rgba(0, 0, 0, 0.2) 10px 10px 20px 10px, 25 | rgba(0, 0, 0, 0.1) 4px 4px 6px 2px; 26 | 27 | } 28 | 29 | .bg-lightblue{ 30 | background-color:#f2e533; 31 | } 32 | .bg-blue{ 33 | background-color:#ab07ab; 34 | } 35 | 36 | #btn:hover { 37 | max-width: 650px; 38 | transform: scale(1.1); 39 | box-shadow: black 5px 5px 20px 3px; 40 | } -------------------------------------------------------------------------------- /Lessons/FunctionInJS.js: -------------------------------------------------------------------------------- 1 | // Functions:Functions are a way to group a block of code together and give it a name, which can then be called/invoked at any point in your code. 2 | 3 | /* Syntax: function functionName(parameters) { 4 | // function code 5 | } */ 6 | 7 | function onePlusAvg(x, y) { 8 | return 1 + (x + y) / 2 9 | } 10 | let a = 1; 11 | let b = 2; 12 | let c = 3; 13 | console.log("One plus Average of a and b is ", onePlusAvg(a, b)) 14 | console.log("One plus Average of b and c is ", onePlusAvg(b, c)) 15 | console.log("One plus Average of a and c is ", onePlusAvg(a, c)) 16 | 17 | 18 | 19 | //Arrow Functions: Arrow functions are a shorthand way of writing functions in JavaScript. 20 | let sayHello = () => { 21 | console.log("Hello, world!"); 22 | } 23 | 24 | sayHello(); // calling/invoking the function 25 | -------------------------------------------------------------------------------- /Lessons/FetchAPI.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Fetch API 7 | 8 | 9 | This is a Fetch API unit, see in the console==> 10 | 11 | 12 | 33 | 34 | -------------------------------------------------------------------------------- /Exercises/Ex-4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Shubham Hacker 11 | 12 | 13 | 14 | 17 |

18 |

19 |

20 |

21 |

22 |

23 |

24 |

25 |

26 |

27 |

28 |

29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /Lessons/InsertionMethods/script.js: -------------------------------------------------------------------------------- 1 | // Using innerHTML 2 | let a = document.getElementsByTagName('div')[0]; 3 | a.innerHTML = '

Hello World

'; 4 | 5 | // Using createElement and appendChild 6 | let div = document.createElement('div'); 7 | div.innerHTML = '

Hello World (append)

Hello World (prepend)

Hello World (before)

Hello World (aftwe)

Hello World (replaced)

'; 28 | a.replaceWith(div); -------------------------------------------------------------------------------- /Lessons/MultipleHandlers.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Multiple Handlers Promises 7 | 8 | 9 | Hi, What's your name brother? 10 | 11 | 32 | 33 | -------------------------------------------------------------------------------- /Lessons/Finally.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Finally keyword 7 | 8 | 9 | finally keyword==> see the output in the console 10 | 11 | 32 | 33 | -------------------------------------------------------------------------------- /Lessons/Windows.md: -------------------------------------------------------------------------------- 1 | # DOM, BOM, and Window Object 2 | 3 | ## 1) Window Object: 4 | - The Window Object is a global object in the browser that represents the browser window. 5 | - You can access the Window object by typing window in the browser console. 6 | 7 | console.log(window); // prints the Window object 8 | 9 | 10 | ## 2) Document Object Model (DOM): 11 | - It creates a tree-like representation of the document, which allows developers to interact with it and modify its content and structure. 12 | 13 | console.log(document); // prints the DOM object 14 | 15 | 16 | ## 3) Browser Object Model (BOM): 17 | - It provides access to browser-specific objects such as the browser history, the location bar, and the browser window. 18 | - The Window object is a part of the BOM and provides access to many of the BOM objects and methods. 19 | 20 | console.log(window.location.href); // prints the current URL of the page -------------------------------------------------------------------------------- /Lessons/Prototype.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Prototype 7 | 8 | 9 | Prototype and setting of prototype 10 | 11 | 39 | 40 | -------------------------------------------------------------------------------- /Lessons/Classes&Objects.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Classes and Objects 7 | 8 | 9 | Hello, bhai kay haal hai!! 10 | 11 | 33 | 34 | -------------------------------------------------------------------------------- /Lessons/OverridingConstructor.js: -------------------------------------------------------------------------------- 1 | class Employee { 2 | constructor(name) { 3 | console.log(`${name} - Employee's constructor is here`) 4 | this.name = name 5 | } 6 | login() { 7 | console.log(`Employee has logged in`); 8 | } 9 | 10 | logout() { 11 | console.log(`Employee has logged out`); 12 | } 13 | 14 | requestLeaves(leaves) { 15 | console.log(`Employee has requested ${leaves} leaves - Auto approved`) 16 | } 17 | } 18 | 19 | class Programmer extends Employee { 20 | constructor(name) { 21 | super(name) 22 | console.log(`This is a newly written constructor`) 23 | } 24 | 25 | requestCoffee(x) { 26 | console.log(`Employee has requested ${x} coffees`) 27 | } 28 | requestLeaves(leaves) { 29 | super.requestLeaves(4) 30 | console.log("One extra is granted") 31 | 32 | } 33 | } 34 | 35 | let e = new Programmer("Prashant") 36 | e.login() 37 | e.requestLeaves(3) -------------------------------------------------------------------------------- /Lessons/AttributesMethods/script.js: -------------------------------------------------------------------------------- 1 | /*--getAttribute() method --*/ 2 | let first = document.getElementById("first"); 3 | let a = first.getAttribute("class"); 4 | console.log(a); // it will print "hey" 5 | 6 | 7 | /*--hasAttribute() method --*/ 8 | console.log(first.hasAttribute("class")); // true 9 | console.log(first.hasAttribute("style")); // false 10 | 11 | 12 | /*setAttribute() method */ 13 | first.setAttribute("hidden", "true"); // reload the page to see the changes, it will hide the div 14 | 15 | 16 | /*removeAttribute() method*/ 17 | first.removeAttribute("hidden"); // reload the page to see the changes, it will show the div because we removed the hidden attribute 18 | 19 | 20 | /*custom attributes*/ 21 |

22 | Hey, I am the first div 23 |

24 | 25 | 26 | /*dataset property*/ 27 | console.log(first.dataset); 28 | 29 | 30 | // We can also access a specific custom attribute using its name. 31 | console.log(first.dataset.game); 32 | -------------------------------------------------------------------------------- /Exercises/Ex-3/script.js: -------------------------------------------------------------------------------- 1 | function getDateTime() { 2 | var now = new Date(); 3 | var year = now.getFullYear(); 4 | var month = now.getMonth() + 1; 5 | var day = now.getDate(); 6 | var hour = now.getHours(); 7 | var minute = now.getMinutes(); 8 | var second = now.getSeconds(); 9 | if (month.toString().length == 1) { 10 | month = '0' + month; 11 | } 12 | if (day.toString().length == 1) { 13 | day = '0' + day; 14 | } 15 | if (hour.toString().length == 1) { 16 | hour = '0' + hour; 17 | } 18 | if (minute.toString().length == 1) { 19 | minute = '0' + minute; 20 | } 21 | if (second.toString().length == 1) { 22 | second = '0' + second; 23 | } 24 | var dateTime = year + '/' + month + '/' + day + ' ' + hour + ':' + minute + ':' + second; 25 | return dateTime; 26 | } 27 | 28 | // example usage: realtime clock 29 | setInterval(function() { 30 | currentTime = getDateTime(); 31 | document.getElementById("time").innerHTML = currentTime; 32 | }, 1000); 33 | -------------------------------------------------------------------------------- /Lessons/CallBack.js: -------------------------------------------------------------------------------- 1 | // // Syncronous programming ==> 2 | let a = prompt("What is your name?"); 3 | let b = prompt("What is your age?"); 4 | let c = prompt("What is your favorite color?"); 5 | console.log(a + " is " + b + " years old and has " + c + " favorite color."); 6 | 7 | // Asynchronous programming ==> 8 | console.log("Start") 9 | setTimeout(function() { 10 | console.log("Hey, bro how are you!"); 11 | }, 3000) 12 | console.log("End") 13 | 14 | 15 | // Callbacks ==> 16 | function loadScript(src, callback) { 17 | var script = document.createElement("script"); 18 | script.src = src; 19 | script.onload = function() { 20 | console.log("Loaded script with SRC: " + src) 21 | callback(null, src); 22 | } 23 | script.onerror = function() { 24 | console.log("Error loading script with SRC: " + src); 25 | callback(new Error("Src got some error")) 26 | } 27 | document.body.appendChild(script); 28 | } 29 | 30 | function hello(error, src) { 31 | if (error) { 32 | console.log(error) 33 | return 34 | } 35 | alert('Hello World!' + src); 36 | } -------------------------------------------------------------------------------- /Lessons/AsyncAwait/script.js: -------------------------------------------------------------------------------- 1 | async function harry() { 2 | let rahuriWeather = new Promise((resolve, reject) => { 3 | setTimeout(() => { 4 | resolve("27 Deg") 5 | }, 2000) 6 | }) 7 | 8 | let kashtiWeather = new Promise((resolve, reject) => { 9 | setTimeout(() => { 10 | resolve("21 Deg") 11 | }, 5000) 12 | }) 13 | 14 | // rahuriWeather.then(alert) 15 | // kashtiWeather.then(alert) 16 | console.log("Fetching rahuri Weather Please wait ...") 17 | let rahuriW = await rahuriWeather 18 | console.log("Fetched rahuri Weather: " + rahuriW) 19 | console.log("Fetching kashti Weather Please wait ...") 20 | let kashtiW = await kashtiWeather 21 | console.log("Fetched kashti Weather: " + kashtiW) 22 | return [rahuriW, kashtiW] 23 | } 24 | 25 | const cherry = async () => { 26 | console.log("Hey I am doremon and I am waiting ") 27 | } 28 | 29 | const main1 = async () => { 30 | console.log("Welcome to weather control room") 31 | let a = await harry() 32 | let b = await cherry() 33 | 34 | } 35 | main1() 36 | -------------------------------------------------------------------------------- /Lessons/BrowserEvents.md: -------------------------------------------------------------------------------- 1 | # Introduction to Browser Events: 2 | - An event is a signal that something has happened in a web page, such as a user clicking a button or submitting a form. 3 | 4 | ## Some important DOM events include: 5 | 6 | 1) Mouse events: click (when a mouse button is clicked), contextmenu (when the right mouse button is clicked), mouseover/mouseout (when the mouse enters or leaves an element), mousedown/mouseup (when a mouse button is pressed or released), mousemove (when the mouse moves). 7 | 8 | 2) Keyboard events: keydown and keyup. 9 | 10 | 3) Form element events: submit, focus, blur. 11 | 12 | 4) Document event: DOMContentLoaded. 13 | 14 | 15 | # Handling Browser Events: 16 | 1) addEventListener(): in script.js we can add event listeners to the button using the addEventListener() method. 17 | 18 | 2) removeEventListener(): If we want to remove an event listener, we can use the removeEventListener() method. 19 | 20 | 21 | ## event object: 22 | When an event occurs, the browser creates an event object and passes it as an argument to the event handler. 23 | 24 | const x = function(e){ 25 | console.log(e); 26 | alert("Hello World!"); 27 | }; -------------------------------------------------------------------------------- /Exercises/Ex-3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Digital Clock 8 | 9 | 12 | 13 | 14 | 20 | 21 |

22 |

23 |

24 | 25 | 26 | 27 | 30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /Lessons/TryCatch.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | try & catch 7 | 8 | 9 | see in the console 10 | 11 | 39 | 40 | -------------------------------------------------------------------------------- /Lessons/getters&setters.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | chapter 11 7 | 8 | 9 | Getters and Setters 10 | 11 | 48 | 49 | -------------------------------------------------------------------------------- /Lessons/ThenCatch.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Then and Catch 7 | 8 | 9 | Hey, bro how are you? 10 | 11 | 12 | 47 | 48 | -------------------------------------------------------------------------------- /Exercises/Ex-4/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro&family=VT323&display=swap"); 2 | @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Source+Code+Pro&display=swap'); 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | } 7 | 8 | body { 9 | width: 100%; 10 | background: url("/Exercises/Ex-4/bg.png"); 11 | background-repeat: no-repeat; 12 | background-size:cover; 13 | background-position: center; 14 | background-attachment: fixed; 15 | } 16 | 17 | .nav { 18 | background-color: black; 19 | text-align: center; 20 | padding: 1.5%; 21 | } 22 | 23 | .head { 24 | font-size: 3rem; 25 | font-weight: lighter; 26 | font-family: "VT323", monospace; 27 | color: #39ff14; 28 | } 29 | 30 | .main { 31 | margin: 4% auto; 32 | background: #1e2124; 33 | background-size: cover; 34 | background-repeat: no-repeat; 35 | height: 55vh; 36 | width: 50vw; 37 | font-size: 1.3vw; 38 | border-radius: 5%; 39 | padding: 20px; 40 | text-shadow: 2px 2px black; 41 | font-family: 'Roboto Mono', monospace; 42 | } 43 | 44 | #content, #content2, #content3, #content4, #content5, #content6, #content7, #contentT, #contentS, #content8{ 45 | color: greenyellow; 46 | padding: 5px; 47 | } 48 | 49 | #contentT{ 50 | color: red; 51 | } 52 | #contentS{ 53 | color: coral; 54 | } 55 | #content8{ 56 | color: #39ff14; 57 | } 58 | -------------------------------------------------------------------------------- /Exercises/Ex-1.js: -------------------------------------------------------------------------------- 1 | let number = Math.floor((Math.random() * 100) + 1); // Generates a random number b/w 1 and 100 2 | let chances = 0; // Initial vaulue of chances taken to guess a number 3 | let guess; // Variable to store the number to be input from user to be guessed 4 | 5 | console.log("This is a guessing game and you have to enter a number and if it matches with the number generated by computer, then you win...\n"); 6 | guess = prompt("Enter a number between 1 and 100"); 7 | ++chances; // To increment the number of chances taken 8 | 9 | do { 10 | guess = Number.parseInt(guess); 11 | 12 | if (guess > number) { 13 | console.log("Number entered is greater"); 14 | guess = prompt("Enter again!!"); 15 | guess = Number.parseInt(guess); 16 | ++chances; // To increment the number of chances taken 17 | continue; 18 | } 19 | 20 | else if (guess < number) { 21 | console.log("Number entered is smaller"); 22 | guess = prompt("Enter again!!"); 23 | guess = Number.parseInt(guess); 24 | ++chances; //To increment the number of chances taken 25 | continue; 26 | } 27 | 28 | } while (guess != number); //break the loop if number entered is equal to the number generated 29 | 30 | let score = 100 - chances; //To store the score of your game 31 | console.log("\nCongratulations🥳🥳\nThe number generated was", number + " and you guessed it right😁\nYour final score is", score); 32 | -------------------------------------------------------------------------------- /Lessons/Constructors.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | constructor 7 | 8 | 9 | Hello, kaise ho aap log 10 | 11 | 43 | 44 | -------------------------------------------------------------------------------- /Lessons/LoopsInArray.js: -------------------------------------------------------------------------------- 1 | // classical for loop: 2 | let subjects = ["Marathi", "English", "Science", "Geography"]; 3 | for (let i = 0; i < subjects.length; i++) { 4 | console.log(subjects[i]); 5 | } 6 | 7 | //forEach() ==>The above code can be rewritten using the forEach() method. 8 | let subject = ["Marathi", "English", "Science", "Geography"]; 9 | subject.forEach((i) => { 10 | console.log(i); 11 | }); 12 | 13 | // Array.from() ==>The from() method creates a new array from an array-like object 14 | let str = "SHUBHAM"; 15 | let arr = Array.from(str); 16 | console.log(arr); 17 | 18 | // for...of ==>he for...of statement creates a loop iterating over iterable objects. 19 | let fruits = ["Apple", "Orange", "Banana"]; 20 | for (let i of fruits) { 21 | console.log(i); 22 | } 23 | 24 | // for...in ==>The for...in statement creates a loop iterating over enumerable properties of an object. 25 | let colors = ["Red", "Black", "Violet","Yellow"]; 26 | for (let i in colors) { 27 | console.log(colors[i]); 28 | } 29 | 30 | 31 | 32 | //map(): 33 | let numbers = [1, 2, 3, 4, 5]; 34 | let stringNumbers = numbers.map((i) => { 35 | return i.toString(); 36 | }); 37 | console.log(stringNumbers); 38 | 39 | // filter(): 40 | let num = [1, 2, 3, 4, 5]; 41 | let filteredNumbers = num.filter((i) => { 42 | return i > 3; 43 | }); 44 | console.log(filteredNumbers); 45 | 46 | // reduce(): 47 | let marks= [1, 2, 3, 4, 5]; 48 | let sum = marks.reduce((first, second) => { 49 | return first + second; 50 | }); 51 | console.log(sum); -------------------------------------------------------------------------------- /Lessons/ArrayMethods.js: -------------------------------------------------------------------------------- 1 | //toString() 2 | let fruits = ["Apple", "Orange", "Banana",5,6,7,8]; 3 | console.log(fruits.toString()); 4 | console.log(typeof fruits.toString()); 5 | 6 | // join() 7 | let num=[1,2,3,4,5] 8 | console.log(num.join("-")); 9 | 10 | // pop() 11 | let marks=[90,95,92,80]; 12 | console.log(marks.pop()); 13 | console.log(marks); 14 | 15 | // push() 16 | let fruit = ["Apple", "Orange", "Banana"]; 17 | console.log(fruit.push("Pineapple")); // 4 18 | console.log(fruit); 19 | 20 | //shift() 21 | let id=[232,4545,646,6768,6767]; 22 | console.log(id.shift()); 23 | console.log(id); 24 | 25 | // unshift() 26 | let colors=["red","yellow","white","black"]; 27 | console.log(colors.unshift("blue")); 28 | console.log(colors); 29 | 30 | // delete() 31 | let names=["shubham","arjun","prashant","vaibhav"]; 32 | delete names[1]; 33 | console.log(names); 34 | 35 | // concat() 36 | let fresh = ["Apple", "Orange", "Banana"]; 37 | let vegetables = ["Potato", "Tomato", "Onion"]; 38 | let food = fresh.concat(vegetables); 39 | console.log(food); 40 | 41 | //sort() 42 | let numbers=[40,299,78,45,19,2,50,44,76]; 43 | numbers.sort(); 44 | console.log(numbers); 45 | 46 | // reverse() 47 | let marks_10=[20,50,60,90,100]; 48 | marks_10.reverse(); 49 | console.log(marks_10); 50 | 51 | // slice() 52 | let friends = ["bhai", "bhau", "dada"]; 53 | let copy = friends.slice(0, 2); 54 | console.log(copy); 55 | 56 | // splice() 57 | let trees = ["neem", "babul", "hibiscus"]; 58 | trees.splice(0, 1); 59 | console.log(trees); // ["Orange", "Banana"] -------------------------------------------------------------------------------- /Lessons/DOM-Methods/index.html: -------------------------------------------------------------------------------- 1 | 2 |

Hello World!

3 | 4 | 8 | 9 | 10 | 11 |

Hello World!

12 | 13 | 17 | 18 | 19 | 20 |

Hello World!

21 |

Hello Again!

22 | 23 | 29 | 30 | 31 | 32 |

Paragraph 1

33 |

Paragraph 2

34 | 35 | 39 | 40 | 41 | 42 | 43 |

Hello World!

44 |

Hello Again!

45 | 46 | 50 | 51 | 52 | 53 | 54 | 59 | 60 | -------------------------------------------------------------------------------- /Lessons/Operators.js: -------------------------------------------------------------------------------- 1 | // 1) ==> Arithmetic Operators <== // 2 | let a = 5; 3 | let b = 3; 4 | 5 | // Addition 6 | let c = a + b; 7 | console.log(c) 8 | // Subtraction 9 | let d = a - b; 10 | console.log(d) 11 | // Multiplication 12 | let e = a * b; 13 | console.log(e) 14 | // Division 15 | let f = a / b; 16 | console.log(f) 17 | // Modulus 18 | let g = a % b; 19 | console.log(g) 20 | // Exponentiation 21 | let h = a ** b; 22 | console.log(h) 23 | 24 | 25 | let s = 5; 26 | // Post-increment: returns the value of a, then increments it 27 | console.log(s++); 28 | console.log(s); 29 | 30 | // Pre-increment: increments the value of a, then returns it 31 | console.log(++s); 32 | 33 | // Post-decrement: returns the value of a, then decrements it 34 | console.log(s--); 35 | console.log(s); 36 | 37 | // Pre-decrement: decrements the value of a, then returns it 38 | console.log(--s); 39 | 40 | 41 | // 2) ==> Assignment Operators <== // 42 | let x = 5; 43 | 44 | // Addition assignment 45 | x += 3; // equivalent to x = x + 3 46 | console.log(x); 47 | 48 | // Subtraction assignment 49 | x -= 2; // equivalent to x = x - 2 50 | console.log(x); 51 | 52 | // Multiplication assignment 53 | x *= 4; // equivalent to x = x * 4 54 | console.log(x); 55 | 56 | // Division assignment 57 | x /= 3; // equivalent to x = x / 3 58 | console.log(x); 59 | 60 | // Modulus assignment 61 | x %= 5; // equivalent to x = x % 5 62 | console.log(x); 63 | 64 | 65 | 66 | // 3) ==> Comparison Operators <== // 67 | console.log(5 > 2); 68 | console.log(5 == "5"); 69 | console.log(5 === "5"); 70 | console.log(5 != "6"); 71 | console.log(5 !== "5"); 72 | 73 | 74 | 75 | // 4) ==> Logical Operators <== // 76 | //&&: 77 | const m = 10; 78 | const n = 20; 79 | const o = 30; 80 | console.log(m < n && n < o); 81 | console.log(m < n && n > o); 82 | 83 | // ||: 84 | const p = 5; 85 | const r = 10; 86 | console.log(p > 3 || r < 5); 87 | console.log(p < 3 || r < 5); 88 | 89 | // !: 90 | const z = 10; 91 | console.log(!(z > 5)); 92 | console.log(!(z < 5)); -------------------------------------------------------------------------------- /Lessons/ConsoleTypes.js: -------------------------------------------------------------------------------- 1 | /*console.log() ==> 2 | The console.log() method is used to print the output to the console. It is usually used for debugging purposes. It can be used to print the output of a variable, an array, an object, a string, a number, etc.*/ 3 | console.log("Hello World"); // Prints "Hello World" to the console 4 | 5 | 6 | /*console.error() ==> 7 | The console.error() method is used to print the error message to the console. */ 8 | console.error("This is an error"); // Prints "This is an error" to the console as an error 9 | 10 | 11 | /*console.warn() ==> 12 | The console.warn() method is used to print the warning message to the console.*/ 13 | console.warn("This is a warning"); // Prints "This is a warning" to the console as a warning 14 | 15 | 16 | /*console.clear() ==> 17 | The console.clear() method is used to clear the console. */ 18 | console.clear(); // Clears the console 19 | 20 | 21 | /*console.assert() ==> 22 | The console.assert() method is used to assert a condition. If the condition is true, nothing happens. If the condition is false, the error message is printed to the console.*/ 23 | let x = 5; 24 | console.assert(x == 5, "Error: x is not equal to 5"); // Output: no output 25 | console.assert(x == 6, "Error: x is not equal to 6"); // Output: Assertion failed: Error: x is not equal to 6 26 | 27 | 28 | /*console.table() ==> 29 | The console.table() method is used to print the output in the form of a table. */ 30 | let students = [ 31 | {name: "priti", age: 20, city: "Rahuri"}, 32 | {name: "sakshi", age: 21, city: "Shrigonda"}, 33 | {name: "vaishanvi", age: 22, city: "Jamkhed"} 34 | ]; 35 | console.table(students); 36 | 37 | 38 | /*console.time() and console.timeEnd() ==> 39 | The console.time() method is used to start the timer. The console.timeEnd() method is used to end the timer. The time taken by the code between the console.time() and console.timeEnd() methods is printed to the console.*/ 40 | console.time("Time taken"); 41 | let w = 5; 42 | let y = 6; 43 | let z = x + y; 44 | console.timeEnd("Time taken"); // time taken by the code between console.time() and console.timeEnd() is printed to the console 45 | 46 | -------------------------------------------------------------------------------- /Exercises/Ex-7/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Alarm 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |

CLOCK

16 | 30 | 34 | 35 |

36 |

37 |

Hours :

38 |

39 |

: 40 |

41 |

Minutes :

42 |

43 |

: 44 |

45 | 46 |

Seconds :

47 |

48 |

49 |

50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /Exercises/Ex-7/script.js: -------------------------------------------------------------------------------- 1 | //clock global variables 2 | let audio = new Audio("./beep.mp3"); 3 | let check = 0; 4 | let hours = document.getElementById("hours"); 5 | let minutes = document.getElementById("minutes"); 6 | let seconds = document.getElementById("seconds"); 7 | let am = document.getElementById("am"); 8 | let [mer, a, h, s, m, d] = [0, 0, 0, 0, 0, 0]; //destructuring 9 | //chhote magar kaam ke functions 10 | const appear = (x) => { return (x < 10 ? "0" + x : x); } //add 0 to number < 10 11 | const convert = (x) => { return Number.parseInt(x) } //convert string to number 12 | const hider4 = (x) => { x.hidden = (x.hidden) ? false : true; } //hide DOM elements 13 | //clock update 14 | const update = function() { 15 | a = new Date() 16 | h = appear(a.getHours()); 17 | m = appear(a.getMinutes()); 18 | s = appear(a.getSeconds()); 19 | d = a.getDate(); 20 | mer = ((h > 12 || (h == 12 && m > 0)) ? "pm" : "am"); 21 | am.innerHTML = mer; 22 | hours.innerHTML = (check % 2 === 0 && h > 12) ? appear(h - 12) : h; 23 | minutes.innerHTML = m; 24 | seconds.innerHTML = s; 25 | } 26 | let blink = document.querySelectorAll(".blink2") 27 | setInterval((x) => { blink[0].classList.toggle("blinkthis") }, 520) 28 | setInterval((x) => { blink[1].classList.toggle("blinkthis") }, 520) 29 | setInterval(update, 100); 30 | //Alarm 31 | let popUp = document.querySelectorAll('.showbox'); 32 | let alarm = document.querySelectorAll('.timepicker'); 33 | let alarmObj = {} 34 | let alarmInterval; 35 | const set = () => { 36 | let alarmString = alarm[0].value; 37 | alarmObj.hour = convert(alarmString.substr(0, 2)); 38 | alarmObj.min = convert(alarmString.substr(3, 3)); 39 | alarmObj.mer = alarmString.substr(6, 2); 40 | hider4(popUp[0]); 41 | alarmInterval = (alarmObj.hour + 12 - convert(h)) * 3600; //hour to minutes 42 | if (alarmObj.min < convert(m) || mer.toUpperCase() != alarmObj.mer.toUpperCase()) { 43 | alarmInterval += 24 * 3600 //sets alarm for next day 44 | } 45 | alarmInterval += (alarmObj.min - convert(m)) * 60; //minutes to seconds 46 | alarmInterval -= s; //rectifies manual delay while setting Alarm 47 | alarmInterval = alarmInterval * 1000 //to milliseconds 48 | setTimeout(playsound, alarmInterval) 49 | } 50 | const playsound = () => { 51 | hider4(popUp[1]); 52 | audio.loop = true 53 | audio.play(); 54 | } 55 | document.addEventListener('DOMContentLoaded', function() { 56 | let instances = M.Timepicker.init(alarm, {}); 57 | }); -------------------------------------------------------------------------------- /Exercises/Ex-5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Note App 7 | 8 | 9 | 10 | 16 | 17 |

18 |

19 | Wow!! Your list is added 20 | 21 |

22 | 23 |

24 | please Don't add empty list 25 | 26 |

27 |

28 | 29 |

30 |

TODO LIST

31 | 32 |

33 | 34 |

35 | 36 | 37 | 38 |

39 |

LIST

40 |

41 | 42 |

43 |

44 |

Header

45 |

46 |

Primary card title

47 |

Some quick example text to build on the card title and make up the bulk of the card's content.

48 | 49 |

50 |

51 |

52 | 53 |

54 | 55 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /Exercises/Ex-5/script.js: -------------------------------------------------------------------------------- 1 | //adding button 2 | let btn = document.getElementById('btn'); 3 | 4 | //note array 5 | mainNodes = []; 6 | 7 | //title 8 | let title = document.getElementById('title'); 9 | 10 | //alert 11 | let galert = document.getElementById('galert') 12 | let balert = document.getElementById('balert') 13 | 14 | galert.style.display = 'none'; 15 | balert.style.display = 'none'; 16 | 17 | btn.addEventListener('click', function(e) { 18 | let getNodes = localStorage.getItem('node'); 19 | if (getNodes != null) { 20 | 21 | mainNodes = JSON.parse(getNodes); 22 | } 23 | let obj = { 24 | title:title.value 25 | } 26 | if (title.value.length == 0) { 27 | //bad alert 28 | setTimeout(() => { 29 | balert.style.display = 'none'; 30 | }, 3000) 31 | balert.style.display = 'block'; 32 | 33 | } else { 34 | //good alert 35 | galert.style.display = 'block'; 36 | setTimeout(() => { 37 | galert.style.display = 'none'; 38 | }, 3000) 39 | 40 | mainNodes.push(obj); 41 | localStorage.setItem('node', JSON.stringify(mainNodes)); 42 | } 43 | title.value=''; 44 | 45 | 46 | node(); 47 | }) 48 | function node() { 49 | let getNodes = localStorage.getItem('node'); 50 | let html =""; 51 | if (getNodes != null) { 52 | 53 | mainNodes = JSON.parse(getNodes); 54 | } 55 | let color = ['danger', 'success', 'primary', 'grey', 'danger', 'success', 'primary', 'grey', 'danger', 'success']; 56 | 57 | let ran = Math.random().toFixed(1) * 10; 58 | let ran2 = Math.random().toFixed(1) * 10; 59 | 60 | 61 | 62 | mainNodes.forEach(function(element, index) { 63 | html += ` 64 |

65 |

66 |

67 |

${index+1}.${element.title}

68 | 69 |

70 |

71 |

72 | 73 | `; 74 | }) 75 | let nodee = document.getElementById('note'); 76 | 77 | if(getNodes != '[]' && getNodes != null) { 78 | 79 | nodee.innerHTML = html; 80 | }else{ 81 | nodee.innerHTML = `

There is no note here write your first list` 82 | } 83 | } 84 | 85 | node(); 86 | function removeElement(index) { 87 | let getNodes = localStorage.getItem('node'); 88 | 89 | (index); 90 | if (getNodes != null) { 91 | mainNodes = JSON.parse(getNodes); 92 | } 93 | mainNodes.splice(index , 1); 94 | localStorage.setItem('node', JSON.stringify(mainNodes)); 95 | node(); 96 | } 97 | -------------------------------------------------------------------------------- /Exercises/Ex-6/script.js: -------------------------------------------------------------------------------- 1 | class password { 2 | constructor() { 3 | this.upcl= "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; 4 | this.lwcl= "abcdefghijklmnopqrstuvwxyz"; 5 | this.num= "1234567890"; 6 | this.symb= "$_@&?!#/><\[]"; 7 | } 8 | funnyPassword(){ 9 | let arr= ["password","incorrect","12345678","iforgot","secret","MyPreciousssPasssword","MyName","Chitu_Hacker","nothing","user","maiNahiBatunga","Sorry","1$perhour","admin","passwordIs1234"] 10 | let pass= arr[Math.floor(Math.random()arr.length)] 11 | return pass 12 | } 13 | 14 | weakPassword(){ 15 | let arr= [this.upcl,this.lwcl] 16 | let pass= "" 17 | for(let i= 0;i<8;i++){ 18 | let Ran1= Math.floor(Math.random()arr.length) 19 | let Ran2= Math.floor(Math.random()arr[Ran1].length) 20 | 21 | pass= pass+arr[Ran1][Ran2] 22 | } 23 | return pass 24 | } 25 | 26 | strongPassword(){ 27 | let arr= [this.upcl,this.lwcl,this.symb] 28 | let pass= "" 29 | for(let i= 0;i<15;i++){ 30 | let Ran1= Math.floor(Math.random()arr.length) 31 | let Ran2= Math.floor(Math.random()arr[Ran1].length) 32 | 33 | pass= pass+arr[Ran1][Ran2] 34 | } 35 | return pass 36 | } 37 | superStrongPassword(){ 38 | let arr= [this.upcl,this.lwcl,this.num,this.symb] 39 | let pass= "" 40 | for(let i= 0;i<25;i++){ 41 | let Ran1= Math.floor(Math.random()arr.length) 42 | let Ran2= Math.floor(Math.random()arr[Ran1].length) 43 | 44 | pass= pass+arr[Ran1][Ran2] 45 | } 46 | return pass 47 | } 48 | } 49 | 50 | 51 | 52 | let disp = document.getElementById("disp"); 53 | let radio = document.getElementsByClassName("redio"); 54 | let btn = document.getElementById("btn"); 55 | let copy = document.getElementById("copy"); 56 | //output.innerHTML = slider.value; 57 | 58 | let a= new password() 59 | 60 | btn.addEventListener("click",()=>{ 61 | let b; 62 | if(radio[0].checked){ 63 | b= a.funnyPassword() 64 | } 65 | else if(radio[1].checked){ 66 | b= a.weakPassword() 67 | } 68 | else if(radio[2].checked){ 69 | b= a.strongPassword() 70 | } 71 | else if(radio[3].checked){ 72 | b= a.superStrongPassword() 73 | } 74 | disp.value= b 75 | }) 76 | 77 | const toastLiveExample = document.getElementById('liveToast') 78 | const toast = new bootstrap.Toast(toastLiveExample) 79 | 80 | copy.addEventListener("click",()=>{ 81 | if(disp.value!= ""){ 82 | disp.select() 83 | disp.setSelectionRange(0, 33); 84 | document.execCommand("copy") 85 | navigator.clipboard.writeText(disp.value) 86 | toast.show() 87 | } 88 | }) 89 | -------------------------------------------------------------------------------- /Exercises/Ex-6/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Password 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 | 16 | Password copied successfully 17 | 18 |
19 |
20 |
21 | 22 | 23 | 24 | 25 |
26 |
Password Generator
27 |
28 | 29 |
30 | 31 |
32 |
33 |
34 | Generate a funny Password 35 | 36 |
37 |
38 | Generate a weak Password 39 | 40 |
41 |
42 | Generate a strong Password 43 | 44 |
45 |
46 | Generate a super strong Password 47 | 48 |
49 |
50 | 51 |
52 | 53 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /Exercises/Ex-4/script.js: -------------------------------------------------------------------------------- 1 | const func1 = () => { 2 | return new Promise((resolve, reject) => { 3 | setTimeout(() => { 4 | resolve("$-> Initializing Network, Please Wait...") 5 | }, 1000); 6 | }) 7 | } 8 | const func2 = () => { 9 | return new Promise((resolve, reject) => { 10 | setTimeout(() => { 11 | resolve("$-> Connecting to server....") 12 | }, 4000); 13 | }) 14 | } 15 | const func3 = () => { 16 | return new Promise((resolve, reject) => { 17 | setTimeout(() => { 18 | resolve("$-> Retreiving Username...") 19 | }, 3000); 20 | }) 21 | } 22 | const func4 = () => { 23 | return new Promise((resolve, reject) => { 24 | setTimeout(() => { 25 | resolve("$-> Username Found: @arjun_kadam_98") 26 | }, 3000); 27 | }) 28 | } 29 | const func5 = () => { 30 | return new Promise((resolve, reject) => { 31 | setTimeout(() => { 32 | resolve("$-> Trying a combination of 4.5 Thousands passwords...") 33 | }, 3000); 34 | }) 35 | } 36 | const funcT = () => { 37 | return new Promise((resolve, reject) => { 38 | setTimeout(() => { 39 | resolve("$-> Failed to get password") 40 | }, 3000); 41 | }) 42 | } 43 | const funcS = () => { 44 | return new Promise((resolve, reject) => { 45 | setTimeout(() => { 46 | resolve("$-> Trying Again") 47 | }, 1000); 48 | }) 49 | } 50 | const func6 = () => { 51 | return new Promise((resolve, reject) => { 52 | setTimeout(() => { 53 | resolve("$-> Password Found Successfully: arjun1221") 54 | }, 2000); 55 | }) 56 | } 57 | const func7 = () => { 58 | return new Promise((resolve, reject) => { 59 | setTimeout(() => { 60 | resolve("$-> Connecting to Instagram...") 61 | }, 1000); 62 | }) 63 | } 64 | const func8 = () => { 65 | return new Promise((resolve, reject) => { 66 | setTimeout(() => { 67 | resolve("$-> Successfully Hacked") 68 | }, 1000); 69 | }) 70 | } 71 | const run = async () => { 72 | let a = await func1() 73 | document.querySelector("#content").innerHTML += (a) 74 | let b = await func2() 75 | document.querySelector("#content2").innerHTML += (b) 76 | let c = await func3() 77 | document.querySelector("#content3").innerHTML += (c) 78 | let d = await func4() 79 | document.querySelector("#content4").innerHTML += (d) 80 | let e = await func5() 81 | document.querySelector("#content5").innerHTML += (e) 82 | let eT = await funcT() 83 | document.querySelector("#contentT").innerHTML += (eT) 84 | let eS = await funcS() 85 | document.querySelector("#contentS").innerHTML += (eS) 86 | let f = await func6() 87 | document.querySelector("#content6").innerHTML += (f) 88 | let g = await func7() 89 | document.querySelector("#content7").innerHTML += (g) 90 | let h = await func8() 91 | document.querySelector("#content8").innerHTML += (h) 92 | } 93 | run() 94 | -------------------------------------------------------------------------------- /Exercises/Ex-7/style.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | height: 100%; 3 | width: 100%; 4 | background-repeat:no-repeat ; 5 | background-size:cover ; 6 | background-position: center; 7 | z-index: -1; 8 | overflow: hidden; 9 | 10 | } 11 | 12 | #heading{ 13 | color: 14 | #000000; 15 | text-shadow: -4px 1px 16px 16 | black; 17 | font-size: 4rem; 18 | font-family: 'Zen Dots', cursive; 19 | text-align: center; 20 | width: 28rem; 21 | margin: auto; 22 | } 23 | 24 | .container3{ 25 | margin: 20px 0.1px; 26 | display: flex; 27 | align-items: center; 28 | justify-content: center; 29 | font-size:8rem; 30 | color:rgba(0,0,0,0.8); 31 | 32 | } 33 | 34 | .content{ 35 | margin: auto; 36 | display:flex; 37 | flex-direction: row; 38 | align-items: center; 39 | justify-content: center; 40 | } 41 | .clock2{ 42 | padding:0.1rem; 43 | background: 44 | black; 45 | color: 46 | white; 47 | border-radius: 20px; 48 | font-size: 7rem; 49 | text-align: center; 50 | margin:1%; 51 | height:10rem; 52 | width:10rem; 53 | border: 2px solid 54 | black; 55 | box-shadow:2px -2px 40px 1px 56 | black; 57 | } 58 | #am{ 59 | position: absolute; 60 | transform: translate(4rem,1rem); 61 | background: 62 | black; 63 | color: 64 | white; 65 | border-radius: 4px; 66 | font-size: 1.2rem; 67 | text-align: center; 68 | height:2rem; 69 | width:2.2rem; 70 | border: 0.4px solid 71 | #363636; 72 | box-shadow:2px -2px 40px 1px 73 | black; 74 | transition: all 200ms ease-in-out; 75 | display: flexbox; 76 | align-items: center; 77 | justify-content: center; 78 | } 79 | #seconds{ 80 | color: 81 | #f23636; 82 | } 83 | .blinkthis{ 84 | opacity:0; 85 | } 86 | .container3 span { 87 | margin: 3px 0px; 88 | transition: all 410ms ease ; 89 | } 90 | .but4{ 91 | font-size: 1rem; 92 | border:3px solid 93 | #ffffff; 94 | background:rgba(251, 126, 84, 0.58) !important; 95 | border-radius: 20px; 96 | color: 97 | #ffffff; 98 | display:block; 99 | width:8rem; 100 | height:2.925rem; 101 | margin:32px auto; 102 | transition: all 150ms ease-in-out; 103 | } 104 | .but4:hover{ 105 | font-size: 1rem; 106 | cursor:pointer; 107 | border:2px solid 108 | #ffffff; 109 | background:rgba(0,0 ,0 , 0.8) !important; 110 | box-shadow:2px -2px 50px 111 | black; 112 | transform:scale(1.05); 113 | 114 | } 115 | .but4:active{ 116 | border:2px solid 117 | #ffffff; 118 | background:rgba(251, 126, 84, 0.3) !important; 119 | transform:scale(1); 120 | } 121 | .but4:visited{ 122 | background:rgba(251, 126, 84, 0.3); 123 | } 124 | .in{ 125 | font-size: 1rem; 126 | font-family: 'Zen Dots', cursive; 127 | color: 128 | white; 129 | } 130 | .no{ 131 | border:0px; 132 | background:none; 133 | 134 | } 135 | 136 | .bye{ 137 | opacity: 0; 138 | animation: ba 200ms ease-in-out 1 both; 139 | } 140 | @keyframes ba{ 141 | from { 142 | transform:translate(4rem,1rem); 143 | } 144 | to{ 145 | transform:translate(4.8rem,1rem); 146 | } 147 | } 148 | .timenum{ 149 | font-size: 7rem; 150 | transform: translateY(-2rem); 151 | 152 | } 153 | /Set Alarm/ 154 | .showbox{ 155 | display:flex; 156 | flex-direction: column; 157 | align-items: center; 158 | position: fixed; 159 | top:22%; 160 | left:37%; 161 | width:26rem; 162 | height:15rem; 163 | color:#18859a; 164 | background: rgba(255,255,255,1); 165 | border-radius: 5px; 166 | animation: shake 800ms ease-in-out alternate infinite; 167 | box-shadow: 0px 0px 50px rgba(0,0,0,0.6); 168 | margin:auto; 169 | z-index: 13; 170 | } 171 | .showbox-option{ 172 | color:#18859a; 173 | justify-self: flex-end; 174 | cursor: pointer; 175 | } 176 | #ddd{ 177 | font-size: 3rem; 178 | padding:1rem; 179 | } 180 | .showbox-option:nth-child(2){ 181 | font-size: 2.5rem; 182 | 183 | } 184 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # JavaScript From Scratch ==> 2 | 3 | 4 | ## Lessons: 5 | - [Introduction to JS](https://github.com/Shubham-Bhoite/JavaScript-Programming/blob/main/Lessons/introduction.md) 6 | 7 | - [Variables](https://github.com/Shubham-Bhoite/JavaScript-Programming/blob/main/Lessons/Variables.js) 8 | 9 | - [Var let Const](https://github.com/Shubham-Bhoite/JavaScript-Programming/blob/main/Lessons/VarLetConst.js) 10 | 11 | - [Primitives & Objects](https://github.com/Shubham-Bhoite/JavaScript-Programming/blob/main/Lessons/Primitives.js) 12 | 13 | - [Operators in JavaScript](https://github.com/Shubham-Bhoite/JavaScript-Programming/blob/main/Lessons/Operators.js) 14 | 15 | - [Conditional Statements](https://github.com/Shubham-Bhoite/JavaScript-Programming/blob/main/Lessons/ConditionalStatements.js) 16 | 17 | - [For Loop](https://github.com/Shubham-Bhoite/JavaScript-Programming/blob/main/Lessons/ForLoop.js) 18 | 19 | - [While Loop](https://github.com/Shubham-Bhoite/JavaScript-Programming/blob/main/Lessons/WhileLoop.js) 20 | 21 | - [Functions In JavaScript](https://github.com/Shubham-Bhoite/JavaScript-Programming/blob/main/Lessons/FunctionInJS.js) 22 | 23 | - [String](https://github.com/Shubham-Bhoite/JavaScript-Programming/blob/main/Lessons/Strings.js) 24 | 25 | - [String Methods](https://github.com/Shubham-Bhoite/JavaScript-Programming/blob/main/Lessons/StringMethods.js) 26 | 27 | - [Array](https://github.com/Shubham-Bhoite/JavaScript-Programming/blob/main/Lessons/Arrays.js) 28 | 29 | - [Array Methods](https://github.com/Shubham-Bhoite/JavaScript-Programming/blob/main/Lessons/ArrayMethods.js) 30 | 31 | - [Loops With Array](https://github.com/Shubham-Bhoite/JavaScript-Programming/blob/main/Lessons/LoopsInArray.js) 32 | 33 | - [Console Methods](https://github.com/Shubham-Bhoite/JavaScript-Programming/blob/main/Lessons/ConsoleTypes.js) 34 | 35 | - [Windows Info.](https://github.com/Shubham-Bhoite/JavaScript-Programming/blob/main/Lessons/Windows.md) 36 | 37 | - [Navigation](https://github.com/Shubham-Bhoite/JavaScript-Programming/tree/main/Lessons/Navigation) 38 | 39 | - [DOM Methods](https://github.com/Shubham-Bhoite/JavaScript-Programming/tree/main/Lessons/DOM-Methods) 40 | 41 | - [Attribute Methods](https://github.com/Shubham-Bhoite/JavaScript-Programming/tree/main/Lessons/AttributesMethods) 42 | 43 | - [Insertion Methods](https://github.com/Shubham-Bhoite/JavaScript-Programming/tree/main/Lessons/InsertionMethods) 44 | 45 | - [Browser Events](https://github.com/Shubham-Bhoite/JavaScript-Programming/blob/main/Lessons/BrowserEvents.md) 46 | 47 | - [Call Back](https://github.com/Shubham-Bhoite/JavaScript-Programming/blob/main/Lessons/CallBack.js) 48 | 49 | - [Promise](https://github.com/Shubham-Bhoite/JavaScript-Programming/blob/main/Lessons/Promise.js) 50 | 51 | - [then & catch callback](https://github.com/Shubham-Bhoite/JavaScript-Programming/blob/main/Lessons/ThenCatch.html) 52 | 53 | - [Promise Chaining](https://github.com/Shubham-Bhoite/JavaScript-Programming/blob/main/Lessons/PromiseChaining.js) 54 | 55 | - [Multiple Handlers](https://github.com/Shubham-Bhoite/JavaScript-Programming/blob/main/Lessons/MultipleHandlers.html) 56 | 57 | - [Promise API](https://github.com/Shubham-Bhoite/JavaScript-Programming/tree/main/Lessons/Promise-API) 58 | 59 | - [Async Await](https://github.com/Shubham-Bhoite/JavaScript-Programming/tree/main/Lessons/AsyncAwait) 60 | 61 | - [Try Catch](https://github.com/Shubham-Bhoite/JavaScript-Programming/blob/main/Lessons/TryCatch.html) 62 | 63 | - [Error Object](https://github.com/Shubham-Bhoite/JavaScript-Programming/blob/main/Lessons/ErrorObject.html) 64 | 65 | - [Finally keyword](https://github.com/Shubham-Bhoite/JavaScript-Programming/blob/main/Lessons/Finally.html) 66 | 67 | - [Fetch API](https://github.com/Shubham-Bhoite/JavaScript-Programming/blob/main/Lessons/FetchAPI.html) 68 | 69 | - [JavaScript Cookies](https://github.com/Shubham-Bhoite/JavaScript-Programming/blob/main/Lessons/JScookies.html) 70 | 71 | - [Local Storage](https://github.com/Shubham-Bhoite/JavaScript-Programming/blob/main/Lessons/LocalStorage.html) 72 | 73 | - [Session Storage](https://github.com/Shubham-Bhoite/JavaScript-Programming/blob/main/Lessons/SessionStorage.html) 74 | 75 | - [Prototype](https://github.com/Shubham-Bhoite/JavaScript-Programming/blob/main/Lessons/Prototype.html) 76 | 77 | - [Class & Object](https://github.com/Shubham-Bhoite/JavaScript-Programming/blob/main/Lessons/Classes%26Objects.html) 78 | 79 | - [Constructor](https://github.com/Shubham-Bhoite/JavaScript-Programming/blob/main/Lessons/Constructors.html) 80 | 81 | - [Inheritance](https://github.com/Shubham-Bhoite/JavaScript-Programming/blob/main/Lessons/Inheritance.js) 82 | 83 | - [Overriding Constructor](https://github.com/Shubham-Bhoite/JavaScript-Programming/blob/main/Lessons/OverridingConstructor.js) 84 | 85 | - [Getters & Setters](https://github.com/Shubham-Bhoite/JavaScript-Programming/blob/main/Lessons/getters%26setters.html) 86 | 87 | - [IIFE](https://github.com/Shubham-Bhoite/JavaScript-Programming/blob/main/Lessons/IIFE.js) 88 | 89 | - [Destructuring](https://github.com/Shubham-Bhoite/JavaScript-Programming/blob/main/Lessons/Destructuring.js) 90 | 91 | 92 | ## Exercises: 93 | 94 | - [Guess the number Game](https://github.com/Shubham-Bhoite/JavaScript-Programming/blob/main/Exercises/Ex-1.js) 95 | 96 | - [Random Joke](https://github.com/Shubham-Bhoite/JavaScript-Programming/tree/main/Exercises/Ex-2.js) 97 | 98 | - [Digital Clock](https://github.com/Shubham-Bhoite/JavaScript-Programming/tree/main/Exercises/Ex-3) 99 | 100 | - [Hackerman Shubham](https://github.com/Shubham-Bhoite/JavaScript-Programming/tree/main/Exercises/Ex-4) 101 | 102 | - [Todo List](https://github.com/Shubham-Bhoite/JavaScript-Programming/tree/main/Exercises/Ex-5) 103 | 104 | - [Password Generator](https://github.com/Shubham-Bhoite/JavaScript-Programming/tree/main/Exercises/Ex-6) 105 | 106 | - [Alarm Clock](https://github.com/Shubham-Bhoite/JavaScript-Programming/tree/main/Exercises/Ex-7) 107 | 108 | ## Instructor : 109 | CodeWithHarry 110 | -------------------------------------------------------------------------------- /Exercises/Ex-2/script.js: -------------------------------------------------------------------------------- 1 | let myjokes = [ 2 | { 3 | "category": "Programming", 4 | "type": "single", 5 | "joke": "// This line doesn't actually do anything, but the code stops working when I delete it.", 6 | "flags": { 7 | "nsfw": false, 8 | "religious": false, 9 | "political": false, 10 | "racist": false, 11 | "sexist": false, 12 | "explicit": false 13 | }, 14 | "id": 12, 15 | "safe": true, 16 | "lang": "en" 17 | }, 18 | { 19 | "category": "Programming", 20 | "type": "single", 21 | "joke": "\"Honey, go to the store and buy some eggs.\"\n\"OK.\"\n\"Oh and while you're there, get some milk.\"\nHe never returned.", 22 | "flags": { 23 | "nsfw": false, 24 | "religious": false, 25 | "political": false, 26 | "racist": false, 27 | "sexist": false, 28 | "explicit": false 29 | }, 30 | "id": 18, 31 | "safe": true, 32 | "lang": "en" 33 | }, 34 | { 35 | "category": "Programming", 36 | "type": "single", 37 | "joke": "Saying that Java is nice because it works on every OS is like saying that anal sex is nice because it works on every gender.", 38 | "flags": { 39 | "nsfw": true, 40 | "religious": false, 41 | "political": false, 42 | "racist": false, 43 | "sexist": false, 44 | "explicit": true 45 | }, 46 | "id": 30, 47 | "safe": false, 48 | "lang": "en" 49 | }, 50 | { 51 | "category": "Programming", 52 | "type": "single", 53 | "joke": "Hey Girl,\nRoses are #ff0000,\nViolets are #0000ff,\nI use hex codes,\nBut I'd use RGB for you.", 54 | "flags": { 55 | "nsfw": false, 56 | "religious": false, 57 | "political": false, 58 | "racist": false, 59 | "sexist": false, 60 | "explicit": false 61 | }, 62 | "id": 41, 63 | "safe": true, 64 | "lang": "en" 65 | }, 66 | { 67 | "category": "Programming", 68 | "type": "single", 69 | "joke": "\"We messed up the keming again guys.\"", 70 | "flags": { 71 | "nsfw": false, 72 | "religious": false, 73 | "political": false, 74 | "racist": false, 75 | "sexist": false, 76 | "explicit": false 77 | }, 78 | "id": 20, 79 | "safe": true, 80 | "lang": "en" 81 | }, 82 | { 83 | "category": "Programming", 84 | "type": "single", 85 | "joke": "A SQL statement walks into a bar and sees two tables.\nIt approaches, and asks \"may I join you?\"", 86 | "flags": { 87 | "nsfw": false, 88 | "religious": false, 89 | "political": false, 90 | "racist": false, 91 | "sexist": false, 92 | "explicit": false 93 | }, 94 | "id": 5, 95 | "safe": true, 96 | "lang": "en" 97 | }, 98 | { 99 | "category": "Programming", 100 | "type": "single", 101 | "joke": "Two SQL tables sit at the bar. A query approaches and asks \"Can I join you?\"", 102 | "flags": { 103 | "nsfw": false, 104 | "religious": false, 105 | "political": false, 106 | "racist": false, 107 | "sexist": false, 108 | "explicit": false 109 | }, 110 | "id": 221, 111 | "safe": true, 112 | "lang": "en" 113 | }, 114 | { 115 | "category": "Programming", 116 | "type": "single", 117 | "joke": "Documentation is like sex:\nWhen it's good, it's very good.\nWhen it's bad, it's better than nothing...", 118 | "flags": { 119 | "nsfw": true, 120 | "religious": false, 121 | "political": false, 122 | "racist": false, 123 | "sexist": false, 124 | "explicit": false 125 | }, 126 | "safe": false, 127 | "id": 305, 128 | "lang": "en" 129 | }, 130 | { 131 | "category": "Programming", 132 | "type": "single", 133 | "joke": "\"Can I tell you a TCP joke?\"\n\"Please tell me a TCP joke.\"\n\"OK, I'll tell you a TCP joke.\"", 134 | "flags": { 135 | "nsfw": false, 136 | "religious": false, 137 | "political": false, 138 | "racist": false, 139 | "sexist": false, 140 | "explicit": false 141 | }, 142 | "id": 57, 143 | "safe": true, 144 | "lang": "en" 145 | }, 146 | { 147 | "category": "Programming", 148 | "type": "single", 149 | "joke": "A byte walks into a bar looking miserable.\nThe bartender asks it: \"What's wrong buddy?\"\n\"Parity error.\" it replies. \n\"Ah that makes sense, I thought you looked a bit off.\"", 150 | "flags": { 151 | "nsfw": false, 152 | "religious": false, 153 | "political": false, 154 | "racist": false, 155 | "sexist": false, 156 | "explicit": false 157 | }, 158 | "id": 24, 159 | "safe": true, 160 | "lang": "en" 161 | }, 162 | { 163 | "category": "Programming", 164 | "type": "single", 165 | "joke": "UDP is better in the COVID era since it avoids unnecessary handshakes.", 166 | "flags": { 167 | "nsfw": false, 168 | "religious": false, 169 | "political": false, 170 | "racist": false, 171 | "sexist": false, 172 | "explicit": false 173 | }, 174 | "id": 259, 175 | "safe": true, 176 | "lang": "en" 177 | }, 178 | { 179 | "category": "Dark", 180 | "type": "single", 181 | "joke": "I'll never forget my Granddad's last words to me just before he died. \"Are you still holding the ladder?\"", 182 | "flags": { 183 | "nsfw": false, 184 | "religious": false, 185 | "political": false, 186 | "racist": false, 187 | "sexist": false, 188 | "explicit": false 189 | }, 190 | "id": 208, 191 | "safe": false, 192 | "lang": "en" 193 | }, 194 | { 195 | "category": "Misc", 196 | "type": "single", 197 | "joke": "My wife is really mad at the fact that I have no sense of direction.\nSo I packed up my stuff and right.", 198 | "flags": { 199 | "nsfw": false, 200 | "religious": false, 201 | "political": false, 202 | "racist": false, 203 | "sexist": false, 204 | "explicit": false 205 | }, 206 | "id": 201, 207 | "safe": true, 208 | "lang": "en" 209 | }, 210 | { 211 | "category": "Programming", 212 | "type": "single", 213 | "joke": "Debugging is like being the detective in a crime movie where you're also the murderer at the same time.", 214 | "flags": { 215 | "nsfw": false, 216 | "religious": false, 217 | "political": false, 218 | "racist": false, 219 | "sexist": false, 220 | "explicit": false 221 | }, 222 | "id": 42, 223 | "safe": true, 224 | "lang": "en" 225 | }, 226 | { 227 | "category": "Programming", 228 | "type": "single", 229 | "joke": "The glass is neither half-full nor half-empty, the glass is twice as big as it needs to be.", 230 | "flags": { 231 | "nsfw": false, 232 | "religious": false, 233 | "political": false, 234 | "racist": false, 235 | "sexist": false, 236 | "explicit": false 237 | }, 238 | "id": 23, 239 | "safe": true, 240 | "lang": "en" 241 | }, 242 | { 243 | "category": "Programming", 244 | "type": "single", 245 | "joke": "Eight bytes walk into a bar.\nThe bartender asks, \"Can I get you anything?\"\n\"Yeah,\" reply the bytes.\n\"Make us a double.\"", 246 | "flags": { 247 | "nsfw": false, 248 | "religious": false, 249 | "political": false, 250 | "racist": false, 251 | "sexist": false, 252 | "explicit": false 253 | }, 254 | "id": 34, 255 | "safe": true, 256 | "lang": "en" 257 | }, 258 | { 259 | "category": "Pun", 260 | "type": "single", 261 | "joke": "How do you make holy water? You boil the hell out of it.", 262 | "flags": { 263 | "nsfw": false, 264 | "religious": true, 265 | "political": false, 266 | "racist": false, 267 | "sexist": false, 268 | "explicit": false 269 | }, 270 | "id": 202, 271 | "safe": false, 272 | "lang": "en" 273 | }, 274 | { 275 | "category": "Programming", 276 | "type": "single", 277 | "joke": "I've got a really good UDP joke to tell you but I don’t know if you'll get it.", 278 | "flags": { 279 | "nsfw": false, 280 | "religious": false, 281 | "political": false, 282 | "racist": false, 283 | "sexist": false, 284 | "explicit": false 285 | }, 286 | "id": 0, 287 | "safe": true, 288 | "lang": "en" 289 | }, 290 | { 291 | "category": "Dark", 292 | "type": "single", 293 | "joke": "I hate double standards. Burn a body at a crematorium, you're \"being a respectful friend.\" Do it at home and you're \"destroying evidence.\"", 294 | "flags": { 295 | "nsfw": false, 296 | "religious": false, 297 | "political": false, 298 | "racist": false, 299 | "sexist": false, 300 | "explicit": true 301 | }, 302 | "safe": false, 303 | "id": 274, 304 | "lang": "en" 305 | }, 306 | { 307 | "category": "Misc", 308 | "type": "single", 309 | "joke": "What does the MacBook have in common with Donald Trump?\n\nI would tell you....\nBut I don't compare apples to oranges.", 310 | "flags": { 311 | "nsfw": false, 312 | "religious": false, 313 | "political": true, 314 | "racist": false, 315 | "sexist": false, 316 | "explicit": false 317 | }, 318 | "id": 233, 319 | "safe": false, 320 | "lang": "en" 321 | } 322 | 323 | 324 | 325 | ] 326 | 327 | let index = Math.floor(Math.random() (myjokes.length - 1)) 328 | console.log(index) 329 | joke.innerHTML = myjokes[index].joke 330 | --------------------------------------------------------------------------------