Menu

FullStack Evening 5pm

FullStack Evening 5pm

Download HTML ZIP

Download HTML CSS

JS Scratchpad #3

// let age = 21;

// if (age > 18) {
//   console.log('Welcome to my app');
// }

// let num = 33;

// if (num % 2 === 0) {
//   console.log('Number is even');
// } else {
//   console.log('Number is odd');
// }

// let age = 17;

// if (age >= 65) {
//   console.log('Drink 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('Not allowed');
// }

// let password = 'helloworld@123';

// if (password.length > 6) {
//   if (password.indexOf(' ') !== -1) {
//     console.log('Passwords should not include spaces');
//   } else {
//     console.log('Valid password');
//   }
// } else {
//   console.log('Password is too short');
// }

// let loggedInUser = 'user';

// if (loggedInUser) {
//   console.log('Welcome to your dashboard');
// } else {
//   console.log('Redirect to login');
// }

// let age = 20;

// 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('Drink are free');
// } else {
//   console.log('Not allowed');
// }

// let loggedInUser = undefined;

// if (!loggedInUser) {
//   console.log('Redirect to login');
// } else {
//   console.log('Welcome to your dashboard');
// }

// if (day === 0) {
//   console.log('Mon');
// } else if (day === 1) {
//   console.log('Tue');
// } else if (day === 2) {
//   console.log('Wed');
// } else {}

// let day = 2;

// switch (day) {
//   case 1:
//   case 2:
//   case 3:
//     console.log('Wed');
//     break;
//   case 4:
//     console.log('Thu');
//     break;
//   case 5:
//     console.log('Fri');
//     break;
//   case 6:
//     console.log('Sat');
//     break;
//   case 7:
//     console.log('Sun');
//     break;
//   default:
//     console.log('Invalid day code');
// }

// let status = 'offline';

// let color;
// if (status === 'offline') color = 'red';
// else color = 'green';

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

// status === 'offline' ? console.log('RED') : console.log('GREEN');

// if (status === 'offline') {
//   console.log('RED');
// } else {
//   console.log('GREEN');
// }

let currentStatus = 'busy';

let color =
	currentStatus === 'offline'
		? 'red'
		: currentStatus === 'busy'
		? 'yellow'
		: 'green';

// let color;
// if (currentStatus === 'offline') {
//   color = 'red';
// } else if (currentStatus === 'busy') {
//   color = 'yellow';
// } else {
//   color = green;
// }

// console.log(color);

JS Scratchpad #4

// let product = ['iPhone 14 Pro', 'Apple', 'Some desc....', 200000, 500, true];

// let prod = {
// 	inStock: 500,
// 	name: 'iPhone 14 Pro',
// 	description: 'Some desc....',
// 	brand: 'Apple',
// 	discounted: true,
// 	price: 200000,
// 	'hello world': 123,
// 	1: 210,
// 	2: 32,
// };

// prod.price;

// const products = [
// 	{
// 		inStock: 500,
// 		name: 'iPhone 14 Pro',
// 		description: 'Some desc....',
// 		brand: 'Apple',
// 		discounted: true,
// 		price: 200000,
// 		'hello world': 123,
// 		1: 210,
// 		2: 32,
// 	},
// 	{
// 		inStock: 500,
// 		name: 'iPhone 14 Pro',
// 		description: 'Some desc....',
// 		brand: 'Apple',
// 		discounted: true,
// 		price: 200000,
// 		'hello world': 123,
// 		1: 210,
// 		2: 32,
// 	},
// 	{
// 		inStock: 500,
// 		name: 'iPhone 14 Pro',
// 		description: 'Some desc....',
// 		brand: 'Apple',
// 		discounted: true,
// 		price: 200000,
// 		'hello world': 123,
// 		1: 210,
// 		2: 32,
// 	},
// 	{
// 		inStock: 500,
// 		name: 'iPhone 14 Pro',
// 		description: 'Some desc....',
// 		brand: 'Apple',
// 		discounted: true,
// 		price: 200000,
// 		'hello world': 123,
// 		1: 210,
// 		2: 32,
// 	},
// ]

