├── 01_basics ├── test.js ├── 04_comparision.js ├── 01_variables.js ├── 02_dataTypes.js ├── datatypes-summary.js ├── 07_datesinJs.js ├── 06_nums_and_math.js ├── 05_strings.js └── 03_conversionOperation.js ├── 09_advance_one ├── promise.js ├── ApiRequest.html └── promises.js ├── 08_events ├── eventbasics.js ├── three.html ├── two.html └── one.html ├── .vscode └── settings.json ├── 03_basics ├── 04_iife.js ├── 02_scopes.js ├── 03_arrow.js └── 01_functions.js ├── 05_iterations ├── seven.js ├── two.js ├── four.js ├── nine.js ├── three.js ├── five.js ├── one.js └── six.js ├── 10_classes_and_oop ├── object_get_set.js ├── notes.md ├── call.js ├── getter_setter.js ├── staticprop.js ├── properties_get_set.js ├── inheritance.js ├── mathpi.js ├── bind.html ├── oop.js ├── myClasses.js ├── Prototype.js └── Object.js ├── README.md ├── 04_control_flow ├── switch.js ├── truthy.js └── one.js ├── 02_basics ├── 01_arrays.js ├── 02_array.js ├── 03_objects.js └── 04_objects.js ├── 06_dom ├── three.html ├── one.html ├── two.html └── four.html ├── .devcontainer └── devcontainer.json ├── 11_fun_with_js └── closure.html └── 07_projects └── projectsset1.md /01_basics/test.js: -------------------------------------------------------------------------------- 1 | console.log("Hitesh") -------------------------------------------------------------------------------- /09_advance_one/promise.js: -------------------------------------------------------------------------------- 1 | console.log("promises"); -------------------------------------------------------------------------------- /08_events/eventbasics.js: -------------------------------------------------------------------------------- 1 | console.log("Getting started with event"); -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501, 3 | "editor.acceptSuggestionOnEnter": "on" 4 | } -------------------------------------------------------------------------------- /03_basics/04_iife.js: -------------------------------------------------------------------------------- 1 | // Immediately Invoked Function Expressions (IIFE) 2 | 3 | 4 | (function chai(){ 5 | // named IIFE 6 | console.log(`DB CONNECTED`); 7 | })(); 8 | 9 | ( (name) => { 10 | console.log(`DB CONNECTED TWO ${name}`); 11 | } )('hitesh') 12 | 13 | -------------------------------------------------------------------------------- /05_iterations/seven.js: -------------------------------------------------------------------------------- 1 | const myNumers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] 2 | 3 | // const newNums = myNumers.map( (num) => { return num + 10}) 4 | 5 | const newNums = myNumers 6 | .map((num) => num * 10 ) 7 | .map( (num) => num + 1) 8 | .filter( (num) => num >= 40) 9 | 10 | console.log(newNums); -------------------------------------------------------------------------------- /10_classes_and_oop/object_get_set.js: -------------------------------------------------------------------------------- 1 | const User = { 2 | _email: 'h@hc.com', 3 | _password: "abc", 4 | 5 | 6 | get email(){ 7 | return this._email.toUpperCase() 8 | }, 9 | 10 | set email(value){ 11 | this._email = value 12 | } 13 | } 14 | 15 | const tea = Object.create(User) 16 | console.log(tea.email); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # js-hindi-youtube 2 | A code repo for javascript series at Chai aur code youtube channel 3 | 4 | --- 5 | 6 | ## Projects for practice 7 | 8 | All projects are available here in a special sandbox. All future projects will also be added on the same link. 9 | [Javascript Projects](https://stackblitz.com/edit/dom-project-chaiaurcode?file=index.html) -------------------------------------------------------------------------------- /10_classes_and_oop/notes.md: -------------------------------------------------------------------------------- 1 | # javascript and classes 2 | 3 | ## OOP 4 | 5 | ## Object 6 | - collection of properties and methods 7 | - toLowerCase 8 | 9 | ## why use OOP 10 | 11 | ## parts of OOP 12 | Object literal 13 | 14 | - Constructor function 15 | - Prototypes 16 | - Classes 17 | - Instances (new, this) 18 | 19 | 20 | ## 4 pillars 21 | Abstraction 22 | Encapsulation 23 | Inheritance 24 | Polymorphism -------------------------------------------------------------------------------- /10_classes_and_oop/call.js: -------------------------------------------------------------------------------- 1 | function SetUsername(username){ 2 | //complex DB calls 3 | this.username = username 4 | console.log("called"); 5 | } 6 | 7 | function createUser(username, email, password){ 8 | SetUsername.call(this, username) 9 | 10 | this.email = email 11 | this.password = password 12 | } 13 | 14 | const chai = new createUser("chai", "chai@fb.com", "123") 15 | console.log(chai); -------------------------------------------------------------------------------- /01_basics/04_comparision.js: -------------------------------------------------------------------------------- 1 | // console.log(2 > 1); 2 | // console.log(2 >= 1); 3 | // console.log(2 < 1); 4 | // console.log(2 == 1); 5 | // console.log(2 != 1); 6 | 7 | 8 | // console.log("2" > 1); 9 | // console.log("02" > 1); 10 | 11 | console.log(null > 0); 12 | console.log(null == 0); 13 | console.log(null >= 0); 14 | 15 | console.log(undefined == 0); 16 | console.log(undefined > 0); 17 | console.log(undefined < 0); 18 | 19 | // === 20 | 21 | console.log("2" === 2); -------------------------------------------------------------------------------- /05_iterations/two.js: -------------------------------------------------------------------------------- 1 | 2 | let index = 0 3 | // while (index <= 10) { 4 | // console.log(`Value of index is ${index}`); 5 | // index = index + 2 6 | // } 7 | 8 | let myArray = ['flash', "batman", "superman"] 9 | 10 | let arr = 0 11 | while (arr < myArray.length) { 12 | //console.log(`Value is ${myArray[arr]}`); 13 | arr = arr + 1 14 | } 15 | 16 | let score = 11 17 | 18 | do { 19 | console.log(`Score is ${score}`); 20 | score++ 21 | } while (score <= 10); -------------------------------------------------------------------------------- /01_basics/01_variables.js: -------------------------------------------------------------------------------- 1 | const accountId = 144553 2 | let accountEmail = "hitesh@google.com" 3 | var accountPassword = "12345" 4 | accountCity = "Jaipur" 5 | let accountState; 6 | 7 | // accountId = 2 // not allowed 8 | 9 | 10 | accountEmail = "hc@hc.com" 11 | accountPassword = "21212121" 12 | accountCity = "Bengaluru" 13 | 14 | console.log(accountId); 15 | 16 | /* 17 | Prefer not to use var 18 | because of issue in block scope and functional scope 19 | */ 20 | 21 | 22 | console.table([accountId, accountEmail, accountPassword, accountCity, accountState]) -------------------------------------------------------------------------------- /10_classes_and_oop/getter_setter.js: -------------------------------------------------------------------------------- 1 | class User { 2 | constructor(email, password){ 3 | this.email = email; 4 | this.password = password 5 | } 6 | 7 | get email(){ 8 | return this._email.toUpperCase() 9 | } 10 | set email(value){ 11 | this._email = value 12 | } 13 | 14 | get password(){ 15 | return `${this._password}hitesh` 16 | } 17 | 18 | set password(value){ 19 | this._password = value 20 | } 21 | } 22 | 23 | const hitesh = new User("h@hitesh.ai", "abc") 24 | console.log(hitesh.email); -------------------------------------------------------------------------------- /08_events/three.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

