HomeWork_JS/Js_15/js.js

//1. fetch basic
// Исследуйте сайт swapi.dev, рассмотрите JSON-ы, которые предоставляются этим сервисом
// (например: https://swapi.dev/api/people/1/, https://swapi.dev/api/people/2/, https://swapi.dev/api/starships/12/
// С помощью следующего кода считать и вывести информацию о Люке Скайвокере:
// Напишите функцию для отображения любого JSON в форме таблицы. Функция должна принимать два параметра:
//     DOM - элемент, в котором строится таблица
//     JSON, который нужно отобразить.
// {
//     const person1 = 'https://swapi.dev/api/people/1/';
//     const person2 = 'https://swapi.dev/api/people/2/';
//     const person3 = 'https://swapi.dev/api/starships/12/';
//
//     let table = document.createElement('table')
//     table.border = 1
//     document.body.append(table)
//
//     function fetchBbasic (dom, source) {
//
//         fetch(source).then(res => res.json())
//             .then(luke => {
//                 for (let [key, value] of Object.entries(luke)) {
//                     let tr = document.createElement("tr")
//                     table.append(tr)
//
//                     let row = document.createElement('td')
//                     row.innerText = key
//                     tr.append(row)
//
//                     let rowValue = document.createElement('td')
//                     rowValue.innerText = value
//                     tr.append(rowValue)
//
//                 }
//                 console.log(luke)
//             })
//     }
//     fetchBbasic(table, person1)
// }

// 2. Расширить функцию отображения:
//     Если одно из полей строка или массив.
//     Если строки или строка содержат в себе https://swapi.dev/api/
//     То выводить вместо текста строки кнопку, при нажатии на которую:
//         делается fetch данных по этой ссылке
//         функция отображения запускает сама себя(рекурсивно) для отображения новых данных в том же элементе.

// {
//     fetch('https://swapi.dev/api/people/1/')
//         .then(res => res.json())
//         .then(luke => {
//             personTable(document.body, luke);
//      })
//
//     function personTable(domElement, jsonElement, elemForRemoval) {
//         let table = document.createElement('table');
//         table.border = 1
//         //elemForRemoval?.remove();
//         domElement.append(table);
//
//         for (let [key, value] of Object.entries(jsonElement)) {
//             let tr = document.createElement("tr")
//                     table.append(tr)
//             let row = document.createElement('td')
//             row.innerText = key
//             tr.append(row)
//
//             let rowValue = document.createElement('td')
//             rowValue.innerText = value
//             tr.append(rowValue)
//
//             if (typeof key === 'string' && value.includes('https://swapi.dev/api/')) {
//                 linkButton(value, rowValue)
//             }
//             else if (Array.isArray(value)) {
//                 value.forEach(element => {
//                     linkButton(element,rowValue)
//                 })
//             }
//         }
//     }
//
//     function linkButton(value, rowValue) {
//         let button = document.createElement('button');
//         button.innerText = 'OPEN LINK';
//         button.onclick = () => {
//             fetch(value)
//                 .then(res => res.json())
//                 .then(data => {
//                     personTable(rowValue, data, button);
//                 })
//         };
//         rowValue.append(button);
//     }
// }

//3. race
// Используя Promise.race запустите запрос на API (swapi.dev) параллельно с delay. По результату определите, что было
// быстрее, запрос по сети, или определенный интервал времени. Подберите параметр delay так, что бы результат был
// неизвестен изначально, и при многократных запусках быстрее был то delay, то myfetch.
// {
//     let myFetch = new Promise(resolve => fetch('https://swapi.dev/api/people/1/').then(res => res.json())
//         .then(luke => {
//             console.log(luke)
//         }) )
//
//     function delay(ms){
//         function executor(fulfill, reject) {
//             setTimeout(() => fulfill(ms), ms) }
//         return new Promise(executor)
//     }
//     Promise.race([myFetch, delay(80)]).then((value) => {
//         console.log(value);
//      });
//
// }

//4. Promisify: confirm
// Промисифицируйте confirm. Напишите функцию, которая возвращает промис, который переходит в состояние fulfilled при
// нажатии "OK" и реджектится при нажатии "Cancel". Функция должна принимать строку для confirm:
// {
//     function confirmPromise(text){
//         function executor(fulfill, reject){
//             if (confirm(text) === true) {
//                 fulfill()
//             } else {
//                 reject()
//             }
//         }
//         return new Promise(executor)
//     }
//
//     confirmPromise('Промисы это сложно?').then(() => console.log('не так уже и сложно'),
//         () => console.log('respect за усидчивость и внимательность'))
// }