// let product = ['iPhone 14 Pro', 'Apple', 200000, true];

// // product = {0: 'iPhone 14 Pro', 1: 'Apple', 2: 200000, 3: true, length: 4}

// let name = "John";

// // let name = {0: 'J', 1: 'o', 2: 'h', 3: 'n', length: 4}

Scratchpad #5

// for (let i = 0; i < 100000000; i++) {
// 	// console.log(i ** 2, 'Hello World');
// 	// console.log(`${i} - Hello World`);
// 	console.log(`${i}*${i}=${i * i}`);
// }

// for (let i = 100; i >= -10; i--) {
// 	console.log(i);
// }

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

// 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: 3.9 },
// ];

// for (let i = 0; i < movies.length; i++) {
// 	const movie = movies[i];
// 	console.log(`${movie.movieName} has a rating of ${movie.rating}.`);
// }

// let 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--) {
// 	// console.log(word[i]);
// 	reversedWord += word[i];
// }

// console.log(reversedWord);

// for (let i = 0; i < 5; i++) {
// 	console.log('OUTER LOOP', i);

// 	for (let j = 0; j < 5; j++) {
// 		console.log('\tINNER LOOP', j);
// 	}
// }

// sum all the values
// sum all even numbers

const gameBoard = [
	[
		[4, 64, 8, 4, 32],
		[4, 64, 8, 4, 312, 12],
		[4, 64],
		[4, 64, 8, 4],
		[4, 64, 8, 4],
		[4, 64, 8, 4],
	],
	[
		[4, 64, 8, 4],
		[4, 64, 8, 4],
		[4, 64, 8, 4],
		[4, 64, 8, 4],
	],
	[
		[4, 64, 8, 4],
		[4, 64, 8, 4],
		[4, 64, 8, 4],
		[4, 64, 8, 4],
	],
	[
		[4, 64, 8, 4],
		[4, 64, 8, 4],
		[4, 64, 8, 4],
		[4, 64, 8, 4],
	],
];

// let total = 0;

// 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]);
// 		total += gameBoard[i][j];
// 	}
// }

// console.log(total);

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

// let count = 0;

// while (count < 10) {
// 	console.log(count);
// 	count++;
// }

// let target = Math.floor(Math.random() * 10) + 1;
// let guess = Math.floor(Math.random() * 10) + 1;

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

// console.log(`Final Guess: ${guess} | Target: ${target}`);

// let target = Math.floor(Math.random() * 10) + 1;
// let guess = Math.floor(Math.random() * 10) + 1;

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

// console.log(`Final Guess: ${guess} | Target: ${target}`);

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

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

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

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

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

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

// 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 value of Object.values(productPrices)) {
// 	console.log(value);
// }

for (let key of Object.keys(productPrices)) {
	console.log(key, productPrices[key]);
}

for (let key in productPrices) {
	console.log(key, productPrices[key]);
}

Scratchpad #6

// function greet() {
// 	console.log('Hello my name is John');
// 	console.log('Hello my name is John');
// 	console.log('Hello my name is John');
// 	console.log('Hello my name is John');
// }

// greet();
// for (let i = 0; i < 50; i++) {
// 	greet();
// }

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

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

// rollDice(5);

// function greet(name, message) {
// 	console.log(`${message} ${name}`);
// }

// greet('John', 'Hello, How are you?, ');
// greet('Hi', 'Jack');
// greet('Jane', 'Hi', 'Hello', 'World');

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

// add(10, 4);
// add(10);
// add();

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

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

// function isString(val) {
// 	if (typeof val === 'string') {
// 		return true;
// 	}
// 	return false;
// }

// console.log(isString(100));
// console.log(isString('100'));

// let name = 'Jane Smith';

// function greet() {
// 	let name = 'John Doe';
// 	console.log(name);
// }

