Scratchpad #12
// // const user = {
// // firstName: 'John',
// // lastName: 'Doe',
// // role: 'admin',
// // fullName: function () {
// // return `${this.firstName} ${this.lastName} is an ${this.role}`;
// // },
// // logDetails: function () {
// // console.log(`${this.fullName()} and is cool!`);
// // },
// // };
// const hellos = {
// messages: [
// 'hello world',
// 'hello universe',
// 'hello darkness',
// 'hello hello',
// 'heylo',
// ],
// pickMsg: function () {
// const index = Math.floor(Math.random() * this.messages.length);
// return this.messages[index];
// },
// start: function () {
// setInterval(() => {
// // this -> hellos
// console.log(this.pickMsg());
// }, 1000);
// },
// };
// // console.log(hellos.pickMsg());
// hellos.start();
// const user = {
// firstName: 'John',
// lastName: 'Doe',
// role: 'admin',
// fullName: () => {
// return `${this.firstName} ${this.lastName} is an ${this.role}`;
// },
// logDetails: () => {
// console.log(`${this.fullName()} and is cool!`);
// },
// };
// console.log(user.fullName());
// console.dir(document);
// const result = document.getElementById('special');
// console.dir(result);
// const result2 = document.getElementById('helloWorld');
// console.dir(result2);
// const result = document.getElementsByTagName('li');
// console.log(result);
// const result = document.getElementsByClassName('red-text');
// const ul = result[1];
// const result2 = ul.getElementsByClassName('hello');
// console.log(result2);
const result = document.querySelectorAll('.hello');
console.log(result);
Scratchpad #13
// const para = document.querySelector('#special');
// // console.dir(para.innerText);
// para.innerText = 'Hello World';
// const ul = document.querySelector('ul');
// // console.log(ul.innerText);
// ul.innerText = 'hello world';
// const p = document.querySelector('.hello2');
// console.log(p.textContent);
// const p = document.querySelector('p');
// p.innerHTML = 'Hello <strong>World</strong>';
// p.innerHTML += '======';
// const a = document.querySelector('a');
// console.log(a.href);
// console.log(a.id);
// a.href = 'https://yahoo.co.in';
// a.id = 'something-else';
// console.log(p.innerText);
// console.dir(a.className);
// // a.className = 'Hello';
// const a = document.querySelector('a');
// // console.log(a.href);
// // console.log(a.className);
// // console.log(a.id);
// // console.log(a.getAttribute('href'));
// // console.log(a.getAttribute('class'));
// // console.log(a.getAttribute('id'));
// a.setAttribute('href', 'https://gmail.com');
// a.setAttribute('id', 'testID');
// const li = document.querySelector('#listitem');
// // console.log(li.parentElement.parentElement);
// console.log(li.previousElementSibling.previousElementSibling);
// const ul = document.querySelector('ul');
// console.log(ul.children);
// const listItems = document.querySelectorAll('li');
// for (let li of listItems) {
// setInterval(function () {
// li.innerText = Math.random();
// }, 50);
// }
// const li = document.querySelector('#listitem');
// // console.log(li.innerText);
// li.style.fontSize = '100px';
// li.style.color = 'red';
// const listItems = document.querySelectorAll('li');
// const colors = [
// 'red',
// 'green',
// 'yellow',
// 'blue',
// 'purple',
// 'pink',
// 'orange',
// 'aqua',
// 'violet',
// ];
// for (let li of listItems) {
// setInterval(function () {
// const randomIdx = Math.floor(Math.random() * colors.length);
// li.innerText = Math.random();
// li.style.color = colors[randomIdx];
// document.body.style.backgroundColor = colors[randomIdx];
// }, 50);
// }
// const li = document.querySelector('#listitem');
// // console.log(li.style.color);
// const styles = getComputedStyle(li);
// console.log(styles.color);
const li = document.querySelector('li');
// li.className = 'todo done';
// console.log(li.classList);
li.classList.add('done');
// li.classList.add('hello');
li.classList.remove('done');
li.classList.toggle('hello');
Scratchpad #14
// // const root = document.querySelector('#root');
// // const title = document.createElement('h1');
// // title.innerText = 'This is a title';
// // title.style.color = 'red';
// // title.style.fontFamily = 'Arial';
// // const container = document.createElement('section');
// // container.appendChild(title);
// // root.appendChild(container);
// // const ul = document.querySelector('ul');
// // const listItem = document.createElement('li');
// // listItem.innerText = 'Hello this is some text';
// // listItem.style.color = 'purple';
// // const li = document.querySelector('.imp');
// // // ul.appendChild(listItem);
// // ul.insertBefore(listItem, li);
// // const para = document.querySelector('.hello');
// // // // console.log(para.innerText);
// // // const b = document.createElement('b');
// // // b.innerText = 'This is some bold content';
// // // const i = document.createElement('i');
// // // i.innerText = 'This is some italic content';
// // // // para.insertAdjacentElement('afterbegin', b);
// // // para.append(b, i);
// // para.remove();
// // const btn = document.querySelector('button');
// // btn.addEventListener('click', function () {
// // console.log('Hello World');
// // });
// // btn.addEventListener('click', function () {
// // console.log('Goodbye World');
// // });
// // btn.addEventListener('mouseleave', function () {
// // console.log(Math.random());
// // });
// // btn.onclick = function () {
// // console.log('Hello World');
// // };
// // btn.onclick = function () {
// // console.log('Goodbye world');
// // };
// // ------------------------------
// const input = document.querySelector('input');
// const button = document.querySelector('button');
// const ul = document.querySelector('ul');
// button.addEventListener('click', function () {
// const li = document.createElement('li');
// li.innerText = input.value;
// const btn = document.createElement('button');
// btn.innerText = 'Delete';
// btn.addEventListener('click', function () {
// li.remove();
// });
// li.append(btn);
// ul.append(li);
// input.value = '';
// });
// window.addEventListener('scroll', function () {
// console.log(Math.random());
// });
// btn.addEventListener('mouseover', function () {
// btn.innerText = 'Button Hovered!';
// });
// btn.addEventListener('mouseout', function () {
// btn.innerText = 'Button 1';
// });
// // Attach a scroll event on the window itself
// window.addEventListener('scroll', function () {
// console.log('Stop Scrolling!');
// });
const btn = document.querySelector('button');
btn.style.position = 'relative';
btn.addEventListener('mouseover', function () {
const height = Math.floor(Math.random() * window.innerHeight) + 1;
const width = Math.floor(Math.random() * window.innerWidth) + 1;
btn.style.left = `${width}px`;
btn.style.top = `${height}px`;
});
btn.addEventListener('click', function () {
btn.innerText = 'You WIN!';
document.body.style.backgroundColor = 'green';
});
Scratchpad #15
// function multiply(x, y) {
// return x * y;
// }
// function square(x) {
// return multiply(x, x);
// }
// function rightTriangle(a, b, c) {
// return square(3) + square(b) === square(c);
// }
// rightTriangle(3, 4, 5);
// console.log('First log');
// alert('Some alert!');
// console.log('Second log');
// console.log('First log');
// setTimeout(() => {
// console.log('THIS IS THE LOG');
// }, 5000);
// console.log('Second 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)`;
// }, 1000);
// }, 1000);
// }, 1000);
// }, 1000);
// }, 1000);
// }, 1000);
const willGetAPlaystation = new Promise((resolve, reject) => {
setTimeout(() => {
const num = Math.random();
if (num > 0.5) {
resolve();
} else {
reject();
}
}, 1000);
});
willGetAPlaystation
.then(() => {
console.log('Thank you chacha');
})
.catch(() => {
console.log('F you chacha');
});
Scratchpad #16
// // function makePlayStationPromise() {
// // return new Promise((resolve, reject) => {
// // setTimeout(() => {
// // const rand = Math.random();
// // if (rand < 0.5) {
// // resolve();
// // } else {
// // reject();
// // }
// // }, 5000);
// // });
// // }
// // const result = makePlayStationPromise();
// // result
// // .then(() => {
// // console.log('Thank you');
// // })
// // .catch(() => {
// // console.log('Thank you, not');
// // });
// function fakeRequest(route) {
// 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',
// },
// '/about': 'This is the about page',
// };
// const data = pages[route];
// if (data) {
// resolve({ status: 200, data });
// } else {
// reject({ status: 400, message: 'This route does not exist' });
// }
// }, 2000);
// });
// }
// fakeRequest('/users')
// .then((response) => {
// const userId = response.data[0].id;
// return fakeRequest(`/users/${userId}`);
// })
// .then((response) => {
// const postId = response.data.topPostId;
// return fakeRequest(`/posts/${postId}`);
// })
// .then((response) => {
// console.log(response);
// })
// .catch((err) => {
// console.log(err);
// });
// fetch('https://swapi.dev/api/people')
// .then((res) => {
// if (!res.ok) {
// throw new Error();
// }
// return res.json();
// })
// .then((res) => {
// console.log(res);
// })
// .catch((err) => {
// console.log('This is the error', err);
// });
// result
// .then((res) => {
// return res.json();
// })
// .then((res) => {
// console.log(res);
// })
// .catch((err) => {
// console.log('This is the error', err);
// });
// axios
// .get('https://swapi.dev/api/people')
// .then((res) => {
// return axios.get(res.data.results[0].films[0]);
// })
// .then((res) => {
// console.log(res.data);
// })
// .catch((err) => {
// console.log(err.message);
// });
// const root = document.querySelector('#root');
// root.style.display = 'grid';
// root.style.gridTemplateColumns = '1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr';
// root.style.gap = '20px';
// const count = document.querySelector('#count');
// axios
// .get('https://pokeapi.co/api/v2/pokemon?limit=10000')
// .then((res) => {
// const h1 = document.createElement('h1');
// h1.innerText = 'Total Pokemon Count: ' + res.data.results.length;
// root.append(h1);
// for (let pokemon of res.data.results) {
// axios
// .get(pokemon.url)
// .then((res) => {
// const div = document.createElement('div');
// const img = document.createElement('img');
// img.src = res.data.sprites.other['official-artwork'].front_default;
// img.style.width = '100%';
// div.append(img);
// root.append(div);
// })
// .catch((err) => {
// console.log(err);
// });
// }
// })
// .catch((err) => {
// console.log(err);
// });
let arr1 = [1, 2, 3, 4];
arr1.forEach((num) => {
console.log(num);
});