Home Explore Help
Sign In
Mitrofanova-Natali
/
homework
Watch 1
Star 0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

hw async

Mitrofanova Natali 3 years ago
parent
79298a642a
commit
55c3ddb87a
6 changed files with 259 additions and 0 deletions
Split View Show Diff Stats
  1. 13 0
      HW12 Javascript Async, Promise/index.html
  2. 82 0
      HW12 Javascript Async, Promise/script.js
  3. 8 0
      HW12 Javascript Async, Promise/style.css
  4. 19 0
      HW13 await paradise (Chat Homework)/index.html
  5. 66 0
      HW13 await paradise (Chat Homework)/script.js
  6. 71 0
      HW13 await paradise (Chat Homework)/style.css

+ 13 - 0
HW12 Javascript Async, Promise/index.html
View File 

@@ -0,0 +1,13 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <title>Document</title>
 
+    <link rel="stylesheet" href="style.css">
 
+</head>
 
+<body>
 
+    <div id="wrapper">
 
+    </div>
 
+    <script src="script.js"></script>
 
+</body>
 
+</html>

+ 82 - 0
HW12 Javascript Async, Promise/script.js
View File 

@@ -0,0 +1,82 @@
 
+// task fetchbasic
 
+// &&
 
+// task  fetch improved
 
+
 
+const wrapper = document.getElementById("wrapper");
 
+
 
+fetch("https://swapi.dev/api/people/1/")
 
+  .then((res) => res.json())
 
+  .then((luke) => creatTable(luke, wrapper));
 
+
 
+function creatTable(data, dom) {
 
+  let table = document.createElement("table");
 
+  dom.appendChild(table);
 
+  let html = "";
 
+  for (let key in data) {
 
+    html += `<tr>`;
 
+    html += `<td>${key}</td>`;
 
+    if (Array.isArray(data[key])) {
 
+      html += `<td>`;
 
+      data[key].forEach((element) => {
 
+        html += `<button>${element}</button>`;
 
+      });
 
+      html += `</td>`;
 
+    } else {
 
+      if (isNaN(data[key]) && data[key].includes("https://")) {
 
+        html += `<td><button>${data[key]}</button></td>`;
 
+      } else {
 
+        html += `<td>${data[key]}</td>`;
 
+        html += `</tr>`;
 
+      }
 
+    }
 
+  }
 
+  table.innerHTML = html;
 
+  document.querySelectorAll("button").forEach((btn) => {
 
+    btn.addEventListener("click", openNewTable);
 
+  });
 
+}
 
+
 
+function openNewTable(event) {
 
+  const url = event.target.innerText;
 
+  fetch(url)
 
+    .then((res) => res.json())
 
+    .then((json) => creatTable(json, wrapper));
 
+}
 
+
 
+//  Task myfetch
 
+
 
+const apiUrl = "https://swapi.dev/api/people/1/";
 
+function myfetch(url) {
 
+  return new Promise(function (resolve, reject) {
 
+    const xhr = new XMLHttpRequest();
 
+    xhr.open("get", url, true);
 
+    xhr.send();
 
+
 
+    xhr.onload = function () {
 
+        if (xhr.status === 200) {
 
+          resolve(JSON.parse(xhr.response));
 
+        } else {
 
+          reject(xhr.status);
 
+        }
 
+      };
 
+  });
 
+}
 
+
 
+
 
+const response = myfetch(apiUrl);
 
+response.then(
 
+  (data) => {
 
+    console.log(data);
 
+  },
 
+  (data) => {
 
+    console.log(data);
 
+  }
 
+);
 
+
 
+// Task race
 
+
 
+const delay = setTimeout(() => {
 
+  console.log('Done waiting');
 
+}, Math.floor(Math.random() * 7000));
 
+
 
+Promise.race([delay, response])

+ 8 - 0
HW12 Javascript Async, Promise/style.css
View File 

@@ -0,0 +1,8 @@
 
+td{
 
+    border: 1px solid grey;
 
+    border-collapse: collapse;
 
+    padding: 3px;
 
+}
 
+table{
 
+    border: 1px solid blue;
 
+}

+ 19 - 0
HW13 await paradise (Chat Homework)/index.html
View File 

@@ -0,0 +1,19 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <title>Document</title>
 
+    <link rel="stylesheet" href="style.css">
 
+</head>
 
+<body>
 
+    <div class="wrapper">
 
+        <input id="nick", type="text" placeholder="nick">
 
+        <input id="message" type="text" placeholder="message">
 
