├── .DS_Store ├── .gitignore ├── README.md ├── lec-10 └── fruit.html ├── lec-11 ├── cookMaggi.js ├── index.html └── makeSandwich.js ├── lec-14 └── stringExample-1.html ├── lec-15 └── stringExample-2.html ├── lec-19 ├── index.html └── object.js ├── lec-2 ├── demo.html ├── script.js └── style.css ├── lec-20 ├── builtin_objects.js └── index.html ├── lec-21 ├── index.html └── object_exercise.js ├── lec-22 ├── classes.js └── index.html ├── lec-23 ├── arrays.js └── index.html ├── lec-24 ├── arraysExercise.js └── index.html ├── lec-25 ├── codeExecution.js └── index.html ├── lec-26 ├── index.html └── scope.js ├── lec-27 ├── advanceVariable.js └── index.html ├── lec-28 ├── index.html └── whatIsThis.js ├── lec-29 ├── advanceFunction.js └── index.html ├── lec-30 ├── index.html └── practiceExercise.js ├── lec-31 ├── dom.html └── tasks │ ├── attributeManipulation.html │ ├── clearElement.html │ ├── coloredBox.html │ ├── countDecendent.html │ ├── creatingElements.html │ ├── findElements.html │ └── solution │ ├── attributeManipulation.html │ ├── clearElement.html │ ├── coloredBox.html │ ├── countDecendent.html │ ├── creatingElements.html │ └── findElements.html ├── lec-32 ├── .htaccess ├── courses.html ├── img │ ├── bulb-off.jpg │ └── bulb-on.jpg └── light.html ├── lec-5 ├── after.js ├── before.js ├── between.js ├── index.html └── style.css ├── lec-6 └── datatype.html ├── lec-7 └── index.html └── lec-9 └── greeting.html /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yashrajbothra/web-dev-js/eb73984e7b9cf0eec1648f5b56aa8050a329d642/.DS_Store -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .vscode/settings.json 2 | .DS_Store 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # web-dev-js 2 | -------------------------------------------------------------------------------- /lec-10/fruit.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Fal 9 | 10 | 11 | 12 |

Ajj Ham Kuch Falo k bare mai Janane wale

13 | 14 | 40 | 41 | -------------------------------------------------------------------------------- /lec-11/cookMaggi.js: -------------------------------------------------------------------------------- 1 | function cookMaggi(maggi, pani, tapeli) { 2 | console.log("Your maggie will be ready in " 3 | + maggi * 2 4 | + " minutes" 5 | + " and Ingredients used are:- " 6 | + maggi + " Maggi " 7 | + pani + " cups of water " 8 | + "using " + tapeli + " pan") 9 | } 10 | 11 | cookMaggi(4 , 8 , 1); 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /lec-11/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Function in JS 7 | 8 | 9 |

Function in JavaScript

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /lec-11/makeSandwich.js: -------------------------------------------------------------------------------- 1 | let bread1 = prompt("Which bread would you like to have :- "); 2 | let veggies1 = prompt("What are your favorite veggies"); 3 | let sauce1 = prompt("Which sauce would you like to have :- "); 4 | 5 | function makeSandwich(bread, veggies, sauce) { 6 | let sandwich = bread + " bread " + veggies + " " + sauce + " sandwich is ready"; 7 | return sandwich; 8 | } 9 | 10 | let vegSandwich = makeSandwich(bread1, veggies1, sauce1); 11 | console.log(vegSandwich); -------------------------------------------------------------------------------- /lec-14/stringExample-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Filtering greetings messages 8 | 9 | 10 | 11 |

Filtering greetings messages

12 |
13 | 16 |
17 | 18 | 19 | 37 | 38 | -------------------------------------------------------------------------------- /lec-15/stringExample-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Fixing Capitalization 8 | 9 | 10 | 11 |

Fixing Capitalization

