Full Stack Morning (12)

Full Stack Morning (12)

JS Scratchpad #3

// let age = 21;

// if (age > 18) {
//   console.log('Entry Granted!');
// }

// console.log(1000 + 100);

// let num = 32;

// if (num % 2 !== 0) {
//   console.log('ODD');
// }

// if (num % 2 === 0) {
//   console.log('EVEN');
// }

// let num = 35;

// if (num % 2 !== 0) {
//   console.log('ODD');
// } else if (num % 2 === 0) {
//   console.log('EVEN');
// }

// let age = 67;

// if (age > 18) {
//   console.log('Entry Granted!');
// } else if (age >= 21) {
//   console.log('Drinks Allowed');
// } else if (age >= 65) {
//   console.log('Drinks FREE!');
// } else {
//   console.log('ENTRY DENIED!');
// }

// let num = 13;

// if (num % 2 !== 0) {
//   console.log('ODD');
// } else {
//   console.log('EVEN');
// }

// let age = 20;

// if (age > 18) {
//   if (age >= 65) {
//     console.log('Drinks FREE!');
//   } else if (age >= 21) {
//     console.log('Drinks Allowed');
//   } else {
//     console.log('Entry Granted!');
//   }
// } else {
//   console.log('NO ENTRY');
// }

// let isLoggedIn;

// // let name = -45;

// if (isLoggedIn) {
//   console.log('Hello!');
// } else {
//   console.log('Please login');
// }

// let loggedInUser = 10;

// if (loggedInUser) {
//   console.log('Please log in');
// } else {
//   console.log(`Welcome ${loggedInUser}`);
// }

let age = 100;
let city = 'delhi';

if (age >= 18 && age < 21 && city !== 'delhi') {
  console.log('Entry Granted!');
} else if (age >= 21 && age < 65 && city !== 'delhi') {
  console.log('Drinks Allowed');
} else if (age >= 65 && city !== 'delhi') {
  console.log('Drinks FREE!');
} else {
  console.log('ENTRY DENIED!');
}

if (city === 'delhi') {
  console.log('ENTRY DENIED!');
} else if (age >= 18 && age < 21) {
  console.log('Entry Granted!');
} else if (age >= 21 && age < 65) {
  console.log('Drinks Allowed');
} else if (age >= 65) {
  console.log('Drinks FREE!');
} else {
  console.log('ENTRY DENIED!');
}

JS Scratchpad #4

// let day = 2;

// switch (day) {
//   case 1:
//   case 2:
//   case 3:
//     console.log('HELLO WORLD');
//     break;
//   case 4:
//     console.log('THURSDAY');
//     break;
//   case 5:
//     console.log('FRIDAY');
//     break;
//   case 6:
//     console.log('SATURDAY');
//     break;
//   case 7:
//     console.log('SUNDAY');
//     break;
//   default:
//     console.log('INVALID DAY');
// }

// let num = 'nsdkjnasdlkj';

// num === 7 ? console.log('LUCKY') : console.log('UNLUCKY');

// if (num === 7) {
//   console.log('LUCKY');
// } else {
//   console.log('UNLUCKY');
// }

// let status = 'Offline'.toLowerCase();

// let color =
//   status === 'offline' ? 'red' : status === 'inactive' ? 'yellow' : 'green';

// // console.log(color);

// let status = 'inactive';
// let color;

// if (status === 'offline') {
//   color = 'red';
// } else if (status === 'inactive') {
//   color = 'yellow';
// } else {
//   color = 'green';
// }

// console.log(color);

// let s = [10 < 5]

let search = 'Predator';
const currentlyPlaying = ['Alien', 'Mad Max', 'Inception', 'Predator'];

if (currentlyPlaying.includes(search)) {
  console.log(`${search} is playing in theatres around you. Book now?`);
} else {
  console.log('Ye kya hai');
}

JS Scratchpad #5

// const allProducts = [];

// // products (array)
// const iPhone = ['Apple iPhone 14', 200000, 'Apple', 'gold', 4, 512];
// const onePlus = [56000, 'One Plus 9', 'One Plus', 'silver', 5, 128];

// const iPhone = {
//   0: 'Apple iPhone 14',
//   1: 20000,
//   2: 'asdsad',
// };

// const iPhone = {
//   name: 'Apple iPhone 14',
//   price: 200000,
//   brand: 'Apple',
//   color: 'gold',
//   rating: 4,
//   45: 512,
//   'avg lifetime': 2,
// };

// const onePlus = {
//   storage: 128,
//   color: 'silver',
//   brand: 'One Plus',
// };

// allProducts.push(iPhone, onePlus);

// console.log(allProducts);

// iPhone[0];
// iPhone[1];
// iPhone[3];

// const users = [];

// const user1 = {
//   firstName: 'John',
//   lastName: 'Doe',
//   age: 25,
//   phone: null,
//   address: {
//     city: 'Mumbai',
//     state: 'Maharastra',
//     streetName: 'Matunga',
//   },
//   favItems: [
//     {
//       name: 'Apple iPhone 14',
//       price: 200000,
//       brand: 'Apple',
//       color: 'gold',
//       rating: 4,
//       45: 512,
//       'avg lifetime': 2,
//     },
//     {
//       storage: 128,
//       color: 'silver',
//       brand: 'One Plus',
//     },
//   ],
// };

// const pallette = {
//   red: '#eb4d4b',
//   yellow: '#f9ca24',
//   blue: '#30336b',
// };

// let color = 'green';

// console.log(pallette[color]);

// const fitnessData = {
//   totalSteps: 400000,
//   totalKms: 253.32,
//   avgCalorieBurn: 2300,
//   workoutsThisWeek: '5 of 7',
//   avgSleep: '5:45',
// }

// // Adding new property
// fitnessData.BPM = 98
// fitnessData['progress'] = 'Good'

// // Updating Properties
// fitnessData.workoutsThisWeek = '7 of 7'
// fitnessData.totalKms += 10
// fitnessData.totalSteps++

// const nums = [12, 34, 56, 34, 78, 54, 23, 12];

// for (let i = 0; i < nums.length; i++) {
//   console.log(`The value at index ${i} is ${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++) {
//   // let movie = movies[i];
//   // console.log(`Movie Name: ${movie.movieName}\nRating: ${movie.rating}`);

//   console.log(
//     `Movie Name: ${movies[i].movieName}\nRating: ${movies[i].rating}`
//   );
// }

// const word = 'Hello World';

// // for (let i = 0; i < word.length; i++) {
// //   console.log(word[i]);
// // }

// let reversedWord = '';

// for (let i = word.length - 1; i >= 0; i--) {
//   reversedWord += word[i];
//   // console.log(word[i]);
// }

// console.log(reversedWord);

// for (let i = 1; i <= 10; i++) {
//   console.log('OUTER LOOP: ', i);

//   for (let j = 10; j >= 0; j -= 2) {
//     console.log('   INNER LOOP', j);
//   }
// }

// OUTER LOOP: 1
//    INNER LOOP: 10
//    INNER LOOP: 8
//    INNER LOOP: 6
//    INNER LOOP: 4
//    INNER LOOP: 2
//    INNER LOOP: 0
// OUTER LOOP: 2

const gameBoard = [
  [4, 64, 8, 4],
  [128, 32, 4, 16],
  [16, 4, 4, 32],
  [2, 16, 16, 2],
];

let total = 0;

for (i = 0; i < gameBoard.length; i++) {
  for (j = 0; j < gameBoard[i].length; j++) {
    total += gameBoard[i][j];
  }
}
console.log(total);

JS Scratchpad #6

// let day = 'Hello World';

// switch (day) {
//   case 1:
//     console.log('MONDAY');
//     break;
//   case 2:
//     console.log('TUESDAY');
//     break;
//   case 'Hello World':
//     console.log('WEDNESDAY');
//     break;
//   case 4:
//     console.log('THURSDAY');
//     break;
//   case 5:
//     console.log('FRIDAY');
//     break;
//   case 6:
//     console.log('SATURDAY');
//     break;
//   case 7:
//     console.log('SUNDAY');
//     break;
//   default:
//     console.log('INVALID DAY');
// }

// let num = -1;

// num === 7 ? console.log('LUCKY') : console.log('UNLUCKY');

// for (let i = 1; i <= 10; i++) {
//   console.log('OUTER LOOP: ', i);

//   for (let j = 10; j >= 0; j -= 2) {
//     console.log('   INNER LOOP', j);
//   }
// }

let characters = 'abcdefghijklmnopqrstuvwxyz';

Scratchpad #7

// 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() * 100) + 1;
// let guess = Math.floor(Math.random() * 100) + 1;

// while (guess !== target) {
//   console.log(`Target: ${target} | Guess: ${guess}`);
//   guess = Math.floor(Math.random() * 100) + 1;
// }

// console.log(`\nGame over! \nTarget: ${target} | Guess: ${guess}`);