// console.log(name);

// greet();

// if (true) {
// 	var firstName = 'John';
// 	console.log(firstName);
// }

// console.log(firstName);

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

// console.log(i);

// function outer() {
// 	// let movieName = 'Prey';

// 	function inner() {
// 		let movieName = 'The gray man';
// 		console.log(movieName);
// 	}

// 	console.log(movieName);

// 	inner();
// }

// outer();

// function square(num) {
// 	return num * num;
// }

// const num = 10;

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

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

// function math(a, b, fn) {
// 	return fn(a, b);
// }

function sub(a, b) {
	return a - b;
}
// function div(a, b) {
// 	return a / b;
// }

// console.log(sub(10, 5));
// console.log(div(10, 5));
// console.log(math(10, 5, sub));
// console.log(math(10, 5, div));
// console.log(
// 	math(10, 3, function (a, b) {
// 		return a * b;
// 	})
// );

// const math = [
// 	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 ** 2;
// 	},
// 	function (num) {
// 		return num ** 3;
// 	},
// 	sub,
// ];

// console.log(math[2](10, 3));
// console.log(math[math.length - 1](3, 3));

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, 4));

Scratchpad #7

const gameBoard = [
	[
		[4, 64, 8, 4, 32],
		[4, 64, 8, 4, 312, 12],
		[4, 64],
		[4, 64, 8, 4],
		[4, 64, 8, 4],
		[4, 64, 8, 4],
	],
	[
		[4, 64, 8, 4],
		[4, 64, 8, 4],
		[4, 64, 8, 4],
		[4, 64, 8, 4],
	],
	[
		[4, 64, 8, 4],
		[4, 64, 8, 4],
		[4, 64, 8, 4],
		[4, 64, 8, 4],
	],
];

let total = 0;

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

console.log(total);

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

// function math(a, b, fn) {
// 	return fn(a, b);
// }

// console.log(
// 	math(10, 3, function (a, b) {
// 		return a - b;
// 	})
// );

// function repeat(func, num) {
// 	for (let i = 0; i < num; i++) {
// 		func();
// 	}
// }

// repeat(function () {
// 	console.log('Hello World');
// }, 20);

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

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

// randomPick(
// 	function () {
// 		console.log('Hello World');
// 	},
// 	function () {
// 		console.log('Hello Universe');
// 	}
// );

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

// const square = raiseBy(2);
// const cube = raiseBy(3);
// const hypercube = raiseBy(4);

// console.log(hypercube(5));

// 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(canDrink(45));

// function math(a, b, fn) {
// 	return fn(a, b);
// }

// console.log(
// 	math(10, 3, function (a, b) {
// 		return a - b;
// 	})
// );

// setInterval(function () {
// 	console.log(Math.random());
// }, 100);

// add(10, 2);

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

// console.log(num);

// let num = 10;

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

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

// nums.forEach(function (num) {
// 	if (num % 2 === 0) {
// 		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, i) {
// 	console.log(`${i} - ${movie.title} has a rating of ${movie.rating}`);
// // });

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

// // const upperNames = [];
// const upperNames = names.map(function (name) {
// 	return name.toUpperCase();
// });

// // for (let name of names) {
// // 	upperNames.push(name.toUpperCase());
// // }

// console.log(upperNames);

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

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

// console.log(doubles);

// function square(num) {
// 	return num * num;
// }

// const square = num => num * num;
// console.log(square(10));



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

const res = nums.map(num => {
	return num % 2 === 0 ?  "Even" : "Odd"
	// if (num % 2 === 0) {
	// 	return "Even"
	// } else {
	// 	return "Odd"
	// }
})

console.log(res);

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

// const doubles = nums.map(n => n * 2);
// console.log(doubles)

Scratchpad #8

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

// let result = movies.find((movie) => {
// 	// return movie.includes('Park');
// 	return movie[0] === 'N';
// });

// 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) => {
// // 	// return book.author === 'George Orwell';
// // 	return book.rating > 4;
// // });