+        <button id="send">Send</button>
 
+    </div>  
+    
+    <div id="container"></div>
 
+
 
+    <script src="script.js"></script>
 
+</body>
 
+</html>

+ 66 - 0
HW13 await paradise (Chat Homework)/script.js
View File 

@@ -0,0 +1,66 @@
 
+const url = "http://students.a-level.com.ua:10012";
 
+const nick = document.getElementById("nick");
 
+const message = document.getElementById("message");
 
+const btnSendMessage = document.getElementById("send"); 
+const container = document.getElementById("container");
 
+let nextMessageId = 1;
 
+let delay = 5000;
 
+
 
+
 
+getMessages()
 
+
 
+
 
+// function checkLoop(){
 
+//   getDataFromServer();
 
+//   setTimeout(checkLoop, delay)
 
+// } 
+// другой способ
 
+setInterval(getMessages, delay)
 
+
 
+function getMessages(){
 
+jsonPost(url, {func: "getMessages", messageId: nextMessageId})
 
+.then((response)=>response.json())
 
+.then(data=>{
 
+  nextMessageId = data.nextMessageId;
 
+  updateMessages(data.data)
 
+})
 
+}
 
+
 
+function jsonPost(url, data) {
 
+  return fetch(url, {
 
+    method: "POST",
 
+    body: JSON.stringify(data)
 
+  })
 
+}
 
+
 
+function updateMessages(messageList){
 
+  messageList.forEach(msg => {
 
+    newGotMessage(msg)    
+  });
 
+
 
+}
 
+function newGotMessage({nick,message,timestamp}){
 
+  const newBlock = document.createElement("div");
 
+  newBlock.classList.add("block")
 
+
 
+  const time = new Date(timestamp);
 
+  let html = "";
 
+  html += `<p>${nick}<p>`;
 
+  html += `<p class="message">"${message}"</p>`
 
+  html += `<p>${time.toString().substring(16,24)}</p>`
 
+  newBlock.innerHTML = html;
 
+  container.prepend(newBlock)
 
+}
 
+
 
+
 
+btnSendMessage.addEventListener("click", sendAndCheck)
 
+
 
+async function sendAndCheck(){
 
+  await sendMessage();
 
+  getMessages()
 
+  message.value = "";
 
+}
 
+
 
+async function sendMessage(){
 
+    jsonPost(url, {func: "addMessage", nick: nick.value, message: message.value})
 
+}

+ 71 - 0
HW13 await paradise (Chat Homework)/style.css
View File 

@@ -0,0 +1,71 @@
 
+body{
 
+    width: 100%;
 
+    height: 100%;
 
+    display: flex;
 
+    flex-direction: column;
 
+    align-items: center;
 
+    
+}
 
+.wrapper{
 
+    
+    max-width:800px;
 
+    display: flex;
 
+    align-items: center;
 
+    justify-content: space-around;
 
+}
 
+
 
+#container{
 
+    max-width: 800px;
 
+    height: 800px;
 
+    display: flex;
 
+    flex-direction: column;
 
+    border: 1px solid grey;
 
+    overflow-y: scroll;
 
+    
+}
 
+.message{
 
+    font-style: italic;
 
+    font-size: 20px;
 
+    color: blue;
 
+}
 
+.block{
 
+    width: fit-content;
 
+    border: 1px solid grey;
 
+    border-radius: 2%;
 
+    padding: 0 30px;
 
+    margin: 7px 20px;
 
+    box-shadow: 7px 3px 3px grey;
 
+}
 
+p{
 
+    margin: 5px;
 
+}
 
+
 
+input{
 
+    max-width: 250px;
 
+    height: 35px;
 
+    margin: 10px;
 
+    font-size: 25px;
 
+    border: 2px solid grey;
 
+    border-radius: 3px;
 
+    box-shadow: 3px 2px 2px grey;
 
+}
 
+#send{
 
+    font-size: 20px;
 
+    height: 39px;
 
+    width: 150px;
 
+    box-shadow: 5px 2px 2px grey;
 
+}
 
+#container::-webkit-scrollbar {
 
+    
+    width: 12px;
 
+    background-color: #f9f9fd;
 
+}
 
+
 
+#container::-webkit-scrollbar-track {
 
+    background-color: #E8E8E8;
 
+}
 
+
 
+#container::-webkit-scrollbar-thumb {
 
+    height: 30px;
 
+    box-shadow: inset 0 0 6px  #223c50;
 
+}