// Ex 2
// const target = Math.floor(Math.random() * 100) + 1;
// let guess = Math.floor(Math.random() * 100) + 1;

// while (guess !== target) {
//   if (guess === 13) {
//     console.log('13 is an unlucky number.\nBreaking out of this loop.');
//     break; // manually break out of the loop
//   }

//   console.log(`Target: ${target} | Guess: ${guess}`);
//   guess = Math.floor(Math.random() * 100) + 1;
// }

// console.log(`\nGame over!\nTarget: ${target} | Guess: ${guess}.`);

// Ex 3
// const target = Math.floor(Math.random() * 100) + 1;
// let guess = Math.floor(Math.random() * 100) + 1;

// // true -> loop forever
// while (true) {
//   console.log(`Target: ${target} | Guess: ${guess}`);

//   if (target === guess) {
//     break; // break out of the loop when condition is true
//   }

//   guess = Math.floor(Math.random() * 100) + 1;
// }

// console.log(`\nGame over!\nTarget: ${target} | Guess: ${guess}.`);

// let categories = [
//   'fashion',
//   'electronics',
//   'mobiles',
//   'books',
//   'toys',
//   'groceries',
// ];

// for (let i = 0; i < categories.length; i++) {
//   console.log(categories[i]);
// }

// for (let category of categories) {
//   console.log(category);
// }

// for (let char of 'hello') {
//   console.log(char.toUpperCase());
// }

// const matrix = [
//   [3, 4, 7],
//   [9, 7, 2],
//   [9, 4, 6],
// ];

// let total = 0;

// for (let row of matrix) {
//   for (let num of row) {
//     console.log(num);
//     total += num;
//   }
// }

// console.log(total);

// const cats = ['fashion', 'mobiles', 'books'];
// const prods = ['tshirt', 'samsung', '1984', 'extra'];

// for (let i = 0; i < cats.length; i++) {
//   console.log(cats[i], prods[i]);
// }

// const productPrices = {
//   Apple: 80000,
//   OnePlus: 50000,
//   Samsung: 90000,
// };

// console.log(productPrices.length);

// for (let product of Object.keys(productPrices)) {
//   console.log(`You can buy a ${product} for ${productPrices[product]}`);
// }

// const prices = Object.values(productPrices);

// let total = 0;
// for (price of prices) {
//   total = total + price;
// }
// console.log(total);

// const movieRating = {
//   pursuitOfHappiness: 4.8,
//   satya: 4.8,
//   gangsOfWasepur: 4,
//   robot: -3,
// };

// let total = 0;

// for (let movie in movieRating) {
//   // console.log(movie)
//   console.log(`${movie} has a rating of ${movieRating[movie]}`);
//   total += movieRating[movie];
// }

// console.log(total);

// Named function
// function greet() {
//   console.log('Hey there!');
//   console.log('How are you?');
// }

// greet();
// greet();
// greet();
// greet();
// greet();
// greet();
// greet();

// // Another Example
// function rollDie() {
//   let roll = Math.floor(Math.random() * 6) + 1;
//   console.log(`Rolled: ${roll}`);
// }
// // rollDie();

// function throwDice() {
//   rollDie();
//   rollDie();
//   rollDie();
//   rollDie();
// }

// throwDice();

// // Function with a parameter
// function greet(name, age) {
//   if (typeof name === 'string' && typeof age === 'number') {
//     console.log(`How are you, ${name}. You are ${age} years old`);
//   } else {
//     console.log('Please enter values of correct types.');
//   }
// }

// greet('John', 25); // How are you, John
// greet('Jack', 27); // How are you, Jack
// greet('100', 'hello');
// greet([1, 2, 3, 4], true);

// function add(a, b, c) {
//   console.log(a + b + c);
// }

// // add(10, 20, '100');
// add('John', 'Doe');

// function add(b, bro) {
//   console.log(b + bro);
// }

// // add(10, 20, '100');
// add('John', 'Doe');

// function rollDie() {
//   let roll = Math.floor(Math.random() * 6) + 1;
//   console.log(`Rolled: ${roll}`);
// }

// function throwDice(times) {
//   for (let i = 0; i < times; i++) {
//     rollDie();
//   }
// }

// throwDice(4);

// function add(a, b) {
//   console.log(a + b);
//   return a + b;
// }

// console.log(add(10, 15) + 100);

// function isNumber(val) {
//   if (typeof val !== 'number') {
//     return false;
//   } else {
//     return true;
//     // console.log('Hello World');
//   }
// }

// let res1 = isNumber(20);
// console.log(res1);
// let res2 = isNumber('hello');

// console.log(res1, res2);

// function greet(name, age) {
//   if (typeof name === 'string' && isNumber(age)) {
//     console.log(`How are you, ${name}. You are ${age} years old`);
//   } else {
//     console.log('Please enter values of correct types.');
//   }
// }

// greet('John Doe', 25);

let chars = 'abcdefghijklmnopqrstuvwxyz';
let i = 0;
for (let char of chars) {
  console.log(i, char);
  i++;
}

Scratchpad #8

// // definition
// function add(a, b) {
//   return a + b;
// }

// console.log(add(10, 10));

// let fullName = 'John Doe';

// function greet() {
//   let fullName = 'Jack Doe';
//   console.log(fullName);
// }

// function ungreet() {
//   let fullName = 'Jane Ma';
//   console.log(fullName);
// }

// for (let i = 0; i < 10; i++) {
//   let fullName = 'jane doe';
//   console.log(fullName);
// }

// greet();
// ungreet();
// console.log(fullName);

// let first_name = 'Jack';
// let last_name = 'Ma';

// if (true) {
//   var first_name = 'John';
//   var last_name = 'Doe';
//   console.log(first_name + ' ' + last_name);
// }

// console.log(first_name + ' ' + last_name);

// var i = 0;

// for (; i < 10; i++) {
//   console.log(i);
// }

// for (; i < 100; i++) {
//   console.log(i);
// }

// console.log(i);

// console.log(i + 100);

// function ungreet() {
//   var fullName = 'Jane Ma';
//   console.log(fullName);
// }

// ungreet();

// console.log(fullName);

// function outer(movie) {
//   // let movie = 'Avengers';

//   // nested function
//   function inner() {
//     // let movie = 'Robot';
//     let ratings = `${movie} has a rating of 3`;
//     console.log(ratings);
//   }

//   // console.log(ratings);

//   inner();
// }

// outer('Krish');

// // function expression or anonymous function
// const square = function (num) {
//   return num * num;
// };

// // console.log(square(10));

// const myArr = [
//   function (num) {
//     return num * num * num;
//   },
//   function (num) {
//     return num * num;
//   },
// ];

// console.log(myArr[0](40));
// console.log(myArr[1](40));

// const product = function (x, y) {
//   return x * y;
// };

// console.log(product(45, 68));

// function add(x, y) {
//   return x + y;
// }

// const sub = function (x, y) {
//   return x - y;
// };

// const mul = function (x, y) {
//   return x * y;
// };

// function div(x, y) {
//   return x / y;
// }

// console.log(add, sub, mul, div(10, 2));

// const operations = [add, sub, mul, div];

// console.log(operations[0]); // [Function: add]
// console.log(operations[0](10, 23));
// console.log(operations[2](10, 4));

// for (let op of operations) {
//   let result = op(10, 2);
//   console.log(result);
// }

// const operations = {
//   add: function (a, b) {
//     return a + b;
//   },
//   sub: function (a, b) {
//     return a - b;
//   },
//   multipy: mul,
// };

// console.log(operations.add(10, 20));
// console.log(operations.sub(10, 20));
// // console.log(operations.multipy(10, 20));

// function multipleGreets(fn, fn2) {
//   fn();
//   fn();
//   fn();
//   fn2();
// }

// function sayHello() {
//   console.log('Hello World!');
// }

// // multipleGreets(sayHello);

// multipleGreets(function () {
//   console.log('GOODBYE!');
// }, sayHello);

// 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);

// function randomPick(f1, f2) {
//   let randNum = Math.random();

//   if (randNum < 0.5) {
//     f1();
//   } else {
//     f2();
//   }
// }

// randomPick(sayHello, sayGoodbye);

function raiseBy(num) {
  return function (x) {
    return x ** num;
  };
}

let square = raiseBy(2);
let cube = raiseBy(3);
let tesseract = raiseBy(4);

console.log(square(2));
console.log(cube(2));
console.log(tesseract(2));

Scratchpad #9

// function multipleGreets(fn) {
//   fn();
//   fn();
//   fn();
// }

// function sayHello() {
//   console.log('Hello World');
// }

// multipleGreets(sayHello);

// // const myFn = function () {
// //   console.log('Good bye');
// // }
// // myFn()

// multipleGreets(function () {
//   console.log('Good bye');
// });

// console.log('Starting...');

// function logHello() {
//   console.log('Welcome World!');
// }

// setTimeout(logHello, 2000);

