Home Verkennen Help
Inloggen
Emmanuil
/
homework
Volgen 1
Ster 0
Vork 0
Bestanden Issues 7 Pull-aanvragen 0 Wiki
Bladeren bron

done

Emmanuil 4 jaren geleden
bovenliggende
0be45aae7b
commit
c4126a9a62
15 gewijzigde bestanden met toevoegingen van 496 en 117 verwijderingen
Zij-aan-zij weergave Toon Diff Stats
  1. 5 0
      js-04/index.html
  2. 31 46
      js-04/js.js
  3. 8 8
      js-06/js.js
  4. 43 62
      js-07/js.js
  5. 1 1
      js-08/js.js
  6. 33 0
      js-09/index.html
  7. 63 0
      js-09/js.js
  8. BIN
      js-10/1@3x.png
  9. 7 0
      js-10/hw.text
  10. 20 0
      js-10/index.html
  11. 108 0
      js-10/js.js
  12. 12 0
      js-11/index.html
  13. 67 0
      js-11/js.js
  14. 31 0
      js-12/index.html
  15. 67 0
      js-12/js.js

+ 5 - 0
js-04/index.html
Bestand weergeven 

@@ -4,6 +4,11 @@
 
     <meta charset="UTF-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <title>Document</title>
 
+    <style>
 
+        td {
 
+            text-align: center;
 
+        }
 
+    </style>
 
 </head>
 
 <body>

+ 31 - 46
js-04/js.js
Bestand weergeven 

@@ -106,21 +106,23 @@
 
 // var a = {
 
 //   name: "Артур",
 
 //   surname: "Козлов",
 
-//   age: 20
 
+//   age: 20,
 
 // };
 
 // var b = {
 
 //   name: "Евгений",
 
 //   surname: "Золотопуп",
 
-//   fathername: "Андрей"
 
+//   fathername: "Андрей",
 
 // };
 
 // var c = {
 
 //   name: "Костя",
 
 //   surname: "Перец",
 
-//   brathers: "Боря"
 
+//   brathers: "Боря",
 
 // };
 
-// persons.push (a, b, c);
 
-// for (var person of persons) {
 
-//   console.log(Object.values(person));
 
+// persons.push(a, b, c);
 
+// for (var [person, value] of Object.entries(persons)) {
 
+//   for (const key in value) {
 
+//     console.log(value[key]);
 
+//   }
 
 // }
 
 
 // ЗАДАНИЕ 9 - serialize
 
@@ -144,52 +146,41 @@
 
 // var json = JSON.stringify(persons);
 
 // console.log(json);
 
 
-// ЗАДАНИЕ 11 - HTML
 
-// var persons = [];
 
-// var a = {
 
+// ЗАДАНИЕ 11 - HTML и HTML optional fields
 
+// const persons = [];
 
+// const a = {
 
 //   name: "Артур",
 
 //   surname: "Козлов",
 
-//   age: 20
 
+//   age: 20,
 
 // };
 
-// var b = {
 
+// const b = {
 
 //   name: "Евгений",
 
 //   surname: "Золотопуп",
 
-//   fathername: "Андрей"
 
+//   fatherName: "Андрей",
 
 // };
 
-// var c = {
 
+// const c = {
 
 //   name: "Костя",
 
 //   surname: "Перец",
 
-//   brathers: "Боря"
 
+//   brathers: "Боря",
 
 // };
 
 // persons.push(a, b, c);
 
-// var str = "<table border='2' style=border-color:red>";
 
+
 
+// var str = "<table border='2' style=border-color:red; align=center>";
 
+// str += `<tr><td></td><td>Имя</td><td>Фамилия</td><td>Возраст</td><td>Имя отца</td><td>Братья</td></tr>`;
 
+
 
 // for (var i = 1; i <= 1; i++) {
 
-//   str += `<tr><td></td><td>Имя</td><td>Фамилия</td></tr>`;
 
-//   for (var k = 1; k < 2; k++) {
 
-//     var personName = persons[0].name;
 
-//     var personSurname = persons[0].surname;
 
-//     str += `<tr><td>${k}</td><td>${personName}</td><td>${personSurname}</td></tr>`;
 