12 |
13 | 16 |
17 | 18 | 19 | 33 | 34 | -------------------------------------------------------------------------------- /lec-19/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /lec-19/object.js: -------------------------------------------------------------------------------- 1 | // let lecture = 10; 2 | // let section = 3; 3 | // let title = 'Javascript'; 4 | 5 | // const course = { 6 | // lecture: 10, 7 | // section: 3, 8 | // title: 'Javascript', 9 | // notes: { 10 | // introduction: "Welcome to JS course" 11 | // }, 12 | // enroll() { 13 | // console.log('you are sucessfully enrolled'); 14 | // } 15 | // } 16 | 17 | // Factory Function 18 | 19 | function createCourse(title) { 20 | return { 21 | title: title, 22 | enroll() { 23 | console.log('you are sucessfully enrolled'); 24 | } 25 | } 26 | } 27 | 28 | const newCourse = createCourse('Javascript'); 29 | 30 | // Constructor Function 31 | 32 | function Course(title) { 33 | this.title = title, 34 | this.enroll = function () { 35 | console.log('you are sucessfully enrolled'); 36 | } 37 | } 38 | 39 | 40 | // const Course_1 = new Function('title', ` 41 | // this.title = title, 42 | // this.enroll = function () { 43 | // console.log('you are sucessfully enrolled'); 44 | // } 45 | // `) 46 | 47 | // // Primitive Datatype 48 | // let number = 10; 49 | // // Pass by Value 50 | // let number_2 = number 51 | // number = 15; 52 | 53 | // // Reference Datatype 54 | // let obj = {number : 10}; 55 | // // Pass by Reference 56 | // let obj2 = obj; 57 | 58 | const course = { 59 | title: 'Javascript', 60 | enroll() { 61 | console.log('you are sucessfully enrolled'); 62 | } 63 | } 64 | 65 | const course_1 = {}; 66 | for(let key of Object.keys(course)) { 67 | course_1[key] = course[key] 68 | } 69 | -------------------------------------------------------------------------------- /lec-2/demo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Demo JS 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /lec-2/script.js: -------------------------------------------------------------------------------- 1 | let namasteBtn = document.querySelector('button'); 2 | namasteBtn.addEventListener('click', inputMsg); 3 | 4 | function inputMsg() { 5 | let name = prompt('Enter Name of Student'); 6 | namasteBtn.textContent = 'Roll No. 1:' + name; 7 | } -------------------------------------------------------------------------------- /lec-2/style.css: -------------------------------------------------------------------------------- 1 | button { 2 | font-family: 'helvetica neue', helvetica, sans-serif; 3 | letter-spacing: 1px; 4 | text-transform: uppercase; 5 | text-align: center; 6 | border: 2px solid rgb(255, 232, 28); 7 | background: rgb(255, 232, 28); 8 | color: rgba(0,0,200,0.6); 9 | box-shadow: 1px 1px 2px rgba(0,0,200,0.4); 10 | border-radius: 10px; 11 | padding: 3px 10px; 12 | display: inline-block; 13 | cursor: pointer; 14 | } -------------------------------------------------------------------------------- /lec-20/builtin_objects.js: -------------------------------------------------------------------------------- 1 | // Primitive Datatype 2 | let name = "Shweta" 3 | let string = `Hii My name is ${3+2}`; 4 | console.log(string); 5 | // Reference Datatype 6 | let string_1 = new String('Hello Guys') 7 | 8 | // {} => new Object() 9 | // true false => new Boolean() 10 | // '', "" => new Sting() 11 | // `` -------------------------------------------------------------------------------- /lec-20/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /lec-21/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /lec-21/object_exercise.js: -------------------------------------------------------------------------------- 1 | // Exercise using Objects 2 | // itemName 3 | // price 4 | // discount 5 | // itemCode 6 | 7 | const product = { 8 | itemName: 'Flower', 9 | price: 50, 10 | discount: 20, 11 | itemCode: 'F40' 12 | } 13 | 14 | function createProduct(name, price, discount, itemCode) { 15 | return { 16 | itemName: name, 17 | price: price, 18 | discount: discount, 19 | itemCode: itemCode 20 | } 21 | } 22 | 23 | const football = createProduct('football', 400, 10, 'F30'); 24 | 25 | function Product(name, price, discount, itemCode){ 26 | this.itemName = name; 27 | this.price = price; 28 | this.discount = discount; 29 | this.itemCode = itemCode; 30 | this.discountValue = function(){ 31 | return price * discount/100; 32 | } 33 | } 34 | 35 | const mobile = new Product('Oneplus Nord', 30000, 5, 'OP20') 36 | 37 | -------------------------------------------------------------------------------- /lec-22/classes.js: -------------------------------------------------------------------------------- 1 | // Declaring a Class 2 | class Product { 3 | constructor(itemName){ 4 | console.log('Passed by Furniture' + itemName); 5 | this.itemName = itemName; 6 | } 7 | 8 | getItemName(){ 9 | return this.itemName + " is a Product"; 10 | } 11 | } 12 | 13 | class Furniture extends Product { 14 | constructor(itemName){ 15 | super(itemName); 16 | } 17 | 18 | getItemName(){ 19 | return this.itemName + " is a Furniture" 20 | } 21 | 22 | } 23 | 24 | // let pencil = new Product('Pencil'); 25 | let chair = new Furniture('Chair') 26 | 27 | 28 | // const Product1 = class { 29 | // constructor(itemName,price,discount,productCode){ 30 | // this.itemName = itemName; 31 | // this.price = price; 32 | // this.discount = discount; 33 | // this.productCode = productCode; 34 | // } 35 | // get getDiscountValue(){ 36 | // return this.discount; 37 | // } 38 | // set setDiscountValue(value){ 39 | // this.discount = value; 40 | // } 41 | // discountValue(){ 42 | // return this.discount*this.price/100 43 | // } 44 | // }; 45 | 46 | // let chair = new Product1('Chair', 499, 15, 'C10') 47 | 48 | 49 | -------------------------------------------------------------------------------- /lec-22/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /lec-23/arrays.js: -------------------------------------------------------------------------------- 1 | const num = new Array(1,2,3,4,5,6,7,8,9); 2 | 3 | // Push 4 | num.push(10) 5 | 6 | // Unshift 7 | num.unshift(0) 8 | 9 | // Pop 10 | num.pop() 11 | 12 | // Shift 13 | num.shift() 14 | 15 | const names = ['Amal','Dhanvan','Akash','Akshit','Neha','Supriya']; 16 | 17 | // indexOf 18 | names.indexOf('Akash'); 19 | 20 | // lastIndexOf 21 | names.lastIndexOf('Akash') 22 | 23 | // includes 24 | names.includes('Akshit') 25 | 26 | let channels = [{ 27 | name: 'Apna College', 28 | subscriber: 10000 29 | }, { 30 | name: 'Apni Kaksha', 31 | subscriber: 20000 32 | }, { 33 | name: 'Aman Dhattarwal', 34 | subscriber: 50000 35 | }]; 36 | 37 | let names1 = ['Amal','Dhanvan','Akash'] 38 | let names2 = ['Akshit','Neha','Supriya'] 39 | // let names3 = names1.concat(names2) 40 | let names3 = [...names1,...names2] 41 | 42 | 43 | // For Loop 44 | for(let i = 0;i city.population > 3000000)) 75 | console.log(cities.map(city => city.population * 2)) 76 | 77 | 78 | -------------------------------------------------------------------------------- /lec-23/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /lec-24/arraysExercise.js: -------------------------------------------------------------------------------- 1 | const characters = [ 2 | { 3 | name: 'Tarak Mehta', 4 | height: '172', 5 | mass: '77', 6 | eye_color: 'brown', 7 | gender: 'male', 8 | }, 9 | { 10 | name: 'Jethalal', 11 | height: '145', 12 | mass: '136', 13 | eye_color: 'black', 14 | gender: 'male', 15 | }, 16 | { 17 | name: 'Babita Ji', 18 | height: '150', 19 | mass: '49', 20 | eye_color: 'grey', 21 | gender: 'female', 22 | }, 23 | { 24 | name: 'Krishnan Iyer', 25 | height: '168', 26 | mass: '84', 27 | eye_color: 'black', 28 | gender: 'male', 29 | }, 30 | ]; 31 | 32 | // Get an array of all names 33 | 34 | const names = characters.map(ch => ch.name) 35 | // console.log(names); 36 | 37 | // Get an array of objects with just name and height properties 38 | const propertiesOfCh = characters.map(ch => { 39 | return { 40 | name: ch.name, 41 | height: ch.height 42 | } 43 | }) 44 | // console.log(propertiesOfCh); 45 | 46 | // Get the total height of all characters 47 | const totalHeight = characters.reduce((prevHeight, character) => prevHeight + Number(character.height), 0); 48 | // console.log(totalHeight); 49 | 50 | // Get characters with mass greater than 100 51 | const greaterThanMass = characters.filter(character => character.mass > 100) 52 | // console.log(greaterThanMass); 53 | 54 | // Get all male characters 55 | const maleCh = characters.filter(character => character.gender == 'male') 56 | // console.log(maleCh); 57 | 58 | // Sort by gender 59 | const sortByGender = characters.sort((character1, character2) => { 60 | if (character1.gender > character2.gender) { 61 | return -1; 62 | } 63 | if (character1.gender < character2.gender) { 64 | return 1; 65 | } 66 | return 0 67 | }) 68 | // console.log(sortByGender); 69 | 70 | // Sort by name 71 | const sortByName = characters.sort((character1, character2) => { 72 | if (character1.name > character2.name) { 73 | return -1; 74 | } 75 | if (character1.name < character2.name) { 76 | return 1; 77 | } 78 | return 0 79 | }) 80 | // console.log(sortByName); 81 | 82 | // Does every character have mass more than 40? 83 | // console.log(characters.every((character) => character.mass > 40)) 84 | 85 | // Does every character have blue eyes? 86 | // console.log(characters.every((character) => character.eye_color == 'blue')) 87 | 88 | // Is there at least one male character? 89 | // console.log(characters.some((character) => character.gender)) 90 | // Is there at least one character taller than 200? 91 | console.log(characters.some((character) => character.height > 200)) 92 | -------------------------------------------------------------------------------- /lec-24/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /lec-25/codeExecution.js: -------------------------------------------------------------------------------- 1 | let a = 'Namaste World!'; 2 | 3 | function first() { 4 | console.log('Inside first function'); 5 | second(); 6 | console.log('Again inside first function'); 7 | } 8 | function second() { 9 | console.log('Inside second function'); 10 | } 11 | first(); 12 | console.log('Inside Global Execution Context'); -------------------------------------------------------------------------------- /lec-25/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /lec-26/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /lec-26/scope.js: -------------------------------------------------------------------------------- 1 | // // the scope is by default global 2 | // var name = 'Amal'; 3 | 4 | // function sayName() { 5 | // var marks = 10; 6 | // console.log(name); 7 | // } 8 | 9 | // sayName() 10 | // console.log(marks); 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | // var x = 0; 41 | 42 | // // Global Scope 43 | // function first() { 44 | // // Local Scope #1 45 | // var x = 1; 46 | // console.log(x); 47 | // function childOfFirst() { 48 | // var x = 2; 49 | // console.log(x); 50 | // // Local Scope #2 51 | // } 52 | // childOfFirst() 53 | // } 54 | 55 | // first() 56 | 57 | // // Global Scope 58 | // function second() { 59 | // console.log(x); 60 | // // Local Scope #3 61 | // } 62 | // // Global Scope 63 | // second() 64 | 65 | 66 | // let x =10 67 | // { 68 | // let x = 1; 69 | // console.log(x); 70 | // } 71 | 72 | // console.log(x); 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | // if (true) { 101 | // // this 'if' conditional block doesn't create a new scope 102 | // var foo = 'bar'; 103 | // } 104 | 105 | // console.log(foo); 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | // Lexical Scope 138 | function Dada() { 139 | var name = 'Amalesh Kumar'; 140 | // likes is not accessible here 141 | function Papa() { 142 | console.log(name); 143 | // name is accessible here 144 | // likes is not accessible here 145 | function Beta() { 146 | // Innermost level of the scope chain 147 | // name is also accessible here 148 | var likes = 'Coding'; 149 | } 150 | console.log(likes); 151 | Beta() 152 | } 153 | Papa() 154 | } 155 | Dada() 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | -------------------------------------------------------------------------------- /lec-27/advanceVariable.js: -------------------------------------------------------------------------------- 1 | let foo = ' bar' 2 | var bar = 'foo' 3 | if(true){ 4 | // var foo = ' baz'; 5 | var bar = 'foobar'; 6 | console.log(foo) 7 | console.log(bar) 8 | } 9 | console.log(foo) 10 | console.log(bar) -------------------------------------------------------------------------------- /lec-27/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /lec-28/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /lec-28/whatIsThis.js: -------------------------------------------------------------------------------- 1 | // let counter = createCounter(); 2 | // let counter1 = createCounter(); 3 | 4 | // function createCounter() { 5 | // return { 6 | // count: 0, 7 | // increment: function () { 8 | // this.count++; 9 | // console.log(this); 10 | // } 11 | // } 12 | // } 13 | // counter.increment(); 14 | // counter1.increment(); 15 | 16 | // var count = 0; 17 | // function incrementCounter() { 18 | // this.count++; 19 | // console.log(this); 20 | // } 21 | 22 | // incrementCounter(); 23 | // incrementCounter(); 24 | // incrementCounter(); 25 | // incrementCounter(); 26 | console.log(this); 27 | 28 | 29 | function Car(name){ 30 | this.name = name; 31 | this.start = function(){ 32 | console.log(this.name + ' started'); 33 | console.log(this) 34 | } 35 | } 36 | 37 | let swift = Car('Swift'); 38 | // swift.start(); 39 | 40 | console.log(name) 41 | -------------------------------------------------------------------------------- /lec-29/advanceFunction.js: -------------------------------------------------------------------------------- 1 | // function declaration 2 | // function add(...args) { 3 | // console.log(args) 4 | // let total = 0; 5 | // for (let i = 0; i < args.length - 1; i++) { 6 | // total += args[i]; 7 | // } 8 | // return total; 9 | // } 10 | 11 | 12 | // function expression 13 | // let add1 = (a = 2,b = a,c=a*b) => { 14 | // return a + b + c; 15 | // } 16 | // console.log(add1()) 17 | 18 | // function greeting(name) { 19 | // console.log(`Good Morning ${name} Sir`); 20 | // } 21 | 22 | // function processUserInput(callback) { 23 | // let name = prompt("Enter your name"); 24 | // callback(name); 25 | // } 26 | 27 | 28 | // processUserInput(greeting); 29 | // console.log(add(1, 2, 3, 4, 5, 6, 7)) 30 | 31 | function Car(name){ 32 | this.name = name; 33 | this.start = function(callback) { 34 | callback.call(this,this.name) 35 | callback.apply(this,[this.name]) 36 | callback = callback.bind(this,this.name) 37 | callback(this.name) 38 | } 39 | } 40 | 41 | let swift = new Car('Swift'); 42 | // swift.start(); 43 | 44 | swift.start(function(name){ 45 | console.log(name + ' started'); 46 | console.log(this) 47 | }) -------------------------------------------------------------------------------- /lec-29/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /lec-30/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /lec-30/practiceExercise.js: -------------------------------------------------------------------------------- 1 | // Exercise 01 2 | let square = { 3 | side: 5, 4 | get area() { 5 | return this.side ** 2 6 | } 7 | } 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | // square.side = 10 33 | // console.log(square.area) 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | // Exercise 02 63 | function stringConcat(separator, ...strings) { 64 | let returnVal = '' 65 | strings.forEach((string, i) => { 66 | if (i == strings.length - 1) { 67 | returnVal += string; 68 | } 69 | else { 70 | returnVal += string + separator; 71 | } 72 | }) 73 | return returnVal; 74 | } 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | // console.log(stringConcat('+', 'this', 'is', 'invalid')) 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | // Exercise 03 131 | let [first, second, third, ...other] = [1, 2, 3, 4, 5, 6, 7, 8] 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | // console.log(first) 163 | // console.log(second) 164 | // console.log(third) 165 | // console.log(other) 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | // Exercise 04 197 | function matchHouses(house) { 198 | if (house <= 0) { 199 | return 0; 200 | } else { 201 | return house * 6 - house + 1 202 | } 203 | } 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | console.log(matchHouses(0)) 236 | 237 | console.log(matchHouses(4)) 238 | 239 | console.log(matchHouses(87)) 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | -------------------------------------------------------------------------------- /lec-31/dom.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | DOM Manipulation 9 | 10 | 11 | 12 | 13 | 14 | 18 | 29 | 30 | 126 | 127 | 128 | -------------------------------------------------------------------------------- /lec-31/tasks/attributeManipulation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | the list 6 | 14 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /lec-31/tasks/clearElement.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |
    6 |
  1. Hello
    2. 7 |
  2. World
    3. 8 |