Chai aur Javascript

10 | 11 | 12 | 13 | 22 | -------------------------------------------------------------------------------- /04_control_flow/switch.js: -------------------------------------------------------------------------------- 1 | // switch (key) { 2 | // case value: 3 | 4 | // break; 5 | 6 | // default: 7 | // break; 8 | // } 9 | 10 | const month = "march" 11 | 12 | switch (month) { 13 | case "jan": 14 | console.log("January"); 15 | break; 16 | case "feb": 17 | console.log("feb"); 18 | break; 19 | case "march": 20 | console.log("march"); 21 | break; 22 | case "april": 23 | console.log("april"); 24 | break; 25 | 26 | default: 27 | console.log("default case match"); 28 | break; 29 | } -------------------------------------------------------------------------------- /10_classes_and_oop/staticprop.js: -------------------------------------------------------------------------------- 1 | class User { 2 | constructor(username){ 3 | this.username = username 4 | } 5 | 6 | logMe(){ 7 | console.log(`Username: ${this.username}`); 8 | } 9 | 10 | static createId(){ 11 | return `123` 12 | } 13 | } 14 | 15 | const hitesh = new User("hitesh") 16 | // console.log(hitesh.createId()) 17 | 18 | class Teacher extends User { 19 | constructor(username, email){ 20 | super(username) 21 | this.email = email 22 | } 23 | } 24 | 25 | const iphone = new Teacher("iphone", "i@phone.com") 26 | console.log(iphone.createId()); -------------------------------------------------------------------------------- /01_basics/02_dataTypes.js: -------------------------------------------------------------------------------- 1 | "use strict"; // treat all JS code as newer version 2 | 3 | // alert( 3 + 3) // we are using nodejs, not browser 4 | 5 | console.log(3 6 | + 7 | 3) // code readability should be high 8 | 9 | console.log("Hitesh") 10 | 11 | 12 | let name = "hitesh" 13 | let age = 18 14 | let isLoggedIn = false 15 | let state; 16 | 17 | // number => 2 to power 53 18 | // bigint 19 | // string => "" 20 | // boolean => true/false 21 | // null => standalone value 22 | // undefined => 23 | // symbol => unique 24 | 25 | 26 | // object 27 | 28 | console.log(typeof undefined); // undefined 29 | console.log(typeof null); // object 30 | -------------------------------------------------------------------------------- /05_iterations/four.js: -------------------------------------------------------------------------------- 1 | const myObject = { 2 | js: 'javascript', 3 | cpp: 'C++', 4 | rb: "ruby", 5 | swift: "swift by apple" 6 | } 7 | 8 | for (const key in myObject) { 9 | //console.log(`${key} shortcut is for ${myObject[key]}`); 10 | } 11 | 12 | const programming = ["js", "rb", "py", "java", "cpp"] 13 | 14 | for (const key in programming) { 15 | //console.log(programming[key]); 16 | } 17 | 18 | // const map = new Map() 19 | // map.set('IN', "India") 20 | // map.set('USA', "United States of America") 21 | // map.set('Fr', "France") 22 | // map.set('IN', "India") 23 | 24 | // for (const key in map) { 25 | // console.log(key); 26 | // } -------------------------------------------------------------------------------- /10_classes_and_oop/properties_get_set.js: -------------------------------------------------------------------------------- 1 | function User(email, password){ 2 | this._email = email; 3 | this._password = password 4 | 5 | Object.defineProperty(this, 'email', { 6 | get: function(){ 7 | return this._email.toUpperCase() 8 | }, 9 | set: function(value){ 10 | this._email = value 11 | } 12 | }) 13 | Object.defineProperty(this, 'password', { 14 | get: function(){ 15 | return this._password.toUpperCase() 16 | }, 17 | set: function(value){ 18 | this._password = value 19 | } 20 | }) 21 | 22 | } 23 | 24 | const chai = new User("chai@chai.com", "chai") 25 | 26 | console.log(chai.email); -------------------------------------------------------------------------------- /10_classes_and_oop/inheritance.js: -------------------------------------------------------------------------------- 1 | class User { 2 | constructor(username){ 3 | this.username = username 4 | } 5 | 6 | logMe(){ 7 | console.log(`USERNAME is ${this.username}`); 8 | } 9 | } 10 | 11 | class Teacher extends User{ 12 | constructor(username, email, password){ 13 | super(username) 14 | this.email = email 15 | this.password = password 16 | } 17 | 18 | addCourse(){ 19 | console.log(`A new course was added by ${this.username}`); 20 | } 21 | } 22 | 23 | const chai = new Teacher("chai", "chai@teacher.com", "123") 24 | 25 | chai.logMe() 26 | const masalaChai = new User("masalaChai") 27 | 28 | masalaChai.logMe() 29 | 30 | console.log(chai instanceof User); -------------------------------------------------------------------------------- /08_events/two.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

Chai aur code

