Home Esplora Aiuto
Accedi
makstravm
/
HW-JS
Segui 1
Vota 0
Forka 0
File Problemi 0 Pull Requests 0 Wiki
Sfoglia il codice sorgente

added HW13 Javascript Async: Promise Homework part 1

makstravm 3 anni fa
parent
311e8099fe
commit
bbfd14cdc8
4 ha cambiato i file con 115 aggiunte e 9 eliminazioni
Visualizzazione separata Mostra Diff Stats
  1. 19 0
      HW13/index.html
  2. 49 0
      HW13/main.js
  3. 37 0
      HW13/style.css
  4. 10 9
      HW9/main.js

+ 19 - 0
HW13/index.html
Vedi File 

@@ -0,0 +1,19 @@
 
+<!DOCTYPE html>
 
+<html lang="en-ru">
 
+
 
+<html>
 
+<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>HW-14</title>
 
+<link rel="stylesheet" href="style.css">
 
+
 
+<body>
 
+  <div class="container">
 
+    <div id='root'></div>
 
+  </div>
 
+
 
+  <script src="main.js"></script>
 
+</body>
 
+
 
+</html>

+ 49 - 0
HW13/main.js
Vedi File 

@@ -0,0 +1,49 @@
 
+fetch('https://swapi.dev/api/people/1/')
 
+  .then(res => res.json())
 
+  .then(data => renderTree(root, data))
 
+
 
+const renderTree = (el, json) => {
 
+  let table = document.createElement('table')
 
+  table.setAttribute('border', '1px')
 
+  for (const [key, value] of Object.entries(json)) {
 
+    let tr = document.createElement('tr')
 
+    let th = document.createElement('th')
 
+    let td = document.createElement('td')
 
+    let button = document.createElement('button')
 
+    th.innerText = key
 
+    if (typeof (value) === 'object') {
 
+      let deepTable = document.createElement('table')
 
+      deepTable.setAttribute('border', '1px')
 
+      deepTable.style.width = '100%'
 
+      value.map(t => {
 
+        let deepTr = document.createElement('tr')
 
+        let deepTd = document.createElement('td')
 
+        let deepButton = document.createElement('button')
 
+        deepButton.innerText = t.slice(22, -1)
 
+        deepButton.onclick = () => reRenderTree(deepTd, t)
 
+        deepTd.append(deepButton)
 
+        deepTr.append(deepTd)
 
+        deepTable.append(deepTr)
 
+      })
 
+      td.append(deepTable)
 
+    } else if (typeof value === 'string' && !value.indexOf('https://')) {
 
+      button.innerText = value.slice(22,-1)
 
+      button.onclick = () => reRenderTree(td, value)
 
+      td.append(button)
 
+    } else {
 
+      /\d{4}\-(0?[1-9]|1[012])\-(0?[1-9]|[12][0-9]|3[01])*/.test(value) ? td.innerText = value.slice(0, 10) : td.innerText = value
 
+    }
 
+    tr.append(th)
 
+    tr.append(td)
 
+    table.append(tr)
 
+  }
 
+  el.append(table)
 
+}
 
+
 
+const reRenderTree = (el, link) => {
 
+  el.removeChild(el.firstChild)
 
+  return fetch(link)
 
+    .then(res => res.json())
 
+    .then(data => renderTree(el, data))
 
+}
 
+

+ 37 - 0
HW13/style.css
Vedi File 

@@ -0,0 +1,37 @@
 
+:root {
 
+  block-size: border-box;
 
+  font-size: 16px;
 
+  line-height: 20px;
 
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
 
+}
 
+
 
+button {
 
+  width: 100%;
 
+  font-size: 2em;
 
+}
 
+
 
+input,
 
+button,
 
+select {
 
+  width: 100%;
 
+  font-size: 2em;
 
+}
 
+
 
+
 
+.container {
 
+  max-width: 1200px;
 
+  padding: 0 10px;
 
+  margin: 0 auto;
 
+}
 
+.products {
 
+  margin-top: 10px;
 
+  display: flex;
 
+  justify-content: center;
 
+  font-size: 20px;
 
+}
 
+
 
+.wrapper {
 
+  display: flex;
 
+  justify-content: space-evenly;
 
+  align-items: center;
 
+}

+ 10 - 9
HW9/main.js
Vedi File 

@@ -64,7 +64,6 @@ function makeSaver(param) {
 
   let res;
 
   let flag = false;
 
   return function () {
 
-    debugger
 
     flag ? res : (flag = true, res = param());
 
   }
 
 };
 
@@ -93,23 +92,25 @@ console.log(value3 === value4);
 
 //myBind
 
 
 function myBind(f, method, arr) {
 
+  debugger
 
   return function (...params) {
 
+    debugger
 
     let countIndex = 0
 
     let newArr = arr.map(i => i !== undefined ? i : params[countIndex++])
 
     return f.apply(method, newArr)
 
   }
 
 }
 
 
-var pow5 = myBind(Math.pow, Math, [undefined, 5])
 
-pow5(2)
 
+// var pow5 = myBind(Math.pow, Math, [undefined, 5])
 
+// pow5(2)
 
 
-var cube = myBind(Math.pow, Math, [undefined, 3])
 
-cube(3)
 
+// var cube = myBind(Math.pow, Math, [undefined, 3])
 
+// cube(3)
 
 
-var chessMin = myBind(Math.min, Math, [undefined, 4, undefined, 5, undefined, 8, undefined, 9])
 
-chessMin(-1, -5, 3, 15)
 
+// var chessMin = myBind(Math.min, Math, [undefined, 4, undefined, 5, undefined, 8, undefined, 9])
 
+// chessMin(-1, -5, 3, 15)
 
 
-var zeroPrompt = myBind(prompt, window, [undefined, "0"]) 
-var someNumber = zeroPrompt("Введите число")
 
+// var zeroPrompt = myBind(prompt, window, [undefined, "0"]) 
+// var someNumber = zeroPrompt("Введите число")
 
 
 myBind((...params) => params.join(''), null, [undefined, 'b', undefined, undefined, 'e', 'f'])('a', 'c', 'd') === 'abcdef'