// const result = books.filter((book) => {
// 	// return book.author === 'George Orwell';
// 	return book.rating > 4;
// });

// console.log(result);

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

// console.log(nums.filter((num) => num % 2 === 0));

// 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', 'john', 'jane', 'josh', 'jrad'];

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

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

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

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

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

// console.log(result);

// acc     currVal
// 221        2
// 221        1
// 221       34
// 221

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

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

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

// console.log(result);

// function multiply(x, y) {
// 	if (typeof y === 'undefined') {
// 		y = 1;
// 	}
// 	return x * y;
// }

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

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

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

// const data = ['John', 'Jane', 'Jack'];

// // printVals(data[0], data[1], data[2]);
// // printVals(...data);
// printVals(...'hello');

// const nums = [21, 23, 4345346, 12, 1];

// // console.log(Math.max(nums[0], nums[1], nums[2]));
// console.log(Math.max(...nums));

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

// function add(...nums) {
// 	let total = 0;
// 	for (let num of nums) {
// 		total += num;
// 	}
// 	console.log(total);
// }

// add(10, 3, 2, 3, 44, 2, 2, 2, 1, 23, 33, 12, 2);

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

// printNames('john', 'jane', 'jack', 'jill', 'james');

// const users = ['john', 'jane', 'jack'];

// // const sub = users[0];
// // const admin = users[1];
// // const mod = users[2];

// const [sub, ...others] = users;

// console.log(sub, others);

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

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

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

console.log(firstName, lastName, others);

Scratchpad #9

// // function profile({ firstName, lastName, age }) {
// // 	console.log(`My name is ${firstName} ${lastName} and I am ${age} years old`);
// // }

// // profile({ firstName: 'John', lastName: 'Doe', age: 20 });

// 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: highest, lowest: lowest, average: 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 reviewList = [4.5, 5.0, 3.2, 2.1, 4.7, 3.8, 3.1, 3.9, 4.4]

// const statistics = getReviewDetails(reviewList)

// const username = 'janedoe';
// const role = 'admin';

// // const user1 = { [role]: username };
// // const user1 = { [role.toUpperCase()]: username };
// const user1 = { [1 + 2 + 3 + 4]: username };

// console.log(user1);

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

// const user = { firstName: 'John', lastName: 'Doe' };
// const result = addProperty(user, 'age', 20);

// console.log(result);

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

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

// console.log(math);

// console.log('This is JavaScript');

// SCOPE

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

// console.log(this);

// window.helloWorldFromJavaScript();

function hello() {
	console.log(this);
}

// const profile = {
// 	firstName: 'John',
// 	lastName: 'Doe',
// 	age: 20,
// 	greet() {
// 		console.log(this.firstName);
// 	},
// };

// hello();
// profile.greet();

// let aThisIsAnExample = 'Hello World';
// hello();

// function greet() {
// 	console.log(
// 		`Hello, my name is ${this.fullName()} and I am ${this.age} years old`
// 	);
// }

// // greet();

// const user1 = {
// 	firstName: 'John',
// 	lastName: 'Doe',
// 	age: 20,
// 	fullName() {
// 		return `${this.firstName} ${this.lastName}`;
// 	},
// 	greet,
// };

// const user2 = {
// 	firstName: 'Jane',
// 	lastName: 'Doe',
// 	age: 22,
// 	fullName() {
// 		return `${this.firstName} ${this.lastName}`;
// 	},
// 	greet,
// };

// user1.greet();

// console.log(this);

// const user2 = {
// 	firstName: 'Jane',
// 	lastName: 'Doe',
// 	age: 22,
// 	fullName() {
// 		// console.log(this);
// 		console.log(`${this.firstName} ${this.lastName}`);
// 	},
// };

// // user2.fullName();
// const outFullName = user2.fullName;

// outFullName();

// setInterval(function () {
// 	console.log('Hello World');
// }, 1000);