10 | 11 | 12 | 27 | -------------------------------------------------------------------------------- /02_basics/01_arrays.js: -------------------------------------------------------------------------------- 1 | // array 2 | 3 | const myArr = [0, 1, 2, 3, 4, 5] 4 | const myHeors = ["shaktiman", "naagraj"] 5 | 6 | const myArr2 = new Array(1, 2, 3, 4) 7 | // console.log(myArr[1]); 8 | 9 | // Array methods 10 | 11 | // myArr.push(6) 12 | // myArr.push(7) 13 | // myArr.pop() 14 | 15 | // myArr.unshift(9) 16 | // myArr.shift() 17 | 18 | // console.log(myArr.includes(9)); 19 | // console.log(myArr.indexOf(3)); 20 | 21 | // const newArr = myArr.join() 22 | 23 | // console.log(myArr); 24 | // console.log( newArr); 25 | 26 | 27 | // slice, splice 28 | 29 | console.log("A ", myArr); 30 | 31 | const myn1 = myArr.slice(1, 3) 32 | 33 | console.log(myn1); 34 | console.log("B ", myArr); 35 | 36 | 37 | const myn2 = myArr.splice(1, 3) 38 | console.log("C ", myArr); 39 | console.log(myn2); 40 | -------------------------------------------------------------------------------- /01_basics/datatypes-summary.js: -------------------------------------------------------------------------------- 1 | // Primitive 2 | 3 | // 7 types : String, Number, Boolearn, null, undefined, Symbol, BigInt 4 | 5 | const score = 100 6 | const scoreValue = 100.3 7 | 8 | const isLoggedIn = false 9 | const outsideTemp = null 10 | let userEmail; 11 | 12 | const id = Symbol('123') 13 | const anotherId = Symbol('123') 14 | 15 | console.log(id === anotherId); 16 | 17 | // const bigNumber = 3456543576654356754n 18 | 19 | 20 | 21 | // Reference (Non primitive) 22 | 23 | // Array, Objects, Functions 24 | 25 | const heros = ["shaktiman", "naagraj", "doga"]; 26 | let myObj = { 27 | name: "hitesh", 28 | age: 22, 29 | } 30 | 31 | const myFunction = function(){ 32 | console.log("Hello world"); 33 | } 34 | 35 | console.log(typeof anotherId); 36 | 37 | // https://262.ecma-international.org/5.1/#sec-11.4.3 -------------------------------------------------------------------------------- /05_iterations/nine.js: -------------------------------------------------------------------------------- 1 | const myNums = [1, 2, 3] 2 | 3 | // const myTotal = myNums.reduce(function (acc, currval) { 4 | // console.log(`acc: ${acc} and currval: ${currval}`); 5 | // return acc + currval 6 | // }, 0) 7 | 8 | const myTotal = myNums.reduce( (acc, curr) => acc+curr, 0) 9 | 10 | console.log(myTotal); 11 | 12 | 13 | const shoppingCart = [ 14 | { 15 | itemName: "js course", 16 | price: 2999 17 | }, 18 | { 19 | itemName: "py course", 20 | price: 999 21 | }, 22 | { 23 | itemName: "mobile dev course", 24 | price: 5999 25 | }, 26 | { 27 | itemName: "data science course", 28 | price: 12999 29 | }, 30 | ] 31 | 32 | const priceToPay = shoppingCart.reduce((acc, item) => acc + item.price, 0) 33 | 34 | console.log(priceToPay); -------------------------------------------------------------------------------- /05_iterations/three.js: -------------------------------------------------------------------------------- 1 | // for of 2 | 3 | // ["", "", ""] 4 | // [{}, {}, {}] 5 | 6 | const arr = [1, 2, 3, 4, 5] 7 | 8 | for (const num of arr) { 9 | //console.log(num); 10 | } 11 | 12 | const greetings = "Hello world!" 13 | for (const greet of greetings) { 14 | //console.log(`Each char is ${greet}`) 15 | } 16 | 17 | // Maps 18 | 19 | const map = new Map() 20 | map.set('IN', "India") 21 | map.set('USA', "United States of America") 22 | map.set('Fr', "France") 23 | map.set('IN', "India") 24 | 25 | 26 | // console.log(map); 27 | 28 | for (const [key, value] of map) { 29 | // console.log(key, ':-', value); 30 | } 31 | 32 | const myObject = { 33 | game1: 'NFS', 34 | game2: 'Spiderman' 35 | } 36 | 37 | // for (const [key, value] of myObject) { 38 | // console.log(key, ':-', value); 39 | 40 | // } -------------------------------------------------------------------------------- /10_classes_and_oop/mathpi.js: -------------------------------------------------------------------------------- 1 | const descripter = Object.getOwnPropertyDescriptor(Math, "PI") 2 | 3 | // console.log(descripter); 4 | 5 | // console.log(Math.PI); 6 | // Math.PI = 5 7 | // console.log(Math.PI); 8 | 9 | const chai = { 10 | name: 'ginger chai', 11 | price: 250, 12 | isAvailable: true, 13 | 14 | orderChai: function(){ 15 | console.log("chai nhi bni"); 16 | } 17 | } 18 | 19 | console.log(Object.getOwnPropertyDescriptor(chai, "name")); 20 | 21 | Object.defineProperty(chai, 'name', { 22 | //writable: false, 23 | enumerable: true, 24 | 25 | }) 26 | 27 | console.log(Object.getOwnPropertyDescriptor(chai, "name")); 28 | 29 | for (let [key, value] of Object.entries(chai)) { 30 | if (typeof value !== 'function') { 31 | 32 | console.log(`${key} : ${value}`); 33 | } 34 | } -------------------------------------------------------------------------------- /10_classes_and_oop/bind.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | React 7 | 8 | 9 | 10 | 11 | 31 | -------------------------------------------------------------------------------- /05_iterations/five.js: -------------------------------------------------------------------------------- 1 | const coding = ["js", "ruby", "java", "python", "cpp"] 2 | 3 | // coding.forEach( function (val){ 4 | // console.log(val); 5 | // } ) 6 | 7 | // coding.forEach( (item) => { 8 | // console.log(item); 9 | // } ) 10 | 11 | // function printMe(item){ 12 | // console.log(item); 13 | // } 14 | 15 | // coding.forEach(printMe) 16 | 17 | // coding.forEach( (item, index, arr)=> { 18 | // console.log(item, index, arr); 19 | // } ) 20 | 21 | const myCoding = [ 22 | { 23 | languageName: "javascript", 24 | languageFileName: "js" 25 | }, 26 | { 27 | languageName: "java", 28 | languageFileName: "java" 29 | }, 30 | { 31 | languageName: "python", 32 | languageFileName: "py" 33 | }, 34 | ] 35 | 36 | myCoding.forEach( (item) => { 37 | 38 | console.log(item.languageName); 39 | } ) -------------------------------------------------------------------------------- /06_dom/three.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chai aur code 8 | 9 | 10 | 11 | 12 | 26 | -------------------------------------------------------------------------------- /02_basics/02_array.js: -------------------------------------------------------------------------------- 1 | const marvel_heros = ["thor", "Ironman", "spiderman"] 2 | const dc_heros = ["superman", "flash", "batman"] 3 | 4 | // marvel_heros.push(dc_heros) 5 | 6 | // console.log(marvel_heros); 7 | // console.log(marvel_heros[3][1]); 8 | 9 | // const allHeros = marvel_heros.concat(dc_heros) 10 | // console.log(allHeros); 11 | 12 | const all_new_heros = [...marvel_heros, ...dc_heros] 13 | 14 | // console.log(all_new_heros); 15 | 16 | const another_array = [1, 2, 3, [4, 5, 6], 7, [6, 7, [4, 5]]] 17 | 18 | const real_another_array = another_array.flat(Infinity) 19 | console.log(real_another_array); 20 | 21 | 22 | 23 | console.log(Array.isArray("Hitesh")) 24 | console.log(Array.from("Hitesh")) 25 | console.log(Array.from({name: "hitesh"})) // interesting 26 | 27 | let score1 = 100 28 | let score2 = 200 29 | let score3 = 300 30 | 31 | console.log(Array.of(score1, score2, score3)); -------------------------------------------------------------------------------- /10_classes_and_oop/oop.js: -------------------------------------------------------------------------------- 1 | const user = { 2 | username: "hitesh", 3 | loginCount: 8, 4 | signedIn: true, 5 | 6 | getUserDetails: function(){ 7 | //console.log("Got user details from database"); 8 | // console.log(`Username: ${this.username}`); 9 | console.log(this); 10 | } 11 | 12 | } 13 | 14 | 15 | 16 | //console.log(user.username) 17 | //console.log(user.getUserDetails()); 18 | // console.log(this); 19 | 20 | 21 | function User(username, loginCount, isLoggedIn){ 22 | this.username = username; 23 | this.loginCount = loginCount; 24 | this.isLoggedIn = isLoggedIn 25 | 26 | this.greeting = function(){ 27 | console.log(`Welcome ${this.username}`); 28 | 29 | } 30 | 31 | return this 32 | } 33 | 34 | const userOne = new User("hitesh", 12, true) 35 | const userTwo = new User("ChaiAurCode", 11, false) 36 | console.log(userOne.constructor); 37 | //console.log(userTwo); -------------------------------------------------------------------------------- /01_basics/07_datesinJs.js: -------------------------------------------------------------------------------- 1 | // Dates 2 | 3 | let myDate = new Date() 4 | // console.log(myDate.toString()); 5 | // console.log(myDate.toDateString()); 6 | // console.log(myDate.toLocaleString()); 7 | // console.log(typeof myDate); 8 | 9 | // let myCreatedDate = new Date(2023, 0, 23) 10 | // let myCreatedDate = new Date(2023, 0, 23, 5, 3) 11 | // let myCreatedDate = new Date("2023-01-14") 12 | let myCreatedDate = new Date("01-14-2023") 13 | // console.log(myCreatedDate.toLocaleString()); 14 | 15 | let myTimeStamp = Date.now() 16 | 17 | // console.log(myTimeStamp); 18 | // console.log(myCreatedDate.getTime()); 19 | // console.log(Math.floor(Date.now()/1000)); 20 | 21 | let newDate = new Date() 22 | console.log(newDate); 23 | console.log(newDate.getMonth() + 1); 24 | console.log(newDate.getDay()); 25 | 26 | // `${newDate.getDay()} and the time ` 27 | 28 | newDate.toLocaleString('default', { 29 | weekday: "long", 30 | 31 | }) 32 | 33 | -------------------------------------------------------------------------------- /02_basics/03_objects.js: -------------------------------------------------------------------------------- 1 | // singleton 2 | // Object.create 3 | 4 | // object literals 5 | 6 | const mySym = Symbol("key1") 7 | 8 | 9 | const JsUser = { 10 | name: "Hitesh", 11 | "full name": "Hitesh Choudhary", 12 | [mySym]: "mykey1", 13 | age: 18, 14 | location: "Jaipur", 15 | email: "hitesh@google.com", 16 | isLoggedIn: false, 17 | lastLoginDays: ["Monday", "Saturday"] 18 | } 19 | 20 | // console.log(JsUser.email) 21 | // console.log(JsUser["email"]) 22 | // console.log(JsUser["full name"]) 23 | // console.log(JsUser[mySym]) 24 | 25 | JsUser.email = "hitesh@chatgpt.com" 26 | // Object.freeze(JsUser) 27 | JsUser.email = "hitesh@microsoft.com" 28 | // console.log(JsUser); 29 | 30 | JsUser.greeting = function(){ 31 | console.log("Hello JS user"); 32 | } 33 | JsUser.greetingTwo = function(){ 34 | console.log(`Hello JS user, ${this.name}`); 35 | } 36 | 37 | console.log(JsUser.greeting()); 38 | console.log(JsUser.greetingTwo()); -------------------------------------------------------------------------------- /06_dom/one.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | DOM learning 7 | 13 | 14 | 15 |
16 |

