serg155alternate před 2 roky
rodič
revize
f842767484

+ 16 - 0
Class works/promise/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Promise</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    
+    <div id="formContainer">
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>

+ 59 - 0
Class works/promise/script.js

@@ -0,0 +1,59 @@
+/* function confirmPromise(text){
+    return new Promise((fulfill, reject) => {
+        //fulfill()
+        //reject()
+    })
+} */
+
+
+/* confirm
+Написать функцию промисифицирующую confirm. Функция должна принимать текст для confirm, и создавать (а также возвращать) промис, который резолвится по нажатию ok, и реджектится по нажатию cancel в окне confirm. */
+
+
+/* function confirmPromise(text){
+   return new Promise((fulfill, reject) => {
+       confirm(text) ? fulfill(): reject();
+    })
+}
+
+confirmPromise('is this promis');
+ */
+
+
+/* function confirmPrompt(text){
+    return new Promise((fulfill, reject) => {
+        let answ = prompt(text);
+        answ ? fulfill(answ): reject('Error');
+     })
+ } 
+confirmPrompt('is this promis').then( res => console.log(res)); */
+
+/* LoginForm
+Промисифицировать LoginForm, сделать функцию, которая возвращает 
+промис, и принимает настройки для LoginForm. Промис должен резолвится с объектом вида {login, password}, reject - при нажатии отмен. */
+
+
+function LoginForm(parent = document.body){ 
+    return new Promise((fulfill, reject) => {
+        const inputLogin = document.createElement('input');
+        const inputP = document.createElement('input');
+        const btnOk = document.createElement('button');
+        const btnCancel = document.createElement('button');
+        btnCancel.innerText = 'Cancel';
+        btnOk.innerText = 'OK';
+        parent.append(inputLogin, inputP, btnOk, btnCancel);
+
+        btnOk.onclick  = () => {
+                                let login = inputLogin.value;
+                                let password = inputP.value;
+                                    if(login && password){
+                                        fulfill({login, password}) 
+                                        inputLogin.value = '';
+                                        inputP.value = '';
+                                    };
+                                } 
+        btnCancel.onclick = () =>reject('Error in form data'); 
+        })
+}
+
+LoginForm().then(res => console.log(res))

+ 0 - 0
Class works/promise/style.css


+ 39 - 20
HW12 Async , callback hell/script.js

@@ -41,8 +41,6 @@ dataFetch(url).then(data => {
 });  */
 
 
-
-
 /* let dataFrom =async function() {
     await fetch('https://jsonplaceholder.typicode.com/todos/1')
         .then(response => response.json())
@@ -61,17 +59,6 @@ async function loadJson(url) {
 }
 
 
-
-//Uncaught SyntaxError: await is only valid in async functions and the top level bodies of modules
-/* let dataResp = await Promise.all([
-     fetch('https://swapi.dev/api/people/1/'),
-     fetch('https://swapi.dev/api/people/1/'),
-     fetch('https://jsonplaceholder.typicode.com/todos/1')
-])
-console.log(dataResp); */
-
-
-
 /* 
 Напишите функцию для отображения любого JSON в форме таблицы. Функция должна принимать два параметра:
 DOM - элемент, в котором строится таблица
@@ -122,22 +109,18 @@ function tableFromJson(rootElement) {
             let td = document.createElement('td');
             let td1 = document.createElement('td');
             if (typeof value == 'object') {
-                tableCells(value)
                 let btn = document.createElement('button');
                 btn.innerText = Object.keys(value);
-                this.onclick = console.log(value);
+                btn.onclick = () => tableCells(value);
                 td.append(btn);
             } else {
-
                 td.innerText = key;
                 td1.innerText = value;
             }
-
             tr.append(td)
             tr.append(td1)
             table.append(tr);
         }
-
         rootElement.append(table);
     };
 
@@ -145,7 +128,7 @@ function tableFromJson(rootElement) {
         data.forEach(tableCells(data));
     })
 }
-//tableFromJson(root);
+tableFromJson(root);
 
 /* myfetch
 Используя XMLHTTPRequest, напишите промисифицированную функцию myfetch, т. е.
@@ -188,4 +171,40 @@ console.log(Promise.race([delay, myfetch('https://jsonplaceholder.typicode.com/u
 console.log(Promise.race([delay, myfetch('https://jsonplaceholder.typicode.com/users')])) ;
 console.log(Promise.race([delay, myfetch('https://jsonplaceholder.typicode.com/users')])) ;
 console.log(Promise.race([delay, myfetch('https://jsonplaceholder.typicode.com/users')])) ;
-console.log(Promise.race([delay, myfetch('https://jsonplaceholder.typicode.com/users')])) ;
+console.log(Promise.race([delay, myfetch('https://jsonplaceholder.typicode.com/users')])) ;
+
+
+
+
+
+
+//testing fetch and promises
+async function f() {
+    let promise = myfetch('https://jsonplaceholder.typicode.com/users');
+    let result = await promise; // будет ждать, пока промис не выполнится (*)
+    return result; // "готово!"
+  }
+  
+  let t = f();
+  console.log(t)
+
+
+  async function showAvatar() {
+
+    let githubResponse = await fetch(`https://api.github.com/users/serg1557733`);
+    let githubUser = await githubResponse.json();
+
+    console.log(githubUser);
+
+    let img = document.createElement('img');
+    img.src = githubUser.avatar_url;
+    img.style.borderRadius = '100%';
+    document.body.append(img);
+
+    await new Promise((resolve, reject) => setTimeout(resolve, 3000));
+    img.remove();
+    return githubUser;
+  }
+
+  
+  showAvatar();