// setTimeout(function () {
//   let num1 = 10;
//   let num2 = 20;
//   console.log(num1 + num2);
// }, 5000);

// console.log('Finished');

// var person = 'John';

// console.log(person);
// console.log(age);
// console.log(job);

// var person = 'John';
// var age = 25;
// var job = 'Programmer';

// let person = 'John';
// let age = 25;
// let job = 'Programmer';

// const nums = [9, 2, 4, 6, 2, 3, 7, 6];

// console.log(nums.length);

// nums.forEach(function (n) {
//   console.log(`${n} time gaali`);
//   console.log(n * n);
// });

// for (let n of nums) {
//   console.log(n * n * n * n);
// }

// nums.forEach(function (el) {
//   if (el % 2 === 0) {
//     console.log(el);
//   }
// });

// const movies = [
//   {
//     title: 'Avengers',
//     rating: 4.1,
//   },
//   {
//     title: 'Dr. Strange',
//     rating: 3.9,
//   },
//   {
//     title: 'Tenet',
//     rating: 4.3,
//   },
//   {
//     title: 'Joker',
//     rating: 4.7,
//   },
// ];

// using forEach method
// movies.forEach(function (movie) {
//   console.log(movie.title.toUpperCase());
// });

// for (let movie of movies) {
//   console.log(movie.title.toLowerCase());
// }

// movies.forEach(function (movie, idx) {
//   console.log(idx, movie.title);
// });

// const moviesUppercase = [];

// // for (let movie of movies) {
// //   moviesUppercase.push(movie.title.toUpperCase());
// //   // console.log(movie.title.toLowerCase());
// // }

// movies.forEach(function (movie) {
//   moviesUppercase.push(movie.title.toUpperCase());
// });

// console.log(moviesUppercase);

// const names = ['john', 'jack', 'jane', 'james'];

// const namesCapped = names.map(function (name) {
//   // console.log(name.toUpperCase());
//   return name.toUpperCase();
// });

// console.log(namesCapped);
// // ['JOHN', 'JACK', 'JANE', 'JAMES']

// const moviesUppercase = [];

// for (let movie of movies) {
//   moviesUppercase.push(movie.title.toUpperCase());
// }

// movies.forEach(function (movie) {
//   moviesUppercase.push(movie.title.toUpperCase());
// });

// const moviesUppercase = movies.map(function (movie) {
//   return movie.title.toUpperCase();
// });

// console.log(moviesUppercase);

// 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; // we have to return a value
// });
// console.log(doubles);

// const numDetails = nums.map(function (num) {
//   return {
//     number: num,
//     isEven: num % 2 === 0,
//   };
// });

// console.log(numDetails);

// ----------------------

// // named function
// function square(x) {
//   return x * x;
// }

// // function expression
// const square = function (x) {
//   return x * x
// }

// // // arrow function
// // const square = x => {
// //   return x * x;
// // };

// // const square = () => {
// //   return 'Hello';
// // };

// const sq = x => x * x

// // console.log(square(5));
// console.log(sq(10))

// const nums = [2, 3, 4, 7, 6, 8, 13, 10, 19, 12, 14, 22, 21, 16];

// const doubles = nums.map((num) => {
//   return num * 2;
// });

// console.log(doubles);

// 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
// })

// const triples = nums.map(x => x ** 3)

// console.log(doubles)
// console.log(triples)

const nums = [1, 2, 3, 4, 5, 6];

// const doubles3 = nums.map((n) => n * 2);

const parityList = nums.map(n => (n % 2 === 0 ? 'Even' : 'Odd'));

const parityList = [];
for (let n of nums) {
  if (n % 2 === 0) {
    parityList.push('Even');
  } else {
    parityList.push('Odd');
  }
}

console.log(parityList);

Scratchpad #10

// let movies = ['The Terminator', 'The Avengers', 'Jurassic Park', 'Titanic'];

// let movie1 = movies.find((movie) => {
//   return movie.includes('Avenge');
// });

// let movie2 = movies.find((movie) => movie.includes('Park'));

// let movie3 = movies.find((m) => m.indexOf('A') === 0);

// console.log(movie1);
// console.log(movie2);
// console.log(movie3);

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,
  },
  {
    title: 'Two States',
    author: 'Chetan Bhagat',
    rating: 5,
  },
];

// const goodBook = books.find((book) => book.rating >= 4.3);

// const lowRated = books.find((book) => {
//   return book.rating < 4;
// });

// console.log(goodBook);
// console.log(books.find((b) => b.author.includes('George')));
// console.log(lowRated);

// // const lowRated = books.find(function (book) {
// //   return book.rating < 4;
// // });

// books.find((book) => book.rating < 4)

// const nums = [9, 8, 3, 4, 6, 12, 17, 23, 0];

// const odds = nums.filter((n) => n % 2 === 1);

// const odds = nums.filter((n) => n === 0);
// const odds = nums.find((n) => n === 0);

// const odd = nums.find((n) => n % 2 === 1);

// console.log(odds);
// console.log(odd);

// const bigNums = nums.filter((n) => n > 10);
// console.log(bigNums);

// const goodBooks = books.filter((b) => b.rating >= 4.3);

// const georgeBooks = books.filter((b) => b.author.includes('George'));

// const lowRated = books.filter((book) => book.rating < 4);

// console.log(goodBooks);
// console.log(georgeBooks);
// console.log(lowRated);

// let query = 'Alch';

// const filteredBooks = books.filter((book) => {
//   const title = book.title.toLowerCase();
//   return title.includes(query.toLowerCase());
// });

// console.log(filteredBooks);

// const names = ['jack', 'james', 'john', 'jana', 'josh', 'brad'];

// console.log(names.every((word) => word[0] === 'j'));

// console.log(names.every((word) => word.length > 3));

// let result = names.every((w) => {
//   let lastChar = w[w.length - 1];
//   return lastChar !== 'a';
// });

// console.log(result);

// const bestBooks = books.every((book) => book.rating >= 3);

// console.log(bestBooks);

// const notAuthor = books.every(
//   (book) => book.author.toLowerCase() !== 'chetan bhagat'
// );

// console.log(notAuthor);

// const names = ['jack', 'james', 'john', 'jane', 'josh', 'brad'];

// const res = names.some((word) => {
//   return word[0] === 'b';
// });

// console.log(res);

// const prices = [500.4, 211, 23, 5, 4, 22.2, -23.2, 9233];

// // console.log(prices.sort());

// // lowest to highest
// // console.log(prices.sort((a, b) => a - b));

// // console.log(prices.sort((a, b) => b - a));

// console.log(books.sort((a, b) => b.rating - a.rating));

// console.log(books);

// const nums = [3, 2, 4, 6, 9, 10];

// const res = nums.reduce((acc, currVal) => {
//   return acc - currVal;
// });

// console.log(res);

// 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);

// const maxVal = nums.reduce((max, currVal) => Math.max(max, currVal));

// console.log(maxVal);

// const nums = [3, 2, 4, 6, 9];

// const res = nums.reduce((acc, currVal) => {
//   return acc + currVal;
// }, 1000);

// console.log(res);

// const multiply = (x = 1, y = 1) => {
//   return x * y;
// };

// const multiply = (x, y) => {
//   if (typeof y === 'undefined') {
//     y = 1;
//   }
//   y = typeof y === 'undefined' ? 1 : y;

//   return x * y;
// };

// console.log(multiply(8, 5));

const greet = (name = 'Ukn', msg) => {
  console.log(`${msg}, ${name}`);
};

// greet('John', 'Hey'); // "Hey John"
// greet(); // "Hi Ukn"
greet('hello'); // "Hi John"

Scratchpad #11

let age = 99;

let welcome = age < 18 ? () => console.log('Baby') : () => console.log('Adult');

welcome();

Scratchpad #12

// function printVals(a, b, c) {
//   console.log(a);
//   console.log(b);
//   console.log(c);
// }

// const names = ['john', 'jack', 'jane', 'brad', 'tom', 45, true, 'gaali'];
// const name = 'john';

// // printVals(names);

// // printVals(['john', 'jack', 'jane'], undefined, undefined);

// // printVals(...names);

// // printVals('john', 'jack', 'jane');

// // printVals(...names);

// printVals(...name);

// const moderator = { canEdit: true, authority: 5 };
// const user = { canView: true, authority: 2.5 };

// const admin = { ...moderator, access: 'GROUP' };

// function add(x, y) {
//   return x + y;
// }

// console.log(add(10, 45, 50));

// console.log(Math.max(10, 45, 32, 67, 4, 4500));

// const addAll = (...nums) => nums.reduce((acc, curr) => acc + curr);

// console.log(addAll(10, 45, 32, 67, 89, 100, 200));

// function printNames(name1, name2, name3, ...others) {
//   console.log(name1);
//   console.log(name2);
//   console.log(name3);
//   console.log(others);
// }

// printNames('john', 'jane', 'jack', 'josh', 'james', 'jamie');

