◐ Shell
reader mode source ↗
Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
File filter
Conversations
Jump to
Diff view
Apply and reload
Show whitespace
Diff view
Apply and reload
27 changes: 12 additions & 15 deletions 1-js/11-async/01-callbacks/01-animate-circle-callback/task.md
Original file line number Diff line number Diff line change
@@ -1,25 +1,22 @@

# Animated circle with callback

In the task <info:task/animate-circle> an animated growing circle is shown.

Now let's say we need not just a circle, but to show a message inside it. The message should appear *after* the animation is complete (the circle is fully grown), otherwise it would look ugly.

In the solution of the task, the function `showCircle(cx, cy, radius)` draws the circle, but gives no way to track when it's ready.

Add a callback argument: `showCircle(cx, cy, radius, callback)` to be called when the animation is complete. The `callback` should receive the circle `<div>` as an argument.

Here's the example:

```js
showCircle(150, 150, 100, div => {
div.classList.add('message-ball');
div.append("Hello, world!");
});
```

Demo:

[iframe src="solution" height=260]

Take the solution of the task <info:task/animate-circle> as the base.
Loading
Toggle all file notes Toggle all file annotations