123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345 |
- {
- fetch('https://swapi.dev/api/people/1/')
- .then(res => res.json())
- .then(luke => {
- starWarsData(document.body, luke)
- })
- function starWarsData(parent, data) {
- const table = document.createElement('table')
- table.style.cssText = `
- border: 1px solid black;
- border-collapse: collapse;`
- parent.append(table)
- for (let [key, value] of Object.entries(data)) {
- const row = document.createElement('tr')
- table.append(row)
- let col = document.createElement('td')
- col.innerText = `${key}`
- col.style.cssText = `
- border: 1px solid black;
- padding: 5px 10px;`
- row.append(col)
- col = document.createElement('td')
- col.innerText = `${value}`
- col.style.cssText = `
- border: 1px solid black;
- padding: 5px 10px;`
- row.append(col)
- }
- }
- }
- {
- function starWarsData(parent, data) {
-
- const table = document.createElement('table')
- table.style.cssText = `
- border: 1px solid black;
- border-collapse: collapse;
- margin: 10px;`
- parent.append(table)
-
- const tableHead = document.createElement('tr')
- table.append(tableHead)
- const colHead = document.createElement('td')
- colHead.innerText = Object.values(data)[0]
- colHead.colSpan = 2
- colHead.style.cssText = `
- background-color: #a0a0a0;
- text-align: center;
- font-size: 1.5em;
- font-weight: 900;
- line-height: 1.5em;`
- tableHead.append(colHead)
-
- for (const [key, values] of Object.entries(data)) {
-
- const row = document.createElement('tr')
- table.append(row)
-
- let col = document.createElement('td')
- col.innerText = key
- col.style.cssText = `
- border: 1px solid black;
- padding: 5px 10px;`
- row.append(col)
-
- col = document.createElement('td')
- col.style.cssText = `
- border: 1px solid black;
- padding: 5px 10px;`
-
- if (typeof values !== 'object') {
- if (!(values.toString().includes('swapi.dev/api'))) {
- col.innerText = values
- col.style.cssText = `
- border: 1px solid black;
- padding: 5px 10px;`
- row.append(col)
- } else {
- row.append(col)
- createBtn(col, values)
- }
- } else {
- row.append(col)
- for (const value of values) {
- createBtn(col, value)
- }
- }
- }
-
- function createBtn(parent, param) {
- const btn = document.createElement('button')
- btn.innerText = param
- btn.style.margin = '5px'
- parent.append(btn)
- btn.onclick = () => {
- fetch(param)
- .then(res => res.json())
- .then(item => {
- starWarsData(parent, item)
- })
- btn.disabled = true
- }
- }
- }
-
- fetch('https://swapi.dev/api/people/1/')
- .then(res => res.json())
- .then(luke => {
- starWarsData(document.body, luke)
- })
- }
- {
- const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))
- const promiseDelay = delay(Math.random() * 250)
- .then(result => result)
- const promiseApi = fetch('https://swapi.dev/api/people/1/')
- .then(res => res.json())
- .then(result => result)
- Promise.race([promiseDelay, promiseApi]).then((value) => console.log(value))
- }
- {
- function confirmPromise(text) {
- function executor(resolve, reject) {
- confirm(text) ? resolve() : reject()
- }
- return new Promise(executor)
- }
- confirmPromise('Промисы это сложно?').then(() => console.log('не так уже и сложно'), () => console.log('respect за усидчивость и внимательность'))
- }
- {
- function promptPromise(text) {
- function executor(resolve, reject) {
- let question = prompt(text)
- question !== null && question !== '' ? resolve(question) : reject()
- }
- return new Promise(executor)
- }
- promptPromise("Как тебя зовут?").then(name => console.log(`Тебя зовут ${name}`),
- () => console.log('Ну зачем морозиться, нормально же общались'))
- }
- {
- function LoginForm(parent) {
- function Password(parent, open) {
-
- const inputPassword = document.createElement('input')
- inputPassword.type = 'password'
- inputPassword.placeholder = 'Insert password'
- parent.append(inputPassword)
-
- const inputCheckbox = document.createElement('input')
- inputCheckbox.type = 'checkbox'
- inputCheckbox.checked = false
- parent.append(inputCheckbox)
-
- this.getValue = () => inputPassword.value
- this.getOpen = () => inputCheckbox.checked
-
- this.setValue = (value) => inputPassword.value = value
- this.setOpen = (open) => {
- if (open === true) {
- inputPassword.type = 'text'
- inputCheckbox.checked = true
- }
- if (open === false) {
- inputPassword.type = 'password'
- inputCheckbox.checked = false
- }
- return inputPassword.type, inputCheckbox.checked
- }
-
- inputPassword.addEventListener('input', () => {
- this.onChange(inputPassword.value)
- })
-
- inputCheckbox.addEventListener('change', () => {
- this.setOpen(inputCheckbox.checked),
- this.onOpenChange(inputCheckbox.checked)
- })
- }
- function Login(parent) {
-
- const inputLogin = document.createElement('input')
- inputLogin.type = 'text'
- inputLogin.placeholder = 'Insert login'
- parent.append(inputLogin)
-
- this.getValue = () => inputLogin.value
-
- this.setValue = (value) => inputLogin.value = value
-
- inputLogin.addEventListener('input', () => {
- this.onChange(inputLogin.value)
- })
- }
-
- const form = document.createElement('form')
- parent.append(form)
- const loginLabel = document.createElement('label')
- loginLabel.innerText = 'Login:'
- form.append(loginLabel)
- let breakSymbol = document.createElement('br')
- form.append(breakSymbol)
- const login = new Login(form)
- breakSymbol = document.createElement('br')
- form.append(breakSymbol)
- const passwordLabel = document.createElement('label')
- passwordLabel.innerText = 'Password:'
- form.append(passwordLabel)
- breakSymbol = document.createElement('br')
- form.append(breakSymbol)
- const password = new Password(form, true)
- breakSymbol = document.createElement('br')
- form.append(breakSymbol)
- const confirmBtn = document.createElement('button')
- confirmBtn.innerText = 'Confirm'
- confirmBtn.type = 'button'
- confirmBtn.style.marginTop = '10px'
- confirmBtn.disabled = true
- form.append(confirmBtn)
-
- function checkButton() {
- if (login.getValue() !== '' && password.getValue() !== '') {
- confirmBtn.disabled = false
- } else {
- confirmBtn.disabled = true
- }
- return confirmBtn.disabled
- }
- checkButton()
-
- login.onChange = password.onChange = checkButton
-
- this.getPasswordValue = () => password.getValue()
- this.getPasswordOpen = () => password.getOpen()
- this.getLoginValue = () => login.getValue()
- this.getButtonStatus = () => confirmBtn.disabled
-
- this.setPasswordValue = (value) => password.setValue(value)
- this.setLoginValue = (value) => login.setValue(value)
- this.setPasswordOpen = (status) => password.setOpen(status)
-
- this.onOpenChange = open => password.onOpenChange = open
-
- confirmBtn.addEventListener('click', () => {
- this.confirmBtnListener()
- })
- }
- function loginPromise(parent) {
- function executor(resolve, reject) {
- const form = new LoginForm(parent)
- form.confirmBtnListener = () => resolve({
- 'login': form.getLoginValue(),
- 'password': form.getPasswordValue()
- })
- }
- return new Promise(executor)
- }
- loginPromise(document.body).then(({ login, password }) => console.log(`Вы ввели ${login} и ${password}`))
- }
|