// const user = {
//   firstName: 'John',
//   lastName: 'Doe',
//   email: 'john.doe@gmail.com',
//   phone: 99982234567,
// };

// const firstName = user.firstName;
// const lastName = user.lastName;
// const emailAddress = user.email;

// const { firstName, lastName, email: emailAddress } = user;
// console.log(firstName, lastName, emailAddress);

// const firstName = user.firstName;

// const { firstName, lastName, emailAddress, phone } = user;
// const { firstName, lastName, email, phone } = user;

// console.log(firstName, lastName, email);

// const { firstName, lastName, ...others } = user;

// console.log(firstName, lastName, others);

// console.log(others);

// const fullName = ({ firstName: first, lastName: last }) => {
//   return `${first} ${last}`;
// };

// const fullName = ({ firstName, lastName }) => {
//   return `${firstName} ${lastName}`;
// };

// // const fullName = (obj) => {
// //   return `${obj.firstName} ${obj.lastName}`;
// // };

// const user = {
//   firstName: 'John',
//   lastName: 'Doe',
//   emailAddress: 'john.doe@gmail.com',
// };

// console.log(fullName({ firstName: 'Jane', lastName: 'Doe' }));

// 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;

// console.log(highest);
// console.log(lowest);
// console.log(average);

// const info = {
//   highest: highest,
//   lowest: lowest,
//   average: average,
// };

// const info = {
//   highest,
//   lowest,
//   averageRating: average,
// };

// const info = { highest, lowest, average };

// 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 res = getReviewDetails([4.5, 5.0, 3.2, 2.1, 4.7, 3.8, 3.1, 3.9, 4.4]);

// console.log(res);

function printVals(a, b, c) {
  console.log(a);
  console.log(b);
  console.log(c);
}
const names = ['john', 'jack', 'jane'];
const name = 'john';

// printVals(names); // incorrect behaviour
// printVals(...names); // works!
printVals(...name);

Scratchpad #13

// let fullName = 'John Doe';
// let role = 'Moderator';
// let label = 'age';
// let info = ['age', 25];

// const user = {
//   firstName: fullName.split(' ')[0],
//   lastName: fullName.split(' ')[1],
//   role: role.toUpperCase(),
//   [label]: info[1],
//   [info[1] * 100]: 'Test Value',
// };

// console.log(user);

// const addProperty = (obj, k, v) => {
//   return { ...obj, [k]: v };
// };

// const res = addProperty({ name: 'John' }, 'age', 25);

// console.log(res);

// const math = {
//   multiply: function (x, y) {
//     return x * y;
//   },
//   divide: function (x, y) {
//     return x / y;
//   },
//   subtract: function (x) {
//     return x - x;
//   },
// };

// const square = (x) => x * x;

// const math = {
//   PI: 3.14,
//   multiply: (x, y) => x * y, // method
//   divide: (x, y) => x / y, // method
//   subtract: (x, y) => x - y, // method
//   square,
// };

// console.log(math.square(5));
// console.log(square(5));

// // function
// const multiply = (x, y) => x * y;

// console.log(multiply(10, 5));
// console.log(math.subtract(10, 5));

// console.log(console);
// console.log(Math);

// const math = {
//   PI: 3.14,
//   multiply(x, y) {
//     return x * y;
//   },
//   divide(x, y) {
//     return x * y;
//   },
//   subtract(x, y) {
//     return x * y;
//   },
//   square,
// };

// console.log(math);
// console.log(math.multiply(10, 10));

// function sayHello() {
//   console.log('Hello World!');
//   // console.log(this.closed);
//   // console.log(window.closed);
//   function greet() {
//     console.log(this);
//   }
//   greet();
// }

// sayHello();

// const helloWorld = 'Hello World !!!!!';

// sayHello();

// window.sayHello();

// console.log(window.helloWorld);

// const user = {
//   firstName: 'John',
//   lastName: 'Doe',
//   role: 'admin',
//   fullName() {
//     console.log(this);
//   },
// };

// const math = {
//   PI: 3.14,
//   multiply(x, y) {
//     console.log(this.PI);
//     return x * y;
//   },
//   divide(x, y) {
//     return x * y;
//   },
//   subtract(x, y) {
//     return x * y;
//   },
// };

// function logThis() {
//   console.log(this);
// }

// user.fullName();

// math.multiply(10, 34);

// logThis();

// const firstName = "Jack"

// const user = {
//   firstName: 'John',
//   lastName: 'Doe',
//   role: 'admin',
//   fullName() {
//     console.log(`${this.firstName} ${this.lastName} is an ${this.role}`);
//   },
// };

// user.fullName();

// const user = {
//   firstName: 'John',
//   lastName: 'Doe',
//   role: 'admin',
//   fullName() {
//     const { firstName, lastName, role } = this; // Object Destructuring
//     console.log(`${firstName} ${lastName} is an ${role}`);
//   },
// };

// user.fullName();

// user.firstName = 'Jack';

// user.fullName();

// const user = {
//   firstName: 'John',
//   lastName: 'Doe',
//   role: 'admin',
//   fullName() {
//     return `${this.firstName} ${this.lastName} is an ${this.role}`;
//   },
//   logDetails() {
//     console.log(this);
//     return `${this.fullName()} and is cool!`;
//   },
//   square(x) {
//     return x * x;
//   },
// };

// const logDetails = user.logDetails;

// user.logDetails();
// logDetails();

// user.logDetails();

// const square = user.square;
// console.log(square(5));

// const logDetails = user.logDetails;
// console.log(logDetails());

// logDetails();

// 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];
//   },
//   begin: () => `Hello ${this.pickMsg()}`,
//   begin2() {
//     return `Hello ${this.pickMsg()}`;
//   },
//   start() {
//     setInterval(() => {
//       console.log(this.pickMsg());
//     }, 1000);
//   },
// };

// console.log(hellos.pickMsg());

// hellos.start();
// console.log(hellos.begin2());
// console.log('\n\n\n');
// console.log(hellos.begin());

// const products = [
//   { title: 'hello world', price: 99 },
//   { title: 'console log this', price: 99 },
//   { title: 'hello universe', price: 99 },
//   { title: 'start this product', price: 99 },
// ];

// const findProducts = (searchTerm) => {
//   return products.filter((prod) => prod.title.includes(searchTerm));
// };
// let res = findProducts('hello');
// console.log(res);

// let USD = 75;
// const productsINR = products.map((prod) => prod.price * USD);

//Exercise 6;

// const productINR = products.map((prod) => ({
//   id: prod.id,
//   title: prod.title,
//   description: prod.description,
//   category: prod.category,
//   image: prod.image,
//   price: prod.price * 75,
// }));

const productINR = products.map((prod) => ({
  ...prod,
  price: prod.price * 75,
}));

console.log(productINR);

Scratchpad #14

// console.log('Hello world');

// const pageTitle = document.getElementById('mainTitle');
// const paras = document.getElementsByTagName('p');
// const imgs = document.getElementsByTagName('img');

// // console.dir(pageTitle);
// // console.dir(paras);

// // for (let p of paras) {
// //   console.log(p.outerHTML);
// // }

// console.dir(imgs);

// const myImage = document.getElementById('impImg');
// // console.dir(myImage);

// const specialEls = document.getElementsByClassName('special');
// // console.dir(specialEls[1]);

// const specialLists = document.getElementsByClassName('special-list');
// // console.dir(specialLists[0]);

// // console.log(document.getElementsByClassName('special'));

// const pageTitle = document.querySelector('#mainTitle');
// const pageLists = document.querySelector('.special');
// const unordered = document.querySelectorAll('ul > li');
// const title = document.querySelectorAll('h1');

// console.log(pageTitle);
// console.log(pageLists);
// console.log(unordered);
// console.log(title);

// const h1 = document.querySelector('h1');

// console.log(h1.innerText);
// h1.innerText = 'RST FORUM';

// console.log(document.body.innerText);

// const img = document.querySelector('img');
// // document.body.innerText = 'HELLO WORLD';
// img.innerText = 'HI!';

// const ul = document.querySelector('ul');
// ul.innerText = 'CHANGED all of this';
// // console.log(ul);

// const h1 = document.querySelector('h1');
// console.log(h1.textContent);

// const para = document.querySelector('.special2');
// console.log(para.textContent);

// const myPara = document.querySelector('.my-para'); // object

// console.log(myPara.innerHTML);

// // myPara.innerText = '<strong>Hello</strong> this has been modified';
// myPara.innerHTML =
//   '<strong style="color: red">Hello</strong> this has been modified';

// myPara.innerHTML += '. <em>Extra information.</em>';

// const inputs = document.querySelectorAll('input');
// inputs[0].value = 'John';
// inputs[1].value = 'Doe';

const img = document.querySelector('img');
// img.src =
//   'file:///C:/Users/rahul.LAPTOP-IB8N85JR/Desktop/Training/Full_Stack_15/HTML-CSS/js/images/car.jpg';
// // console.log(img.src);

