Home Explore Help
Sign In
DmitriyPanasenko
/
homework
Watch 1
Star 0
Fork 0
Files Issues 7 Pull Requests 0 Wiki
Browse Source

HW_16 (async_arhitecture_promises) done

Graf15 2 years ago
parent
9b4a24f2c9
commit
642ffec349
3 changed files with 343 additions and 130 deletions
Split View Show Diff Stats
  1. 100 57
      js/js_16_async_architecture_promises/index.html
  2. 223 31
      js/js_16_async_architecture_promises/index.js
  3. 20 42
      js/js_16_async_architecture_promises/style.css

+ 100 - 57
js/js_16_async_architecture_promises/index.html
View File 

@@ -1,74 +1,117 @@
 
 <!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">
 
-    <link rel="stylesheet" href="style.css">
 
-    <title>Document</title>
 
-    
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <link rel="stylesheet" href="style.css">
 
+  <title>Document</title>
 
+
 
 </head>
 
+
 
 <body>
 
-    
-    
-    <script>
 
-        function buttonVisionText(button, element, innertext) {
 
-    element.innerText = innertext
 
-    button.innerText = 'Скрыть'
 
-    button.onclick = () => buttonHidetext(button, element, innertext)
 
-  }
 
-  
-  function buttonHidetext(button, element, innertext) {
 
-    element.innerText = ""
 
-    button.innerText = 'Показать'
 
-    button.onclick = () => buttonVisionText(button, element, innertext)
 
-  }
 
-
 
