FullStack May 2023 Evening

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