// // console.log(img.width);

// img.width = '300';

// const range = document.querySelector('input[type="range"]');
// // console.log(img.getAttribute('alt'));
// // console.log(range.getAttribute('max'));

// console.log(img.getAttribute('src'));
// console.log(img.src);
// console.log(img.getAttribute('width'));

// img.setAttribute('alt', 'Text added via JS');
// img.setAttribute('width', '50%');

// const btn = document.querySelector('button');

// btn.setAttribute('type', 'button');
// btn.setAttribute('style', 'border: 2px solid red');

Scratchpad #15

// const multiply2 = (x = 1, y = 1) => {
//   return x * y;
// };

// multiply(10);

// function addAll2(...nums) { // rest args
//   console.log(nums)
//   let total = 0
//   nums.forEach(num => (total += num))
//   return total
// }

// const fullName = (user) => {
//   return `${user.firstName} ${user.lastName}`
// }

// fullName({firstName: 'John', lastName: 'Doe'})

// const fullName = ({ firstName, lastName }) => {
//   return `${firstName} ${lastName}`
// }

// 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 info1 = { highest: highest, lowest: lowest, average: average };
// console.log(info1);

// function multiply(x, y) {
//   return x * y
// }

// const math = {
//   multiply: function (x, y) {
//     return x * y
//   }
// }

// const math2 = {
//   multiply(x, y) {
//     return x * y
//   }
// }

// function greet() {
//   console.log('Hello World!');
//   console.log(this);
// }

// greet();

// const window = {
//   greet() {
//     console.log('Hello World!');
//     console.log(this);
//   }
// }

// greet()
// window.greet()

const user = {
  firstName: 'John',
  lastName: 'Doe',
  role: 'admin',
  fullName() {
    console.log(`${this.firstName}
                 ${this.lastName}
                 is an ${this.role}`);
  },
};

Scratchpad #16

// const firstLi = document.querySelector('li');
// const ul = document.querySelector('ul');

// // console.log(firstLi.parentElement.parentElement);

// const allLis = ul.children;
// const form = document.querySelector('form');

// // console.log(ul.children);

// // for (let li of allLis) {
// //   console.log(li.innerText);
// // }

// // console.log(form.children[0].innerHTML);

// // console.log(form.nextElementSibling);
// console.log(form.previousElementSibling);

// const lis = document.querySelectorAll('li');

// for (li of lis) {
//   // console.log(li.innerText)
//   // li.innerText = 'Programmatically CHANGED!'
//   li.innerHTML = 'Programmatically <b>CHANGED!</b>';
// }

// const heading = document.querySelector('h1');

// // console.log(heading.style);

// heading.style.color = 'red';
// heading.style.textDecoration = 'underline';
// heading.style.fontSize = '50px';

// const lis = document.querySelectorAll('li');
// const colors = ['red', 'yellow', 'green', 'orange', 'teal'];

// for (li of lis) {
//   li.style.color = colors[Math.floor(Math.random() * colors.length)];
//   li.style.fontSize = '20';
//   li.style.fontWeight = 'bold';
//   li.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
//   li.style.fontFamily = 'Helvetica, sans-serif';
// }

// const para = document.querySelector('.styled-el');

// // console.log(para.style);
// const paraStyles = getComputedStyle(para);

// // console.log(paraStyles);

// console.log(paraStyles.textDecoration);
// console.log(paraStyles.color);
// console.log(paraStyles.fontSize);

// para.style.color = 'green';

// console.log(paraStyles.color);

// const todo = document.querySelector('.todo');

// console.log(todo);

// todo.style.textDecoration = 'line-through';
// todo.style.opacity = 0.5;
// todo.style.color = 'red';

// todo.setAttribute('class', 'done');

// console.log(todo.classList);

// todo.classList.add('done');
// todo.classList.remove('done');

// todo.classList.toggle('done');

// const subtitle = document.createElement('h2');

// subtitle.innerText = 'This is a subtitle';
// subtitle.style.fontSize = '35px';

// const section = document.querySelector('section');

// // section.appendChild(subtitle);

// const photo = document.createElement('img');
// photo.setAttribute(
//   'src',
//   'https://images.unsplash.com/photo-1619448532901-bdfa33279554?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=60'
// );
// photo.style.width = '400px';

// const photoLink = document.createElement('a');
// photoLink.setAttribute(
//   'href',
//   'https://images.unsplash.com/photo-1619448532901-bdfa33279554?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=60'
// );
// photoLink.setAttribute('target', '_blank');

// photoLink.appendChild(photo);

// section.appendChild(photoLink);

// const todos = document.querySelector('#todos');

// const newTask = document.createElement('li');

// newTask.innerText = 'Brand new task to complete';
// // newTask.innerHTML = 'Brand new task to complete <button>X</button>'
// newTask.classList.add('todo');
// newTask.style.color = 'purple';
// newTask.style.fontWeight = 'bold';

// // todos.appendChild(newTask); // append to the end

// const firstTask = todos.querySelector('li');

// // console.log(firstTask);

// todos.insertBefore(newTask, firstTask);

// const b = document.createElement('b');
// b.innerText = 'HELLO WORLD';

// const p = document.querySelector('p');

// // p.insertAdjacentElement('beforebegin', b);
// // p.insertAdjacentElement('afterbegin', b);
// // p.insertAdjacentElement('beforeend', b);
// p.insertAdjacentElement('afterend', b);

// const b = document.createElement('b');
// b.innerText = 'HELLO WORLD';

// const i = document.createElement('i');
// i.innerText = 'GOODBYE GALAXY';

// const p = document.querySelector('p');

// // p.append(b, i); // append both b and i to the end of p
// // p.append(b); // just append b to the end of p
// p.prepend(i); // prepend i to the start of p

// const todos = document.querySelector('#todos');

// const firstTask = todos.querySelector('li');
// console.log(firstTask);

// const secondTask = firstTask.nextElementSibling;
// console.log(secondTask);

// // todos.removeChild(firstTask);
// // todos.removeChild(secondTask);

// // firstTask.remove();
// // secondTask.remove();

// const btn = document.querySelector('#btn1');

// btn.onclick = () => console.log('I GOT CLICKED');
// btn.onclick = () => console.log('Click second event');

// btn.addEventListener('click', () => {
//   alert('ALERT MESSAGE FROM CLICK EVENT');
// });

// btn.addEventListener('click', () => {
//   console.log('CONSOLE MESSAGE FROM CLICK EVENT');
// });

// btn.addEventListener('mouseover', () => {
//   console.log('I have been hovered upon');
// });

// btn.addEventListener('mouseover', function () {
//   btn.innerText = 'Button Hovered!';
// });

// btn.addEventListener('mouseout', function () {
//   btn.innerText = 'Button 1';
// });

// // Attach a scroll event on the window itself
// window.addEventListener('scroll', function () {
//   console.log('Stop Scrolling!');
// });

// const btn = document.querySelector('button');

// btn.addEventListener('mouseover', function () {
//   // console.log('Mouse over button')
//   // To get the current height and width of your browser screen
//   const height = Math.floor(Math.random() * window.innerHeight);
//   const width = Math.floor(Math.random() * window.innerWidth);
//   btn.style.left = `${width}px`;
//   btn.style.top = `${height}px`;
// });

// btn.addEventListener('click', function () {
//   btn.innerText = 'You Won!';
//   document.body.style.backgroundColor = 'green';
// });

const colors = [
  'red',
  'orange',
  'yellow',
  'green',
  'blue',
  'purple',
  'indigo',
  'violet',
];

// const printColor = function (box) {
//   console.log(box.style.backgroundColor);
// };

// We can make use of `this`
const printColor = function () {
  console.log(this.style.backgroundColor);
};

const changeColor = function () {
  const h1 = document.querySelector('h1');
  h1.style.color = this.style.backgroundColor;
  h1.innerText = this.style.backgroundColor + ' selected';
};

const container = document.querySelector('#boxes'); // Select the container

// Loop to add each color as a background color (create as many boxes as length of colors)
for (let color of colors) {
  const box = document.createElement('div'); // Create a square box

  box.style.backgroundColor = color; // Style the box
  box.classList.add('box'); // Add a class

  container.append(box); // Append box to container

  // // Add event listener to the box
  // box.addEventListener('click', function () {
  //   // console.log('Box clicked!')
  //   // console.log(box.style.backgroundColor);
  //   printColor(box);
  // });

  box.addEventListener('click', printColor);
  box.addEventListener('click', changeColor);
}

Scratchpad #17

// const colors = [
//   'red',
//   'orange',
//   'yellow',
//   'green',
//   'blue',
//   'purple',
//   'indigo',
//   'violet',
// ];

// const printColor = function (event) {
//   console.log(this.style.backgroundColor);
// };