-  function jsonToTable(parent = document.body, jsonObj){
 
+  <script>
 
+
 
+  </script>
 
+
 
+  <script>
 
+
 
+
 
+    function buttonVisionText(button, element) {
 
+      element.style.display = "block"
 
+
 
+      button.innerText = 'Скрыть'
 
+      button.style.backgroundColor = "SteelBlue"
 
+      button.onclick = () => buttonHidetext(button, element)
 
+    }
 
+
 
+    function buttonHidetext(button, element) {
 
+      element.style.display = "none"
 
+
 
+      button.innerText = 'Показать'
 
+      button.style.backgroundColor = "darkgrey"
 
+      button.onclick = () => buttonVisionText(button, element)
 
+    }
 
+
 
+    function jsonToTable(parent = document.body, jsonObj) {
 
       const jsonTable = document.createElement('table') //Создаём и добавляем в родительский єлемент будущую таблицу
 
       parent.append(jsonTable)
 
 
-      for (const key in jsonObj){
 
-          const tr = document.createElement('tr') //одно свойтсво - одна строка
 
-          jsonTable.append(tr)
 
-          
-          const tdProperty = document.createElement('td') //столбик со свойствами обьекта
 
-          tr.append(tdProperty)
 
-          tdProperty.innerText = key
 
-
 
-          const tdValue = document.createElement('td') // столбик со значениями свойств обьекта JSON
 
-          tr.append(tdValue)
 
-                    
-          let regexp = /^\s*https?:\/\/./i; //тут проверяем является ли значение ссылкой
 
-          if ( regexp.test(jsonObj[key]) ) {
 
-
 
-            const button = document.createElement('button') // если да то создаём кнопку, текст изначально скрыт
 
-            tdValue.append(button)
 
-            button.innerText = 'Показать'
 
-
 
-            let value 
-
 
-            //при первом нажатии получаем данные по ссылке, сохраняем в value и выводим
 
-
 
-            button.onclick = () => {
 
-              fetch(jsonObj[key]) 
-              .then(res => res.text())
 
-              .then(txt => {
 
-                tdValue.innerText = txt
 
+      for (const key in jsonObj) {
 
+        const tr = document.createElement('tr') //одно свойтсво - одна строка
 
+        jsonTable.append(tr)
 
+
 
+        const tdProperty = document.createElement('td') //столбик со свойствами обьекта
 
+        tr.append(tdProperty)
 
+        tdProperty.innerText = key
 
+
 
+        const tdValue = document.createElement('td') // столбик со значениями свойств обьекта JSON
 
+        tr.append(tdValue)
 
+        //console.log(jsonObj[key])
 
+        let regexp = /^\s*https?:\/\/./i; //тут проверяем является ли значение ссылкой
 
+
 
+        if (regexp.test(jsonObj[key]) && typeof jsonObj[key] === "string") { //если значение ссылка но не массив
 
+
 
+          const valueDiv = document.createElement('div') //div контейнер внутри ячейки
 
+          tdValue.append(valueDiv)
 
+
 
+          const button = document.createElement('button') // если да то создаём кнопку, текст изначально скрыт
 
+          tdValue.append(button)
 
+          button.innerText = 'Показать'
 
+
 
+          //при первом нажатии получаем данные по ссылке, выводим в valueDiv
 
+
 
+          button.onclick = () => {
 
+            fetch(jsonObj[key])
 
+              .then(res => res.json())
 
+              .then(obj => {
 
+                jsonToTable(valueDiv, obj)
 
                 button.innerText = 'Cкрыть'
 
-                button.onclick = () => buttonHidetext(button, tdValue, txt)
 
+                button.style.backgroundColor = "SteelBlue"
 
+                button.onclick = () => buttonHidetext(button, valueDiv) //вешаем на кнопку, изменяемый при каждом нажатии, онклик скрывающий или отображающий контент внутри ячейки
 
               })
 
+          }
 
+        } else if (Array.isArray(jsonObj[key])) {
 
+
 
+          for (arrayItem of jsonObj[key]) {
 
+            console.log(arrayItem)
 
+            if (regexp.test(arrayItem) && typeof arrayItem === "string") {
 
+              //если значение ссылка и строка
 
+
 
+              const valueDiv = document.createElement('div') //div контейнер внутри ячейки
 
+              tdValue.append(valueDiv)
 
+
 
+              const button = document.createElement('button') // если да то создаём кнопку, текст изначально скрыт
 
+              tdValue.append(button)
 
+              button.innerText = 'Показать'
 
+
 
+              //при первом нажатии получаем данные по ссылке, выводим в valueDiv
 
+
 
+              button.onclick = () => {
 
+                fetch(arrayItem)
 
+                  .then(res => res.json())
 
+                  .then(obj => {
 
+                    jsonToTable(valueDiv, obj)
 
+                    button.innerText = 'Cкрыть'
 
+                    button.style.backgroundColor = "SteelBlue"
 
+                    button.onclick = () => buttonHidetext(button, valueDiv) //вешаем на кнопку, изменяемый при каждом нажатии, онклик скрывающий или отображающий контент внутри ячейки
 
+                  })
 
+              }
 
+            } else {
 
+
 
             }
 
-          }else{
 
-            tdValue.innerText = jsonObj[key] //если значение не является ссылкой, запихиваем занчение в innertext 
           }
 
+        } else {
 
+          tdValue.innerText = jsonObj[key] //если значение не является ссылкой, запихиваем занчение в innertext 
+        }
 
       }
 
-  }
 
+    }
 
 
-  fetch('https://swapi.dev/api/people/1/')
 
-    .then(res => res.json())
 
-    .then(jsonObj => jsonToTable(document.body, jsonObj))
 
-    </script>
 
+    fetch('https://swapi.dev/api/people/1/')
 
+      .then(res => res.json())
 
+      .then(jsonObj => jsonToTable(document.body, jsonObj))
 
+  </script>
 
 </body>
 
 
 </html>

File diff suppressed because it is too large
+ 223 - 31
js/js_16_async_architecture_promises/index.js


+ 20 - 42
js/js_16_async_architecture_promises/style.css
View File 

@@ -11,47 +11,25 @@ body {
 
 
 }
 
 
-.productCard{
 
-  padding: 10px;
 
-  margin: 20px;
 
-  width: 200px;
 
-  background-color: azure;
 
-  border-radius: 10px;
 
-}
 
-
 
-.productName{
 
-  text-align: center;
 
-  background-color: rgb(231, 30, 8);
 
-  padding: 5px;
 
-  color: white;
 
-  border-radius: 5px;
 
-  margin-top: 0px;
 
-}
 
-
 
-.productPrice{
 
+table {
 
+  font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
 
+  font-size: 14px;
 
+  border-collapse: collapse;
 
   text-align: center;
 
-  padding: 8px;
 
-  background-color: green;
 
+  }
 
+  th, td:first-child {
 
+  background: #AFCDE7;
 
   color: white;
 
-  border-radius: 5px;
 
-}
 
-
 
-.showcase{
 
-  display: flex;
 
-  align-items: center;
 
-  justify-content: center;
 
-}
 
-
 
-.productQuantity{
 
-  padding: 10px 0px 50px;
 
-  text-align: center;
 
-}
 
-
 
-.orderSection{
 
-  display: flex;
 
-  justify-content: center;
 
-}
 
-
 
-.orderSection * {
 
-margin: 10px
 
-}
 
+  padding: 10px 20px;
 
+  }
 
+  th, td {
 
+  border-style: solid;
 
+  border-width: 0 1px 1px 0;
 
+  border-color: white;
 
+  }
 
+  td {
 
+  background: #D8E6F3;
 
+  }
 
+  th:first-child, td:first-child {
 
+  text-align: left;
 
+  }