-//   }
 
-//   for (var k = 2; k < 3; k++) {
 
-//     var personName = persons[1].name;
 
-//     var personSurname = persons[1].surname;
 
-//     str += `<tr><td>${k}</td><td>${personName}</td><td>${personSurname}</td></tr>`;
 
-//   }
 
-//   for (var k = 3; k < 4; k++) {
 
-//     var personName = persons[2].name;
 
-//     var personSurname = persons[2].surname;
 
-//     str += `<tr><td>${k}</td><td>${personName}</td><td>${personSurname}</td></tr>`;
 
-//   }
 
+//   str += `<tr><td>${i}</td><td>${persons[0].name}</td><td>${persons[0].surname}</td><td>${persons[0].age}</td><td>---</td><td>---</td>
 
+//   </tr><tr><td>${i+=1}</td><td>${persons[1].name}</td><td>${persons[1].surname}</td><td>---</td><td>${persons[1].fatherName}</td><td>---</td></tr>
 
+//   <tr><td>${i+=1}</td><td>${persons[2].name}</td><td>${persons[2].surname}</td><td>---</td><td>---</td><td>${persons[2].brathers}</td></tr>`;
 
 // }
 
 // str += "</table>";
 
 // document.write(str);
 
 
-
 
 // ЗАДАНИЕ - СИНИЙ ПОЯС
 
 // var someTree = {
 
 //   tagName: "table",
 
 //   attrs: {
 
-//     border: 1
 
+//     border: 1,
 
 //   },
 
 //   subTags: [
 
 //     {
 
@@ -197,15 +188,15 @@
 
 //       subTags: [
 
 //         {
 
 //           tagName: "td",
 
-//           text: "some text"
 
+//           text: "some text",
 
 //         },
 
 //         {
 
 //           tagName: "td",
 
-//           text: "some text 2"
 
-//         }
 
-//       ]
 
-//     }
 
-//   ]
 
+//           text: "some text 2",
 
+//         },
 
+//       ],
 
+//     },
 
+//   ],
 
 // };
 
 
 // let htmlTagBorder = `<${someTree.tagName}`;
 
@@ -217,16 +208,10 @@
 
 // for (let i = 0; i < someTree.subTags.length; i++) {
 
 //   let subTag = someTree.subTags[i];
 
 //   var subTagTr = `<${subTag.tagName}`;
 
-//   for (let attrName in subTag.attrs) {
 
-//     subTagTr += " " + attrName + "=" + subTag.attrs[attrName]; 
-//   }
 
-//   subTagTr += ">"; 
+//   subTagTr += ">";
 
 //   for (let j = 0; j < subTag.subTags.length; j++) {
 
 //     let subTag2 = subTag.subTags[j];
 
 //     var subTag2Td = `<${subTag2.tagName}`;
 
-//     for (let attrName in subTag2.attrs) {
 
-//       subTag2Td += " " + attrName + "=" + subTag2.attrs[attrName]; //
 
-//     }
 
 //     subTag2Td += ">";
 
 //     subTag2Td += subTag2.text;
 
 //     subTag2Td += `</${subTag2.tagName}>`;

+ 8 - 8
js-06/js.js
Bestand weergeven 

@@ -10,12 +10,12 @@
 
 //       val = i || j;
 
 //     }
 
 
-//     // td.onmouseover = function(){
 
-//     //     this.setAttribute("style", "background-color:black; color: white;");
 
-//     // }
 
-//     // td.onmouseout = function(){
 
-//     //   this.setAttribute("style", "background-color:null;");
 
-//     // }
 
+//     td.onmouseover = function(){
 
+//         this.setAttribute("style", "background-color:black; color: white;");
 
+//     }
 
+//     td.onmouseout = function(){
 
+//       this.setAttribute("style", "background-color:null;");
 
+//     }
 
 
 //     td.innerHTML = val;
 
 //     tr.appendChild(td);
 
@@ -40,7 +40,7 @@
 
 // table.onmouseover = (event) => changeBg(event, "black", "white");
 
 // table.onmouseout = (event) => changeBg(event, "", "");
 
 
