FullStack Sunday April
FullStack Sunday April
Download HTML ZIP
Scratchpad #1, 2, 3, 4
// let score = 0; // score = score + 10; // score += 5; // console.log(score); // let age = 12; // if (age >= 18) { // console.log('Hello, you can enter'); // } let num = 122; if (num % 2 === 0) { console.log('Number is even'); } // // // // // let isLoggedIn = true; // // // // // if (isLoggedIn === true) { // // // // // console.log('Welcome'); // // // // // } // // // // let age = 80; // // // // if (age >= 65) { // // // // console.log('Drinks are free'); // // // // } else if (age >= 21) { // // // // console.log('You can enter and you can drink'); // // // // } else if (age >= 18) { // // // // console.log('You can enter but you cannot drink'); // // // // } else { // // // // console.log('You are not allowed to enter'); // // // // } // // // let password = 'hello world@123'; // // // if (password.length >= 8) { // // // if (password.search(' ') === -1) { // // // console.log('Valid password'); // // // } else { // // // console.log('Password cannot contain spaces'); // // // } // // // } else { // // // console.log('Invalid password'); // // // } // // // let isLoggedIn = 'jane'; // // // if (isLoggedIn) { // // // console.log('Welcome to your dashboard'); // // // } else { // // // console.log('Please login to view the content'); // // // } // // // let age = 26; // // // if (age >= 18 && age < 21) { // // // console.log('You can enter but you cannot drink'); // // // } else if (age >= 21 && age < 65) { // // // console.log('You can enter and you can drink'); // // // } else if (age >= 65) { // // // console.log('Drinks are free'); // // // } else { // // // console.log('You are not allowed to enter'); // // // } // // // let day = 5; // // // switch (day) { // // // case 1: // // // console.log('Mon'); // // // break; // // // case 2: // // // console.log('Tue'); // // // break; // // // case 3: // // // console.log('Wed'); // // // break; // // // case 4: // // // console.log('Thu'); // // // break; // // // default: // // // console.log('Invalid day code'); // // // } // // // if (day === 1) { // // // console.log('Mon'); // // // } else if (day === 2) { // // // console.log('Tue'); // // // } else if (day === 3) { // // // console.log('Wed'); // // // } else { // // // console.log('Invalid day code'); // // // } // // let currentStatus = 'online'; // // let color = // // currentStatus === 'online' // // ? 'green' // // : currentStatus === 'offline' // // ? 'red' // // : 'yellow'; // // // let color = null; // // // if (currentStatus === 'online') { // // // color = 'green'; // // // } else if (currentStatus === 'offline') { // // // color = 'red'; // // // } else { // // // color = 'yellow'; // // // } // // console.log(color); // // // currentStatus === 'online' // // // ? console.log('green') // // // : currentStatus === 'offline' // // // ? console.log('red') // // // : console.log('yellow'); // // // if (currentStatus === 'online') { // // // console.log('green'); // // // } else if (currentStatus === 'offline') { // // // console.log('red'); // // // } else { // // // console.log('yellow'); // // // } // const movies = [ // 'Inception', // 'Exorcist', // 'Shutter Island', // 'Ben Hurr', // 'The Taxi Driver', // "Schindler's List" // ] // const product1 = [ // 1, // 'iPhone 15', // 'Apple', // 'Some description...', // 200, // 100000, // true, // ]; // const data = 'brand'; // const product2 = { // name: 'iPhone 15', // brand: 'Apple', // description: 'Some description...', // price: 100000, // indexNo: 1, // inStock: 200, // discounted: true, // 10: 'hello', // 'some data': 'Test Information', // }; // product2.brand = 'Apple computers'; // product2[10] = 'world'; // product2.something = [1, 2, 3, 4, 5]; // product2.indexNo++; // delete product2[10]; // console.log(product2); // // console.log(product2[data]); // console.log(product2.discounted); // console.log(product2[10]); // console.log(product2['some data']); const playlist = [ { title: 'Some Name', artists: ['Artist #1', 'Artist #2'], album: 'Something', trackLength: 2.42, description: '...', }, { title: 'Some Name', artists: ['Artist #1', 'Artist #2'], album: 'Something', trackLength: 2.42, description: '...', }, { title: 'Some Name', artists: ['Artist #1', 'Artist #2'], album: 'Something', trackLength: 2.42, description: '...', }, { title: 'Some Name', artists: ['Artist #1', 'Artist #2'], album: 'Something', trackLength: 2.42, description: '...', }, { title: 'Some Name', artists: ['Artist #1', 'Artist #2'], album: 'Something', trackLength: 2.42, description: '...', }, ]; // // // // for (let count = 0; count < 10; count++) { // // // // console.log(count, 'Hello World'); // // // // } // // // // for (let count = 0; count < 10; count += 2) { // // // // console.log(count, 'Hello World'); // // // // } // // // // for (let count = 10; count > 0; count++) { // // // // console.log(count, 'Hello World'); // // // // } // // // // const nums = [12, 34, 56, 34, 78, 54, 23, 12, 20, 1000]; // // // // for (let i = 0; i < nums.length; i++) { // // // // console.log(nums[i]); // // // // } // // // // const movies = [ // // // // { movieName: 'Inception', rating: 3.8 }, // // // // { movieName: 'Avengers', rating: 3.4 }, // // // // { movieName: 'Iron Man', rating: 2.9 }, // // // // ]; // // // // for (let i = 0; i < movies.length; i++) { // // // // const movie = movies[i]; // // // // console.log(`${movie.movieName} has a rating of ${movie.rating}`); // // // // } // // // let message = 'hello world'; // // // // for (let i = 0; i < message.length; i++) { // // // // console.log(message[i]); // // // // } // // // let reversedString = ''; // // // for (let i = message.length - 1; i >= 0; i--) { // // // // console.log(message[i]); // // // reversedString = reversedString + message[i]; // // // } // // // console.log(reversedString); // // // for (let i = 0; i < 5; i++) { // // // console.log('OUTER LOOP', i); // // // for (let j = 0; j < 5; j++) { // // // console.log(' INNER LOOP', j); // // // } // // // } // // // const gameBoard = [ // // // [4, 64, 8, 4], // // // [128, 32, 4, 16], // // // [16, 4, 4, 32], // // // [2, 16, 16, 2], // // // ]; // // // for (let i = 0; i < gameBoard.length; i++) { // // // console.log(gameBoard[i]); // // // for (let j = 0; j < gameBoard[i].length; j++) { // // // console.log(gameBoard[i][j]); // // // } // // // } // // for (let i = 0; i < 10; i++) { // // console.log(i); // // } // // let j = 0; // // while (j < 10) { // // console.log(j); // // j++; // // } // // const target = Math.floor(Math.random() * 10) + 1; // // let guess = Math.floor(Math.random() * 10) + 1; // // while (target !== guess) { // // if (guess === 5) { // // console.log("I don't like this number"); // // break; // // } // // console.log(`Target: ${target} | Guess: ${guess}`); // // guess = Math.floor(Math.random() * 10) + 1; // // } // // console.log(`Final Result\nTarget: ${target} | Guess: ${guess}`); // // for (let i = 0; i < 100; i++) { // // console.log(i); // // if (i === 10) { // // break; // // } // // } // // const target = Math.floor(Math.random() * 10) + 1; // // let guess = Math.floor(Math.random() * 10) + 1; // // while (true) { // // if (target === guess) { // // break; // // } // // console.log(`Target: ${target} | Guess: ${guess}`); // // guess = Math.floor(Math.random() * 10) + 1; // // } // // console.log(`Final Result\nTarget: ${target} | Guess: ${guess}`); // // const nums = [12, 34, 56, 34, 78, 54, 23, 12, 20, 1000]; // // // for (let i = 0; i < nums.length; i++) { // // // console.log(nums[i]); // // // } // // for (let num of nums) { // // console.log(num); // // } // // // Another example // // for (let char of 'hello') { // // console.log(char.toUpperCase()); // // } // // const matrix = [ // // [1, 4, 7], // // [9, 7, 2], // // [9, 4, 6], // // ]; // // for (let row of matrix) { // // for (let col of row) { // // console.log(col); // // } // // } // // const cats = ['fashion', 'mobiles', 'books']; // // const prods = ['tshirt', 'samsung', '1984']; // // for (let i = 0; i < cats.length; i++) { // // console.log(cats[i], prods[i]); // // } // const productPrices = { // Apple: 80000, // OnePlus: 50000, // Samsung: 90000, // }; // for (let key of Object.keys(productPrices)) { // console.log(key, productPrices[key]); // } // for (let key in productPrices) { // console.log(key, productPrices[key]); // } // // for (let value of Object.values(productPrices)) { // // console.log(value); // // } // function greet() { // console.log('Hello World'); // console.log('Hello World'); // console.log('Hello World'); // console.log('Hello World'); // console.log('Hello World'); // } // greet(); // function rollDie() { // const num = Math.floor(Math.random() * 6) + 1; // console.log(num); // } // function throwDice() { // rollDie(); // rollDie(); // rollDie(); // } // throwDice(); // function greet(name, message) { // console.log(`Hello, ${name}. ${message}`); // } // greet('John', 'how are you?'); // greet('Jane Doe', 'All good?'); // function rollDie() { // const num = Math.floor(Math.random() * 6) + 1; // console.log(num); // } // function throwDice(times) { // for (let i = 0; i < times; i++) { // rollDie(); // } // } // throwDice(30); // const result = 'hello'.toUpperCase(); // console.log(result); // function greet(name, message) { // if (typeof name === 'undefined' || typeof message === 'undefined') { // return 'PLEASE ENTER A NAME AND A MESSAGE'; // } else { // return `${message}, ${name}`; // } // } // const result = greet('John Doe', 'Hello'); // console.log(result); // const message = 'Hello World'; // function greet() { // const message = 'Goodbye World'; // console.log(message); // } // greet(); // console.log(message); // const message = 'Hello World'; // if (true) { // var message = 'Goodbye World'; // console.log(message); // } // console.log(message); // for (var i = 0; i < 10; i++) { // console.log('INSIDE THE LOOP - ', i); // } // console.log('OUTSIDE THE LOOP - ', i); // function outer() { // function inner() { // const message = 'Hello World'; // console.log(message); // } // inner(); // console.log(message); // } // outer(); // function greet() { // console.log('Hello World'); // } // const hello = greet; // hello(); // const helloWorld = function () { // console.log('This is something'); // }; // helloWorld(); // function greet() { // console.log('Hello World'); // } setTimeout(function () { console.log('Hello World'); }, 1000); // // // // // // // // // const square = function (num) { // // // // // // // // // return num * num; // // // // // // // // // }; // // // // // // // // // console.log(square(10)); // // // // // // // // const math1 = [ // // // // // // // // function (a, b) { // // // // // // // // return a + b; // // // // // // // // }, // // // // // // // // function (a, b) { // // // // // // // // return a - b; // // // // // // // // }, // // // // // // // // function (a, b) { // // // // // // // // return a * b; // // // // // // // // }, // // // // // // // // function (a, b) { // // // // // // // // return a / b; // // // // // // // // }, // // // // // // // // function (num) { // // // // // // // // return num * num; // // // // // // // // }, // // // // // // // // ]; // // // // // // // // // console.log(math[1](10, 6)); // // // // // // // // const math = { // // // // // // // // PI: 3.14, // // // // // // // // add: function (a, b) { // // // // // // // // return a + b; // // // // // // // // }, // // // // // // // // sub: function (a, b) { // // // // // // // // return a - b; // // // // // // // // }, // // // // // // // // mul: function (a, b) { // // // // // // // // return a * b; // // // // // // // // }, // // // // // // // // div: function (a, b) { // // // // // // // // return a / b; // // // // // // // // }, // // // // // // // // square: function (num) { // // // // // // // // return num * num; // // // // // // // // }, // // // // // // // // }; // // // // // // // // console.log(math.PI); // // // // // // // // console.log(math.mul(10, 4)); // // // // // // // function add(a, b) { // // // // // // // return a + b; // // // // // // // } // // // // // // // function sub(a, b) { // // // // // // // return a - b; // // // // // // // } // // // // // // // function math(a, b, fn) { // // // // // // // return fn(a, b); // // // // // // // } // // // // // // // console.log(math(10, 5, add)); // // // // // // // // Example 2 // // // // // // // function repeat(func, num) { // // // // // // // for (let i = 0; i < num; i++) { // // // // // // // func(); // // // // // // // } // // // // // // // } // // // // // // // function sayHello() { // // // // // // // console.log('Hello World!'); // // // // // // // } // // // // // // // function sayGoodbye() { // // // // // // // console.log('Bye World!'); // // // // // // // } // // // // // // // repeat(sayHello, 10); // // // // // // // repeat(sayGoodbye, 5); // // // // // // // // Example 3 // // // // // // // function randomPick(f1, f2) { // // // // // // // let randNum = Math.random(); // // // // // // // if (randNum < 0.5) { // // // // // // // f1(); // // // // // // // } else { // // // // // // // f2(); // // // // // // // } // // // // // // // } // // // // // // // randomPick(sayHello, sayGoodbye); // // // // // // function raiseBy(power) { // // // // // // return function (num) { // // // // // // return num ** power; // // // // // // }; // // // // // // } // // // // // // const test = raiseBy(5); // // // // // // console.log(test(2)); // // // // // // function isBetween(x, y) { // // // // // // return function (num) { // // // // // // return num >= x && num <= y; // // // // // // }; // // // // // // } // // // // // // const isUnderAge = isBetween(0, 18); // // // // // // const canEnterButNotDrink = isBetween(18, 21); // // // // // // const canDrink = isBetween(21, 65); // // // // // // const isSenior = isBetween(65, 100); // // // // // // console.log(isUnderAge(5)); // // // // // // console.log(canEnterButNotDrink(20)); // // // // // // console.log(canDrink(30)); // // // // // // console.log(isSenior(70)); // // // // // // function add(a, b) { // // // // // // return a + b; // // // // // // } // // // // // // function sub(a, b) { // // // // // // return a - b; // // // // // // } // // // // // // function math(a, b, fn) { // // // // // // return fn(a, b); // // // // // // } // // // // // // console.log(math(10, 5, sub)); // // // // // // setTimeout(function () { // // // // // // console.log(Math.random()); // // // // // // }, 1000); // // // // // // function greet() { // // // // // // console.log('Hello world'); // // // // // // } // // // // // // greet(); // // // // // // greet(); // // // // // // greet(); // // // // // // console.log(hello); // // // // // // var hello = 'world'; // // // // // // const nums = [9, 2, 4, 6, 2, 3, 7, 6]; // // // // // // nums.forEach(function (num) { // // // // // // console.log(num); // // // // // // }); // // // // // // for (let num of nums) { // // // // // // console.log(num); // // // // // // } // // // // // const movies = [ // // // // // { // // // // // title: 'Avengers', // // // // // rating: 4.1, // // // // // }, // // // // // { // // // // // title: 'Dr. Strange', // // // // // rating: 3.9, // // // // // }, // // // // // { // // // // // title: 'Tenet', // // // // // rating: 4.3, // // // // // }, // // // // // { // // // // // title: 'Joker', // // // // // rating: 4.7, // // // // // }, // // // // // ]; // // // // // movies.forEach(function (movie, idx) { // // // // // console.log(`${idx}: ${movie.title} has a rating of ${movie.rating}`); // // // // // }); // // // // // const names = ['john', 'jack', 'jane', 'james']; // // // // // const upper_names = names.map(function (name) { // ["JOHN", "JACK"] // // // // // return name.toUpperCase(); // // // // // }); // // // // // console.log(upper_names); // // // // // const upper_names = []; // // // // // for (let name of names) { // // // // // upper_names.push(name.toUpperCase()); // // // // // } // // // // // console.log(upper_names); // // // // // const nums = [2, 3, 4, 7, 6, 8, 13, 10, 19, 12, 14, 22, 21, 16]; // // // // // // const doubles = nums.map(function (num) { // // // // // // return num * 2; // // // // // // }); // // // // // // console.log(doubles); // // // // // const numsData = nums.map(function (num) { // // // // // return { value: num, isEven: num % 2 === 0 }; // // // // // }); // // // // // console.log(numsData); // // // // // function square(num) { // // // // // return num * num; // // // // // } // // // // // const square = function (num) { // // // // // return num * num; // // // // // }; // // // // // const square = num => num * num; // // // // // console.log(square(5)); // // // // const nums = [2, 3, 4, 7, 6, 8, 13, 10, 19, 12, 14, 22, 21, 16]; // // // // const doubles = nums.map(num => num * 2); // // // // console.log(doubles); // // // // const nums = [1,2,3,4,5,6] // // // // // using regular function expressions // // // // const doubles1 = nums.map(function (n) { // // // // return n * 2 // // // // }) // // // // // using arrow functions // // // // const doubles2 = nums.map(n => { // // // // return n * 2 // // // // }) // // // // // using arrow function's one-liner implicit return // // // // const doubles3 = nums.map(n => n * 2) // // // // const parityList = nums.map(n => n % 2 === 0 ? 'Even' : 'Odd') // // // // let movies = ['The Terminator', 'The Avengers', 'Jurassic Park', 'Titanic']; // // // // // const result = movies.find((movie) => movie[0] === 'J'); // // // // const result = movies.find((movie) => movie.includes('tan')); // // // // console.log(result); // // // const books = [ // // // { // // // title: 'The Shining', // // // author: 'Stephen King', // // // rating: 4.1, // // // }, // // // { // // // title: 'Sacred Games', // // // author: 'Vikram Chandra', // // // rating: 4.5, // // // }, // // // { // // // title: '1984', // // // author: 'George Orwell', // // // rating: 4.9, // // // }, // // // { // // // title: 'The Alchemist', // // // author: 'Paulo Coelho', // // // rating: 3.5, // // // }, // // // { // // // title: 'The Great Gatsby', // // // author: 'F. Scott Fitzgerald', // // // rating: 3.8, // // // }, // // // ]; // // // const result = books.find((book) => book.rating < 4); // // // console.log(result); // // // const goodBook = books.find(b => b.rating >= 4.3) // // // const georgeBook = books.find(b => ( // // // b.author.includes('George') // // // )) // // // const lowRated = books.find(book => { // // // return book.rating < 4 // // // }) // // // console.log(goodBook) // // // console.log(georgeBook) // // // const books = [ // // // { // // // title: 'The Shining', // // // author: 'Stephen King', // // // rating: 4.1, // // // }, // // // { // // // title: 'Sacred Games', // // // author: 'Vikram Chandra', // // // rating: 4.5, // // // }, // // // { // // // title: '1984', // // // author: 'George Orwell', // // // rating: 4.9, // // // }, // // // { // // // title: 'The Alchemist', // // // author: 'Paulo Coelho', // // // rating: 3.5, // // // }, // // // { // // // title: 'The Great Gatsby', // // // author: 'F. Scott Fitzgerald', // // // rating: 3.8, // // // }, // // // ]; // // // const result = books.filter((book) => book.rating < 4); // // // console.log(result); // // // const goodBook = books.filter((b) => b.rating >= 4.3); // // // const georgeBooks = books.filter((b) => b.author.includes('George')); // // // const lowRated = books.filter((book) => { // // // return book.rating < 4; // // // }); // // // let query = 'the'; // // // const filteredBooks = books.filter((book) => { // // // const title = book.title.toLowerCase(); // // // return title.includes(query); // // // }); // // // console.log(goodBook); // // // console.log(georgeBooks); // // // console.log(lowRated); // // // console.log(booksWithThe); // // // const names = ['jack', 'james', 'brad', 'john', 'jane', 'josh']; // // // const result = names.some((name) => name[0] === 'b'); // // // console.log(result); // // // const result = names.every((name) => name[0] === 'j'); // // // console.log(result); // // // names.every(word => { // // // return word[0] === 'j' // // // }) // false // // // names.every(word => word.length > 3) // true // // // names.every(w => { // // // let lastChar = w[w.length - 1] // // // return lastChar !== 'a' // // // }) // true // // // const bestBooks = books.every(book => ( // // // book.rating >= 4 // // // )) // // // const notAuthor = books.every( // // // book => book.author.toLowerCase() !== 'chetan bhagat' // // // ) // // // console.log(bestBooks) // // // console.log(notAuthor) // // // const prices = [500.4, 211, 23, 5, 4, 22.2, -23.2, 9233]; // // // const result = prices.sort((a, b) => b - a); // // // console.log(result); // // // const nums = [1, 2, 3, 4, 5]; // // // const result = nums.reduce((acc, currVal) => acc * currVal); // // // console.log(result); // // // acc currVal // // // 1 2 // // // 3 3 // // // 6 4 // // // 10 5 // // // 15 // // let nums = [21, 221, 2, 1, 34, 123, 4342, 56, 4]; // // const result = nums.reduce((acc, currVal) => { // // if (currVal > acc) { // // return currVal; // // } // // return acc; // // }); // // console.log(result); // // // acc currVal // // // 21 221 // // // 221 2 // // // 221 1 // // // 221 34 // // // 221 123 // // // 221 4342 // // // 4342 56 // // // 4342 4 // // // 4342 // // // Example 2 -> Product (multiply everything) // // [3,2,4,6,9].reduce((total, currentVal) => { // // return total * currentVal // // }) // // // Example 3 -> Finding max value // // let nums = [21, 221, 2, 1, 34, 123, 4342, 56, 4] // // const maxVal = nums.reduce((max, currentVal) => { // // if (currentVal > max) { // // return currentVal // // } // // return max // // }) // // console.log(maxVal) // 4342 // // // A shorter way is to use the Math.max and implicit return // // const maxVal = nums.reduce((max, currVal) => Math.max(max, currVal)) // // console.log(maxVal) // const nums = [1, 2, 3, 4, 5]; // const result = nums.reduce((acc, currVal) => acc + currVal, 100); // console.log(result); // function add(x, y) { // if (typeof x === 'undefined') { // x = 0; // } // if (typeof y === 'undefined') { // y = 0; // } // return x + y; // } // function add(x = 0, y = 0) { // return x + y; // } // console.log(add()); // function printVals(a, b, c) { // console.log(a); // console.log(b); // console.log(c); // } // const names = ['John', 'Jane', 'Jack']; // printVals(...'hello'); // function add(...nums) { // return nums.reduce((acc, currVal) => acc + currVal); // } // console.log(add(1, 2, 23, 342)); // // console.log(add(10, 5, 6, 8, 12)); // function printNames(name1, name2, ...others) { // console.log(name1); // console.log(name2); // console.log(others); // } // printNames('john', 'jane', 'jack', 'josh'); // const user = { // firstName: 'John', // lastName: 'Doe', // email: '[email protected]', // phone: 99982234567, // }; // const { firstName, lastName, email: emailAddress, phone } = user; // console.log(firstName, lastName, emailAddress, phone); function profile({ firstName, lastName, age }) { console.log( `Hello, my name is ${firstName} ${lastName} and I am ${age} years old.` ); } profile({ firstName: 'Jane', lastName: 'Doe', age: 20 });
Scratchpad 5,6
// // // const math = { // // // add: function (a, b) { // // // return a + b; // // // }, // // // sub: function (a, b) { // // // return a - b; // // // }, // // // mul: function (a, b) { // // // return a * b; // // // }, // // // div: function (a, b) { // // // return a / b; // // // }, // // // }; // // // console.log(math.add(10, 5)); // // // const movieReviews = [4.5, 5.0, 3.2, 2.1, 4.7, 3.8, 3.1, 3.9, 4.4]; // // // const highest = Math.max(...movieReviews); // // // const lowest = Math.min(...movieReviews); // // // let total = 0; // // // movieReviews.forEach((rating) => (total += rating)); // // // const average = total / movieReviews.length; // // // const info = { highest, lowest, average, hello: 'world' }; // // // console.log(info); // // // const getReviewDetails = (arr) => { // // // const highest = Math.max(...arr); // // // const lowest = Math.min(...arr); // // // const total = arr.reduce((accumulator, nextVal) => accumulator + nextVal); // // // const average = total / arr.length; // // // return { // // // highest, // // // lowest, // // // total, // // // average, // // // }; // // // }; // // // const reviewList = [4.5, 5.0, 3.2, 2.1, 4.7, 3.8, 3.1, 3.9, 4.4]; // // // const statistics = getReviewDetails(reviewList); // // // console.log(statistics); // // // const fullName = 'Jane'; // // // const role = 'admin'; // // // const data = { [role.toUpperCase() + 1]: fullName }; // // // console.log(data); // // // const addProperty = (obj, k, v) => { // // // return { ...obj, [k]: v }; // // // }; // // // const result = addProperty({ firstName: 'John' }, 'lastName', 'Doe'); // // // console.log(result); // {firstName: "John", lastName: "Doe"} // // function add(a, b) { // // return a + b; // // } // // const math = { // // add, // // sub(a, b) { // // return a - b; // // }, // // mul(a, b) { // // return a * b; // // }, // // div(a, b) { // // return a / b; // // }, // // }; // // console.log(math.div(10, 5)); // // console.log('Hello World'); // // SCOPE -> object // // BROWSER -> GLOBAL SCOPE -> window // // NODE.JS -> GLOBAL SCOPE -> global // // this -> object -> CURRENT EXECUTION SCOPE // // function helloWorld() { // // console.log(this); // // } // // window.helloWorld(); // // helloWorld(); // // const profile = { // // firstName: 'John', // // lastName: 'Doe', // // age: 20, // // greet() { // // console.log( // // `Hello my name is ${this.firstName} ${this.lastName} and I am ${this.age} years old` // // ); // // }, // // }; // // profile.greet(); // // function hello() { // // console.log( // // `Hello my name is ${this.firstName} ${this.lastName} and I am ${this.age} years old` // // ); // // } // // const profile1 = { // // firstName: 'John', // // lastName: 'Doe', // // age: 20, // // hello, // // }; // // const profile2 = { // // firstName: 'Jane', // // lastName: 'Smith', // // age: 26, // // hello, // // }; // // profile1.hello(); // // profile2.hello(); // // let asomethingCOM = 'hello world'; // // console.log(this); // // const profile = { // // firstName: 'John', // // lastName: 'Doe', // // age: 20, // // greet() { // // console.log( // // `Hello my name is ${this.firstName} ${this.lastName} and I am ${this.age} years old` // // ); // // }, // // }; // // const profileGreet = profile.greet; // // profileGreet(); // // const hellos = { // // messages: [ // // 'hello world', // // 'hello universe', // // 'hello darkness', // // 'hello hello', // // 'heylo', // // ], // // pickMsg() { // // const index = Math.floor(Math.random() * this.messages.length); // // return this.messages[index]; // // }, // // start() { // // setInterval(() => { // // // console.log(this); // // console.log(this.pickMsg()); // // }, 1000); // // }, // // }; // // hellos.start(); // // const profile = { // // firstName: 'John', // // lastName: 'Doe', // // age: 20, // // greet: () => { // // // this -> window // // console.log( // // `Hello my name is ${this.firstName} ${this.lastName} and I am ${this.age} years old` // // ); // // }, // // }; // // profile.greet(); // // console.dir(document); // // const el = document.getElementById('special'); // // console.log(el); // // const lis = document.getElementsByTagName('li'); // // // console.log(lis); // // for (let li of lis) { // // console.log(li); // // } // // const els = document.getElementsByClassName('info'); // // console.log(els); // // const ul = document.getElementsByTagName('ul')[0]; // // const els = ul.getElementsByClassName('info'); // // console.log(els); // // const el = document.querySelector('#special'); // // console.log(el); // // const els = document.querySelectorAll('li'); // // console.log(els); // // const els = document.querySelectorAll('li'); // // // console.log(h2.innerText); // // // h2.innerText = 'Hello this is something!!!!!!!!!!!!'; // // for (let el of els) { // // setInterval(function () { // // el.innerText = Math.random(); // // }, 10); // // } // // const p = document.querySelector('p'); // // // console.log(p.innerHTML); // // p.innerHTML = 'Hello <strong>World</strong>'; // // p.innerHTML += 'test'; // // const a = document.querySelector('a'); // // console.log(a); // // a.href = 'https://yahoo.co.in'; // // a.id = 'hello-world'; // // a.className = 'this-is-a-class'; // // const a = document.querySelector('a'); // // // console.log(a.id); // // // console.log(a.getAttribute('id')); // // // a.id = 'hello'; // // a.setAttribute('id', 'jello'); // // const li = document.querySelector('ul>li.info'); // // console.log(li.parentElement.children); // // const h2 = document.querySelector('h2'); // // h2.style.color = 'red'; // // h2.style.fontFamily = 'Arial'; // // const nums = [12, 34, 60, 12, 18]; // const colors = [ // 'red', // 'yellow', // 'purple', // 'green', // 'blue', // 'orange', // 'brown', // 'gray', // 'pink', // 'maroon', // ]; // // const lis = document.querySelectorAll('li'); // // for (let li of lis) { // // setInterval(function () { // // li.style.color = colors[Math.floor(Math.random() * colors.length)]; // // li.style.fontSize = `${nums[Math.floor(Math.random() * nums.length)]}px`; // // document.body.style.backgroundColor = // // colors[Math.floor(Math.random() * colors.length)]; // // }, 50); // // } // // const h2 = document.querySelector('h2'); // // const h2Styles = getComputedStyle(h2); // // console.log(h2Styles.color); // // const li = document.querySelector('li'); // // // li.className = 'todo done'; // // // console.log(li.classList); // // li.classList.toggle('done'); // // const root = document.querySelector('#root'); // // const title = document.createElement('h1'); // // title.innerText = 'This is created using JavaScript'; // // title.style.fontFamily = 'Arial, sans-serif'; // // title.style.color = 'purple'; // // const div = document.createElement('div'); // // div.appendChild(title); // // root.appendChild(div); // // const lis = document.querySelectorAll('li'); // // const li = lis[2]; // // const ul = document.querySelector('ul'); // // const newItem = document.createElement('li'); // // newItem.innerText = 'Hello World, this is some text.'; // // newItem.style.color = 'red'; // // // ul.appendChild(newItem); // // ul.insertBefore(newItem, li); // // const p = document.querySelector('p'); // // p.remove(); // // const b = document.createElement('b'); // // b.innerText = 'Hello World'; // // const i = document.createElement('i'); // // i.innerText = 'Goodbye World'; // // // p.insertAdjacentElement('afterend', b); // // p.prepend(b, i); // const btn = document.querySelector('button'); // btn.addEventListener('mouseleave', function () { // document.body.style.backgroundColor = // colors[Math.floor(Math.random() * colors.length)]; // }); // btn.addEventListener('mouseleave', function () { // console.log('Hello World'); // }); // window.addEventListener('scroll', function () { // console.log('I was scrolled'); // }); // // btn.onclick = function () { // // document.body.style.backgroundColor = // // colors[Math.floor(Math.random() * colors.length)]; // // }; // // btn.onclick = function () { // // console.log('Hello World'); // // }; const input = document.querySelector('input'); const button = document.querySelector('button'); const list = document.querySelector('#tasksList'); button.addEventListener('click', function () { const li = document.createElement('li'); li.innerText = input.value; const deleteBtn = document.createElement('button'); deleteBtn.innerText = 'Delete Task'; deleteBtn.style.marginLeft = '10px'; deleteBtn.addEventListener('click', function () { li.remove(); }); const completeBtn = document.createElement('button'); completeBtn.innerText = 'Complete'; completeBtn.style.marginLeft = '20px'; completeBtn.addEventListener('click', function () { li.style.textDecoration = 'line-through'; }); li.append(completeBtn, deleteBtn); list.append(li); input.value = ''; }); // // // // function multiply(a, b) { // // // // return a * b; // // // // } // // // // function square(num) { // // // // return multiply(num, num); // // // // } // // // // function rightTriangle(a, b, c) { // // // // return square(a) + square(b) === square(c); // // // // } // // // // console.log(rightTriangle(1, 2, 3)); // // // // console.log('The first log'); // // // // alert('An interruption in between'); // // // // console.log('The last log'); // // // // console.log('The first log'); // // // // setTimeout(function () { // // // // console.log('HELLOLLLLLLO'); // // // // }, 5000); // // // // console.log('The last log'); // // // const btn = document.querySelector('button'); // // // setTimeout(() => { // // // btn.style.transform = 'translateX(100px)'; // // // setTimeout(() => { // // // btn.style.transform = 'translateX(200px)'; // // // setTimeout(() => { // // // btn.style.transform = 'translateX(300px)'; // // // setTimeout(() => { // // // btn.style.transform = 'translateX(400px)'; // // // setTimeout(() => { // // // btn.style.transform = 'translateX(500px)'; // // // setTimeout(() => { // // // btn.style.transform = 'translateX(600px)'; // // // }, 2000); // // // }, 2000); // // // }, 2000); // // // }, 2000); // // // }, 2000); // // // }, 2000); // // const willGetAPLayStation = new Promise((resolve, reject) => { // // setTimeout(() => { // // const random = Math.random(); // // if (random > 0.5) { // // resolve(); // // } else { // // reject(); // // } // // }, 2000); // // }); // // // willGetAPLayStation // // // .then(() => { // // // console.log('Thank you!!! I am very happy!'); // // // }) // // // .catch(() => { // // // console.log('I hate you!'); // // // }); // // function makePlayStation() { // // return new Promise((resolve, reject) => { // // setTimeout(() => { // // const random = Math.random(); // // if (random > 0.5) { // // resolve(); // // } else { // // reject(); // // } // // }, 2000); // // }); // // } // // const result = makePlayStation(); // // result // // .then(() => { // // console.log('Resolved'); // // }) // // .catch(() => { // // console.log('Rejected'); // // }); // function fakeRequest(url) { // return new Promise((resolve, reject) => { // setTimeout(() => { // const pages = { // '/users': [ // { id: 1, username: 'john' }, // { id: 2, username: 'jane' }, // ], // '/users/1': { // id: 1, // username: 'johndoe', // topPostId: 53231, // city: 'mumbai', // }, // '/users/5': { // id: 1, // username: 'janedoe', // topPostId: 32443, // city: 'pune', // }, // '/posts/53231': { // id: 1, // title: 'Really amazing post', // slug: 'really-amazing-post', // }, // }; // const data = pages[url]; // if (data) { // resolve({ status: 200, data }); // } else { // reject({ status: 404, message: 'SORRY THIS URL DOES NOT EXIST.' }); // } // }, 1000); // }); // } // fakeRequest('/users') // .then((response) => { // console.log('First request completed'); // const userId = response.data[0].id; // return fakeRequest(`/users/${userId}`); // }) // .then((response) => { // console.log('Second request completed'); // const topPostId = response.data.topPostId; // return fakeRequest(`/posts/${topPostId}`); // }) // .then((response) => { // console.log('Third request completed'); // console.log(response); // }) // .catch((err) => { // console.log(err); // }); // isPalindrome("kayak") => true // vishal // isAnagram("fired", "fried") => true // vishal // removeDuplicates(["hello", "world", "hello", 1, 1, 4, "test"]) => ["hello", "world", 1, 4, "test"] Atharva // // vowelCount("hello world this is something") => 8 // Sumit // swapKV({name: "John Doe", age: 20, hello: "world"}) => {"John Doe": "name", 20: "age", world: "hello"} // Sanjeev // reverseString("hello world") => "dlrow olleh" // Apeksha // capitalize("hello world this is something") => "Hello World This Is Something" // Saurabh // secondLargestNumber([12,23434,2,1,2,4,5,2323,23]) => 2323 // Atul ///INDEX.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>My Web Page</title> <style> /* h2 { color: red; } */ /* .todo { color: green; font-size: 30px; font-weight: bold; } .done { color: lightgray; text-decoration: line-through; font-weight: normal; } */ </style> </head> <body> <button>Click me</button> <h1>My Web Page</h1> <div id="root"></div> <!-- <p class="special"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, consectetur. <script> console.log('HELLO WORLD!'); </script> </p> --> <p class="info"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint, ratione. </p> <p id="special"> <a href="https://google.com">This is google</a>. Lorem ipsum dolor sit amet consectetur <strong>adipisicing</strong> elit. Nobis animi maxime ipsum, dolore molestiae nam vero, sequi doloremque quis velit rem cumque atque, neque libero tempora. Impedit asperiores ipsam ratione. </p> <p class="info"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil, soluta? </p> <ul> <li class="todo done"> 1. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis, possimus. </li> <li class="todo"> 2. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis, possimus. </li> <li class="todo done"> 3. Lorem ipsum dolor sit amet consectetur ad possimus. </li> <li class="todo done"> 3. Lorem ipsum dolor sit amet consectetur ad possimus. </li> <li class="todo">3. Lorem ipsum dolor mus.</li> <li class="todo"> 3. Lorem ipsum dolor sit amet consectetur ad possimus. </li> <li class="todo"> 3. Lorem ipsum dolor sit amet consectetur ad possimus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi similique vero animi earum minima magnam recusandae facilis facere assumenda. Animi? </li> </ul> <script src="./scratchpad_5.js"></script> </body> </html> //todo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>My Task Manager</title> </head> <body> <h1>My Task Manager</h1> <h3>Add new Task</h3> <input type="text" placeholder="Enter task to complete" /> <button>Add</button> <hr /> <h3>All Tasks</h3> <ul id="tasksList"></ul> <script src="./scratchpad_5.js"></script> </body> </html>
Scratchpad #7 and React
// // // function add(a, b) { // // // return a + b; // // // } // // // const result = add(10, 20); // // // console.log(result); // // // console.log('Hello World'); // // // fetch('https://swapi.dev/api/peasdasdople') // // // .then((res) => { // // // if (!res.ok) { // // // throw new Error(); // // // } // // // const data = res.json(); // // // return data; // // // }) // // // .then((data) => { // // // console.log(data); // // // }) // // // .catch((err) => { // // // console.log('In the catch block\n', err); // // // }); // // // axios // // // .get('https://swapi.dev/api/people') // // // .then((response) => { // // // // console.log(response); // // // const film = response.data.results[0].films[0]; // // // return axios.get(film); // // // }) // // // .then((response) => { // // // console.log(response.data); // // // }) // // // .catch((err) => { // // // console.log('In the catch block\n', err); // // // }); // // const root = document.querySelector('#root'); // // const container = document.createElement('section'); // // container.style.display = 'grid'; // // container.style.gridTemplateColumns = '1fr 1fr 1fr 1fr 1fr 1fr'; // // container.style.gap = '40px'; // // axios // // .get('https://pokeapi.co/api/v2/pokemon?limit=100000') // // .then(({ data }) => { // // for (let pokemon of data.results) { // // axios.get(pokemon.url).then(({ data }) => { // // const pokemonCard = document.createElement('div'); // // pokemonCard.style.display = 'flex'; // // pokemonCard.style.flexDirection = 'column'; // // pokemonCard.style.justifyContent = 'center'; // // pokemonCard.style.alignItems = 'center'; // // const pokemonName = document.createElement('p'); // // pokemonName.innerText = data.name; // // pokemonName.style.fontFamily = 'Arial, sans-serif'; // // pokemonName.style.fontWeight = 'bold'; // // pokemonName.style.textTransform = 'capitalize'; // // const pokemonImg = document.createElement('img'); // // pokemonImg.src = data.sprites.other['official-artwork'].front_default; // // pokemonImg.style.width = '100%'; // // pokemonCard.append(pokemonImg, pokemonName); // // container.append(pokemonCard); // // }); // // } // // }) // // .catch((err) => { // // console.log(err); // // }); // // root.append(container); // // function fetchData() { // // const response = axios.get('https://pokeapi.co/api/v2/pokemon'); // // response.then((data) => { // // console.log(data); // // }); // // } // // fetchData(); // // async function greet() { // // throw 'Hello World'; // // } // // // function greet() { // // // return new Promise((resolve, reject) => { // // // resolve('Hello World'); // // // }); // // // } // // greet() // // .then((data) => { // // console.log('In the then block', data); // // }) // // .catch((err) => { // // console.log('In the catch block', err); // // }); // // async function add(x, y) { // // if (typeof x !== 'number' || typeof y !== 'number') { // // throw 'x and y must be numbers'; // // } // // return x + y; // // } // // add(10, '5') // // .then((result) => { // // console.log(result); // // }) // // .catch((err) => { // // console.log(err); // // }); // // async function fetchData() { // // try { // // const response = await axios.get('https://pokeapi.co/api/v2/pokemon'); // // console.log(response); // // } catch (err) { // // console.log('In the catch block', err); // // } // // } // // fetchData(); // // fetchData().catch((err) => { // // console.log('In the catch block', err); // // }); // async function fetchData() { // const pokemon1Promise = axios.get('https://swapi.dev/api/people/1'); // const pokemon2Promise = axios.get('https://swapi.dev/api/people/2'); // const pokemon3Promise = axios.get('https://swapi.dev/api/people/3'); // const results = await Promise.all([ // pokemon1Promise, // pokemon2Promise, // pokemon3Promise, // ]); // console.log(results); // // const pokemon1 = await pokemon1Promise; // // const pokemon2 = await pokemon2Promise; // // const pokemon3 = await pokemon3Promise; // // console.log(pokemon1.data); // // console.log(pokemon2.data); // // console.log(pokemon3.data); // } // fetchData(); // function initializeDeck() { // const deck = []; // const suits = ['hearts', 'diamonds', 'spades', 'clubs']; // const values = '2,3,4,5,6,7,8,9,10,J,Q,K,A'; // for (let value of values.split(',')) { // for (let suit of suits) { // deck.push({ value, suit }); // } // } // return deck; // } // function drawCard(deck, drawnCards) { // const card = deck.pop(); // drawnCards.push(card); // return card; // } // function drawMultiple(numCards, deck, drawnCards) { // const cards = []; // for (let i = 0; i < numCards; i++) { // cards.push(drawCard(deck, drawnCards)); // } // return cards; // } // function shuffle(deck) { // // loop over array backwards // for (let i = deck.length - 1; i > 0; i--) { // // pick random index before current element // let j = Math.floor(Math.random() * (i + 1)); // [deck[i], deck[j]] = [deck[j], deck[i]]; // } // return deck; // } // const deck1 = initializeDeck(); // const hand = []; // shuffle(deck1); // drawCard(deck1, hand); // drawCard(deck1, hand); // drawMultiple(3, deck1, hand); // console.log(deck1); // console.log(hand); // const makeDeck = () => { // return { // deck: [], // drawnCards: [], // suits: ['hearts', 'diamonds', 'spades', 'clubs'], // values: '2,3,4,5,6,7,8,9,10,J,Q,K,A', // initializeDeck() { // for (let value of this.values.split(',')) { // for (let suit of this.suits) { // this.deck.push({ value, suit }); // } // } // return this.deck; // }, // drawCard() { // const card = this.deck.pop(); // this.drawnCards.push(card); // return card; // }, // drawMultiple(numCards) { // const cards = []; // for (let i = 0; i < numCards; i++) { // cards.push(this.drawCard()); // } // return cards; // }, // shuffle() { // const { deck } = this; // for (let i = deck.length - 1; i > 0; i--) { // let j = Math.floor(Math.random() * (i + 1)); // [deck[i], deck[j]] = [deck[j], deck[i]]; // } // }, // }; // }; // const deck1 = makeDeck(); // const deck2 = makeDeck(); // // deck1.initializeDeck(); // // deck1.shuffle(); // // deck1.drawCard(); // console.log(deck1); // console.log(deck2); class Person { constructor(firstName, lastName, age) { this.firstName = firstName; this.lastName = lastName; this.age = age; } greet() { console.log( `Hello, my name is ${this.firstName} ${this.lastName} and I am ${this.age} years old` ); } } // function Person(firstName, lastName, age) { // this.firstName = firstName; // this.lastName = lastName; // this.age = age; // // this.greet = function () { // // console.log( // // `Hello, my name is ${this.firstName} ${this.lastName} and I am ${this.age} years old` // // ); // // }; // } // Person.prototype.hello = 'World'; // Person.prototype.greet = function () { // console.log( // `Hello, my name is ${this.firstName} ${this.lastName} and I am ${this.age} years old` // ); // }; // function person(firstName, lastName, age) { // return { // firstName, // lastName, // age, // greet() { // console.log( // `Hello, my name is ${this.firstName} ${this.lastName} and I am ${this.age} years old` // ); // }, // }; // } const john = new Person('John', 'Doe', 20); const jane = new Person('Jane', 'Smith', 22); const jack = new Person('Jack', 'Ma', 35); // const jack = { // firstName: 'Jack', // lastName: 'Ma', // age: 34, // greet() { // console.log( // `Hello, my name is ${this.firstName} ${this.lastName} and I am ${this.age} years old` // ); // }, // }; console.log(john); console.log(jane); console.log(jack); // TODO.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>My Task Manager</title> </head> <body> <h1>My Task Manager</h1> <h3>Add new Task</h3> <input type="text" placeholder="Enter task to complete" /> <button>Add</button> <hr /> <h3>All Tasks</h3> <ul id="tasksList"></ul> <script src="./scratchpad_5.js"></script> </body> </html> // FETCH.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div id="root"></div> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="./scratchpad_7.js"></script> </body> </html> // REACT <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>ReactJS</title> </head> <body> <div id="root"></div> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <script src="https://unpkg.com/react@^16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@^16/umd/react-dom.development.js"></script> <script type="text/babel"> // const root = document.querySelector('#root'); // const h1 = document.createElement('h1'); // h1.innerText = 'Hello World from the DOM.'; // root.append(h1); // const title = React.createElement('h1', { // id: 'helloworld', // className: 'test', // children: 'Hello World from ReactJS', // }); // const para = React.createElement('p', null, 'This is a paragraph.'); // const container = React.createElement('div', { children: [title, para] }); // const container = React.createElement( // 'div', // null, // React.createElement('h1', null, 'Hello World'), // React.createElement('p', null, 'This is a paragraph') // ); // const title = React.createElement('h1', {className: 'special'}, 'Hello World from ReactJS'); // const title = <div><h1 className="special">{new Date().toUTCString()}</h1></div>; // const children = 'Hello World. This is the page title'; // const className = 'title'; // const props = { children, className }; // const para = <p {...props} className='helloworld' />; function Post({ title, date, author, children, link, highlight }) { return ( <div style={{ backgroundColor: highlight ? 'yellow' : 'white' }}> <h3>{title}</h3> <p> Published on {date} by {author} </p> <p>{children}</p> <a href={link}>Read More</a> </div> ); } const posts = ( <section> <Post title='Article #666' author='Jane Doe' date='23rd June, 2023'> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit, ipsam. </Post> <Post title='Article #666' author='Jane Doe' date='23rd June, 2023' highlight> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit, ipsam. </Post> </section> ); // const posts = ( // <section> // <Post title='Article #666' author='Jane Doe' date='23rd June, 2023'> // Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit, // ipsam. // </Post> // {React.createElement(Post, { // title: 'Article #99', // author: 'John Doe', // date: '23rd July, 2023', // children: // 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit, ipsam.', // link: '#', // })} // {Post({ // title: 'Article #1', // author: 'John Doe', // date: '23rd July, 2023', // children: // 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit, ipsam.', // link: '#', // })} // {Post({ // title: 'Article #1', // author: 'John Doe', // date: '23rd July, 2023', // children: // 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit, ipsam.', // link: '#', // })} // </section> // ); // const container = ( // <> // <p style={{ color: 'white', backgroundColor: 'gray' }}> // Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, // laborum! // </p> // <p> // Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, // laborum! // </p> // </> // ); ReactDOM.render(posts, document.querySelector('#root')); </script> </body> </html>