Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions 1-js/11-async/02-promise-basics/01-re-resolve/solution.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
The output is: `1`.
Outputtet er: `1`.

The second call to `resolve` is ignored, because only the first call of `reject/resolve` is taken into account. Further calls are ignored.
Det andet kald til `resolve` ignoreres, fordi kun det første kald til `reject/resolve` tages i betragtning. Yderligere kald ignoreres.
4 changes: 2 additions & 2 deletions 1-js/11-async/02-promise-basics/01-re-resolve/task.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@

# Re-resolve a promise?
# Re-resolve et promise?


What's the output of the code below?
Hvad er outputtet af koden nedenfor?

```js
let promise = new Promise(function(resolve, reject) {
Expand Down
4 changes: 2 additions & 2 deletions 1-js/11-async/02-promise-basics/02-delay-promise/solution.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ function delay(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}

delay(3000).then(() => alert('runs after 3 seconds'));
delay(3000).then(() => alert('kører efter 3 sekunder'));
```

Please note that in this task `resolve` is called without arguments. We don't return any value from `delay`, just ensure the delay.
Bemærk at i denne opgave kaldes `resolve` uden argumenter. Vi returnerer ikke nogen værdi fra `delay`, men sikrer kun forsinkelsen.
10 changes: 5 additions & 5 deletions 1-js/11-async/02-promise-basics/02-delay-promise/task.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@

# Delay with a promise
# Forsinkelse med et promise

The built-in function `setTimeout` uses callbacks. Create a promise-based alternative.
Den indbyggede funktion `setTimeout` bruger callbacks. Opret et promise-baseret alternativ.

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:
Funktionen `delay(ms)` bør returnere et promise. Det promise bør indfries efter `ms` millisekunder. Vi kan så tilføje `.then` til det, sådan her:

```js
function delay(ms) {
// your code
// din kode
}

delay(3000).then(() => alert('runs after 3 seconds'));
delay(3000).then(() => alert('kører efter 3 sekunder'));
```
Original file line number Diff line number Diff line change
@@ -1,61 +1,56 @@
<!DOCTYPE html>
<!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;
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);
<head>
<meta charset="utf-8" />
<style>
.message-ball {
font-size: 20px;
line-height: 200px;
text-align: center;
}
.circle {
transition-property: width, height;
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('Hej, verden!');
});
}, 0);
})
}
</script>


</body>
}

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>
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@

# Animated circle with promise
# Animeret cirkel med 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.
Omskriv funktionen `showCircle` i løsningen fra opgaven <info:task/animate-circle-callback> så den returnerer et promise i stedet for at acceptere en callback.

The new usage:
Den nye brug:

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

Take the solution of the task <info:task/animate-circle-callback> as the base.
Brug løsningen fra <info:task/animate-circle-callback> som udgangspunkt.
Loading