//5. Promisify: prompt
// Аналогично предыдующему заданию промисифицируйте prompt. В случае нажатия "ОК" промис резолвится и его результатом
// становится текст, введенный пользователем в окне prompt. В случае нажатия "Отмены" - промис реджектится. Параметром
// функции будет текст сообщения в prompt
// {
//     function promptPromise(text) {
//         function executor(fulfill, reject) {
//             let answer = prompt(text);
//             if (answer) {
//                 fulfill(answer);
//             } else {
//                 reject();
//             }
//         }
//         return new Promise(executor);
//     }
//
//     promptPromise("Как тебя зовут?").then(name => console.log(`Тебя зовут ${name}`),
//         () => console.log('Ну зачем морозиться, нормально же общались'))
// }

//6. Promisify: LoginForm
// Промисифицируйте конструктор LoginForm. В промисифицированную функцию передается DOM-элемент - родитель для формы,
// В колбэке, предназначенном для получения логина и пароля в момент нажатия кнопки "Login...", который вы назначаете в
// объекте LoginForm, зарезолвите промис. Результатом промиса должен быть объект с ключами login и password, ключи
// должны содержать значения полей ввода.
// {
//     function loginPromise (parent) {
//         function executor (resolve, reject) {
//         const form = new LoginForm(parent, false)
//         form.inputButtonOnclick = function () {
//             resolve ({login: this.getLogin(), password: this.getPass()})
//             }
//         }
//         return new Promise(executor)
//     }
//
//     loginPromise(document.body).then(({login, password}) => console.log(`Вы ввели ${login} и ${password}`))
//
//
//     function LoginForm(parent, passOpenDefault){
//         function Password(parent, open) {
//
//             const inputPass = document.createElement('input')
//             parent.append(inputPass)
//             const checkboxPass = document.createElement('input')
//             checkboxPass.type = 'checkbox'
//             parent.append(checkboxPass)
//
//             this.setValue = (value) => {
//                 inputPass.value = value
//                 if (typeof this.onChange === 'function') this.onChange(this.getValue()) // запускается по событию oninput в поле ввода, передает текст в колбэк
//             }      //задает значение
//             this.getValue = () => inputPass.value                   //читает значение
//             this.setOpen = (open) => {
//                 if (open) {
//                     checkboxPass.checked = true
//                     inputPass.type = "text"
//                 }
//                 if (!open) {
//                     checkboxPass.checked = false
//                     inputPass.type = "password"
//                 }
//                 if (typeof this.onOpenChange === 'function') this.onOpenChange(this.getOpen()) // запускается по изменению состояния открытости пароля
//             } //задает открытость текста в поле ввода
//             this.getOpen = () => checkboxPass.checked //читает открытость текста в поле ввода
//
//             this.setOpen(open)
//             inputPass.oninput = () => this.setValue(this.getValue())
//             checkboxPass.oninput = () => this.setOpen(this.getOpen())
//
//         }
//
//         const LoginForm = document.createElement('div')
//         parent.append(LoginForm)
//
//         const inputLogin = document.createElement('input')
//         LoginForm.append(inputLogin)
//
//         let p = new Password(LoginForm, passOpenDefault)
//
//         const inputButton = document.createElement('input')
//         inputButton.type = 'button'
//         inputButton.value = 'войти'
//         LoginForm.append(inputButton)
//         inputButton.disabled = true
//
//         p.onChange = () => checkButtonDisabled()
//         inputLogin.oninput = () => checkButtonDisabled()
//
//         function checkButtonDisabled () {
//             if (p.getValue() && inputLogin.value) inputButton.disabled = false
//             else inputButton.disabled = true
//         }
//
//         this.getLogin = () => inputLogin.value
//         this.setLogin = (value) => {
//             inputLogin.value = value
//             checkButtonDisabled()
//
//         }
//         this.getPass = () => p.getValue()
//         this.setPass = (value) => {
//             p.setValue(value)
//             checkButtonDisabled()
//         }
//
//         inputButton.onclick = () => {
//             if (typeof this.inputButtonOnclick === 'function') this.inputButtonOnclick() //функция при нажатии на кнопку войти
//         }
//     }
// }