Browse Source

add hw 15 part

makstravm 3 years ago
parent
commit
ef3a4fe0b1
4 changed files with 229 additions and 1 deletions
  1. 3 1
      HW14/main.js
  2. 37 0
      HW15/index.html
  3. 124 0
      HW15/main.js
  4. 65 0
      HW15/style.css

+ 3 - 1
HW14/main.js

@@ -65,15 +65,17 @@ async function sendAndCheck(nickName, message, nextMessageId) {
 
 btn.onclick = () => {
   nick.value === '' ? nick.classList.add('error') : message.value === '' ? message.classList.add('error') : sendAndCheck(nick.value, message.value, messageIdSave)
+  message.value = ''
 }
 
+
 nick.oninput = () => nick.classList.remove('error')
 message.oninput = () => message.classList.remove('error')
 
 async function checkLoop() {
   const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))
   while (true) {
-    await delay(2000)
+    await delay(3000)
     getMessages(messageIdSave)
   }
 }

+ 37 - 0
HW15/index.html

@@ -0,0 +1,37 @@
+<!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-15 traffic lights</title>
+<link rel="stylesheet" href="style.css">
+
+<body>
+  <div class="container">
+    <div class="traffic__lights">
+      <div class="lights" id='red'></div>
+      <div class="lights" id='yellow'></div>
+      <div class="lights" id='green'></div>
+    </div>
+    <div class="traffic__lights">
+      <div class="lights" id='red2'></div>
+      <div class="lights" id='yellow2'></div>
+      <div class="lights" id='green2'></div>
+    </div>
+    <div class="wrapper">
+      <div class="traffic__lights">
+        <div class="lights" id='red3'></div>
+        <div class="lights" id='yellow3'></div>
+        <div class="lights" id='green3'></div>
+      </div>
+      <button id='btn' class="btn-light">КнОпкА</button>
+    </div>
+
+  </div>
+  <button id="knopka" class='btn'>Я КНОПКа</button>
+  <script src="main.js"></script>
+</body>
+
+</html>

+ 124 - 0
HW15/main.js

@@ -0,0 +1,124 @@
+const getGQL = url =>
+  (query, variables) => fetch(url, {
+    //метод
+    method: 'POST',
+    headers: {
+      //заголовок content-type
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify({ query, variables })
+    //body с ключами query и variables
+
+  }).then(res => res.json()).then(data => {
+    //расковырять data, если все ок - отдать data.login или data.CategoryFindOne, или шо там еще
+    //если есть errors, то выбросить исключение и тем самым зареджектить промис
+    return data
+  })
+
+const gql = getGQL('http://shop-roles.asmer.fs.a-level.com.ua/graphql');
+
+(async () => {
+  try {
+    console.log((await gql(`
+    query NameForMe1($login:String, $password:String){
+        login(login:$login, password:$password)
+    }
+`, { login: 'tst', password: '123' })).data.login)
+  } catch (error) {
+    console.log(error);
+  }
+})()
+
+
+
+
+//Светофор
+
+const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms))
+
+async function trafficLight(delayG, delayY, delayR) {
+  while (true) {
+    red.classList.remove('active')
+    green.classList.add('active')
+    await delay(delayG)
+    green.classList.remove('active')
+    yellow.classList.add('active')
+    await delay(delayY)
+    yellow.classList.remove('active')
+    red.classList.add('active')
+    await delay(delayR)
+  }
+}
+trafficLight(3000, 200, 3000,)
+
+//  Светофор  Stage 2
+
+function delay2(ms, el) {
+  return new Promise(ok => {
+    let count = ms / 1000;
+    (counter = (c) => {
+      el.classList.add('active')
+      el.innerText = count
+      if (count > 0) setTimeout(() => counter(count--), 1000);
+      else {
+        el.innerText = ''
+        el.classList.remove('active')
+        return ok()
+      }
+    })()
+  })
+}
+
+async function trafficLight2(delayG, delayY, delayR) {
+  while (true) {
+    await delay2(delayG, green2)
+    await delay2(delayY, yellow2)
+    await delay2(delayR, red2)
+  }
+}
+
+trafficLight2(5000, 2000, 5000)
+
+//domEventPromise
+
+function domEventPromise(el, eventName) {
+  return new Promise(resolve => {
+    el.addEventListener(eventName, (e) => {
+      el.disabled = true
+      el.removeEventListener('click', () => { })
+      return resolve(e)
+    })
+  })
+}
+
+domEventPromise(knopka, 'click').then(e => console.log('event click happens', e))
+
+// PedestrianTrafficLight
+
+
+function delay3(ms, el) {
+  return new Promise(ok => {
+    let count = ms / 1000;
+    (counter3 = (c) => {
+      el.classList.add('active')
+      el.innerText = count
+      if (count > 0) setTimeout(() => counter3(count--), 1000);
+      else {
+        el.innerText = ''
+        el.classList.remove('active')
+        return ok()
+      }
+    })()
+  })
+}
+
+async function trafficLight3(delayG, delayY, delayR, ) {
+  while (true) {
+    await delay3(delayG, green3)
+    await delay3(delayY, yellow3)
+    await delay3(delayR, red3)
+
+  }
+}
+
+trafficLight3(5000, 2000, 5000)

+ 65 - 0
HW15/style.css

@@ -0,0 +1,65 @@
+:root {
+  box-sizing: border-box;
+  font-size: 16px;
+  line-height: 20px;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+}
+.container {
+  max-width: 1200px;
+  padding: 0 15px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-around;
+}
+.traffic__lights {
+  background-color: #000000;
+  width: 100px;
+  height: 300px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-evenly;
+  border-radius: 10px;
+}
+.lights {
+  width: 70px;
+  height: 70px;
+  background-color: #ececec;
+  border-radius: 50%;
+  transition: all 0.3s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 3em;
+}
+#green.active,
+#green2.active,
+#green3.active {
+  background-color: #5bff00;
+}
+#yellow.active,
+#yellow2.active,
+#yellow3.active {
+  background-color: #fffe00;
+}
+#red.active,
+#red2.active,
+#red3.active {
+  background-color: #ff0000;
+}
+.btn,
+.btn-light {
+  border: none;
+  background-color: rgb(3, 70, 70);
+  color: #fff;
+  cursor: pointer;
+  padding: 25px 35px;
+  font-size: 2em;
+  border-radius: 5px;
+  transition: all 0.3s;
+}
+.btn:disabled {
+  background-color: #ececec;
+  color: #000;
+  opacity: 0.5;
+}