9 | 10 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /lec-31/tasks/coloredBox.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 |
1:12:13:14:15:1
1:22:23:24:25:2
1:32:33:34:35:3
1:42:43:44:45:4
1:52:53:54:55:5
55 | 56 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /lec-31/tasks/countDecendent.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 42 | 43 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /lec-31/tasks/creatingElements.html: -------------------------------------------------------------------------------- 1 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | List Item 20 | 21 | 22 |

Create List Items

23 | 24 | -------------------------------------------------------------------------------- /lec-31/tasks/findElements.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
Users:
5 | 9 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /lec-31/tasks/solution/attributeManipulation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | The list: 6 | 14 | 15 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /lec-31/tasks/solution/clearElement.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |
    6 |
  1. Hello
    2. 7 |
  2. World
    3. 8 |
9 | 10 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /lec-31/tasks/solution/coloredBox.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 |
1:12:13:14:15:1
1:22:23:24:25:2
1:32:33:34:35:3
1:42:43:44:45:4
1:52:53:54:55:5
55 | 56 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /lec-31/tasks/solution/countDecendent.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 42 | 43 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /lec-31/tasks/solution/creatingElements.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |

Create a list

5 | 6 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /lec-31/tasks/solution/findElements.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
Users:
5 | 9 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /lec-32/.htaccess: -------------------------------------------------------------------------------- 1 | 2 | # HTID:18723992: DO NOT REMOVE OR MODIFY THIS LINE AND THE LINES BELOW 3 | php_value display_errors 1 4 | # DO NOT REMOVE OR MODIFY THIS LINE AND THE LINES ABOVE HTID:18723992: 5 | -------------------------------------------------------------------------------- /lec-32/courses.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 10 | Add Course Page 11 | 12 | 13 | 14 |
15 | 33 |
34 | 35 |
36 |
37 |
38 | 40 | 41 |
42 |
    43 |
  • 44 |

    Chapter 1

    45 | 46 | 47 |
    • 48 |