// const changeColor = function (event) {
//   console.log(event);
//   const h1 = document.querySelector('h1');
//   h1.style.color = this.style.backgroundColor;
//   h1.innerText = this.style.backgroundColor + ' selected';
// };

// const container = document.querySelector('#boxes'); // Select the container

// // Loop to add each color as a background color (create as many boxes as length of colors)
// for (let color of colors) {
//   const box = document.createElement('div'); // Create a square box

//   box.style.backgroundColor = color; // Style the box
//   box.classList.add('box'); // Add a class

//   container.append(box); // Append box to container

//   box.addEventListener('click', printColor);
//   box.addEventListener('click', changeColor);
// }

// const input = document.querySelector('#username');

// // input.addEventListener('keydown', function (e) {
// //   console.log('KEY DOWN', e);
// // });

// // input.addEventListener('keyup', function (e) {
// //   console.log('KEY UP', e);
// // });

// input.addEventListener('keypress', function (e) {
//   console.log('KEY PRESS', e);
// });

// const taskAdd = document.querySelector('#addtask');
// const todos = document.querySelector('#todos');
// const output = document.querySelector('#output');

// // let val = '';

// taskAdd.addEventListener('keypress', function (e) {
//   // console.log(e.key);
//   // console.dir(this);
//   // val = e.target.value;
//   // this.value = val;

//   output.innerText = e.target.value;

//   if (e.key === 'Enter') {
//     if (!this.value) {
//       return;
//     }
//     const newTask = document.createElement('li');
//     newTask.innerText = this.value;
//     newTask.style.cursor = 'pointer';

//     todos.append(newTask);
//     this.value = '';

//     newTask.addEventListener('click', function () {
//       newTask.remove();
//     });
//   }
// });

// const form = document.querySelector('#payment-form');

// const creditCard = document.querySelector('#cc');
// const terms = document.querySelector('#terms');
// const brand = document.querySelector('#brand');

// form.addEventListener('submit', function (e) {
//   // alert('FORM SUBMITTED');
//   e.preventDefault(); // prevent the default form behavior

//   console.log('cc - ', creditCard.value);
//   console.log('terms - ', terms.checked);
//   console.log('brand - ', brand.value);
// });

// const formData = {};

// creditCard.addEventListener('input', function (e) {
//   // console.log('CC changed', e);
//   formData['cc'] = e.target.value;
//   console.log(e.target.value);
// });

// brand.addEventListener('input', function (e) {
//   // console.log('brand changed', e);
//   formData['brand'] = e.target.value;
//   console.log(e.target.value);
// });

// terms.addEventListener('input', function (e) {
//   // console.log('terms changed', e);
//   formData['terms'] = e.target.checked;
//   console.log(e.target.checked);
// });

// const form = document.querySelector('#payment-form');

// const creditCard = document.querySelector('#cc');
// const terms = document.querySelector('#terms');
// const brand = document.querySelector('#brand');

// const formData = {};

// for (let input of [creditCard, terms, brand]) {
//   input.addEventListener('input', (e) => {
//     formData[e.target.name] =
//       e.target.type === 'checkbox' ? e.target.checked : e.target.value;
//   });
// }

// form.addEventListener('submit', function (e) {
//   // alert('FORM SUBMITTED');
//   e.preventDefault(); // prevent the default form behavior
//   console.log(formData);
// });

// const multiply = (x, y) => x * y;

// const square = (x) => multiply(x, x);

// const rightTriangle = (a, b, c) => {
//   return square(a) + square(b) === square(c);
// };

// rightTriangle(3, 4, 5);

// console.log('The first log');
// alert('An interruption in between');
// console.log('The last log');

// console.log('The first log');

// setTimeout(() => {
//   console.log('The line that takes time to complete');
// }, 3000);

// console.log('The last log');

// const btn = document.querySelector('button');

// const moveX = (element, amount, delay, callback) => {
//   setTimeout(() => {
//     element.style.transform = `translateX(${amount}px)`;
//     if (callback) {
//       callback();
//     }
//   }, delay);
// };

// moveX(btn, 100, 1000, () => {
//   moveX(btn, 200, 1000, () => {
//     moveX(btn, 300, 1000, () => {
//       moveX(btn, 400, 1000, () => {
//         moveX(btn, 500, 1000, () => {
//           moveX(btn, 500, 1000, () => {
//             moveX(btn, 500, 1000);
//           });
//         });
//       });
//     });
//   });
// });

// 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)`;
//         }, 1000);
//       }, 1000);
//     }, 1000);
//   }, 1000);
// }, 1000);

// const subtitle = document.createElement('h2');
// subtitle.innerText = 'This is a subtitle';
// subtitle.style.fontSize = '35px';

// const section = document.querySelector('section');
// section.appendChild(subtitle);

// const photo = document.createElement('img');
// photo.setAttribute(
//   'src',
//   'https://images.unsplash.com/photo-1619448532901-bdfa33279554?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=60'
// );
// photo.style.width = '400px';

// const photoLink = document.createElement('a');
// photoLink.setAttribute(
//   'href',
//   'https://images.unsplash.com/photo-1619448532901-bdfa33279554?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=60'
// );
// photoLink.setAttribute('target', '_blank');

// photoLink.appendChild(photo);
// section.appendChild(photoLink);

// const todos = document.querySelector('#todos');

// const newTask = document.createElement('li');
// newTask.innerText = 'Brand new task to complete';
// // newTask.innerHTML = 'Brand new task to complete <button>X</button>'
// newTask.classList.add('todo');
// newTask.style.color = 'purple';
// newTask.style.fontWeight = 'bold';

// // todos.appendChild(newTask); // append to the end

// const firstTask = todos.querySelector('li');
// todos.insertBefore(newTask, firstTask); // insert before a certain element

// const b = document.createElement('b');
// b.innerText = 'HELLO WORLD';

// const p = document.querySelector('p');

// p.insertAdjacentElement('beforebegin', b);

// p.insertAdjacentElement('afterbegin', b);
// p.insertAdjacentElement('beforeend', b);
// p.insertAdjacentElement('afterend', b);

// const b = document.createElement('b');
// b.innerText = 'HELLO WORLD';
// const i = document.createElement('i');
// i.innerText = 'GOODBYE GALAXY';

// const p = document.querySelector('p');

// // // p.append(b, i); // append both b and i to the end of p
// // // p.append(b); // just append b to the end of p
// // p.prepend(i); // prepend i to the start of p

// const todos = document.querySelector('#todos');

// const firstTask = todos.querySelector('li');
// // console.log(firstTask);
// const secondTask = firstTask.nextElementSibling;
// // console.log(secondTask);

// todos.removeChild(firstTask);
// todos.removeChild(secondTask);

// firstTask.remove();
// secondTask.remove();

// const btn = document.querySelector('button');
// // btn.onclick = console.log('Incorrect EVENT');

// btn.onclick = function () {
//   console.log('Click first event');
//   return 'hello';
// };

// btn.onclick = function () {
//   console.log('Click second event');
// };

// const btn = {
//   hello: 'hello',
//   onclick: function () {
//     console.log('Click second event');
//   },
// };

// const btn = document.querySelector('button');

// // it takes a callback
// btn.addEventListener('click', () => {
//   // alert('ALERT MESSAGE FROM CLICK EVENT');
//   console.log('CONSOLE MESSAGE FROM');
// });

// // can add as many events as you want
// btn.addEventListener('click', () => {
//   console.log('CONSOLE MESSAGE FROM CLICK EVENT');
// });

// // can add as many events as you want
// btn.addEventListener('mouseover', () => {
//   console.log('CONSOLE MESSAGE FROM CLICK EVENT');
// });

// btn.addEventListener('mouseover', function () {
//   btn.innerText = 'Button Hovered!';
// });

// btn.addEventListener('mouseout', function () {
//   btn.innerText = 'Button 1';
// });

// window.addEventListener('scroll', function () {
//   console.log('Stop Scrolling!');
// });

// const btn = document.querySelector('button');

// btn.addEventListener('mouseover', function () {
//   const height = Math.floor(Math.random() * window.innerHeight);
//   const width = Math.floor(Math.random() * window.innerWidth);
//   btn.style.left = `${width}px`;
//   btn.style.top = `${height}px`;
// });

// btn.addEventListener('click', function () {
//   btn.innerText = 'You Won!';
//   document.body.style.backgroundColor = 'green';
// });

const colors = [
  'red',
  'orange',
  'yellow',
  'green',
  'blue',
  'purple',
  'indigo',
  'violet',
];

const container = document.querySelector('#boxes'); // Select the container

// // Loop to add each color as a background color (create as many boxes as length of colors)
// for (let color of colors) {
//   const box = document.createElement('div'); // Create a square box

//   box.style.backgroundColor = color; // Style the box
//   box.classList.add('box'); // Add a class

//   container.append(box); // Append box to container

//   // Add event listener to the box
//   box.addEventListener('click', function () {
//     // console.log('Box clicked!')
//     console.log(box.style.backgroundColor);
//   });
// }