function greet(obj) {
	console.log(obj);
}

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.pickMsg());
		}, 1000);
	},
	hello() {
		greet(this);
	},
};

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

hellos.hello();

Scratchpad 10

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

// // // console.dir(document.all);

// // const impLi = document.getElementById('imp');

// // // console.dir(impLi);

// // const lis = document.getElementsByTagName('li');
// // console.log(lis);

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

// // const elements = document.getElementsByClassName('special');

// // console.log(elements);

// // const list = document.getElementsByClassName('list');
// // const list1 = list[0];

// // const lis = list1.getElementsByTagName('li');
// // console.log(lis);

// // const el = document.getElementById('imp');
// // const bolds = el.getElementsByTagName('strong');
// // console.log(bolds);

// // const el = document.querySelector('#imp');
// const el = document.querySelectorAll('.para');
// console.log(el);

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

// console.log(title.innerText);

// title.innerText = 'Hello World';

// setTimeout(function () {
// 	title.innerText = 'This got changed';
// }, 2000);

// setInterval(function () {
// 	title.innerText = Math.random();
// }, 10);

// const spc = document.querySelector('.special');

// console.log(spc.textContent);

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

// // title.innerHTML = 'Hello <i>World</i>';
// // title.innerHTML += '. <u>Again.</u>';

// title.innerHTML = 'Hello <i>World</i>';
// title.innerHTML += '. <u>Again.</u>';

const mylink = document.querySelector('#mylink');
const myinp = document.querySelector('#myinp');
// console.log(mylink);

// mylink.innerText = 'Yahoo';
// mylink.href = 'https://yahoo.com';
// mylink.className = 'hello-world';
// myinp.value = '';
// myinp.placeholder = 'Enter full name properly';

// console.log(mylink.getAttribute('src'));
// console.log(mylink.src);

// mylink.setAttribute('href', 'https://yahoo.com');

// const para = document.querySelector('.special');
// // console.log(para.parentElement.parentElement.parentElement);
// // console.log(para.parentElement.nextElementSibling.nextElementSibling);
// console.log(para.parentElement.previousElementSibling);

// // const ul = document.querySelector('ul');
// // console.log(ul.children);

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

// for (let li of lis) {
// 	li.innerText = 'Hello World';

// 	// setInterval(function () {
// 	// 	li.innerText = Math.random();
// 	// }, 10);
// }

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

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

// heading.style.color = 'red';
// heading.style.backgroundColor = 'yellow';
// heading.style.textDecoration = 'underline';

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

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

// const el = document.querySelector('.special');
// // console.log(el.style.color);

// const elStyles = getComputedStyle(el);
// console.log(elStyles.color);

const task = document.querySelector('.item');
// task.className = 'item done';

// task.setAttribute('class', 'item done');

// console.log(task.classList);

task.classList.toggle('done');

Scratchpad #11

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

// const title = document.createElement('h1');
// title.innerText = 'Hello World';
// title.style.color = 'red';

// const section = document.createElement('section');
// section.style.border = '5px solid red';
// section.appendChild(title);

// //<section style="border: 5px solid red;">
// //	<h1 style="color: red">Hello World</h1>
// //</section>

// root.appendChild(section);

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

// const task1 = document.createElement('li');
// task1.innerText = 'This is a new task';

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

// // todos.appendChild(task1);
// todos.insertBefore(task1, firstTask);

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

// const b = document.createElement('b');
// b.innerText = 'New Content';

// // 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);
// p.prepend(b);

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

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

// // todos.removeChild(firstTask);

// firstTask.remove();

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

// btn.onclick = function () {
// 	console.log('Hello World');
// };

// btn.onclick = function () {
// 	console.log('Hello Universe');
// };

// btn.addEventListener('click', function () {
// 	console.log('Hello World');
// });
// btn.addEventListener('mouseout', function () {
// 	console.log('Hello Universe');
// });

// const btn = document.querySelector('button');
// const inp = document.querySelector('input');
// const list = document.querySelector('ul');