-// CALC
 
+// // CALC
 
 // calc.onclick = function () {
 
 //   resultNumber = +number1.value + +number2.value;
 
 //   var result = document.getElementById("result");
 
@@ -48,7 +48,7 @@
 
 // };
 
 
 
-// Calc Live
 
+// // Calc Live
 
 // function calc() {
 
 //   result.value =( (+number1.value) + (+number2.value));
 
 // }

+ 43 - 62
js-07/js.js
Bestand weergeven 

@@ -1,82 +1,63 @@
 
 // sort
 
-// var persons = [
 
-//     {name: "Иван", age: 17},
 
-//     {name: "Мария", age: 35},
 
-//     {name: "Алексей", age: 73},
 
-//     {name: "Яков", age: 12},
 
-// ]
 
-
 
-// persons.sort((a,b) => a.age > b.age ? 1 : -1)
 
-
 
-// // var sortBoolean = confirm('Сортировать по возрастанию или по убыванию?\n Если "ОК" - сортировака по возрастанию\n Если "ОТМЕНА" - сортировака по убыванию');
 
-// // if(sortBoolean === true){
 
-// //     persons.sort((a,b) => a.name > b.name ? 1 : -1)
 
-// // }
 
-// // else persons.sort((a,b) => a.name > b.name ? -1 : 1)
 
+// const persons = [
 
+//   { name: "Иван", age: 17 },
 
+//   { name: "Мария", age: 35 },
 
+//   { name: "Алексей", age: 73 },
 
+//   { name: "Яков", age: 12 },
 
+// ];
 
+// sort = (arr, key, bool = true) => {
 
+//   bool === false
 
+//     ? arr.sort((a, b) => (a[key] > b[key] ? -1 : 1))
 
+//     : arr.sort((a, b) => (a[key] > b[key] ? 1 : -1));
 
+//   console.log(arr);
 
+// };
 
 
-// console.log(persons.sort());
 
+// sort(persons, "age"); //сортирует по возрасту по возрастанию
 
+// sort(persons, "name", false); //сортирует по имени по убыванию
 
 
 // array map
 
-// var arrMay = ["1", {}, null, undefined, "500", 700]
 
-
 
-// var result = arrMay.map(function(item){
 
-//     var number = parseInt(item);
 
-//     return isNaN(number) ? item : number
 
-// })
 
-// console.log(result)
 
+// const arr = ["1", {}, null, undefined, "500", 700];
 
+// const arrToNum = (item) => (typeof item === "string" ? +item : item);
 
+// console.log(arr.map(arrToNum));
 
 
 // array reduce
 
-// var arr = ["0", 5, 3, "string", null];
 
-
 
-// var result = arr.reduce(function(item, mul){
 
-//     return typeof(mul) === 'number' ? item *= mul : item
 
-// }, 1)
 
-// console.log(result);
 
+// const arr = ["0", 5, 3, "string", null];
 
+// const result = (item, mul) => (typeof mul === "number" ? (item *= mul) : item);
 
+// console.log(arr.reduce(result, 1));
 
 
 // object filter
 
-// var phone = {
 
+// const phone = {
 
 //   brand: "meizu",
 
 //   model: "m2",
 
 //   ram: 2,
 
 //   color: "black",
 
 // };
 
-
 
-// function filter(obj, key, value) {
 
-//   var itog = {};
 
-//   for (let item in obj) {
 
-//       if (key === item || obj[item] === value) itog[item] = obj[item];
 
+// filter = (obj, fun) => {
 
+//   let obj1 = {};
 
+//   for (const key in obj) {
 
+//     if (fun(key, obj[key])) {
 
+//       obj1[key] = obj[key];
 
+//     }
 
 //   }
 
-//   return itog;
 
-// }
 
-// console.log(filter(phone, "color", 2))
 
-
 
+//   console.log(obj1);
 
+// };
 
 
+// filter(phone, (key, value) => key == "color" || value == 2);
 
 
 // object map
 
+// map = (obj, fun) => {
 
+//   let obj1 = {};
 
+//   for (const key in obj) {
 