const printColor = function () {
  console.log(this.style.backgroundColor);
};

const changeColor = function () {
  const h1 = document.querySelector('h1');
  h1.style.color = this.style.backgroundColor;
  h1.innerText = this.style.backgroundColor + ' selected';
};

for (let color of colors) {
  const box = document.createElement('div'); // Create a square box

  box.style.backgroundColor = color; // Style the box
  box.classList.add('box'); // Add a class

  container.append(box); // Append box to container

  // Add event listener to the box
  box.addEventListener('click', printColor);
  box.addEventListener('click', changeColor);
}

Scratchpad #18

// moveX(btn, 100, 1000, () => {
//   moveX(btn, 200, 1000, () => {
//     moveX(btn, 300, 1000, () => {
//       moveX(btn, 400, 1000, () => {
//         moveX(btn, 500, 1000, () => {
//           moveX(btn, 500, 1000, () => {
//             moveX(btn, 500, 1000);
//           });
//         });
//       });
//     });
//   });
// });

// const willGetAPlayStation = new Promise((resolve, reject) => {
//   const rand = Math.random();

//   if (rand < 0.5) {
//     resolve();
//   } else {
//     reject();
//   }
// });

// // console.log(willGetAPlayStation);

// willGetAPlayStation.then(() => console.log('I got a playstation. Thank you.'));
// willGetAPlayStation.catch(() => console.log('Mai ghar chod dunga'));

// const fakeRequest = (url) => {
//   return new Promise((resolve, reject) => {
//     setTimeout(() => {
//       const pages = {
//         '/users': [
//           { id: 1, username: 'john' },
//           { id: 2, username: 'jane' },
//         ],
//         '/about': 'This is the about page',
//       };

//       const data = pages[url];

//       if (data) {
//         resolve({ status: 200, data });
//       } else {
//         reject({ status: 404 });
//       }
//     }, 2000);
//   });
// };

// // const result = fakeRequest('/users');

// // result
// //   .then((response) => console.log(response))
// //   .catch((response) => console.log(response));

// fakeRequest('/users')
//   .then((res) => console.log(res.status, res.data))
//   .catch((res) => console.log(res.status));

const 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/4': {
          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 });
      }
    }, 1000);
  });
};

// fakeRequest('/users')
//   .then((res) => {
//     console.log(res);
//     const id = res.data[0].id;

//     fakeRequest(`/users/${id}`).then((res) => {
//       console.log(res);
//       const postId = res.data.topPostId;

//       fakeRequest(`/posts/${postId}`).then((res) => {
//         console.log(res);
//       });
//     });
//   })
//   .catch((err) => console.log(err));

fakeRequest('/users')
  .then((res) => {
    const id = res.data[0].id;
    return fakeRequest(`/users/${id}`);
  })
  .then((res) => {
    const postId = res.data.topPostId;
    return fakeRequest(`/posts/${postId}`);
  })
  .then((res) => {
    console.log(res);
  })
  .catch((err) => console.log(err));

Scratchpad #19

// const req = new XMLHttpRequest(); // make new object

// // // provide 2 callbacks

// req.onload = function () {
//   // if successful
//   console.log('SUCCESS!');
//   const data = JSON.parse(this.responseText);
//   console.log(data);
// };

// req.onerror = function (err) {
//   // if failure
//   console.log('ERROR', err);
// };

// req.open('get', 'https://swapi.dev/api/people/1', true); // request type and url

// req.setRequestHeader('Accept', 'application/json'); // send headers

// req.send(); // send request

// // Event listeners
// const req = new XMLHttpRequest();

// // Adding event listeners instead of attributes
// req.addEventListener('load', function () {
//   const data = JSON.parse(this.responseText);

//   // console.log('It worked!', data);

//   for (let planet of data.results) {
//     console.log(planet.name);
//   }
// });

// req.addEventListener('error', function (err) {
//   console.log('Error', err);
// });

// req.open('get', 'https://swapi.dev/api/planets', true);
// req.send();

// console.log(req); // req object has the responseText field

// const req = new XMLHttpRequest();

// req.addEventListener('load', function () {
//   console.log('First Request');
//   const data = JSON.parse(this.responseText);

//   const filmUrl = data.results[0].films[0];

//   ///////////////////////// SECOND REQUEST

//   // Second Request (nested)
//   const filmReq = new XMLHttpRequest();

//   filmReq.addEventListener('load', function () {
//     console.log('Second Request');
//     const filmData = JSON.parse(this.responseText);
//     console.log(filmData.title);

//     /////////////////// THIRD REQUEST
//   });

//   filmReq.addEventListener('error', function (err) {
//     console.log(err);
//   });

//   filmReq.open('GET', filmUrl, true);
//   filmReq.send();

//   //////////////////////// END SECOND REQUEST
// });

// req.addEventListener('error', function (err) {
//   console.log('Error', err);
// });

// req.open('get', 'https://swapi.dev/api/planets', true);
// req.send();

// fetch('https://swapi.dev/api/planets', {
//   headers: { Accept: 'application/json' },
// })
//   .then((response) => {
//     // console.log(response);
//     if (response.status !== 200) {
//       console.log('Problem', response.status);
//       return;
//     }

//     // // Have to use response.json as we get back a stream
//     // // and not the json directly.
//     response.json().then((data) => {
//       // itself is a promise
//       console.log(data);
//     });
//   })
//   .catch(function (err) {
//     console.log('Fetch err', err);
//   });

// fetch('https://swapi.dev/api/plannets')
//   .then((response) => {
//     if (!response.ok) {
//       // console.log('Something went wrong!', response.status);
//       throw new Error(`Status code error: ${response.status}`);
//     } else {
//       response.json().then((data) => {
//         for (let planet of data.results) {
//           console.log(planet.name);
//         }
//       });
//     }
//   })
//   .catch((err) => {
//     console.log('ERROR!', err);
//   });

// fetch('https://swapi.dev/api/plannnnnnnets')
//   .then((response) => {
//     console.log(response);
//     if (!response.ok) {
//       throw new Error(`Status code error: ${response.status}`);
//     }
//     return response.json();
//   })
//   .then((data) => {
//     console.log('Fetched all planets');
//     const filmUrl = data.results[0].films[0];
//     return fetch(filmUrl);
//   })
//   .then((response) => {
//     if (!response.ok) {
//       throw new Error(`Status code error: ${response.status}`);
//     }
//     return response.json();
//   })
//   .then((data) => {
//     console.log('Fetched first film');
//     console.log(data.title);
//   })
//   .catch((err) => {
//     console.log('ERROR!', err);
//   });

// // Custom function to extract checking and parsing logic
// const checkStatusAndParse = (res) => {
//   if (!res.ok) {
//     throw new Error(`Status code error: ${res.status}`);
//   }
//   return res.json();
// };

// fetch('https://swapi.dev/api/planets')
//   .then((response) => {
//     return checkStatusAndParse(response);
//   })
//   .then((data) => {
//     console.log('Fetched all planets');
//     const filmUrl = data.results[0].films[0];
//     return fetch(filmUrl);
//   })
//   .then((response) => {
//     return checkStatusAndParse(response);
//   })
//   .then((data) => {
//     console.log('Fetched first film');
//     console.log(data.title);
//   })
//   .catch((err) => {
//     console.log('ERROR!', err);
//   });

// // Custom function to extract checking and parsing logic
// const checkStatusAndParse = (res) => {
//   if (!res.ok) {
//     throw new Error(`Status code error: ${res.status}`);
//   }
//   return res.json();
// };

// fetch('https://swapi.dev/api/planets')
//   .then(checkStatusAndParse)
//   .then((data) => {
//     console.log('Fetched all planets');
//     const filmUrl = data.results[0].films[0];
//     return fetch(filmUrl);
//   })
//   .then(checkStatusAndParse)
//   .then((data) => {
//     console.log('Fetched first film');
//     console.log(data.title);
//   })
//   .catch((err) => {
//     console.log('ERROR!', err);
//   });

// axios
//   .get('https://swapi.dev/api/planets')
//   .then(({ data }) =>
//     data.results.forEach((planet) => console.log(planet.name))
//   )
//   .catch((err) => console.log('In Catch Block: \n\n', err));

axios
  .get('https://swapi.dev/api/planets')
  .then(({ data }) => {
    data.results.forEach((planet) => console.log(planet.name));
    return axios.get(data.next);
  })
  .then(({ data }) =>
    data.results.forEach((planet) => console.log(planet.name))
  )
  .catch((err) => console.log('ERROR OCCURRED', err));

Scratchpad #20

// function getData() {
//   const data = axios.get('https://swapi.dev/api/planets');
//   console.log(data); // Promise {<pending>}
// }

// getData();

// function getData() {
//   axios.get('https://swapi.dev/api/planets').then((res) => {
//     console.log(res); // {data: {…}, status: 200, …}
//   });
// }

// getData();