// btn.addEventListener('click', function () {
// 	const li = document.createElement('li');
// 	li.innerText = inp.value;
// 	li.addEventListener('click', function () {
// 		li.remove();
// 	});

// 	list.append(li);
// 	inp.value = '';
// });

// window.addEventListener('scroll', function () {
// 	console.log("I'm scrolling");
// 	this.document.body.style.backgroundColor = 'red';
// });

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

// btn.addEventListener('mouseover', function () {
// 	const width = Math.floor(Math.random() * window.innerWidth) - 22;
// 	const height = Math.floor(Math.random() * window.innerHeight) - 22;
// 	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 text = document.querySelector('span');
// const container = document.querySelector('#root');
// container.style.display = 'flex';

// function printColor() {
// 	text.innerText = this.style.backgroundColor;
// }

// for (let color of colors) {
// 	const div = document.createElement('div');
// 	div.style.height = '100px';
// 	div.style.width = '100px';
// 	div.style.backgroundColor = color;

// 	div.addEventListener('click', printColor);

// 	container.append(div);
// }

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

// const text = document.querySelector('span');
// const container = document.querySelector('#root');
// container.style.display = 'flex';

// for (let color of colors) {
// 	const div = document.createElement('div');
// 	div.style.height = '100px';
// 	div.style.width = '100px';
// 	div.style.backgroundColor = color;

// 	div.addEventListener('click', function (event) {
// 		console.log(event);
// 	});

// 	container.append(div);
// }

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

// inp.addEventListener('keypress', function (event) {
// 	p.innerText = event.target.value;
// });

const form = document.querySelector('form');
const taskList = document.querySelector('ul');

form.addEventListener('submit', function (e) {
	e.preventDefault();
	if (!e.target.children.task.value) {
		return;
	}

	const task = document.createElement('li');
	task.innerText = e.target.children.task.value;
	task.addEventListener('click', function () {
		task.classList.toggle('done');
	});

	const delBtn = document.createElement('button');
	delBtn.innerText = 'Delete Task';
	delBtn.addEventListener('click', function () {
		task.remove();
	});

	task.append(delBtn);

	taskList.append(task);
	e.target.children.task.value = '';
});

Scratchpad #12

// // 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(function () {
// // 	console.log('This callback runs later');
// // }, 4000);
// // console.log('The last log');

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

// setTimeout(function () {
// 	btn.style.transform = `translateX(100px)`;
// 	setTimeout(function () {
// 		btn.style.transform = `translateX(200px)`;
// 		setTimeout(function () {
// 			btn.style.transform = `translateX(300px)`;
// 			setTimeout(function () {
// 				btn.style.transform = `translateX(400px)`;
// 				setTimeout(function () {
// 					btn.style.transform = `translateX(500px)`;
// 					setTimeout(function () {
// 						btn.style.transform = `translateX(600px)`;
// 						setTimeout(function () {
// 							btn.style.transform = `translateX(700px)`;
// 						}, 1000);
// 					}, 1000);
// 				}, 1000);
// 			}, 1000);
// 		}, 1000);
// 	}, 1000);
// }, 1000);

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

// 		if (random > 0.5) {
// 			resolve();
// 		} else {
// 			reject();
// 		}
// 	}, 500);
// });

// willGetAPlayStation
// 	.then(() => {
// 		console.log('I got the PS. Thank you parents.');
// 	})
// 	.catch(() => {
// 		console.log('Screw this!!');
// 	});

// // console.log(willGetAPlayStation);

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

// 			if (random > 0.5) {
// 				resolve({ hello: 'world' });
// 			} else {
// 				reject('goodbye world');
// 			}
// 		}, 500);
// 	});
// };

// willGetAPlayStation()
// 	.then((data) => {
// 		console.log(data);
// 		// console.log('I got the PS. Thank you parents.');
// 	})
// 	.catch((error) => {
// 		console.log(error);
// 		// console.log('Screw this!!');
// 	});

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

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