Loading...
// // let message = `Hello World and
// // once again hello world`
// // console.log(message)
// // message = 'Aloha World and \nonce again hello world'
// // console.log(message)
// let name = 'John Doe'
// let city = 'Delhi'
// // message = `Aloha ${name + ' from ' + city}, and hello to you.`
// message = `Aloha ${name} from ${city}, and hello to you.`
// console.log(message)
// let age = 65
// if (age >= 18) {
// console.log('You are allowed to come in, but you cannot drink.')
// } else if (age >= 21) {
// console.log('You can come and you can drink as well.')
// } else if (age >= 65) {
// console.log('You can come in, and drinks are free.')
// }
// let john = 'delhite'
// if (john === 'admin') {
// console.log('You are allowed to access this page')
// } else if (john === 'moderator') {
// console.log('You are allowed to see some other content')
// } else if (john === 'subscriber') {
// console.log('You are allowed to pay me some money')
// } else {
// console.log("You aren't welcome here!")
// }
// if (age >= 21) {
// console.log('You can come and you can drink as well.')
// }
// if (age < 18) {
// console.log('Buzz off')
// }
// let password = 'hell'
// if (password.length >= 6) {
// // inner conditional
// if (password.indexOf(' ') !== -1) {
// console.log('Password is not valid')
// } else {
// console.log('Password is valid')
// }
// } else {
// console.log('Password is too short')
// }
// let loggedInUser = 'john'
// // form -loggedin -> username
// if (loggedInUser) {
// console.log(`Welcome ${loggedInUser}`)
// } else {
// console.log('SHOW CONTENT')
// }
// let age = 20
// // let city = 'delhi'
// if (age >= 18 && age < 21) {
// console.log('You are allowed to enter, but you cannot drink.')
// } else if (age >= 21 && age <= 65) {
// console.log('You are allowed to enter, and drink.')
// } else if (age > 65) {
// console.log('Drinks are free')
// } else {
// console.log('Buzz off')
// }
// // let loggedInUser = 'john'
// let loggedIn = null
// if (!loggedIn) {
// console.log('PLEASE LOG IN')
// } else {
// console.log(`Welcome ${loggedInUser}`)
// }
// let day = 40
// switch (day) {
// case 1:
// console.log('MONDAY')
// break
// case 2:
// console.log('TUESDAY')
// break
// 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')
// }
// let password = '2134'
// switch (password) {
// case '1234':
// console.log('TOO SIMPLE PASSWORD')
// break
// case 'password':
// console.log('TOO COMMON')
// break
// default:
// console.log('This is OK')
// }
// let num = 19
// num === 2 ? console.log('LUCKY') : console.log('UNLUCKY')
// let status = 'offline'
// let color = status === 'online' ? 'green' : 'red'
// console.log(color)
// let food
// let randomNum = Math.floor(Math.random() * 6) + 1
// console.log(food)
// switch (randomNum) {
// case 1:
// food = 'Apple'
// break
// case 2:
// food = 'Grapes'
// break
// case 3:
// food = 'Cabbage'
// break
// case 4:
// food = 'Carrot'
// break
// case 5:
// food = 'Biryani'
// break
// case 6:
// food = 'Pulav'
// break
// default:
// console.log('Incorrect food number')
// }
// console.log(food)
// let message = 'Some value'
// console.log(message.toUpperCase())
// // console.log(upperMessage)
// Arrays
// let names = ['rakesh', 'hafiza', 'akshay', 'aditya']
// if (names.length === 4) {
// console.log('This is a good array')
// } else if (names.length < 4 || names.length > 4) {
// console.log('Bad array')
// }
// HW
// let message = 'This is a crap message'
// console.log(`Original Message: ${message}`)
// if (message.split(' ').indexOf('crap') !== -1) {
// let censoredIdx = message.split(' ').indexOf('crap')
// let censoredMsg = message.split(' ').pop(censoredIdx)
// console.log(`Censored Message: ${censoredMsg}`)
// }
// Objects
// const userDetails = ['John', 'Doe', 25, 'john.doe@gmail.com']
// const user = {
// email: 'john.doe@gmail.com',
// lastName: 'Doe',
// age: 25,
// firstName: 'John',
// 80: "User's age"
// }
// console.log(user.email)
// console.log(user.age)
// console.log(user['80'])
// console.log(user['firstName'])
// console.log(user.middleName)
// const pallette = {
// red: '#eb4d4b',
// yellow: '#f9ca24',
// blue: '#30336b'
// }
// let userSelection = 'yellow'
// console.log(pallette[userSelection])
// console.log(pallette['yellow'])
// console.log(`The color selected is ${pallette['userSelection']}`)
// const user = {
// email: 'john.doe@gmail.com',
// lastName: 'Doe',
// age: 25,
// firstName: 'John'
// }
// const products = [
// {
// name: 'Samsung Galaxy 20',
// skew: '21821sjh2187',
// details: 'This does so and so......',
// price: 90000,
// images: [
// 'https://u5b.f44.myftpupload.com/image/1',
// 'https://u5b.f44.myftpupload.com/image/2',
// 'https://u5b.f44.myftpupload.com/image/3'
// ],
// brand: 'Samsung'
// },
// {
// name: 'Apple iPhone',
// skew: '2134324324',
// details: 'This does so and so......',
// price: 120000,
// images: [
// 'https://u5b.f44.myftpupload.com/image/apple/1',
// 'https://u5b.f44.myftpupload.com/image/apple/2',
// 'https://u5b.f44.myftpupload.com/image/apple/3'
// ],
// brand: 'Apple'
// }
// ]
// // console.log(products[1].details)
// console.log(products[1]['details'])
// const myPlaylist = {
// song1: {
// name: 'Song1',
// duration: '3:09',
// price: 1000000 // 100,00,00
// },
// song2: {
// name: 'Song1',
// duration: '3:09'
// },
// song3: {
// name: 'Song1',
// duration: '3:09'
// }
// }
// console.log(myPlaylist.song1.name)
// Object literal
const fitnessData = {
totalSteps: 400000,
totalKms: 253.32,
avgCalorieBurn: 2300,
workoutsThisWeek: '5 of 7',
avgSleep: '5:45',
80: 'Work week',
'Full Name': 'John Doe'
}
// console.log(fitnessData.avgSleep)
// console.log(fitnessData['totalKms'])
// console.log(fitnessData['80'])
// console.log(fitnessData['Full Name'])
// console.log(fitnessData)
// fitnessData.BPM = 98
// console.log(fitnessData)
// fitnessData.BPM++
// fitnessData.totalKms -= 100
// console.log(fitnessData)
const products = [
{
name: 'iPhone 12',
price: 80000,
brand: 'Apple'
},
{
name: 'Galaxy 20',
price: 100000,
brand: 'Samsung'
},
{
name: 'MI 11',
price: 40000,
brand: 'Xiaomi'
}
]
// products[0].price = 100000
// console.log(products[0].price)
// const nums = [21, 21, 23, 452, 5, 2, 2121, 212, 2]
// for (let i = 1; i <= 100; i++) {
// // console.log(i ** 2)
// // console.log('The value of i is ' + i)
// // console.log(`The value of i is ${i}`)
// console.log('HELLO WORLD!')
// }
// for (let i = 50; i > 0; i /= 5) {
// console.log(i)
// }
// let times = 10
// for (let i = 0; i < times; i++) {
// console.log(i)
// }
// for (let num = 1; num <= 10; num++) {
// console.log(`${num}*${num}=${num * num}`)
// }
// const nums = [12, 34, 56, 34, 78, 54, 23, 12]
// for (let count = 0; count <= nums.length; count++) {
// console.log(nums[count])
// }
// 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['movieName']} has a rating of ${movie.rating}`)
// }
// for (let char = 0; char < word.length; char++) {
// console.log(word[char].toUpperCase())
// }
// const word = 'Hello World'
// let reversedWord = ''
// for (let char = word.length - 1; char >= 0; char--) {
// // console.log(word[char])
// reversedWord = reversedWord + word[char]
// }
// console.log(reversedWord)
// for (let i = 1; i <= 10; i++) {
// for (let j = 0; j < 5; j++) {
// for (let k = 0; k < 3; k++) {
// console.log(i, j, k)
// }
// }
// }
// const arr = [
// [4, 64],
// [128, 32, 4, 16],
// [16, 4, 4, 32],
// [2, 16, 16, 2]
// ]
// // for (let i = 0; i < gameBoard.length; i++) {
// // for (let j = 0; j < gameBoard[i].length; j++) {
// // console.log(gameBoard[i][j])
// // }
// // }
// const arr = [
// ['A', 'B', 'C', 'D'],
// ['E', 'F', 'G'],
// ['hello', 'world', 'cool'],
// [23, 45, 64, 212, 34, 565, 32]
// ]
// for (let i = 0; i < arr.length; i++) {
// for (let j = 0; j < arr[i].length; j++) {
// console.log(arr[i][j])
// }
// }
// // const wordsArr = // split words
// const selectedWordsA = []
// const allSelectedWords = [
// ['amet', 'accusamus'],
// ['lorem', '']
// ]
// let words =
// 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus illum ipsam minus rem tempora aliquam reprehenderit ea adipisci nisi quisquam.'
// const wordsArr = words.toLowerCase().split(' ')
// const selectedWordsA = []
// const selectedWordsL = []
// console.log(wordsArr)
// for (let i = 0; i < wordsArr.length; i++) {
// if (wordsArr[i][0] === 'a') {
// selectedWordsA.push(wordsArr[i])
// } else if (wordsArr[i][0] === 'l') {
// selectedWordsL.push(wordsArr[i])
// }
// }
// console.log(selectedWordsA)
// console.log(selectedWordsL)
// // For loop
// for (let i = 0; i < 100; i++) {
// console.log(`${i}: Hello World`)
// }
// for (let num = 0; num <= 20; num++) {
// console.log(num)
// }
// let str = 'b' + 'a' + +'a' + 'a'
// console.log(str)
// let i = 0
// while (i <= 20) {
// console.log(i)
// i++
// }
// const target = Math.floor(Math.random() * 9999) + 1
// // // console.log(target)
// let guess = Math.floor(Math.random() * 9999) + 1
// // // console.log(guess)
// while (guess !== target) {
// console.log(`Target: ${target} | Guess: ${guess}`)
// guess = Math.floor(Math.random() * 9999) + 1
// }
// // console.log(`The final result: Target: ${target} | Guess: ${guess}`)
// 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
// }
// console.log(`Target: ${target} | Guess: ${guess}`)
// guess = Math.floor(Math.random() * 100) + 1
// }
// console.log(`The final result: Target: ${target} | Guess: ${guess}`)
// 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}.`)
const names = ['John', 'Jack', 'Jim', 'Jane', 'James', 'Janardhan']
// // for loop
// for (let i = 0; i < names.length; i++) {
// console.log(names[i])
// }
// for...of loop
// for (let name of names) {
// console.log(`Hello ${name}!`)
// console.log(name)
// }
// console.log(name)
// let name = 'John Doe'
// let reversedName = []
// for (let char of name) {
// // console.log(char.toUpperCase( ))
// reversedName.unshift(char)
// }
// console.log(reversedName.join(''))
// const matrix = [
// [1, 4, 7],
// [9, 7, 2],
// [9, 4, 16]
// ]
// let total = 0
// for (let row of matrix) {
// for (let num of row) {
// total += num
// }
// }
// console.log(total)
// const cats = ['fashion', 'mobiles', 'books']
// const prods = ['tshirt', 'samsung', '1984', 'bro']
// for (let i = 0; i < prods.length; i++) {
// console.log(cats[i], prods[i])
// }
// const productPrices = {
// apple: 80000,
// onePlus: 50000,
// samsung: 90000
// }
// for (let brand of Object.keys(productPrices)) {
// console.log(`${brand} is going to cost you ${productPrices[brand]}`)
// }
// for (let price of Object.values(productPrices)) {
// console.log(price)
// }
// const movieRating = {
// pursuitOfHappiness: 4.8,
// satya: 4.8,
// gangsOfWasepur: 4,
// robot: -3
// }
// for (let movie in movieRating) {
// // console.log(movie)
// console.log(`${movie} has a rating of ${movieRating[movie]}`)
// }
const data = [
{
id: 1,
first_name: 'Mozelle',
last_name: 'Beesley',
email: 'mbeesley0@ebay.co.uk',
gender: 'Female',
ip_address: '204.93.93.196',
bank_balance: '$641.25'
},
{
id: 2,
first_name: 'Marjie',
last_name: 'Kinge',
email: 'mkinge1@wsj.com',
gender: 'Female',
ip_address: '19.175.126.65',
bank_balance: '$937.11'
},
{
id: 3,
first_name: 'Gage',
last_name: 'Renish',
email: 'grenish2@hatena.ne.jp',
gender: 'Male',
ip_address: '219.51.80.158',
bank_balance: '$819.20'
},
{
id: 4,
first_name: 'Alika',
last_name: 'Skeffington',
email: 'askeffington3@senate.gov',
gender: 'Female',
ip_address: '158.35.238.167',
bank_balance: '$172.63'
},
{
id: 5,
first_name: 'Noel',
last_name: 'Crudginton',
email: 'ncrudginton4@elegantthemes.com',
gender: 'Male',
ip_address: '250.158.31.16',
bank_balance: '$565.80'
},
]
const upperClass = [] // >800
const middleClass = [] // 500 || 800
const lowerClass = [] // <500
for (let customer of data) {
let balance = +customer.bank_balance.split('$')[1]
if (balance >= 800) {
upperClass.push(customer)
} else if (balance > 400 && balance < 800) {
middleClass.push(customer)
} else {
lowerClass.push(customer)
}
}
console.log(upperClass)
// if price is less than 5000 -> push it to CHEAP array
// if price is between than 5000 and 12000 -> push it to AFFORDABLE array
// if price is over 12000 -> push it to EXPENSIVE array
// Create 4 arrays -> SUZUKI, TESLA, FORD, TOYOTA, OTHER
// function validatePassword(password, username) {
// // if (
// // password.indexOf(' ') === -1 &&
// // password.indexOf(username) === -1 &&
// // password.length > 6
// // ) {
// // return true
// // } else {
// // return false
// // }
// return (
// password.indexOf(' ') === -1 &&
// password.indexOf(username) === -1 &&
// password.length > 6
// )
// }
// // console.log(validatePassword('jdoe2021', 'doe.20'))
// let rstUser = 'johndoe9883292'
// let rstPassword = 'johndoe'
// if (validatePassword(rstPassword, rstUser)) {
// console.log('Welcome to RST Forum')
// } else {
// console.log('Please check your username or password')
// }
// function isValidPassword(password, username) {
// const tooShort = password.length < 8
// const hasSpace = password.indexOf(' ') !== -1
// const tooSimilar = password.indexOf(username) !== -1
// return tooShort || hasSpace || tooSimilar
// }
// function isPangram(sentence) {
// sentence = sentence.toLowerCase()
// for (let char of 'abcdefghifklmnopqrstuvwxyz') {
// if (sentence.indexOf(char) === -1) {
// return false
// }
// }
// return true
// }
// console.log(isPangram('Two driven'))
let msg = 'Hello Mars'
function greet() {
var msg = 'Hello World'
return msg + '!'
}
function great() {
var msg = 'Hello World!!!!!!!!!!!!!!!'
return msg + '!'
}
console.log(msg)
console.log(greet())
function isPalindrome(word) {
return word === word.split('').reverse().join('')
}
// function capitalize(words) {
// let wordArr = words.split(' ')
// let capitalArr = []
// for (word of wordArr) {
// capitalArr.push(word[0].toUpperCase() + word.substring(1))
// }
// return capitalArr.join(' ')
// }
// console.log(capitalize('hello world hello universe'))
// let name = 'Jack'
// var first_name = 'Jack'
// console.log(first_name)
// if (true) {
// var first_name = 'John'
// var last_name = 'Doe'
// console.log(first_name + ' ' + last_name)
// }
// console.log(first_name, last_name)
// for (var i = 0; i < 10; i++) {
// console.log(i)
// }
// console.log(i)
// // console.log(first_name, last_name) // ERROR
// function outer() {
// let movie = 'Avengers'
// function inner() {
// let otherMovie = 'John Wick'
// let ratings = `${movie} has a rating of 4.2`
// console.log(ratings)
// }
// inner()
// }
// // outer()
// function square(num) {
// return num * num
// }
// const square = function (num) {
// return num * num
// }
// // Named function
// function add(x, y) {
// return x + y
// }
// // Function expression
// const sum = function (x, y) {
// return x + y
// }
// // Function expressions also point to named functions
// const product = function multiply(x, y) {
// return x * y
// }
// console.log(sum(10, 50))
// console.log(product(10, 4))
// console.log(multiply(10, 10)) // ERROR!
// 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
// }
// const operations = [add, sub, mul, div]
// for (let op of operations) {
// let result = op(10, 2)
// console.log(result)
// }
// console.log(operations[1](10, 30))
// const customMath = {
// sub: function (x, y) {
// return x - y
// },
// div: div
// }
// console.log(customMath.sub(10, 5))
// Higher Order Functions (HOF)
// function multipleGreets(f) {
// f()
// f()
// f()
// }
// function sayHello() {
// console.log('Hello World')
// }
// function printNums() {
// for (let i = 0; i < 10; i++) {
// console.log(i)
// }
// }
// multipleGreets(sayHello)
// multipleGreets(printNums)
// multipleGreets(function () {
// console.log("I'm a FUNCTION!!!!")
// })
// // multipleGreets('Hello Bro')
// function sayHello() {
// console.log('Hello World')
// }
// function sayGoodbye() {
// console.log('Goodbye World')
// }
// function repeat(func, num) {
// for (let i = 0; i < num; i++) {
// func()
// }
// }
// // repeat(sayHello, 10)
// repeat(sayGoodbye, 2)
// // HOF
// function randomPick(f1, f2) {
// let randNum = Math.random()
// if (randNum < 0.5) {
// f1()
// } else {
// f2()
// }
// }
// randomPick(
// function () {
// console.log('Hello World!')
// },
// function () {
// console.log('Goodbye World!')
// }
// )
// const square = function (x) {
// return x ** 2
// }
// console.log(square(10))
function raiseBy(num) {
return function (x) {
return x ** num
}
}
let square = raiseBy(2)
let cube = raiseBy(3)
console.log(square(20))
console.log(cube(20))
// function raiseBy(num) {
// return function (x) {
// return x ** num
// }
// }
// const square = raiseBy(2)
// const cube = raiseBy(3)
// // console.log(square(10))
// const myMaths = {
// add: function (x, y) {
// return x + y
// },
// sub: function (x, y) {
// return x - y
// },
// mul: function (x, y) {
// return x * y
// }
// }
// console.log(myMaths.add(10, 40))
// function isBetween(x, y) {
// return function (num) {
// return num >= x && num <= y
// }
// }
// const isChild = isBetween(0, 15)
// const isTeen = isBetween(16, 18)
// const isAdult = isBetween(18, 65)
// const isSenior = isBetween(65, 100)
// let userAge = 99
// if (isChild(userAge)) {
// console.log('You are not welcome here')
// } else if (isTeen(userAge)) {
// console.log('You are welcome but you cannot drink')
// } else if (isAdult(userAge)) {
// console.log('You are welcome')
// } else if (isSenior(userAge)) {
// console.log('Drinks are free')
// } else {
// console.log("I don't believe it")
// }
// maths
// function maths(x, y, fn) {
// return fn(x, y)
// }
// function add(x, y) {
// return x + y
// }
// let result = maths(10, 10, function (x, y) {
// return x - y
// })
// let addResult = maths(10, 10, add)
// console.log(result)
// console.log(addResult)
// setTimeout(function () {
// console.log('Hello World')
// }, 1000)
// var name
// var last_name
// console.log(name)
// name = 'john doe'
// console.log(person)
// let person = 'John Doe'
// const nums = [9, 2, 4, 6, 2, 3, 7, 6]
// // nums.forEach(function (x) {
// // console.log(x)
// // })
// nums.forEach(function (x) {
// if (x % 2 === 1) {
// console.log(x)
// }
// })
// // console.log(nums)
// 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 (item) {
// console.log(item['title'].toUpperCase())
// })
// movies.forEach(function (movie, i) {
// console.log(i + 1, movie.title.toUpperCase())
// })
// let nums = [1, 2, 3, 4, 5, 6]
// // const newNums = []
// nums.forEach(function (num, idx) {
// console.log(`${idx + 1}: ${num * 10}`)
// })
// const names = ['john', 'jack', 'jane', 'james']
// // let capitalNames = names.map(function (name) {
// // return name.toUpperCase()
// // })
// console.log(
// names.map(function (name) {
// return name.toUpperCase()
// })
// )
// console.log(capitalNames)
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)
// function doubleArr(arr) {
// return arr.map(function (item) {
// return item * 2
// })
// }
// console.log(doubleArr([1, 2, 3, 4]))
// // HOF
// function maths(num1, num2, func) {
// return func(num1, num2)
// }
// function divide(a, b) {
// return a / b
// }
// console.log(
// maths(10, 10, function (a, b) {
// return a + b
// })
// )
// console.log(maths(10, 10, divide))
// // Function Expression
// const square = function (x) {
// return x * x
// }
// // Arrow functions
// const cube = x => {
// return x * x * x
// }
// const add = (x, y) => {
// return x + y
// }
// const randomNum = () => {
// return Math.random()
// }
// const square = (x) => {
// return x * x
// }
// // Implicit return
// const square2 = x => (
// x * x
// )
// const square3 = x => x * x
// console.log(square(20))
// console.log(cube(20))
// console.log(add(20, 10))
// console.log(randomNum())
// console.log(square2(100))
// function maths(num1, num2, fn) {
// return fn(num1, num2)
// }
// const maths = (num1, num2, fn) => (
// fn(num1, num2)
// )
// HOF
// const maths = (num1, num2, fn) => fn(num1, num2)
// console.log(maths(10, 50, (x, y) => x / y))
// const nums = [1, 2, 3, 4, 5, 6]
// nums.map(num => num * 2)
// let movies = ['The Terminator', 'The Avengers', 'Jurassic Park', 'Titanic']
// // console.log(
// // movies.find(movie => {
// // return movie.includes('The')
// // })
// // )
// console.log(movies.find(movie => movie.indexOf('tan') !== -1))
// 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
// }
// ]
// books.sort((a, b) => a.rating - b.rating)
// console.log(books)
// console.log(books.find(book => book.rating > 4))
// const nums = [9, 8, 3, 4, 6, 12, 17, 23, 0]
// console.log(nums.filter(num => num % 2 === 0))
// console.log(nums.filter(n => n > 10))
// console.log(books.filter(book => book.rating > 4))
// const names = ['jack', 'james', 'john', 'jane', 'josh', 'brad']
// console.log(names.every(name => name[0] === 'j'))
// console.log(names.some(name => name[0] === 'b'))
// console.log(names.every(name => name.length >= 4))
// console.log(names.every(name => name[name.length - 1] !== 'n'))
// const prices = [500.4, 211, 23, 5, 4, 22.2, -23.2, 9233]
// // const result = [211, 23, 500.4, 5, 4, 22.2, -23.2, 9233]
// // prices.sort((n1, n2) => n1 - n2)
// prices.sort((n1, n2) => n2 - n1)
// console.log(prices)
let nums = [21, 221, 2000000, 1, 34, 123, 4342, 56, 4]
const maxVal = nums.reduce((max, currentVal) => {
if (currentVal > max) {
return currentVal
}
return max
}, 40000)
console.log(maxVal) // 2000000
// const nums = [3, 2, 4, 6, 9]
let total = nums.reduce((accumulator, currentValue) => {
return accumulator + currentValue
}, 1000)
console.log(total)
// const multiply = (x = 1, y = 1) => {
// // if (typeof y === 'undefined') {
// // y = 1
// // }
// // y = typeof y === 'undefined' ? 1 : y
// return x * y
// }
// console.log(multiply())
// const greet = (name, msg = 'Hi') => {
// return `${msg}, ${name}`
// }
// console.log(greet('john'))
// const numberArr = [5, 10, 11, 2, 1]
// Math.max(nums)
// function add(a, b, c, d, e) {
// return a + b + c + d + e
// }
// function add2(...nums) {
// let total = 0
// // nums.forEach(num => (total += num))
// for (num of nums) {
// total += num
// }
// return total
// }
// console.log(add(...numberArr))
// console.log(add(...numberArr))
// function printNames(name1, name2, ...others) {
// console.log(name1)
// console.log(name2)
// console.log(others)
// }
// function add(x, y, ...others) {
// }
// printNames('john', 'jane', 'jack', 'josh', 'brad')
const fullName = ({ firstName, lastName }) => {
return `${firstName} ${lastName}`
}
const data = [
{
id: 1,
title: 'Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops',
price: 109.95,
description:
'Your perfect pack for everyday use and walks in the forest. Stash your laptop (up to 15 inches) in the padded sleeve, your everyday',
category: 'men clothing',
image: 'https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg'
},
{
id: 2,
title: 'Mens Casual Premium Slim Fit T-Shirts ',
price: 22.3,
description:
'Slim-fitting style, contrast raglan long sleeve, three-button henley placket, light weight & soft fabric for breathable and comfortable wearing. And Solid stitched shirts with round neck made for durability and a great fit for casual fashion wear and diehard baseball fans. The Henley style round neckline includes a three-button placket.',
category: 'men clothing',
image:
'https://fakestoreapi.com/img/71-3HjGNDUL._AC_SY879._SX._UX._SY._UY_.jpg'
},
{
id: 3,
title: 'Mens Cotton Jacket',
price: 55.99,
description:
'great outerwear jackets for Spring/Autumn/Winter, suitable for many occasions, such as working, hiking, camping, mountain/rock climbing, cycling, traveling or other outdoors. Good gift choice for you or your family member. A warm hearted love to Father, husband or son in this thanksgiving or Christmas Day.',
category: 'men clothing',
image: 'https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg'
},
{
id: 4,
title: 'Mens Casual Slim Fit',
price: 15.99,
description:
'The color could be slightly different between on the screen and in practice. / Please note that body builds vary by person, therefore, detailed size information should be reviewed below on the product description.',
category: 'men clothing',
image: 'https://fakestoreapi.com/img/71YXzeOuslL._AC_UY879_.jpg'
},
{
id: 5,
title:
"John Hardy Women's Legends Naga Gold & Silver Dragon Station Chain Bracelet",
price: 695,
description:
"From our Legends Collection, the Naga was inspired by the mythical water dragon that protects the ocean's pearl. Wear facing inward to be bestowed with love and abundance, or outward for protection.",
category: 'jewelery',
image: 'https://fakestoreapi.com/img/71pWzhdJNwL._AC_UL640_QL65_ML3_.jpg'
},
{
id: 6,
title: 'Solid Gold Petite Micropave ',
price: 168,
description:
'Satisfaction Guaranteed. Return or exchange any order within 30 days.Designed and sold by Hafeez Center in the United States. Satisfaction Guaranteed. Return or exchange any order within 30 days.',
category: 'jewelery',
image: 'https://fakestoreapi.com/img/61sbMiUnoGL._AC_UL640_QL65_ML3_.jpg'
},
{
id: 7,
title: 'White Gold Plated Princess',
price: 9.99,
description:
"Classic Created Wedding Engagement Solitaire Diamond Promise Ring for Her. Gifts to spoil your love more for Engagement, Wedding, Anniversary, Valentine's Day...",
category: 'jewelery',
image: 'https://fakestoreapi.com/img/71YAIFU48IL._AC_UL640_QL65_ML3_.jpg'
},
{
id: 8,
title: 'Pierced Owl Rose Gold Plated Stainless Steel Double',
price: 10.99,
description:
'Rose Gold Plated Double Flared Tunnel Plug Earrings. Made of 316L Stainless Steel',
category: 'jewelery',
image: 'https://fakestoreapi.com/img/51UDEzMJVpL._AC_UL640_QL65_ML3_.jpg'
},
{
id: 9,
title: 'WD 2TB Elements Portable External Hard Drive - USB 3.0 ',
price: 64,
description:
'USB 3.0 and USB 2.0 Compatibility Fast data transfers Improve PC Performance High Capacity; Compatibility Formatted NTFS for Windows 10, Windows 8.1, Windows 7; Reformatting may be required for other operating systems; Compatibility may vary depending on user’s hardware configuration and operating system',
category: 'electronics',
image: 'https://fakestoreapi.com/img/61IBBVJvSDL._AC_SY879_.jpg'
},
{
id: 10,
title: 'SanDisk SSD PLUS 1TB Internal SSD - SATA III 6 Gb/s',
price: 109,
description:
'Easy upgrade for faster boot up, shutdown, application load and response (As compared to 5400 RPM SATA 2.5” hard drive; Based on published specifications and internal benchmarking tests using PCMark vantage scores) Boosts burst write performance, making it ideal for typical PC workloads The perfect balance of performance and reliability Read/write speeds of up to 535MB/s/450MB/s (Based on internal testing; Performance may vary depending upon drive capacity, host device, OS and application.)',
category: 'electronics',
image: 'https://fakestoreapi.com/img/61U7T1koQqL._AC_SX679_.jpg'
},
{
id: 11,
title:
'Silicon Power 256GB SSD 3D NAND A55 SLC Cache Performance Boost SATA III 2.5',
price: 109,
description:
'3D NAND flash are applied to deliver high transfer speeds Remarkable transfer speeds that enable faster bootup and improved overall system performance. The advanced SLC Cache Technology allows performance boost and longer lifespan 7mm slim design suitable for Ultrabooks and Ultra-slim notebooks. Supports TRIM command, Garbage Collection technology, RAID, and ECC (Error Checking & Correction) to provide the optimized performance and enhanced reliability.',
category: 'electronics',
image: 'https://fakestoreapi.com/img/71kWymZ+c+L._AC_SX679_.jpg'
},
{
id: 12,
title:
'WD 4TB Gaming Drive Works with Playstation 4 Portable External Hard Drive',
price: 114,
description:
"Expand your PS4 gaming experience, Play anywhere Fast and easy, setup Sleek design with high capacity, 3-year manufacturer's limited warranty",
category: 'electronics',
image: 'https://fakestoreapi.com/img/61mtL65D4cL._AC_SX679_.jpg'
},
{
id: 13,
title: 'Acer SB220Q bi 21.5 inches Full HD (1920 x 1080) IPS Ultra-Thin',
price: 599,
description:
'21. 5 inches Full HD (1920 x 1080) widescreen IPS display And Radeon free Sync technology. No compatibility for VESA Mount Refresh Rate: 75Hz - Using HDMI port Zero-frame design | ultra-thin | 4ms response time | IPS panel Aspect ratio - 16: 9. Color Supported - 16. 7 million colors. Brightness - 250 nit Tilt angle -5 degree to 15 degree. Horizontal viewing angle-178 degree. Vertical viewing angle-178 degree 75 hertz',
category: 'electronics',
image: 'https://fakestoreapi.com/img/81QpkIctqPL._AC_SX679_.jpg'
},
{
id: 14,
title:
'Samsung 49-Inch CHG90 144Hz Curved Gaming Monitor (LC49HG90DMNXZA) – Super Ultrawide Screen QLED ',
price: 999.99,
description:
'49 INCH SUPER ULTRAWIDE 32:9 CURVED GAMING MONITOR with dual 27 inch screen side by side QUANTUM DOT (QLED) TECHNOLOGY, HDR support and factory calibration provides stunningly realistic and accurate color and contrast 144HZ HIGH REFRESH RATE and 1ms ultra fast response time work to eliminate motion blur, ghosting, and reduce input lag',
category: 'electronics',
image: 'https://fakestoreapi.com/img/81Zt42ioCgL._AC_SX679_.jpg'
},
{
id: 15,
title: "BIYLACLESEN Women's 3-in-1 Snowboard Jacket Winter Coats",
price: 56.99,
description:
'Note:The Jackets is US standard size, Please choose size as your usual wear Material: 100% Polyester; Detachable Liner Fabric: Warm Fleece. Detachable Functional Liner: Skin Friendly, Lightweigt and Warm.Stand Collar Liner jacket, keep you warm in cold weather. Zippered Pockets: 2 Zippered Hand Pockets, 2 Zippered Pockets on Chest (enough to keep cards or keys)and 1 Hidden Pocket Inside.Zippered Hand Pockets and Hidden Pocket keep your things secure. Humanized Design: Adjustable and Detachable Hood and Adjustable cuff to prevent the wind and water,for a comfortable fit. 3 in 1 Detachable Design provide more convenience, you can separate the coat and inner as needed, or wear it together. It is suitable for different season and help you adapt to different climates',
category: 'women clothing',
image: 'https://fakestoreapi.com/img/51Y5NI-I5jL._AC_UX679_.jpg'
},
{
id: 16,
title:
"Lock and Love Women's Removable Hooded Faux Leather Moto Biker Jacket",
price: 29.95,
description:
'100% POLYURETHANE(shell) 100% POLYESTER(lining) 75% POLYESTER 25% COTTON (SWEATER), Faux leather material for style and comfort / 2 pockets of front, 2-For-One Hooded denim style faux leather jacket, Button detail on waist / Detail stitching at sides, HAND WASH ONLY / DO NOT BLEACH / LINE DRY / DO NOT IRON',
category: 'women clothing',
image: 'https://fakestoreapi.com/img/81XH0e8fefL._AC_UY879_.jpg'
},
{
id: 17,
title: 'Rain Jacket Women Windbreaker Striped Climbing Raincoats',
price: 39.99,
description:
"Lightweight perfet for trip or casual wear---Long sleeve with hooded, adjustable drawstring waist design. Button and zipper front closure raincoat, fully stripes Lined and The Raincoat has 2 side pockets are a good size to hold all kinds of things, it covers the hips, and the hood is generous but doesn't overdo it.Attached Cotton Lined Hood with Adjustable Drawstrings give it a real styled look.",
category: 'women clothing',
image: 'https://fakestoreapi.com/img/71HblAHs5xL._AC_UY879_-2.jpg'
},
{
id: 18,
title: "MBJ Women's Solid Short Sleeve Boat Neck V ",
price: 9.85,
description:
'95% RAYON 5% SPANDEX, Made in USA or Imported, Do Not Bleach, Lightweight fabric with great stretch for comfort, Ribbed on sleeves and neckline / Double stitching on bottom hem',
category: 'women clothing',
image: 'https://fakestoreapi.com/img/71z3kpMAYsL._AC_UY879_.jpg'
},
{
id: 19,
title: "Opna Women's Short Sleeve Moisture",
price: 7.95,
description:
'100% Polyester, Machine wash, 100% cationic polyester interlock, Machine Wash & Pre Shrunk for a Great Fit, Lightweight, roomy and highly breathable with moisture wicking fabric which helps to keep moisture away, Soft Lightweight Fabric with comfortable V-neck collar and a slimmer fit, delivers a sleek, more feminine silhouette and Added Comfort',
category: 'women clothing',
image: 'https://fakestoreapi.com/img/51eg55uWmdL._AC_UX679_.jpg'
},
{
id: 20,
title: 'DANVOUY Womens T Shirt Casual Cotton Short',
price: 12.99,
description:
'95%Cotton,5%Spandex, Features: Casual, Short Sleeve, Letter Print,V-Neck,Fashion Tees, The fabric is soft and has some stretch., Occasion: Casual/Office/Beach/School/Home/Street. Season: Spring,Summer,Autumn,Winter.',
category: 'women clothing',
image: 'https://fakestoreapi.com/img/61pHAEJ4NML._AC_UX679_.jpg'
}
]
// Write a function (arrow function) that accepts a product array, priceKey (optional)
// It will map over all the items in the array and find the price key
// return a new array of objects with the price converted to rupees
// const currencyConv = arrObj => {
// return arrObj.map(item => {
// return { ...item, price: item.price * 75 }
// })
// }
// const currencyConv = arrObj =>
// arrObj.map(item => ({ ...item, price: item.price * 75 }))
// console.log(currencyConv(data))
// const currencyConv = arr => {
// const updatedArr = []
// arr.forEach(obj => updatedArr.push({ ...obj, price: obj.price * 75 }))
// return updatedArr
// }
// console.log(currencyConv(data))
const currencyConv = (arrObj, tarKey = 'price') => {
return arrObj.map(item => {
return { ...item, [tarKey]: item[tarKey] * 75 }
})
}
console.log(currencyConv(data))
// Write a function that accepts a dataset, key, value
// return all the objects that have this value
customFilter(data, 'price', 12.99)
// const maths = {
// add: function (x, y) {
// return x + y
// },
// sub: function (x, y) {
// return x - y
// },
// info: 'Maths function'
// }
// console.log(maths.add(10, 20))
// console.log(maths.info)
// 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 total = movieReviews.reduce((acc, nextVal) => acc + nextVal)
// const average = total / movieReviews.length
// const movieReviewInfo = {
// highest: highest,
// lowest: lowest,
// total: total,
// average: average
// }
// const movieReviewInfo = {
// highest,
// lowest,
// total,
// average
// }
// const movieReviewInfo = { highest, lowest, total, average }
// console.log(movieReviewInfo)
// console.log(movieReviews)
// console.log(highest)
// console.log(lowest)
// console.log(total)
// console.log(average)
// 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,
// acc: total,
// average
// }
// }
// console.log(getReviewDetails([4.5, 5.0, 3.2]))
// const username = 'janedoe'
// const role = 'admin'
// const user1 = {
// [role]: username,
// [username.toUpperCase()]: username
// }
// console.log(user1)
// const addProperty = (obj, k, v) => {
// return { ...obj, [k]: v }
// }
// const addProperty = (obj, k, v) => ({ ...obj, [k]: v })
// const user = {
// firstName: 'John',
// lastName: 'Doe'
// }
// console.log(addProperty(user, 'age', 25))
// console.log(addProperty(user, 'lastName', 'cool'))
// const math = {
// multiply: function (x, y) {
// return x * y
// },
// divide: function (x, y) {
// return x / y
// },
// subtract: function (x) {
// return x - x
// },
// info: 'The math object'
// }
// function square(x) {
// return x * x
// }
// const power = {
// square,
// cube: function (x) {
// return x * x * x
// },
// hypercube: function (x) {
// return x * x * x * x
// }
// }
// console.log(square(20))
// console.log(power.cube(20))
// console.log(power.hypercube(20))
// const math2 = {
// multiply(x, y) {
// return x * y
// },
// divide(x, y) {
// return x / y
// },
// subtract(x, y) {
// return x - y
// }
// }
// console.log(math2.multiply())
// function greet() {
// console.log('Hello World!')
// // console.log(this)
// }
// // greet()
// // console.log(this)
// greet()
// this.greet()
// function greet() {
// console.log(this)
// }
// const user = {
// firstName: 'John',
// lastName: 'Doe',
// role: 'admin',
// fullName() {
// console.log(this)
// }
// }
// // console.log(user.firstName)
// // console.log(user.lastName)
// // console.log(user.role)
// user.fullName()
// greet()
// const user = {
// firstName: 'John',
// lastName: 'Doe',
// role: 'admin',
// fullName() {
// console.log(`${this.firstName} ${this.lastName} is ${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()
const user = {
firstName: 'John',
lastName: 'Doe',
role: 'admin',
greet() {
console.log('hello world')
},
fullName() {
return `${this.firstName} ${this.lastName} is an ${this.role}`
},
logDetails() {
console.log(this)
console.log(`${this.fullName()} and is cool!`)
}
}
const coolUser = {
firstName: 'Jane',
lastName: 'Chan',
role: 'superadmin',
fullName: user.fullName,
logDetails: user.logDetails
}
// user.logDetails()
// const outsideLogDetails = user.logDetails()
// console.log(outsideLogDetails)
// const outsideGreet = user.greet
// outsideGreet()
const logDetails = user.logDetails
// logDetails()
// user.logDetails()
// console.log(coolUser.fullName())
coolUser.logDetails()
// const hellos = {
// messages: [
// 'hello world',
// 'hello universe',
// 'hello darkness',
// 'hello hello',
// 'heylo'
// ],
// pickMsg() {
// console.log(this)
// const index = Math.floor(Math.random() * this.messages.length)
// return this.messages[index]
// },
// start() {
// setInterval(() => console.log(this.pickMsg()), 1000)
// }
// }
// // setInterval(function () {
// // console.log('HELLO WORLD')
// // }, 500)
// hellos.start()
// const h1 = document.getElementById('pagetitle')
// console.dir(h1)
// const li = document.getElementsByTagName('li')
// console.log(li)
// const p = document.getElementsByTagName('p')
// console.log(p.length)
// const special = document.getElementsByClassName('special')
// console.log(special)
const someUl = document.getElementsByTagName('ul')[0]
// console.log(someUl[0])
const specials = someUl.getElementsByClassName('special')
console.log(specials)
// // const ul = document.querySelector('ul')
// // const allLis = ul.querySelectorAll('li')
// // allLis[0].innerText = 'This is the modified version.'
// // console.log(ul.innerText)
// const ul = document.querySelector('ul')
// const allLis = ul.querySelectorAll('li')
// // console.log(allLis)
// for (let li of allLis) {
// li.innerHTML += '<b class="bold-text">Added to it via JS</b>'
// }
// 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 = 'black'
// li.style.fontFamily = 'Helvetica, sans-serif'
// }
// 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://4.img-dpreview.com/files/ph1.jpeg')
// photo.style.width = '400px'
// const photoLink = document.createElement('a')
// photoLink.setAttribute('href', 'https://4.img-dpreview.com/files/ph1.jpeg')
// 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 btn = document.querySelector('#btn1')
// btn.onclick = function () {
// console.log('Incorrect EVENT')
// }
// btn.onclick = function () {
// console.log('Log this as well')
// }
// btn.addEventListener('click', function () {
// console.log('Button was clicked!')
// })
// // btn.addEventListener('click', function () {
// // alert('This button was click and it trigged this!')
// // })
// btn.addEventListener('mouseover', function () {
// btn.innerText = 'Button was hovered'
// // console.log('The mouse was hovered over this button')
// })
// btn.addEventListener('mouseout', function () {
// btn.innerText = 'Button 1'
// // console.log('The mouse was hovered over this button')
// })
// window.addEventListener('scroll', function () {
// console.log('Stop scrolling')
// })
// btn.addEventListener('mouseover', function () {
// const height = Math.floor(Math.random() * window.innerHeight)
// const width = Math.floor(Math.random() * window.innerWidth)
// btn.style.top = `${height}px`
// btn.style.left = `${width}px`
// })
// btn.addEventListener('click', function () {
// btn.innerText = 'You won!'
// document.body.style.backgroundColor = 'green'
// })
// const colors = [
// 'red',
// 'orange',
// 'yellow',
// 'green',
// 'blue',
// 'purple',
// 'indigo',
// 'violet',
// 'teal'
// ]
// const container = document.querySelector('#boxes')
// const printColor = function (e) {
// console.log(this.style.backgroundColor)
// }
// const changeColor = function (e) {
// console.log(e)
// const h1 = document.querySelector('h1')
// h1.innerText = this.style.backgroundColor + ' selected'
// h1.style.color = this.style.backgroundColor
// }
// for (color of colors) {
// const box = document.createElement('div')
// box.style.backgroundColor = color
// box.classList.add('box')
// container.append(box)
// box.addEventListener('click', printColor)
// box.addEventListener('click', changeColor)
// }
// document.body.addEventListener('keypress', function (e) {
// if (e.code === 'Space') {
// console.log('You clicked the space bar')
// }
// })
// const input = document.querySelector('#username')
// input.addEventListener('keydown', function (e) {
// console.log('KEY DOWN')
// })
// input.addEventListener('keyup', function (e) {
// console.log('KEY UP')
// })
// input.addEventListener('keypress', function (e) {
// console.log('KEY PRESS')
// })
taskAdd.querySelector('#addtask')
const todos = document.querySelector('#todos')
taskAdd.addEventListener('keypress', function (event) {
if (event.key === 'Enter') {
const newTaskText = this.value
const newTask = document.createElement('li')
newTask.innerText = newTaskText
todos.append(newTask)
this.value = ''
}
})
// const request = new XMLHttpRequest()
// request.onload = function () {
// console.log('DATA LOADED')
// }
// request.onerror = function () {
// console.log('ERROR!')
// }
// request.open('GET', 'https://swapi.dev/api/planets')
// request.send()
// const req = new XMLHttpRequest()
// req.addEventListener('load', function () {
// console.log('DATA LOADED')
// const data = JSON.parse(this.responseText)
// const planet = data.results[0]
// const filmUrl = planet.films[0]
// // Second request
// const film = new XMLHttpRequest()
// film.addEventListener('load', function () {
// const filmData = JSON.parse(this.responseText)
// console.log(filmData)
// })
// film.open('get', filmUrl, true)
// film.send()
// })
// req.addEventListener('error', function () {
// console.log('ERROR')
// })
// req.open('get', 'https://swapi.dev/api/planets', true)
// req.send()
// console.log(req)
const parseData = res => {
if (res.status !== 200) {
throw new Error(`Status HELLO code error: ${res.status}`)
} else {
return res.json()
}
}
const printData = data => {
// console.log(data)
data.results.forEach(planet => {
console.log(planet.name)
})
// return new Promise((resolve, reject) => {
// resolve(data.next)
// })
return Promise.resolve(data.next)
}
const fetchNext = url => {
return fetch(url)
}
fetch('https://swapi.dev/api/plasanets')
.then(parseData)
.then(printData)
.then(fetchNext)
.then(parseData)
.then(printData)
// .then(parseData)
// .then(data => {
// printData(data)
// return fetchNext(data.next)
// })
// .then(res => {
// return parseData(res)
// })
// .then(data => {
// printData(data)
// })
.catch(err => {
console.log('SOMETHING WENT WRONG\n\n', err)
})
console.log('HELLLLO WORLDDD!')
// SLIDE EXAMPLES
// Fetch basic
fetch('https://swapi.dev/api/planets', {
headers: { Accept: 'application/json' }
})
.then(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)
})
// -------------------------
// XHR example using fetch instead
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)
})
// CHAINING FETCH
fetch('https://swapi.dev/api/planets')
.then(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)
})
// Chaining FETCH -> function abstraction
// 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)
})
// Chaining FETCH -> function abstraction - cleanup
// 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)
})
// fetch('https://swapi.dev/api/planets')
// .then(response => {
// if (response.status !== 200) {
// throw new Error('ERRORRRR!')
// } else {
// console.log(response)
// // return response.json()
// }
// })
// // .then(data => console.log(data.results))
// .catch(err => console.log(err))
// axios
// .get('https://swapi.dev/api/planets')
// .then(({ data }) => {
// // console.log(res.data.results)
// const tatooine = data.results[0]
// console.log('PLANET NAME: ', tatooine.name)
// return axios.get(tatooine.residents[0])
// })
// .then(({ data }) => {
// console.log('PILOT NAME: ', data.name)
// return axios.get(data.starships[0])
// })
// .then(({ data }) => console.log('STARSHIP: ', data.name))
// .catch(err => console.log('SOMETHING WENT WRONG', err))
// const user = {
// name: 'John',
// job: 'FullStack Dev',
// age: 25,
// details: {
// father: 'Jack',
// mother: 'Jane',
// planet: {
// name: 'Tatooine',
// galaxy: 'Far far away',
// boss: 'Lord Vader'
// }
// },
// sayName() {
// console.log(this.name)
// }
// }
// const { details, age, sayName } = user
// console.log(details)
// console.log(age)
// sayName()
// Get a reference the planets div
const planets = document.querySelector('#planets')
const pageTitle = document.querySelector('#title')
const getPlanets = () => {
axios.get('https://swapi.dev/api/planets').then(({ data }) => {
pageTitle.innerHTML = `Total Planets in the galaxy: ${data.count}`
data.results.forEach(planet => {
const planetCard = document.createElement('div')
const planetName = document.createElement('h2')
const planetPop = document.createElement('span')
const planetTerr = document.createElement('span')
planetName.innerText = planet.name
planetPop.innerHTML = `Population: <b>${planet.population}</b><br>`
planetTerr.innerHTML = `Terrain: <b>${planet.terrain}</b>`
planetCard.append(planetName, planetPop, planetTerr)
planetName.classList.add('text-2xl')
planetCard.classList.add('p-4')
planetCard.classList.add('bg-yellow-200')
planets.append(planetCard)
})
})
}
// getPlanets()
// const getPlanets = () => {
// const planetData = []
// axios.get('https://swapi.dev/api/planets/').then(({ data }) => {
// const { results } = data
// results.forEach(planet => {
// const singlePlanetData = {
// name: planet.name,
// residents: []
// }
// planet.residents.forEach(residentLink => {
// axios.get(residentLink).then(res => {
// singlePlanetData.residents.push(res.data.name)
// })
// })
// planetData.push(singlePlanetData)
// })
// })
// return planetData
// }
// console.log(getPlanets())
// async function getData() {
// // const data = axios.get('https://swapi.dev/api/planets')
// throw new Error('Some Error')
// // return 'Hello World'
// }
// getData()
// .then(res => console.log(res))
// .catch(err => console.log(err))
// async function add(x, y) {
// if (typeof x !== 'number' || typeof y !== 'number') {
// throw new Error('X and Y must be numbers')
// }
// return x + y
// }
// add(10, 10)
// .then(res => {
// console.log(res)
// })
// .catch(res => {
// console.log(res)
// })
// async function getData() {
// const response = await axios.get('https://swapi.dev/api/plsdsdanets')
// console.log(response.data)
// }
// // getData()
// getData().catch(err => console.log(err))
// const planetaryDetails = []
// async function getData() {
// try {
// const res = await axios.get('https://swapi.dev/api/planets')
// const residents = []
// // console.log(res.data)
// for (let planet of res.data.results) {
// let planetDetails = {
// name: planet.name,
// residents: []
// }
// for (let resident of planet.residents) {
// let residentData = await axios.get(resident)
// planetDetails.residents.push(residentData.data.name)
// }
// residents.push(planetDetails)
// }
// // console.log(residents)
// // for (let resident of res.data.results[0].residents) {
// // let resData = await axios.get(resident)
// // residents.push(resData.data)
// // }
// // console.log(residents)
// } catch (error) {
// console.log(error)
// }
// }
// getData()
// console.log(planetaryDetails)
// // getData().catch(err => console.log(err))
// 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 prom1 = axios.get('https://pokeapi.co/api/v2/pokemon/1')
// const prom2 = axios.get('https://pokeapi.co/api/v2/pokemon/2')
// const prom3 = axios.get('https://pokeapi.co/api/v2/pokemon/3')
// const poke1 = await prom1
// const poke2 = await prom2
// const poke3 = await prom3
// console.log(poke1.data) // undefined
// console.log(poke2.data) // undefined
// console.log(poke3.data) // undefined
// }
// getPokemon()
// function printPokemon(results) {
// for (let pokemon of results) {
// console.log(pokemon.data.name)
// }
// }
// async function getPokemon() {
// const prom1 = axios.get('https://pokeapi.co/api/v2/pokemon/1')
// const prom2 = axios.get('https://pokeapi.co/api/v2/pokemon/2')
// const prom3 = axios.get('https://pokeapi.co/api/v2/pokemon/3')
// const results = await Promise.all([prom1, prom2, prom3])
// return { data: results.data, final: 'DONE' }
// // console.log(results)
// // printPokemon(results)
// }
const getPokemon = async () => {
const prom1 = axios.get('https://pokeapi.co/api/v2/pokemon/1')
const prom2 = axios.get('https://pokeapi.co/api/v2/pokemon/2')
const prom3 = axios.get('https://pokeapi.co/api/v2/pokemon/3')
const results = await Promise.all([prom1, prom2, prom3])
// console.log([...results])
return [...results]
// return { data: results.data, final: 'DONE' }
}
// const getFinalData = () => {
// return getPokemon()
// }
// console.log(getFinalData())
const final = getPokemon()
console.log('final', final)
// // // const myArr = [1, 2, 3]
// // // const myArr2 = ['Hello', 'World', 'Galaxy']
// // // const myObj = {
// // // firstName: 'John',
// // // lastName: 'Doe',
// // // greet() {
// // // console.log('Hello World')
// // // }
// // // }
// // const myObj2 = {
// // productName: 'Apple watch',
// // productPrice: 100000,
// // message() {
// // console.log(`${this.productName} costs ${this.productPrice}.`)
// // }
// // }
// // myObj2.greet = () => console.log('Hello World!')
// // const myArr = [1, 2, 3, 4]
// // // console.log(myArr)
// // // console.log(myArr2)
// // // console.log(myObj)
// // console.log(myObj2)
// // // // console.log('Hello World')
// // Array.prototype.sayHello = message => console.log(message)
// // Array.prototype.pop = () => console.log('Mai nahi nikalunga!')
// // String.prototype.toUpperCase = str => str.toLowerCase()
// // String.prototype.greet = msg => console.log(`${msg} <- is the message`)
// 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 myDeck2 = initializeDeck()
// // shuffle(myDeck)
// // const hand = []
// // drawCard(myDeck, hand)
// // drawMultiple(2, myDeck, hand)
// // console.log(hand)
// // console.log(myDeck)
// // Refactoring to make the above a factory function
// OBJECT
// 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 { deck, drawnCards } = this
// const card = deck.pop()
// 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 myDeck1 = makeDeck()
// const myDeck2 = makeDeck()
// myDeck1.initializeDeck()
// myDeck2.initializeDeck()
// myDeck1.shuffle()
// myDeck1.drawCard()
// myDeck2.drawCard()
// myDeck1.drawMultiple(3)
// myDeck2.drawMultiple(3)
// console.log(myDeck1)
// console.log(myDeck2)
// CONSTRUCTOR FUNC
// function Person(firstName, lastName, age) {
// this.firstName = firstName
// this.lastName = lastName
// this.age = age
// }
// Person.prototype.greet = function () {
// console.log('Hello World!')
// }
// Person.prototype.sayName = function () {
// console.log(this.firstName + ' ' + this.lastName)
// }
// // const myArr = [1, 2, 3, 4]
// // const myArr = new Array(1, 2, 3, 4)
// // const jane = { firstName: 'Jane', lastName: 'Doe', age: 25 }
// // console.log(myArr)
// const john = new Person('john', 'doe', 25)
// const jane = new Person('jane', 'doe', 27)
// console.log(john)
// console.log(jane)
// class Person {
// constructor(firstName, lastName, age) {
// this.firstName = firstName
// this.lastName = lastName
// this.age = age
// }
// greet() {
// console.log('Hello World!')
// }
// sayName() {
// console.log(this.firstName + ' ' + this.lastName)
// }
// }
// const john = new Person('john', 'doe', 25)
// const jane = new Person('jane', 'doe', 27)
// console.log(john)
// console.log(jane)
// // DECK TYPE
// class Deck {
// constructor() {
// this.deck = []
// this.drawnCards = []
// this.suits = ['hearts', 'diamonds', 'spades', 'clubs']
// this.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 = this.deck.length - 1; i > 0; i--) {
// let j = Math.floor(Math.random() * (i + 1))
// ;[this.deck[i], this.deck[j]] = [this.deck[j], this.deck[i]]
// }
// }
// }
// const deck1 = new Deck()
// const deck2 = new Deck()
// deck1.initializeDeck()
// deck2.initializeDeck()
// deck1.shuffle()
// deck2.shuffle()
// deck1.drawCard()
// deck2.drawCard()
// deck1.drawMultiple(2)
// deck2.drawMultiple(2)
// console.log(deck1)
// console.log(deck2)
// function 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]]
// }
// }
// CLASSES WITH INHERITANCE (SUBCLASS CREATION)
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')
}
}
logout() {
console.log('You have signed out')
}
}
class Subscriber extends User {}
class Creator extends User {
constructor(username, password, aadhaar) {
super(username, password)
this.aadhaar = aadhaar
}
uploadVideo(videoName) {
console.log(`${videoName} was successfully uploaded`)
}
}
const john = new Subscriber('johndoe', 'john@123')
const jane = new Creator('janedoe', 'jane@123', 'kmsalkd776d57q3387')
console.log(john)
console.log(jane)
// john.login('john@123')
john.login('john@123')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Website</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 heading = React.createElement('h1', {
// children: 'Hello World, Universe',
// className: 'title'
// })
// const subheading = React.createElement('h2', {}, 'This is the subtitle')
// const para = React.createElement('p', {
// children: 'This is a paragraph created in ReactJS'
// })
// const sec = React.createElement('div', {
// className: 'intro',
// children: [heading, subheading, para]
// })
// const heading = <h1 className='title'>Hello World, Universe</h1>
// const subheading = <h2>This is the subtitle</h2>
// const para = <p>This is a paragraph created in ReactJS</p>
// console.log(heading)
// const children = 'Hello World. This is the page title'
// const className = 'title'
// const props = { children, className }
// const heading = <h1 {...props} className='introduction' id='test' />
// const message = 'Hello World'
// const myClassName = 'special'
// const heading = <h1 className={myClassName}>{message.toUpperCase()}</h1>
// COMPONENT
function para({ className, children }) {
return <p className={className}>{children}</p>
}
const element = (
<div className='container'>
{para({
children: 'This is a small one-liner paragraph.',
className: 'special'
})}
<p>This is another paragraph</p>
</div>
)
ReactDOM.render(element, document.querySelector('#root'))
</script>
</body>
</html>
//// REACT FULL COMPONENT EXAMPLE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Website</title>
<link
href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
rel="stylesheet"
/>
</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" src="script.js"></script> -->
<script type="text/babel">
// const {title, date, author, children} = {
// title: 'My first blog post',
// date: 'Tue Jan 26 2021',
// author: 'John Doe',
// children: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui atque voluptas corrupti nihil repellat eum sunt nisi, perspiciatis magni aspernatur.',
// }
const Header = () => {
return (
<header className='w-100 border-b-2 py-3'>
<h1 className='text-3xl font-bold'>My Website</h1>
</header>
)
}
const ProductCard = () => {}
const Post = props => {
return (
<article className='p-4 border-2 border-gray-200 rounded'>
<img src={props.imageUrl} alt={props.imgAlt} />
<h3 className='text-2xl font-bold text-gray-700'>{props.title}</h3>
<p className='text-sm font-italic text-green-400'>
Published on {props.date} by {props.author}
</p>
<p className='text-base text-gray-500'>{props.children}</p>
</article>
)
}
const PostUnstyled = props => {
return (
<article>
<img src={props.imageUrl} alt={props.imgAlt} />
<h3>{props.title.toUpperCase()}</h3>
<p>
Published on {props.date} by {props.author}
</p>
<p>{props.children}</p>
</article>
)
}
const element = (
<div>
<Header />
<div className='flex m-10 align-center justify-between'>
<Post
title='My first blog post'
date={new Date().toDateString()}
author='John Doe'
imageUrl='https://www.google.com/logos/doodles/2021/india-republic-day-2021-6753651837108846-l.png'
imgAlt='Blog Image'>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui atque
voluptas corrupti nihil repellat eum sunt nisi, perspiciatis magni
aspernatur.
</Post>
<Post
title='My first blog post'
date={new Date().toDateString()}
author='John Doe'
test='Hello'>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui atque
voluptas corrupti nihil repellat eum sunt nisi, perspiciatis magni
aspernatur.
</Post>
<Post
title='My first blog post'
date={new Date().toDateString()}
author='John Doe'
test='Hello'>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui atque
voluptas corrupti nihil repellat eum sunt nisi, perspiciatis magni
aspernatur.
</Post>
</div>
<PostUnstyled title='My first blog post'>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui atque
voluptas corrupti nihil repellat eum sunt nisi, perspiciatis magni
aspernatur.
</PostUnstyled>
</div>
)
ReactDOM.render(element, document.querySelector('#root'))
</script>
</body>
</html>
import React, { useState } from 'react'
import { Flex, Heading, Link, Box, Icon } from '@chakra-ui/react'
import { HiShoppingBag, HiUser, HiOutlineMenuAlt3 } from 'react-icons/hi'
const MenuItems = ({ children, href }) => (
<Link
href={href}
mt={{ base: 4, md: 0 }}
fontSize='sm'
letterSpacing='wide'
color='whiteAlpha.600'
textTransform='uppercase'
_hover={{ color: 'whiteAlpha.800' }}
mr={5}
display='block'>
{children}
</Link>
)
const Header = () => {
const [show, setShow] = useState(false)
return (
<Flex
as='header'
align='center'
justify='space-between'
wrap='wrap'
py='6'
px='6'
bgColor='gray.800'
shadow='md'>
<Flex align='center' mr='5'>
<Heading
as='h1'
color='whiteAlpha.800'
fontWeight='medium'
size='md'
letterSpacing='wider'
mr={{ md: '1rem', base: 0 }}>
<Link
href='/'
_hover={{ color: 'whiteAlpha.700', textDecor: 'none' }}>
RST Store
</Link>
</Heading>
</Flex>
<Box
onClick={() => setShow(!show)}
display={{ base: 'block', md: 'none', sm: 'block' }}>
<Icon as={HiOutlineMenuAlt3} color='white' w='6' h='6' />
<title>Menu</title>
</Box>
<Box
display={{ sm: show ? 'block' : 'none', md: 'flex' }}
width={{ sm: 'full', md: 'auto' }}
alignItems='center'>
<MenuItems href='/'>
<Flex alignItems='center'>
<Icon as={HiShoppingBag} w='4' h='4' mr='1' />
Cart
</Flex>
</MenuItems>
<MenuItems href='/'>
<Flex alignItems='center'>
<Icon as={HiUser} w='4' h='4' mr='1' />
Login
</Flex>
</MenuItems>
</Box>
</Flex>
)
}
export default Header