+//     let simb = fun(key, obj[key]);
 
+//     for (const key2 in simb) {
 
+//       obj1[key2] = simb[key2];
 
+//     }
 
+//   }
 
+//   console.log(obj1);
 
+// };
 
+
 
 // map({ name: "Иван", age: 17 }, function (key, value) {
 
-//   var result = {};
 
+//   const result = {};
 
 //   result[key + "_"] = value + "$";
 
 //   return result;
 
-// }); 
-//должен вернуть {name_: "Иван$", age_: "17$"}
 
-
 
-
 
-
 
-// var person = [
 
-//   {name: "Иван"},
 
-//   {age: 17}
 
-// ]
 
-
 
-// var newPerson = person.map(function(obj){
 
-//   var result = {}
 
-
 
-//   for (var key in obj){
 
-//     var personName = key + "_"
 
-//     var personAge = obj[key] + "$"
 
-//   }
 
-
 
-//   result[personName] = personAge
 
-//   return result
 
-// })
 
-
 
-// console.log(newPerson)
 
+// });

+ 1 - 1
js-08/js.js
Bestand weergeven 

@@ -36,7 +36,7 @@
 
 //   obj--;
 
 //   if (obj == 0) {
 
 //     console.log("поехали!");
 
-//     obj.delete(0)
 
+//     // delete obj(0)
 
 //   } else {
 
 //     setTimeout(timer, 1000);
 
 //   }

+ 33 - 0
js-09/index.html
Bestand weergeven 

@@ -0,0 +1,33 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        * {
 
+            box-sizing: border-box;
 
+        }
 
+        body {
 
+            margin: 0;
 
+            padding: 10px;
 
+        }
 
+        input, button{
 
+            width: 100%;
 
+            font-size: 25px;
 
+        }
 