// async function greet() {
//   return 'Hello!';
// }

// console.log(greet());

// async function problem() {
//   throw new Error('Problem!');
// }

// // console.log(problem());

// // greet().then((res) => {
// //   console.log(res);
// // });

// problem().catch((res) => {
//   console.log(res);
// });

// async function add(x, y) {
//   if (typeof x !== 'number' || typeof y !== 'number') {
//     throw new Error('X and Y must be numbers');
//   }
//   return x + y;
// }

// // console.log(add(10, 10));

// add('hello', 10)
//   .then((res) => {
//     console.log(res);
//   })
//   .catch((res) => {
//     console.log(res);
//   });

// function getPlanets() {
//   return axios.get('https://swapi.dev/api/planets');
// }

// getPlanets().then((res) => {
//   console.log(res.data);
// });

// async function getPlanets() {
//   try {
//     const res = await axios.get('https://swapi.dev/api/planets');
//     console.log(res.data);
//   } catch (err) {
//     console.log(err);
//   } finally {
//     console.log('Hello world');
//   }
// }

// getPlanets().catch((err) => {
//   console.log('In catch block:', err);
// });

// getPlanets();

// console.log('Hello World!');

// async function getPokemon() {
//   const pokemon1 = await axios.get('https://pokeapi.co/api/v2/pokemon/1');
//   const pokemon2 = await axios.get('https://pokeapi.co/api/v2/pokemon/2');
//   const pokemon3 = await axios.get('https://pokeapi.co/api/v2/pokemon/3');

//   console.log(pokemon1.data);
//   console.log(pokemon2.data);
//   console.log(pokemon3.data);
// }

// getPokemon();

// async function getPokemon() {
//   const pokemon1 = axios.get('https://pokeapi.co/api/v2/pokemon/1');
//   const pokemon2 = axios.get('https://pokeapi.co/api/v2/pokemon/2');
//   const pokemon3 = axios.get('https://pokeapi.co/api/v2/pokemon/3');

//   await pokemon1;
//   await pokemon2;
//   await pokemon3;

//   console.log(pokemon1); // undefined
//   console.log(pokemon2); // undefined
//   console.log(pokemon3); // undefined
// }

// getPokemon();

// async function getPokemon() {
//   // 15
//   const promise1 = axios.get('https://pokeapi.co/api/v2/pokemon/1');
//   const promise2 = axios.get('https://pokeapi.co/api/v2/pokemon/2');
//   const promise3 = axios.get('https://pokeapi.co/api/v2/pokemon/3');

//   // 5
//   const pokemon1 = await promise1;
//   const pokemon2 = await promise2;
//   const pokemon3 = await promise3;

//   console.log('Pokemon 1', pokemon1.data);
//   console.log('Pokemon 2', pokemon2.data);
//   console.log('Pokemon 3', pokemon3.data);
// }

// getPokemon();

// console.log('Pokemon 1', await promise1);
// console.log('Pokemon 2', await promise2);
// console.log('Pokemon 3', await promise3);

// async function getPokemon() {
//   const promise1 = axios.get('https://pokeapi.co/api/v2/pokemon/1');
//   const promise2 = axios.get('https://pokeapi.co/api/v2/pokemon/2');
//   const promise3 = axios.get('https://pokeapi.co/api/v2/pokemon/3');

//   const results = await Promise.all([promise1, promise2, promise3]);
//   console.log(results); // array
// }

// getPokemon();

// async function getPokemon() {
//   const promise1 = axios.get('https://pokeapi.co/api/v2/pokemon/1');
//   const promise2 = axios.get('https://pokeapi.co/api/v2/pokemon/2');
//   const promise3 = axios.get('https://pokeapi.co/api/v2/pokemon/3');

//   const results = await Promise.all([promise1, promise2, promise3]);
//   // console.log(results) // array
//   logPokemonToConsole(results);
// }

// function logPokemonToConsole(results) {
//   for (let pokemon of results) {
//     console.log(pokemon.data.name);
//   }
// }

// getPokemon();

// 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 myDeck = initializeDeck();
// const cardsInHand = [];

// console.log(myDeck.length);

// drawCard(myDeck, cardsInHand);
// drawCard(myDeck, cardsInHand);
// drawCard(myDeck, cardsInHand);

// console.log(myDeck.length);

// drawMultiple(5, myDeck, cardsInHand);

// console.log(cardsInHand);

// const myDeck = initializeDeck();
// shuffle(myDeck);

// console.log(myDeck);

// 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() {
//       const { suits, values, deck } = this;
//       for (let value of values.split(',')) {
//         for (let suit of suits) {
//           deck.push({ value, suit });
//         }
//       }
//       return 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--) {
//         console.log(deck);
//         let j = Math.floor(Math.random() * (i + 1));
//         [deck[i], deck[j]] = [deck[j], deck[i]];
//       }
//     },
//   };
// };

// const myDeck = makeDeck();

// myDeck.initializeDeck();
// myDeck.drawCard();
// myDeck.drawCard();
// myDeck.drawCard();
// myDeck.drawCard();

// console.log(myDeck.drawnCards);

// function makePerson(fname, lname, age) {
//   return {
//     firstName: fname,
//     lastName: lname,
//     age: age,
//     sayName() {
//       console.log(this.firstName, this.lastName);
//     },
//   };
// }

// const john = makePerson('John', 'Doe', 25);
// const jane = makePerson('Jane', 'Doe', 25);

// // john.sayName();
// // jane.sayName();

// console.log(typeof john);

// ------------------

// function Person(firstName, lastName, age) {
//   this.firstName = firstName;
//   this.lastName = lastName;
//   this.age = age;
// }

// Person.prototype.sayName = function () {
//   console.log(`My name is ${this.firstName} ${this.lastName}`);
// };

// const jim = new Person('Jim', 'Doe', 25);
// const jack = new Person('Jack', 'Doe', 25);

// // jim.sayName();
// // jack.sayName();

// console.log(typeof jim);

// class Person {
//   constructor(firstName, lastName, age) {
//     console.log('INSIDE CONSTRUCTOR');
//     console.log(firstName, lastName, age);
//     this.firstName = firstName;
//     this.lastName = lastName;
//     this.age = age;
//   }

//   greet() {
//     console.log(`Hello friend, from ${this.firstName}`);
//   }
// }

// const person1 = new Person('John', 'Doe', 25);
// const person2 = new Person('Jane', 'Doe', 25);

// console.log(person1);

// person1.greet();

class User {
  constructor(username, password) {
    this.username = username;
    this.password = password;
  }

  login(pass) {
    if (pass === this.password) {
      console.log('Welcome back');
    } else {
      console.log('Incorrect password entered.');
    }
  }
}

class Subscriber extends User {
  logout() {
    console.log('You have successfully logged out, Subscriber');
  }
}

class Creator extends User {
  constructor(username, password, totalVideos = 0) {
    super(username, password);
    this.totalVideos = totalVideos;
  }

  uploadVideo(videoName) {
    this.totalVideos++;
    console.log(
      `Thank you for uploading ${videoName}.\nChannel: ${this.totalVideos} video(s)`
    );
  }

  logout() {
    console.log('You have successfully logged out, Creator');
  }
}

const john = new User('john', 'john@123');
const jane = new Subscriber('jane', 'jack@123');
const jack = new Creator('jack', 'jack@987', 100);

john.login('jane@123');
jane.login('jack@123');

// console.log(john);
// console.log(jane);

jack.login('jack@987');
jack.uploadVideo('tiktok video #555');

React Scratchpad #1

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React</title>
  </head>
  <body>
    <div id="root"></div>

    <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 src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <script type="text/babel">
      // const rootElement = document.querySelector('#root');
      // const heading = document.createElement('h1');
      // heading.innerText = 'Hello World!';
      // rootElement.append(heading);

      // const element = React.createElement('h1', {
      //   className: 'title', // add a class to this element
      //   children: 'Hello Universe!', // the content of this h1 element
      // });

      // Nested
      // const headingEl = React.createElement(
      //   'h1',
      //   { className: 'myHeading' },
      //   'Hello World!'
      // );

      // const heading = <h1 id="title">Hello World</h1>;

      // const paraEl = React.createElement(
      //   'p',
      //   {},
      //   'I am rendered using React JS'
      // );

      // const element = React.createElement('div', {
      //   className: 'intro-div',
      //   children: [heading, paraEl], // children property can be an array
      // });

      // console.log(element);

      // const children = 'Hello World. This is the page title';
      // const className = 'title';

      // const props = { children, className };

      // // JSX tags can be self closing
      // // Below we spread the props object in the JSX element
      // const element = <h1 {...props} className="new" />;

      const message = 'Hello World';
      const myClassName = 'special';

      // Interpolated myClassName and message
      const element = <h1 className={myClassName}>{message.toUpperCase()}</h1>;

      ReactDOM.render(element, document.querySelector('#root'));
    </script>
  </body>
</html>