//Chat /* { let inputNick = document.createElement('input') inputNick.placeholder = 'Your nick' let inputMessage = document.createElement('input') inputMessage.placeholder = 'Your message' let button = document.createElement('button') button.innerText = 'SEND' let divBox = document.createElement('div') divBox.style.width = '50%' divBox.style.height = '100%' divBox.style.border = '2px solid' document.body.append(inputNick,inputMessage,button,divBox) let nextMessageId = 0 let nickValue,messageValue function nickHandler() { nickValue = inputNick.value } inputNick.addEventListener('input', nickHandler) function messageHandler (){ messageValue = inputMessage.value } inputMessage.addEventListener('input', messageHandler) async function sendMessage (nick,message){ let messages = await jsonPost('http://students.a-level.com.ua:10012', {func: "addMessage", nick: nick, message: message}) let numberOfMessages = messages.nextMessageId if(nextMessageId < numberOfMessages){ nextMessageId = numberOfMessages } else { nextMessageId = null } return messages } //stage 2 async function getMessages(){ let messages = await jsonPost('http://students.a-level.com.ua:10012', {func: "getMessage", nextMessageId: 0}) numberOfMessages = messages.nextMessageId for (let element in messages.data){ let divMessage = document.createElement('div') divBox.append(divMessage) let timestamp = new Date(messages.data[element].timestamp).toLocaleString() divMessage.innerHTML = `${messages.data[el].nick} : ${messages.data[el].message} at ${timestamp}` } return messages.data } //stage 3 async function getNewMessages(){ let messages = await jsonPost('http://students.a-level.com.ua:10012', {func: "getMessages", nextMessageId: 0}) let numberOfMessages = messages.nextMessageId if(nextMessageId < numberOfMessages){ nextMessageId = numberOfMessages } else { nextMessageId = null } for (let element in messages.data){ let divMessage = document.createElement('div') divBox.prepend(divMessage) let timestamp = new Date(messages.data[element].timestamp).toLocaleString() divMessage.innerHTML = `${messages.data[element].nick} : ${messages.data[element].message} at ${timestamp}` divMessage.style.color = `rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255})` } return messages.data } //stage 4 setInterval(getNewMessages(),4000) //stage 5 button.addEventListener('click',buttonHandler) function buttonHandler(){ sendAndCheck(nickValue, messageValue) } async function sendAndCheck(nick, message){ await Promise.all([sendMessage(nick,message),getMessages()]) } async function checkLoop (){ function delay(ms){ function executor(fulfill,reject){ setTimeout(() => fulfill(ms), ms) } return new Promise(executor) } while(true){ await delay(3000).then(()=> getNewMessages()) } } checkLoop() //stage 6 function jsonPost (url,data){ return new Promise((resolve,reject) => { fetch(url,{method: 'POST',body: JSON.stringify(data)}) .then(responce =>responce.json()) .then(responce => resolve(responce),()=> reject(new Error('JSONPost failed'))) }) } } */ //SWAPI Links { async function swapiLinks(url){ let data = await fetchMyLink(url) console.log(data) let result = {} let arr = [] for(let key in data){ if(Array.isArray(data[key])){ arr.push(Promise.all(data.key.map(fetchMyLink)).then(res => result[key]= res)) } else if (typeof(data[key]) === 'string' && (data[key].includes('https://swapi.dev/api/'))){ arr.push(fetchMyLink(data[key]).then(res => result[key] = res)) } else result[key] = data[key] } return Promise.all(arr).then(()=>result) } async function fetchMyLink(link){ let result = await fetch(link).then(res => res.json) return result } swapiLinks("https://swapi.dev/api/people/20/") .then(yodaWithLinks => console.log(JSON.stringify(yodaWithLinks, null, 4))) } //domEventPromise { let knopka = document.createElement('button') knopka.innerText = "click" document.body.append(knopka) function domEventPromise(element, eventName){ function executor(resolve){ function clickEvent(event){ resolve(event) element.removeEventListener(eventName,clickEvent) } element.addEventListener(eventName,clickEvent) } return new Promise(executor) } domEventPromise(knopka, 'click').then( e => console.log('event click happens', e)) }