+        p {
 
+            margin: 0;
 
+            padding: 15px 0 5px;
 
+            text-transform: uppercase;
 
+            font-weight: bold;
 
+            font-size: 20px;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="formContainer"></div>
 
+
 
+    <script src="js.js"></script>
 
+</body>
 
+</html>

+ 63 - 0
js-09/js.js
Bestand weergeven 

@@ -0,0 +1,63 @@
 
+function Form(el, data, okCallback, cancelCallback) {
 
+  let formBody = document.createElement("div");
 
+  let okButton = document.createElement("button");
 
+  okButton.innerHTML = "OK";
 
+
 
+  let cancelButton = document.createElement("button");
 
+  cancelButton.innerHTML = "Cancel";
 
+
 
+  for (var key in data) {
 
+    var inputs = document.createElement("input");
 
+    var p = document.createElement('p')
 
+    p.innerText = key
 
+    inputs.value = data[key];
 
+
 
+    inputs.oninput = () => {
 
+      // data = inputs.value
 
+      console.log(inputs.value);
 
+    };
 
+
 
+    el.appendChild(p)
 
+    el.appendChild(inputs);
 
+  }
 
+
 
+  if (typeof okCallback === "function") {
 
+    formBody.appendChild(okButton);
 
+    okButton.onclick = (e) => {
 
+      console.log(this);
 
+      this.okCallback(e);
 
+    };
 
+  }
 
+
 
+  if (typeof cancelCallback === "function") {
 
+    formBody.appendChild(cancelButton);
 
+    cancelButton.onclick = cancelCallback;
 
+  }
 
+
 
+  el.appendChild(formBody);
 
+
 
+  this.okCallback = okCallback;
 
+  this.cancelCallback = cancelCallback;
 
+
 
+  this.data = data;
 
+  this.validators = {};
 
+}
 
+
 
+let form = new Form(
 
+  formContainer,
 
+  {
 
+    name: "Anakin",
 
+    surname: "Skywalker",
 
+    married: true,
 
+    birthday: new Date(new Date().getTime() - 86400000 * 30 * 365),
 
+  },
 
+  () => console.log("ok"),
 
+  () => console.log("cancel")
 
+);
 
+form.okCallback = () => console.log("ok2");
 
+
 
+form.validators.surname = (value, key, data, input) =>
 
+  value.length > 2 && value[0].toUpperCase() == value[0] && !value.includes(" ")
 
+    ? true
 
+    : "Wrong name";
 
+console.log(form);

BIN
js-10/1@3x.png
Bestand weergeven


+ 7 - 0
js-10/hw.text
Bestand weergeven 

@@ -0,0 +1,7 @@
 
+исходя из кода выше, доделать:
 
+- читайте комментарии, надо побороть копипасту по подсчету угла (напишите функцию getAngleByCoords, и применяйте её в mousedown, mousemove и mouseup.
 
+- в mouseup, подсчитайте в обратную сторону шаг из угла (для этого надо не умножать, а делить на цену вашего угла). Получив шаг, сделайте updateValue с вычисленным шагом
 
+- добавьте проверки на переходы через границы в updateValue, не допускайте нарушение границ min и max
 
+- добавьте в this внутри функции-конструктора Control всякие возможности типа setValue и getValue, для работы с крутилкой.
 
+- сделайте так, что бы onChange, передаваемый в конструктор запускался при любом изменении value. пусть в эту функцию приходит текущее value в крутилке
 
+- используя три объекта класса Control создайте три крутилки, каждая из которых влияет на свой канал RGB. Из  При изменении может менятся один из трех дивов с конкретным цветом(одним из каналов) и общий див, в котором все три канала смешаны.

+ 20 - 0
js-10/index.html
Bestand weergeven 

@@ -0,0 +1,20 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        body {
 
+            display: flex;
 
+            justify-content: space-between;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="sound1"></div>
 
+    <div id="sound2"></div>
 
+    <div id="sound3"></div>
 
+    <script src="js.js"></script>
 
+</body>
 
+</html>

+ 108 - 0
js-10/js.js
Bestand weergeven 

@@ -0,0 +1,108 @@
 
+function Control(
 
+  el,
 
+  {
 
+    min = 0,
 
+    max = 255,
 
+    step = 1,
 
+    value = 0,
 
+    onChange,
 
+    minAngle = 0,
 
+    wheelStepRatio = 0.01,
 
+    maxAngle = 360,
 
+    src = "1@3x.png",
 
+  } = {}
 
+) {
 
+  this.value = value;
 
+  const img = document.createElement("img");
 
+  el.appendChild(img);
 
+  img.src = src;
 
+  const angleRatio = (maxAngle - minAngle) / (max - min);
 
+
 
+  const getAngle = () => (value - min) * angleRatio + minAngle;
 
+
 
+  const updateImg = (angle = getAngle()) =>
 
+    (img.style.transform = `rotate(${angle}deg)`);
 
+
 
+  updateImg();
 
+
 
+  const updateValue = (st = step) => {
 
+    value >= max ? (value -= max) : value < min ? (value += max) : value;
 
+    value += st;
 
+    onChange(Math.floor(value));
 
+    updateImg();
 
+  };
 
+
 
+  img.onclick = (e) => {
 
+    const { x: imgX, width: imgWidth } = img.getBoundingClientRect();
 
+    const xOnImg = e.clientX - imgX;
 
+    const st = xOnImg > imgWidth / 2 ? step : -step;
 
+
 
+    updateValue(st);
 
+  };
 
+
 
+  img.onmousewheel = (e) => {
 
+    const st = e.deltaY * wheelStepRatio;
 
+    updateValue(st);
 
+  };
 
+
 
+  const toDeg = (rad) => (360 / (2 * Math.PI)) * rad;
 
+  let startAngle;
 
+
 
+  const getAngleByCoords = (x, y) => {
 
+    const { x: imgX, y: imgY, width, height } = img.getBoundingClientRect();
 
+    const xOnImg = x - imgX - width / 2;
 
+    const yOnImg = y - imgY - height / 2;
 
+    const angle = toDeg(Math.atan2(yOnImg, xOnImg));
 
+    return angle;
 
+  };
 
+
 
+  img.onmousedown = (e) => {
 
+    startAngle = getAngleByCoords(e.clientX, e.clientY);
 
+    e.preventDefault();
 
+  };
 
+
 
+  img.onmousemove = (e) => {
 
+    if (e.buttons && startAngle) {
 
+      const angleDiff = getAngleByCoords(e.clientX, e.clientY) - startAngle;
 
+      const angle = getAngle();
 
+      updateImg(angle + angleDiff);
 
+    }
 
+  };
 
+  img.onmouseup = (e) => {
 
+    const angleDiff = getAngleByCoords(e.clientX, e.clientY) - startAngle;
 
+    updateValue(angleDiff / angleRatio);
 
+    startAngle = null;
 
+  };
 
+}
 
+
 
+let rgb = { red: 0, green: 0, blue: 0 };
 
+function mixPalette(colors) {
 
+  let { red, green, blue } = colors;
 
+  let paletteForMix = document.querySelector("body");
 
+  paletteForMix.style = `width:500px;height:500px;background:rgb(${red},${green},${blue})`;
 
+}
 
+
 
+let soundlRed = new Control(sound1, {
 
+  max: 255,
 
+  onChange: (value) => {
 
+    sound1.style = `width:500px;background:rgb(${value},0,0)`;
 
+    rgb.red = value;
 
+    mixPalette(rgb);
 
+  },
 
+});
 
+let soundlGreen = new Control(sound2, {
 
+  max: 255,
 
+  onChange: (value) => {
 
+    sound2.style = `width:500px;background:rgb(0,${value},0)`;
 
+    rgb.green = value;
 
+    mixPalette(rgb);
 
+  },
 
+});
 
+let soundlBlue = new Control(sound3, {
 
+  max: 255,
 
+  onChange: (value) => {
 
+    sound3.style = `width:500px;background:rgb(0,0,${value})`;
 
+    rgb.blue = value;
 
+    mixPalette(rgb);
 
+  },
 
+});

+ 12 - 0
js-11/index.html
Bestand weergeven 

@@ -0,0 +1,12 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <div id="films"></div>
 
+    <script src="js.js"></script>
 
+</body>
 
+</html>

+ 67 - 0
js-11/js.js
Bestand weergeven 

@@ -0,0 +1,67 @@
 
+// const startUrl = "http://swapi.dev/api/";
 
+// const url = (str) => typeof str === "string" && str.startsWith(startUrl);
 
+
 
+// table = (el, obj) => {
 
+//   for (var [key, value] of Object.entries(obj)) {
 
+//     const div = document.createElement("div");
 
+//     div.style.border = "1px solid black";
 
+//     div.style.margin = "5px 5px";
 
+//     div.style.padding = "5px";
 
+//     if (url(value)) {
 
+//       value = [value];
 
+//     }
 
+//     if (value instanceof Array) {
 
+//       div.innerHTML = `<b>${key}</b>: `;
 
+//       for (var item of value)
 
+//         if (url(item)) {
 
+//           const button = document.createElement("button");
 
+//           button.innerText = item.slice(startUrl.length);
 
+//           div.appendChild(button);
 
+
 
+//           button.onclick = () => {
 
+//             const div1 = document.createElement("div");
 
+//             div1.style.border = "2px solid green";
 
+//             div1.style.margin = "5px 5px";
 
+//             div.appendChild(div1);
 
+
 
+//             fetch("https://swapi.dev/api/" + button.innerText)
 
+//               .then((res) => res.json())
 
+//               .then((luke) => table(div1, luke));
 
+//           };
 
+//         }
 
+//     } else {
 
+//       div.innerHTML = `<b>${key}</b>: ${value}`;
 
+//     }
 
+//     el.appendChild(div);
 
+//   }
 
+// };
 
+
 
+// fetch("https://swapi.dev/api/people/1/")
 
+//   .then((res) => res.json())
 
+//   .then((luke) => table(films, luke));
 
+
 
+// // myfetch
 
+// function myfetch(url) {
 
+//   return new Promise((resolve, reject) => {
 
+//     const xhr = new XMLHttpRequest();
 
+//     xhr.open("GET", url, true);
 
+//     xhr.onload = () => {
 
+//       xhr.status != 200
 
+//         ? reject(xhr.response)
 
+//         : resolve(JSON.parse(xhr.responseText));
 
+//     };
 
+//     xhr.onerror = () => reject(xhr.statusText);
 
+//     xhr.send();
 
+//   });
 
+// }
 
+
 
+// myfetch("https://swapi.dev/api/people/1/").then((luke) => console.log(luke));
 
+
 
+// // race
 
+// const API1 = new Promise((resolve, reject) =>
 
+//   myfetch("https://swapi.dev/api/people/1/").then(() => resolve("API1"))
 
+// );
 
+
 
+// const API2 = (ms) => new Promise((ok) => setTimeout(() => ok("API2"), ms));
 
+
 
+// Promise.race([API1, API2(115)]).then((value) => console.log(value));

+ 31 - 0
js-12/index.html
Bestand weergeven 

@@ -0,0 +1,31 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+    <meta charset="UTF-8" />
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <title>Document</title>
 
+    <style>
 
+      body {
 
+        padding: 10px;
 
+      }
 
+      input {
 
+        width: 100%;
 
+        margin-bottom: 5px;
 
+        font-size: 20px;
 
+      }
 
+      button {
 
+        width: calc(100% + 4px);
 
+        font-size: 20px;
 
+      }
 
+    </style>
 
+  </head>
 
+  <body>
 
+    <input id="inputNick" type="text" placeholder="nick" />
 
+    <input id="inputMessage" type="text" placeholder="message" />
 
+    <button id="btn">Отправить</button>
 
+
 
+    <div id="chat"></div>
 
+
 
+    <script src="js.js"></script>
 
+  </body>
 
+</html>

+ 67 - 0
js-12/js.js
Bestand weergeven 

@@ -0,0 +1,67 @@
 
+function jsonPost(url, data) {
 
+  return new Promise((resolve, reject) => {
 
+    var x = new XMLHttpRequest();
 
+    x.onerror = () => reject(new Error("jsonPost failed"));
 
+    //x.setRequestHeader('Content-Type', 'application/json');
 
+    x.open("POST", url, true);
 
+    x.send(JSON.stringify(data));
 
+
 
+    x.onreadystatechange = () => {
 
+      if (x.readyState == XMLHttpRequest.DONE && x.status == 200) {
 
+        resolve(JSON.parse(x.responseText));
 
+      } else if (x.status != 200) {
 
+        reject(new Error("status is not 200"));
 
+      }
 
+    };
 
+
 
+    const chat = document.querySelector("#chat");
 
+    chat.style.display = "flex";
 
+    chat.style.flexDirection = "column-reverse";
 
+
 
+    const div = document.createElement("div");
 
+    div.style.display = "flex";
 
+    div.style.justifyContent = "space-between";
 
+    div.style.alignItems = "center";
 
+    div.style.margin = "5px";
 
+
 
+    const p = document.createElement("p");
 
+    p.style.margin = "5px";
 
+
 
+    div.innerText = `${data.nick}: ${data.message}`;
 
+    p.innerText = new Date(data.timestamp);
 
+    console.log(data.timestamp);
 
+
 
+    div.appendChild(p);
 
+    chat.appendChild(div);
 
+  });
 
+}
 
+
 
+btn.onclick = () => {
 
+  jsonPost("http://students.a-level.com.ua:10012", {
 
+    func: "addMessage",
 
+    nick: inputNick.value,
 
+    message: inputMessage.value,
 
+  });
 
+};
 
+let messageId = 0;
 
+jsonPost("http://students.a-level.com.ua:10012", {
 
+  func: "getMessages",
 
+  messageId,
 
+}).then((d) => {
 
+  messageId = d.nextMessageId;
 
+  for (const key of d.data) {
 
+    const div = document.createElement("div");
 
+    div.style.display = "flex";
 
+    div.style.justifyContent = "space-between";
 
+    div.style.alignItems = "center";
 
+    div.style.margin = "5px";
 
+
 
+    const p = document.createElement("p");
 
+    p.style.margin = "5px";
 
+    div.innerText = `${key.nick}: ${key.message}`;
 
+    p.innerText = new Date(key.timestamp);
 
+    div.appendChild(p);
 
+    chat.appendChild(div);
 
+  }
 
+  console.log(d.data);
 
+});