DOM learning on Chai aur code test text

17 |

Lorem ipsum dolor sit.

18 |

Lorem ipsum dolor sit.

19 |

Lorem ipsum dolor sit.

20 |

Lorem ipsum dolor sit amet.

21 | 22 | 23 | 29 |
30 | 31 | -------------------------------------------------------------------------------- /04_control_flow/truthy.js: -------------------------------------------------------------------------------- 1 | const userEmail = [] 2 | 3 | if (userEmail) { 4 | console.log("Got user email"); 5 | } else { 6 | console.log("Don't have user email"); 7 | } 8 | 9 | // falsy values 10 | 11 | // false, 0, -0, BigInt 0n, "", null, undefined, NaN 12 | 13 | //truthy values 14 | // "0", 'false', " ", [], {}, function(){} 15 | 16 | // if (userEmail.length === 0) { 17 | // console.log("Array is empty"); 18 | // } 19 | 20 | const emptyObj = {} 21 | 22 | if (Object.keys(emptyObj).length === 0) { 23 | console.log("Object is empty"); 24 | } 25 | 26 | // Nullish Coalescing Operator (??): null undefined 27 | 28 | let val1; 29 | // val1 = 5 ?? 10 30 | // val1 = null ?? 10 31 | // val1 = undefined ?? 15 32 | val1 = null ?? 10 ?? 20 33 | 34 | 35 | 36 | console.log(val1); 37 | 38 | // Terniary Operator 39 | 40 | // condition ? true : false 41 | 42 | const iceTeaPrice = 100 43 | iceTeaPrice <= 80 ? console.log("less than 80") : console.log("more than 80") -------------------------------------------------------------------------------- /01_basics/06_nums_and_math.js: -------------------------------------------------------------------------------- 1 | const score = 400 2 | // console.log(score); 3 | 4 | const balance = new Number(100) 5 | // console.log(balance); 6 | 7 | // console.log(balance.toString().length); 8 | // console.log(balance.toFixed(1)); 9 | 10 | const otherNumber = 123.8966 11 | 12 | // console.log(otherNumber.toPrecision(4)); 13 | 14 | const hundreds = 1000000 15 | // console.log(hundreds.toLocaleString('en-IN')); 16 | 17 | // +++++++++++++ Maths +++++++++++++++++++++++++++++ 18 | 19 | // console.log(Math); 20 | // console.log(Math.abs(-4)); 21 | // console.log(Math.round(4.6)); 22 | // console.log(Math.ceil(4.2)); 23 | // console.log(Math.floor(4.9)); 24 | // console.log(Math.min(4, 3, 6, 8)); 25 | // console.log(Math.max(4, 3, 6, 8)); 26 | 27 | console.log(Math.random()); 28 | console.log((Math.random()*10) + 1); 29 | console.log(Math.floor(Math.random()*10) + 1); 30 | 31 | const min = 10 32 | const max = 20 33 | 34 | console.log(Math.floor(Math.random() * (max - min + 1)) + min) -------------------------------------------------------------------------------- /01_basics/05_strings.js: -------------------------------------------------------------------------------- 1 | const name = "hitesh" 2 | const repoCount = 50 3 | 4 | // console.log(name + repoCount + " Value"); 5 | 6 | console.log(`Hello my name is ${name} and my repo count is ${repoCount}`); 7 | 8 | const gameName = new String('hitesh-hc-com') 9 | 10 | // console.log(gameName[0]); 11 | // console.log(gameName.__proto__); 12 | 13 | 14 | // console.log(gameName.length); 15 | // console.log(gameName.toUpperCase()); 16 | console.log(gameName.charAt(2)); 17 | console.log(gameName.indexOf('t')); 18 | 19 | const newString = gameName.substring(0, 4) 20 | console.log(newString); 21 | 22 | const anotherString = gameName.slice(-8, 4) 23 | console.log(anotherString); 24 | 25 | const newStringOne = " hitesh " 26 | console.log(newStringOne); 27 | console.log(newStringOne.trim()); 28 | 29 | const url = "https://hitesh.com/hitesh%20choudhary" 30 | 31 | console.log(url.replace('%20', '-')) 32 | 33 | console.log(url.includes('sundar')) 34 | 35 | console.log(gameName.split('-')); -------------------------------------------------------------------------------- /03_basics/02_scopes.js: -------------------------------------------------------------------------------- 1 | //var c = 300 2 | let a = 300 3 | if (true) { 4 | let a = 10 5 | const b = 20 6 | // console.log("INNER: ", a); 7 | 8 | } 9 | 10 | 11 | 12 | // console.log(a); 13 | // console.log(b); 14 | // console.log(c); 15 | 16 | 17 | function one(){ 18 | const username = "hitesh" 19 | 20 | function two(){ 21 | const website = "youtube" 22 | console.log(username); 23 | } 24 | // console.log(website); 25 | 26 | two() 27 | 28 | } 29 | 30 | // one() 31 | 32 | if (true) { 33 | const username = "hitesh" 34 | if (username === "hitesh") { 35 | const website = " youtube" 36 | // console.log(username + website); 37 | } 38 | // console.log(website); 39 | } 40 | 41 | // console.log(username); 42 | 43 | 44 | // ++++++++++++++++++ interesting ++++++++++++++++++ 45 | 46 | 47 | console.log(addone(5)) 48 | 49 | function addone(num){ 50 | return num + 1 51 | } 52 | 53 | 54 | 55 | addTwo(5) 56 | const addTwo = function(num){ 57 | return num + 2 58 | } 59 | -------------------------------------------------------------------------------- /09_advance_one/ApiRequest.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 0 UNSENT Client has been created. open() not called yet. 10 | 1 OPENED open() has been called. 11 | 2 HEADERS_RECEIVED send() has been called, and headers and status are available. 12 | 3 LOADING Downloading; responseText holds partial data. 13 | 4 DONE The operation is complete. 14 | 15 | 29 | -------------------------------------------------------------------------------- /10_classes_and_oop/myClasses.js: -------------------------------------------------------------------------------- 1 | // ES6 2 | 3 | class User { 4 | constructor(username, email, password){ 5 | this.username = username; 6 | this.email = email; 7 | this.password = password 8 | } 9 | 10 | encryptPassword(){ 11 | return `${this.password}abc` 12 | } 13 | changeUsername(){ 14 | return `${this.username.toUpperCase()}` 15 | } 16 | 17 | } 18 | 19 | const chai = new User("chai", "chai@gmail.com", "123") 20 | 21 | console.log(chai.encryptPassword()); 22 | console.log(chai.changeUsername()); 23 | 24 | // behind the scene 25 | 26 | function User(username, email, password){ 27 | this.username = username; 28 | this.email = email; 29 | this.password = password 30 | } 31 | 32 | User.prototype.encryptPassword = function(){ 33 | return `${this.password}abc` 34 | } 35 | User.prototype.changeUsername = function(){ 36 | return `${this.username.toUpperCase()}` 37 | } 38 | 39 | 40 | const tea = new User("tea", "tea@gmail.com", "123") 41 | 42 | console.log(tea.encryptPassword()); 43 | console.log(tea.changeUsername()); -------------------------------------------------------------------------------- /03_basics/03_arrow.js: -------------------------------------------------------------------------------- 1 | const user = { 2 | username: "hitesh", 3 | price: 999, 4 | 5 | welcomeMessage: function() { 6 | console.log(`${this.username} , welcome to website`); 7 | console.log(this); 8 | } 9 | 10 | } 11 | 12 | // user.welcomeMessage() 13 | // user.username = "sam" 14 | // user.welcomeMessage() 15 | 16 | // console.log(this); 17 | 18 | // function chai(){ 19 | // let username = "hitesh" 20 | // console.log(this.username); 21 | // } 22 | 23 | // chai() 24 | 25 | // const chai = function () { 26 | // let username = "hitesh" 27 | // console.log(this.username); 28 | // } 29 | 30 | const chai = () => { 31 | let username = "hitesh" 32 | console.log(this); 33 | } 34 | 35 | 36 | // chai() 37 | 38 | // const addTwo = (num1, num2) => { 39 | // return num1 + num2 40 | // } 41 | 42 | // const addTwo = (num1, num2) => num1 + num2 43 | 44 | // const addTwo = (num1, num2) => ( num1 + num2 ) 45 | 46 | const addTwo = (num1, num2) => ({username: "hitesh"}) 47 | 48 | 49 | console.log(addTwo(3, 4)) 50 | 51 | 52 | // const myArray = [2, 5, 3, 7, 8] 53 | 54 | // myArray.forEach() -------------------------------------------------------------------------------- /05_iterations/one.js: -------------------------------------------------------------------------------- 1 | // for 2 | 3 | for (let i = 0; i <= 10; i++) { 4 | const element = i; 5 | if (element == 5) { 6 | //console.log("5 is best number"); 7 | } 8 | //console.log(element); 9 | 10 | } 11 | 12 | // console.log(element); 13 | 14 | for (let i = 1; i <= 10; i++) { 15 | //console.log(`Outer loop value: ${i}`); 16 | for (let j = 1; j <= 10; j++) { 17 | //console.log(`Inner loop value ${j} and inner loop ${i}`); 18 | //console.log(i + '*' + j + ' = ' + i*j ); 19 | } 20 | 21 | } 22 | let myArray = ["flash", "batman", "superman"] 23 | //console.log(myArray.length); 24 | for (let index = 0; index < myArray.length; index++) { 25 | const element = myArray[index]; 26 | //console.log(element); 27 | 28 | } 29 | 30 | 31 | // break and continue 32 | 33 | // for (let index = 1; index <= 20; index++) { 34 | // if (index == 5) { 35 | // console.log(`Detected 5`); 36 | // break 37 | // } 38 | // console.log(`Value of i is ${index}`); 39 | 40 | // } 41 | 42 | for (let index = 1; index <= 20; index++) { 43 | if (index == 5) { 44 | console.log(`Detected 5`); 45 | continue 46 | } 47 | console.log(`Value of i is ${index}`); 48 | 49 | } -------------------------------------------------------------------------------- /04_control_flow/one.js: -------------------------------------------------------------------------------- 1 | // if 2 | const isUserloggedIn = true 3 | const temperature = 41 4 | 5 | // if ( temperature === 40 ){ 6 | // console.log("less than 50"); 7 | // } else { 8 | // console.log("temperature is greater than 50"); 9 | // } 10 | 11 | // console.log("Execute"); 12 | // <, >, <=, >=, ==, !=, ===, !== 13 | 14 | // const score = 200 15 | 16 | // if (score > 100) { 17 | // let power = "fly" 18 | // console.log(`User power: ${power}`); 19 | // } 20 | 21 | // console.log(`User power: ${power}`); 22 | 23 | 24 | // const balance = 1000 25 | 26 | // if (balance > 500) console.log("test"),console.log("test2"); 27 | 28 | // if (balance < 500) { 29 | // console.log("less than 500"); 30 | // } else if (balance < 750) { 31 | // console.log("less than 750"); 32 | 33 | // } else if (balance < 900) { 34 | // console.log("less than 750"); 35 | 36 | // } else { 37 | // console.log("less than 1200"); 38 | 39 | // } 40 | 41 | const userLoggedIn = true 42 | const debitCard = true 43 | const loggedInFromGoogle = false 44 | const loggedInFromEmail = true 45 | 46 | if (userLoggedIn && debitCard && 2==3) { 47 | console.log("Allow to buy course"); 48 | } 49 | 50 | if (loggedInFromGoogle || loggedInFromEmail) { 51 | console.log("User logged in"); 52 | } -------------------------------------------------------------------------------- /.devcontainer/devcontainer.json: -------------------------------------------------------------------------------- 1 | // For format details, see https://aka.ms/devcontainer.json. For config options, see the 2 | // README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node 3 | { 4 | "name": "Node.js", 5 | // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile 6 | "image": "mcr.microsoft.com/devcontainers/javascript-node:0-18", 7 | 8 | // Features to add to the dev container. More info: https://containers.dev/features. 9 | // "features": {}, 10 | 11 | // Use 'forwardPorts' to make a list of ports inside the container available locally. 12 | // "forwardPorts": [], 13 | 14 | // Use 'postCreateCommand' to run commands after the container is created. 15 | // "postCreateCommand": "yarn install", 16 | 17 | // Configure tool-specific properties. 18 | "customizations": { 19 | "vscode": { 20 | "extensions": [ 21 | "esbenp.prettier-vscode", 22 | "vscode-icons-team.vscode-icons", 23 | "wayou.vscode-todo-highlight" 24 | ], 25 | "settings": { 26 | "editor.fontSize": 32, 27 | "terminal.integrated.fontSize": 24, 28 | "editor.wordWrap": "on" 29 | } 30 | 31 | } 32 | 33 | } 34 | 35 | // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root. 36 | // "remoteUser": "root" 37 | } 38 | -------------------------------------------------------------------------------- /06_dom/two.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | DOM | Chai aur code 8 | 9 | 10 |
11 | 12 |
Monday
13 |
Tuesday
14 |
Wednesday
15 |
Thursday
16 |
17 | 18 | 39 | -------------------------------------------------------------------------------- /10_classes_and_oop/Prototype.js: -------------------------------------------------------------------------------- 1 | // let myName = "hitesh " 2 | // let mychannel = "chai " 3 | 4 | // console.log(myName.trueLength); 5 | 6 | 7 | let myHeros = ["thor", "spiderman"] 8 | 9 | 10 | let heroPower = { 11 | thor: "hammer", 12 | spiderman: "sling", 13 | 14 | getSpiderPower: function(){ 15 | console.log(`Spidy power is ${this.spiderman}`); 16 | } 17 | } 18 | 19 | Object.prototype.hitesh = function(){ 20 | console.log(`hitesh is present in all objects`); 21 | } 22 | 23 | Array.prototype.heyHitesh = function(){ 24 | console.log(`Hitesh says hello`); 25 | } 26 | 27 | // heroPower.hitesh() 28 | // myHeros.hitesh() 29 | // myHeros.heyHitesh() 30 | // heroPower.heyHitesh() 31 | 32 | // inheritance 33 | 34 | const User = { 35 | name: "chai", 36 | email: "chai@google.com" 37 | } 38 | 39 | const Teacher = { 40 | makeVideo: true 41 | } 42 | 43 | const TeachingSupport = { 44 | isAvailable: false 45 | } 46 | 47 | const TASupport = { 48 | makeAssignment: 'JS assignment', 49 | fullTime: true, 50 | __proto__: TeachingSupport 51 | } 52 | 53 | Teacher.__proto__ = User 54 | 55 | // modern syntax 56 | Object.setPrototypeOf(TeachingSupport, Teacher) 57 | 58 | let anotherUsername = "ChaiAurCode " 59 | 60 | String.prototype.trueLength = function(){ 61 | console.log(`${this}`); 62 | console.log(`True length is: ${this.trim().length}`); 63 | } 64 | 65 | anotherUsername.trueLength() 66 | "hitesh".trueLength() 67 | "iceTea".trueLength() -------------------------------------------------------------------------------- /10_classes_and_oop/Object.js: -------------------------------------------------------------------------------- 1 | function multipleBy5(num){ 2 | 3 | return num*5 4 | } 5 | 6 | multipleBy5.power = 2 7 | 8 | console.log(multipleBy5(5)); 9 | console.log(multipleBy5.power); 10 | console.log(multipleBy5.prototype); 11 | 12 | function createUser(username, score){ 13 | this.username = username 14 | this.score = score 15 | } 16 | 17 | createUser.prototype.increment = function(){ 18 | this.score++ 19 | } 20 | createUser.prototype.printMe = function(){ 21 | console.log(`price is ${this.score}`); 22 | } 23 | 24 | const chai = new createUser("chai", 25) 25 | const tea = createUser("tea", 250) 26 | 27 | chai.printMe() 28 | 29 | 30 | /* 31 | 32 | Here's what happens behind the scenes when the new keyword is used: 33 | 34 | A new object is created: The new keyword initiates the creation of a new JavaScript object. 35 | 36 | A prototype is linked: The newly created object gets linked to the prototype property of the constructor function. This means that it has access to properties and methods defined on the constructor's prototype. 37 | 38 | The constructor is called: The constructor function is called with the specified arguments and this is bound to the newly created object. If no explicit return value is specified from the constructor, JavaScript assumes this, the newly created object, to be the intended return value. 39 | 40 | The new object is returned: After the constructor function has been called, if it doesn't return a non-primitive value (object, array, function, etc.), the newly created object is returned. 41 | 42 | */ -------------------------------------------------------------------------------- /05_iterations/six.js: -------------------------------------------------------------------------------- 1 | // const coding = ["js", "ruby", "java", "python", "cpp"] 2 | 3 | 4 | // const values = coding.forEach( (item) => { 5 | // //console.log(item); 6 | // return item 7 | // } ) 8 | 9 | // console.log(values); 10 | 11 | const myNums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] 12 | 13 | // const newNums = myNums.filter( (num) => { 14 | // return num > 4 15 | // } ) 16 | 17 | // const newNums = [] 18 | 19 | // myNums.forEach( (num) => { 20 | // if (num > 4) { 21 | // newNums.push(num) 22 | // } 23 | // } ) 24 | 25 | // console.log(newNums); 26 | 27 | 28 | const books = [ 29 | { title: 'Book One', genre: 'Fiction', publish: 1981, edition: 2004 }, 30 | { title: 'Book Two', genre: 'Non-Fiction', publish: 1992, edition: 2008 }, 31 | { title: 'Book Three', genre: 'History', publish: 1999, edition: 2007 }, 32 | { title: 'Book Four', genre: 'Non-Fiction', publish: 1989, edition: 2010 }, 33 | { title: 'Book Five', genre: 'Science', publish: 2009, edition: 2014 }, 34 | { title: 'Book Six', genre: 'Fiction', publish: 1987, edition: 2010 }, 35 | { title: 'Book Seven', genre: 'History', publish: 1986, edition: 1996 }, 36 | { title: 'Book Eight', genre: 'Science', publish: 2011, edition: 2016 }, 37 | { title: 'Book Nine', genre: 'Non-Fiction', publish: 1981, edition: 1989 }, 38 | ]; 39 | 40 | let userBooks = books.filter( (bk) => bk.genre === 'History') 41 | 42 | userBooks = books.filter( (bk) => { 43 | return bk.publish >= 1995 && bk.genre === "History" 44 | }) 45 | console.log(userBooks); -------------------------------------------------------------------------------- /06_dom/four.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Chai aur code | DOM 8 | 9 | 10 | 13 | 14 | 48 | -------------------------------------------------------------------------------- /01_basics/03_conversionOperation.js: -------------------------------------------------------------------------------- 1 | let score = "hitesh" 2 | 3 | //console.log(typeof score); 4 | //console.log(typeof(score)); 5 | 6 | let valueInNumber = Number(score) 7 | //console.log(typeof valueInNumber); 8 | //console.log(valueInNumber); 9 | 10 | 11 | // "33" => 33 12 | // "33abc" => NaN 13 | // true => 1; false => 0 14 | 15 | let isLoggedIn = "hitesh" 16 | 17 | let booleanIsLoggedIn = Boolean(isLoggedIn) 18 | // console.log(booleanIsLoggedIn); 19 | 20 | // 1 => true; 0 => false 21 | // "" => false 22 | // "hitesh" => true 23 | 24 | let someNumber = 33 25 | 26 | let stringNumber = String(someNumber) 27 | // console.log(stringNumber); 28 | // console.log(typeof stringNumber); 29 | 30 | // *********************** Operations *********************** 31 | 32 | let value = 3 33 | let negValue = -value 34 | // console.log(negValue); 35 | 36 | // console.log(2+2); 37 | // console.log(2-2); 38 | // console.log(2*2); 39 | // console.log(2**3); 40 | // console.log(2/3); 41 | // console.log(2%3); 42 | 43 | let str1 = "hello" 44 | let str2 = " hitesh" 45 | 46 | let str3 = str1 + str2 47 | // console.log(str3); 48 | 49 | // console.log("1" + 2); 50 | // console.log(1 + "2"); 51 | // console.log("1" + 2 + 2); 52 | // console.log(1 + 2 + "2"); 53 | 54 | // console.log( (3 + 4) * 5 % 3); 55 | 56 | // console.log(+true); 57 | // console.log(+""); 58 | 59 | let num1, num2, num3 60 | 61 | num1 = num2 = num3 = 2 + 2 62 | 63 | let gameCounter = 100 64 | ++gameCounter; 65 | console.log(gameCounter); 66 | 67 | // link to study 68 | // https://tc39.es/ecma262/multipage/abstract-operations.html#sec-type-conversion -------------------------------------------------------------------------------- /03_basics/01_functions.js: -------------------------------------------------------------------------------- 1 | 2 | function sayMyName(){ 3 | console.log("H"); 4 | console.log("I"); 5 | console.log("T"); 6 | console.log("E"); 7 | console.log("S"); 8 | console.log("H"); 9 | } 10 | 11 | // sayMyName() 12 | 13 | // function addTwoNumbers(number1, number2){ 14 | 15 | // console.log(number1 + number2); 16 | // } 17 | 18 | function addTwoNumbers(number1, number2){ 19 | 20 | // let result = number1 + number2 21 | // return result 22 | return number1 + number2 23 | } 24 | 25 | const result = addTwoNumbers(3, 5) 26 | 27 | // console.log("Result: ", result); 28 | 29 | 30 | function loginUserMessage(username = "sam"){ 31 | if(!username){ 32 | console.log("PLease enter a username"); 33 | return 34 | } 35 | return `${username} just logged in` 36 | } 37 | 38 | // console.log(loginUserMessage("hitesh")) 39 | // console.log(loginUserMessage("hitesh")) 40 | 41 | 42 | function calculateCartPrice(val1, val2, ...num1){ 43 | return num1 44 | } 45 | 46 | // console.log(calculateCartPrice(200, 400, 500, 2000)) 47 | 48 | const user = { 49 | username: "hitesh", 50 | prices: 199 51 | } 52 | 53 | function handleObject(anyobject){ 54 | console.log(`Username is ${anyobject.username} and price is ${anyobject.price}`); 55 | } 56 | 57 | // handleObject(user) 58 | handleObject({ 59 | username: "sam", 60 | price: 399 61 | }) 62 | 63 | const myNewArray = [200, 400, 100, 600] 64 | 65 | function returnSecondValue(getArray){ 66 | return getArray[1] 67 | } 68 | 69 | // console.log(returnSecondValue(myNewArray)); 70 | console.log(returnSecondValue([200, 400, 500, 1000])); -------------------------------------------------------------------------------- /02_basics/04_objects.js: -------------------------------------------------------------------------------- 1 | // const tinderUser = new Object() 2 | const tinderUser = {} 3 | 4 | tinderUser.id = "123abc" 5 | tinderUser.name = "Sammy" 6 | tinderUser.isLoggedIn = false 7 | 8 | // console.log(tinderUser); 9 | 10 | const regularUser = { 11 | email: "some@gmail.com", 12 | fullname: { 13 | userfullname: { 14 | firstname: "hitesh", 15 | lastname: "choudhary" 16 | } 17 | } 18 | } 19 | 20 | // console.log(regularUser.fullname.userfullname.firstname); 21 | 22 | const obj1 = {1: "a", 2: "b"} 23 | const obj2 = {3: "a", 4: "b"} 24 | const obj4 = {5: "a", 6: "b"} 25 | 26 | // const obj3 = { obj1, obj2 } 27 | // const obj3 = Object.assign({}, obj1, obj2, obj4) 28 | 29 | const obj3 = {...obj1, ...obj2} 30 | // console.log(obj3); 31 | 32 | 33 | const users = [ 34 | { 35 | id: 1, 36 | email: "h@gmail.com" 37 | }, 38 | { 39 | id: 1, 40 | email: "h@gmail.com" 41 | }, 42 | { 43 | id: 1, 44 | email: "h@gmail.com" 45 | }, 46 | ] 47 | 48 | users[1].email 49 | // console.log(tinderUser); 50 | 51 | // console.log(Object.keys(tinderUser)); 52 | // console.log(Object.values(tinderUser)); 53 | // console.log(Object.entries(tinderUser)); 54 | 55 | // console.log(tinderUser.hasOwnProperty('isLoggedIn')); 56 | 57 | 58 | const course = { 59 | coursename: "js in hindi", 60 | price: "999", 61 | courseInstructor: "hitesh" 62 | } 63 | 64 | // course.courseInstructor 65 | 66 | const {courseInstructor: instructor} = course 67 | 68 | // console.log(courseInstructor); 69 | console.log(instructor); 70 | 71 | // { 72 | // "name": "hitesh", 73 | // "coursename": "js in hindi", 74 | // "price": "free" 75 | // } 76 | 77 | [ 78 | {}, 79 | {}, 80 | {} 81 | ] 82 | 83 | -------------------------------------------------------------------------------- /11_fun_with_js/closure.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Closure aur chai 7 | 8 | 9 | 10 | 11 | 12 | 13 | 54 | 74 | -------------------------------------------------------------------------------- /08_events/one.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | htnml Events 7 | 8 | 9 |