49 |
50 |
51 | 52 | 105 | 106 | 107 | -------------------------------------------------------------------------------- /lec-32/img/bulb-off.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yashrajbothra/web-dev-js/eb73984e7b9cf0eec1648f5b56aa8050a329d642/lec-32/img/bulb-off.jpg -------------------------------------------------------------------------------- /lec-32/img/bulb-on.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/yashrajbothra/web-dev-js/eb73984e7b9cf0eec1648f5b56aa8050a329d642/lec-32/img/bulb-on.jpg -------------------------------------------------------------------------------- /lec-32/light.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Switch Bulb 9 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /lec-5/after.js: -------------------------------------------------------------------------------- 1 | // ...long js... ...long js... ...long js... ...long js... ...long js... ...long js... 2 | // ...long js... ...long js... ...long js... ...long js... ...long js... ...long js... 3 | // ...long js... ...long js... ...long js... ...long js... ...long js... ...long js... 4 | // ...long js... ...long js... ...long js... ...long js... ...long js... ...long js... 5 | // ...long js... ...long js... ...long js... ...long js... ...long js... ...long js... 6 | // ...long js... ...long js... ...long js... ...long js... ...long js... ...long js... 7 | // ...long js... ...long js... ...long js... ...long js... ...long js... ...long js... 8 | // ...long js... ...long js... ...long js... ...long js... ...long js... ...long js... 9 | // ...long js... ...long js... ...long js... ...long js... ...long js... ...long js... 10 | // ...long js... ...long js... ...long js... ...long js... ...long js... ...long js... 11 | // ...long js... ...long js... ...long js... ...long js... ...long js... ...long js... 12 | // ...long js... ...long js... ...long js... ...long js... ...long js... ...long js... 13 | // ...long js... ...long js... ...long js... ...long js... ...long js... ...long js... 14 | // ...long js... ...long js... ...long js... ...long js... ...long js... ...long js... 15 | // ...long js... ...long js... ...long js... ...long js... ...long js... ...long js... 16 | // ...long js... ...long js... ...long js... ...long js... ...long js... ...long js... 17 | // ...long js... ...long js... ...long js... ...long js... ...long js... ...long js... 18 | // ...long js... ...long js... ...long js... ...long js... ...long js... ...long js... 19 | // ...long js... ...long js... ...long js... ...long js... ...long js... ...long js... 20 | // ...long js... ...long js... ...long js... ...long js... ...long js... ...long js... 21 | // ...long js... ...long js... ...long js... ...long js... ...long js... ...long js... 22 | // ...long js... ...long js... ...long js... ...long js... ...long js... ...long js... 23 | // ...long js... ...long js... ...long js... ...long js... ...long js... ...long js... 24 | // ...long js... ...long js... ...long js... ...long js... ...long js... ...long js... 25 | // ...long js... ...long js... ...long js... ...long js... ...long js... ...long js... 26 | // ...long js... ...long js... ...long js... ...long js... ...long js... ...long js... 27 | // ...long js... ...long js... ...long js... ...long js... ...long js... ...long js... 28 | // ...long js... ...long js... ...long js... ...long js... ...long js... ...long js... 29 | // ...long js... ...long js... ...long js... ...long js... ...long js... ...long js... 30 | // ...long js... ...long js... ...long js... ...long js... ...long js... ...long js... 31 | 32 | alert("Script loaded after rendering"); 33 | -------------------------------------------------------------------------------- /lec-5/before.js: -------------------------------------------------------------------------------- 1 | // ...before js... 2 | 3 | alert("Script loaded before Rendering"); 4 | -------------------------------------------------------------------------------- /lec-5/between.js: -------------------------------------------------------------------------------- 1 | // ...between js... 2 | 3 | alert("Script loaded BETWEEN Rendering"); 4 | -------------------------------------------------------------------------------- /lec-5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Ways to Load Script 9 | 10 | 11 | 12 | 13 | 14 | 15 |

...content loaded before all scripts...

16 | 17 | 18 | 19 |

...content loaded between some scripts...

20 | 21 | 22 | 23 |

...content loaded all scripts...

24 | 25 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /lec-5/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | padding: 0; 3 | margin: 0; 4 | } 5 | 6 | body { 7 | font-size: 14px; 8 | } 9 | 10 | .container { 11 | width: 300px; 12 | height: 200px; 13 | color: black; 14 | } 15 | 16 | .container > h1 { 17 | color: gray; 18 | } 19 | 20 | .container > p { 21 | font-size: 12px; 22 | display: none; 23 | } -------------------------------------------------------------------------------- /lec-6/datatype.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | DataTypes 9 | 10 | 11 | 12 |

Using Datatypes

13 | 14 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /lec-7/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Variables 9 | 10 | 11 | 12 | Building a Payment form 13 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /lec-9/greeting.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Greetings 9 | 10 | 11 | 12 |

Hey! Whats Up?

13 | 14 | 30 | 31 | 32 | --------------------------------------------------------------------------------