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