javascript-tutorial
diff --git a/‎8-async/02-promise-basics/02-delay-promise/solution.md
Lines changed: 9 additions & 0 deletions b/‎8-async/02-promise-basics/02-delay-promise/solution.md
Lines changed: 9 additions & 0 deletions
diff --git a/‎8-async/02-promise-basics/02-delay-promise/task.md
Lines changed: 14 additions & 0 deletions b/‎8-async/02-promise-basics/02-delay-promise/task.md
Lines changed: 14 additions & 0 deletions
diff --git a/‎8-async/02-promise-basics/03-animate-circle-promise/solution.md b/‎8-async/02-promise-basics/03-animate-circle-promise/solution.md
diff --git a/‎8-async/02-promise-basics/03-animate-circle-promise/solution.view/index.html
Lines changed: 61 additions & 0 deletions b/‎8-async/02-promise-basics/03-animate-circle-promise/solution.view/index.html
Lines changed: 61 additions & 0 deletions
diff --git a/‎8-async/02-promise-basics/03-animate-circle-promise/task.md
Lines changed: 15 additions & 0 deletions b/‎8-async/02-promise-basics/03-animate-circle-promise/task.md
Lines changed: 15 additions & 0 deletions
@@ -0,0 +1,9 @@
+```js run
+function delay(ms) {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+delay(3000).then(() => alert('runs after 3 seconds'));
+```
+
+Please note that in this task `resolve` is called without arguments. We don't return any value from `delay`, just ensure the delay.
@@ -0,0 +1,14 @@
+
+# Delay with a promise
+
+The built-in function `setTimeout` uses callbacks. Create a promise-based alternative.
+
+The function `delay(ms)` should return a promise. That promise should resolve after `ms` milliseconds, so that we can add `.then` to it, like this:
+
+```js
+function delay(ms) {
+  // your code
+}
+
+delay(3000).then(() => alert('runs after 3 seconds'));
+```
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <style>
+    .message-ball {
+      font-size: 20px;
+      line-height: 200px;
+      text-align: center;
+    }
+    .circle {
+      transition-property: width, height, margin-left, margin-top;
+      transition-duration: 2s;
+      position: fixed;
+      transform: translateX(-50%) translateY(-50%);
+      background-color: red;
+      border-radius: 50%;
+    }
+  </style>
+</head>
+
+<body>
+
+  <button onclick="go()">Click me</button>
+
+  <script>
+
+  function go() {
+    showCircle(150, 150, 100).then(div => {
+      div.classList.add('message-ball');
+      div.append("Hello, world!");
+    });
+  }
+
+  function showCircle(cx, cy, radius) {
+    let div = document.createElement('div');
+    div.style.width = 0;
+    div.style.height = 0;
+    div.style.left = cx + 'px';
+    div.style.top = cy + 'px';
+    div.className = 'circle';
+    document.body.append(div);
+
+    return new Promise(resolve => {
+      setTimeout(() => {
+        div.style.width = radius * 2 + 'px';
+        div.style.height = radius * 2 + 'px';
+
+        div.addEventListener('transitionend', function handler() {
+          div.removeEventListener('transitionend', handler);
+          resolve(div);
+        });
+      }, 0);
+    })
+  }
+  </script>
+
+
+</body>
+</html>
@@ -0,0 +1,15 @@
+
+# Animated circle with promise
+
+Rewrite the `showCircle` function in the solution of the task <info:task/animate-circle-callback> so that it returns a promise instead of accepting a callback.
+
+The new usage:
+
+```js
+showCircle(150, 150, 100).then(div => {
+  div.classList.add('message-ball');
+  div.append("Hello, world!");
+});
+```
+
+Take the solution of the task <info:task/animate-circle-callback> as the base.