Amazing image

10 |
11 | 19 |
20 | 21 | 63 | -------------------------------------------------------------------------------- /09_advance_one/promises.js: -------------------------------------------------------------------------------- 1 | const promiseOne = new Promise(function(resolve, reject){ 2 | //Do an async task 3 | // DB calls, cryptography, network 4 | setTimeout(function(){ 5 | console.log('Async task is compelete'); 6 | resolve() 7 | }, 1000) 8 | }) 9 | 10 | promiseOne.then(function(){ 11 | console.log("Promise consumed"); 12 | }) 13 | 14 | new Promise(function(resolve, reject){ 15 | setTimeout(function(){ 16 | console.log("Async task 2"); 17 | resolve() 18 | }, 1000) 19 | 20 | }).then(function(){ 21 | console.log("Async 2 resolved"); 22 | }) 23 | 24 | const promiseThree = new Promise(function(resolve, reject){ 25 | setTimeout(function(){ 26 | resolve({username: "Chai", email: "chai@example.com"}) 27 | }, 1000) 28 | }) 29 | 30 | promiseThree.then(function(user){ 31 | console.log(user); 32 | }) 33 | 34 | const promiseFour = new Promise(function(resolve, reject){ 35 | setTimeout(function(){ 36 | let error = true 37 | if (!error) { 38 | resolve({username: "hitesh", password: "123"}) 39 | } else { 40 | reject('ERROR: Something went wrong') 41 | } 42 | }, 1000) 43 | }) 44 | 45 | promiseFour 46 | .then((user) => { 47 | console.log(user); 48 | return user.username 49 | }).then((username) => { 50 | console.log(username); 51 | }).catch(function(error){ 52 | console.log(error); 53 | }).finally(() => console.log("The promise is either resolved or rejected")) 54 | 55 | 56 | 57 | const promiseFive = new Promise(function(resolve, reject){ 58 | setTimeout(function(){ 59 | let error = true 60 | if (!error) { 61 | resolve({username: "javascript", password: "123"}) 62 | } else { 63 | reject('ERROR: JS went wrong') 64 | } 65 | }, 1000) 66 | }); 67 | 68 | async function consumePromiseFive(){ 69 | try { 70 | const response = await promiseFive 71 | console.log(response); 72 | } catch (error) { 73 | console.log(error); 74 | } 75 | } 76 | 77 | consumePromiseFive() 78 | 79 | // async function getAllUsers(){ 80 | // try { 81 | // const response = await fetch('https://jsonplaceholder.typicode.com/users') 82 | 83 | // const data = await response.json() 84 | // console.log(data); 85 | // } catch (error) { 86 | // console.log("E: ", error); 87 | // } 88 | // } 89 | 90 | //getAllUsers() 91 | 92 | fetch('https://api.github.com/users/hiteshchoudhary') 93 | .then((response) => { 94 | return response.json() 95 | }) 96 | .then((data) => { 97 | console.log(data); 98 | }) 99 | .catch((error) => console.log(error)) 100 | 101 | // promise.all 102 | // yes this is also available, kuch reading aap b kro. -------------------------------------------------------------------------------- /07_projects/projectsset1.md: -------------------------------------------------------------------------------- 1 | # Projects related to DOM 2 | 3 | ## project link 4 | [Click here](https://stackblitz.com/edit/dom-project-chaiaurcode?file=index.html) 5 | 6 | # Solution code 7 | 8 | ## project 1 9 | 10 | ```javascript 11 | console.log("hitesh") 12 | const buttons = document.querySelectorAll('.button'); 13 | const body = document.querySelector('body'); 14 | 15 | buttons.forEach(function (button) { 16 | console.log(button); 17 | button.addEventListener('click', function (e) { 18 | console.log(e); 19 | console.log(e.target); 20 | if (e.target.id === 'grey') { 21 | body.style.backgroundColor = e.target.id; 22 | } 23 | if (e.target.id === 'white') { 24 | body.style.backgroundColor = e.target.id; 25 | } 26 | if (e.target.id === 'blue') { 27 | body.style.backgroundColor = e.target.id; 28 | } 29 | if (e.target.id === 'yellow') { 30 | body.style.backgroundColor = e.target.id; 31 | } 32 | 33 | }); 34 | }); 35 | 36 | 37 | ``` 38 | 39 | ## project 2 solution 40 | 41 | ```javascript 42 | const form = document.querySelector('form'); 43 | // this usecase will give you empty 44 | // const height = parseInt(document.querySelector('#height').value) 45 | 46 | form.addEventListener('submit', function (e) { 47 | e.preventDefault(); 48 | 49 | const height = parseInt(document.querySelector('#height').value); 50 | const weight = parseInt(document.querySelector('#weight').value); 51 | const results = document.querySelector('#results'); 52 | 53 | if (height === '' || height < 0 || isNaN(height)) { 54 | results.innerHTML = `Please give a valid height ${height}`; 55 | } else if (weight === '' || weight < 0 || isNaN(weight)) { 56 | results.innerHTML = `Please give a valid weight ${weight}`; 57 | } else { 58 | const bmi = (weight / ((height * height) / 10000)).toFixed(2); 59 | //show the result 60 | results.innerHTML = `${bmi}`; 61 | } 62 | }); 63 | 64 | 65 | ``` 66 | 67 | ## project 3 solution code 68 | 69 | ```javascript 70 | const clock = document.getElementById('clock'); 71 | // const clock = document.querySelector('#clock') 72 | 73 | setInterval(function () { 74 | let date = new Date(); 75 | // console.log(date.toLocaleTimeString()); 76 | clock.innerHTML = date.toLocaleTimeString(); 77 | }, 1000); 78 | 79 | 80 | ``` 81 | 82 | ## project 4 solution 83 | 84 | 85 | ```javascript 86 | 87 | let randomNumber = parseInt(Math.random() * 100 + 1); 88 | 89 | const submit = document.querySelector('#subt'); 90 | const userInput = document.querySelector('#guessField'); 91 | const guessSlot = document.querySelector('.guesses'); 92 | const remaining = document.querySelector('.lastResult'); 93 | const lowOrHi = document.querySelector('.lowOrHi'); 94 | const startOver = document.querySelector('.resultParas'); 95 | 96 | const p = document.createElement('p'); 97 | 98 | let prevGuess = []; 99 | let numGuess = 1; 100 | 101 | let playGame = true; 102 | 103 | if (playGame) { 104 | submit.addEventListener('click', function (e) { 105 | e.preventDefault(); 106 | const guess = parseInt(userInput.value); 107 | console.log(guess); 108 | validateGuess(guess); 109 | }); 110 | } 111 | 112 | function validateGuess(guess) { 113 | if (isNaN(guess)) { 114 | alert('PLease enter a valid number'); 115 | } else if (guess < 1) { 116 | alert('PLease enter a number more than 1'); 117 | } else if (guess > 100) { 118 | alert('PLease enter a number less than 100'); 119 | } else { 120 | prevGuess.push(guess); 121 | if (numGuess === 11) { 122 | displayGuess(guess); 123 | displayMessage(`Game Over. Random number was ${randomNumber}`); 124 | endGame(); 125 | } else { 126 | displayGuess(guess); 127 | checkGuess(guess); 128 | } 129 | } 130 | } 131 | 132 | function checkGuess(guess) { 133 | if (guess === randomNumber) { 134 | displayMessage(`You guessed it right`); 135 | endGame(); 136 | } else if (guess < randomNumber) { 137 | displayMessage(`Number is TOOO low`); 138 | } else if (guess > randomNumber) { 139 | displayMessage(`Number is TOOO High`); 140 | } 141 | } 142 | 143 | function displayGuess(guess) { 144 | userInput.value = ''; 145 | guessSlot.innerHTML += `${guess}, `; 146 | numGuess++; 147 | remaining.innerHTML = `${11 - numGuess} `; 148 | } 149 | 150 | function displayMessage(message) { 151 | lowOrHi.innerHTML = `

${message}

`; 152 | } 153 | 154 | function endGame() { 155 | userInput.value = ''; 156 | userInput.setAttribute('disabled', ''); 157 | p.classList.add('button'); 158 | p.innerHTML = `

Start new Game

`; 159 | startOver.appendChild(p); 160 | playGame = false; 161 | newGame(); 162 | } 163 | 164 | function newGame() { 165 | const newGameButton = document.querySelector('#newGame'); 166 | newGameButton.addEventListener('click', function (e) { 167 | randomNumber = parseInt(Math.random() * 100 + 1); 168 | prevGuess = []; 169 | numGuess = 1; 170 | guessSlot.innerHTML = ''; 171 | remaining.innerHTML = `${11 - numGuess} `; 172 | userInput.removeAttribute('disabled'); 173 | startOver.removeChild(p); 174 | 175 | playGame = true; 176 | }); 177 | } 178 | 179 | 180 | ``` 181 | 182 | 183 | # Project 5 solution 184 | 185 | ```javascript 186 | const insert = document.getElementById('insert'); 187 | 188 | window.addEventListener('keydown', (e) => { 189 | insert.innerHTML = ` 190 |
191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 |
KeyKeycodeCode
${e.key === ' ' ? 'Space' : e.key}${e.keyCode}${e.code}
204 |
205 | `; 206 | }); 207 | 208 | 209 | ``` 210 | 211 | # Project 6 Solution 212 | 213 | ```javascript 214 | //generate a random color 215 | 216 | const randomColor = function () { 217 | const hex = '0123456789ABCDEF'; 218 | let color = '#'; 219 | for (let i = 0; i < 6; i++) { 220 | color += hex[Math.floor(Math.random() * 16)]; 221 | } 222 | return color; 223 | }; 224 | 225 | let intervalId; 226 | const startChangingColor = function () { 227 | if (!intervalId) { 228 | intervalId = setInterval(changeBgColor, 1000); 229 | } 230 | 231 | function changeBgColor() { 232 | document.body.style.backgroundColor = randomColor(); 233 | } 234 | }; 235 | const stopChangingColor = function () { 236 | clearInterval(intervalId); 237 | intervalId = null; 238 | }; 239 | 240 | document.querySelector('#start').addEventListener('click', startChangingColor); 241 | 242 | document.querySelector('#stop').addEventListener('click', stopChangingColor); 243 | 244 | 245 | ``` --------------------------------------------------------------------------------