Skip to content

Commit 3da265c

Browse files
ErilysErilys
committed
event loops and async await
1 parent 61d15d6 commit 3da265c

File tree

4 files changed

+186
-7
lines changed

4 files changed

+186
-7
lines changed

‎playground/async-await-error-handling.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,26 +13,26 @@
1313
function wait(ms = 0) {
1414
return new Promise((resolve) => {
1515
setTimeout(resolve, ms);
16-
})
16+
});
1717
}
1818

1919
function makePizza(toppings = []) {
20-
return new Promise(function (resolve, reject) {
20+
return new Promise((resolve, reject) => {
2121
// reject if people try with pineapple
2222
if (toppings.includes('pineapple')) {
2323
reject('Seriously? Get out 🍍');
2424
}
25-
const amountOfTimeToBake = 500 + (toppings.length * 200);
25+
const amountOfTimeToBake = 500 + toppings.length * 200;
2626
// wait 1 second for the pizza to cook:
27-
setTimeout(function () {
27+
setTimeout(() => {
2828
// when you are ready, you can resolve this promise
2929
resolve(`Here is your pizza 🍕 with the toppings ${toppings.join(' ')}`);
3030
}, amountOfTimeToBake);
3131
// if something went wrong, we can reject this promise;
3232
});
3333
}
34-
3534
</script>
3635
</body>
36+
3737

3838
</html>

‎playground/async-await.html‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,83 @@
99
</head>
1010

1111
<body>
12+
<style>
13+
.go {
14+
margin: 5rem;
15+
background: white;
16+
padding: 5rem;
17+
width: 25rem;
18+
height: 25rem;
19+
transition: all 0.2s;
20+
}
21+
22+
.go.circle {
23+
border-radius: 50%;
24+
}
25+
26+
.go.red {
27+
background: red;
28+
}
29+
30+
.go.purple {
31+
background: purple;
32+
color: white;
33+
}
34+
35+
.go.fadeOut {
36+
opacity: 0;
37+
}
38+
39+
</style>
40+
<div class="go">Click Me</div>
1241
<script>
42+
const goButton = document.querySelector('.go');
43+
const wait = (ms = 0) => new Promise((resolve) => setTimeout(resolve, ms));
1344

45+
async function animate(element) {
46+
const button = element.currentTarget;
47+
button.textContent = 'go!';
48+
await wait(1000);
49+
button.classList.add('circle');
50+
await wait(1000);
51+
button.classList.add('red');
52+
await wait(1000);
53+
button.classList.remove('circle');
54+
await wait(1000);
55+
button.classList.remove('red');
56+
button.classList.add('purple');
57+
await wait(1000);
58+
button.classList.add('fadeOut');
59+
}
60+
61+
// function animate(element) {
62+
// const button = element.currentTarget;
63+
// button.textContent = 'GO!';
64+
// wait(1000)
65+
// .then(() => {
66+
// button.classList.add('circle');
67+
// return wait(800);
68+
// })
69+
// .then(() => {
70+
// button.classList.add('red');
71+
// return wait(1000);
72+
// })
73+
// .then(() => {
74+
// button.classList.remove('circle');
75+
// return wait(1500);
76+
// })
77+
// .then(() => {
78+
// button.classList.remove('red');
79+
// button.classList.add('purple');
80+
// return wait(1500);
81+
// })
82+
// .then(() => {
83+
// button.classList.add('fadeOut');
84+
// return wait(1500);
85+
// });
86+
// }
87+
88+
goButton.addEventListener('click', (event) => animate(event));
1489
</script>
1590
</body>
1691

‎playground/event-loop.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,21 @@
99
</head>
1010

1111
<body>
12+
<button class="go">Clique moi !</button>
1213
<script>
14+
const goButton = document.querySelector('.go');
15+
16+
function handleClick() {
17+
this.textContent = 'GO !';
18+
setTimeout(() => {
19+
goButton.style.borderRadius = '200px';
20+
}, 2000);
21+
}
1322

23+
// function makeItRound(el) {
24+
// console.log(el);
25+
// }
26+
goButton.addEventListener('click', handleClick);
1427
</script>
1528
</body>
1629

‎playground/promises.html‎

Lines changed: 93 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,104 @@
44
<head>
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7-
<title>Promises</title>
7+
<title>Event Loop</title>
88
<link rel="stylesheet" href="../base.css">
99
</head>
1010

1111
<body>
12-
<script>
12+
<style>
13+
.go {
14+
margin: 5rem;
15+
background: white;
16+
padding: 5rem;
17+
width: 25rem;
18+
height: 25rem;
19+
transition: all 0.2s;
20+
}
1321

22+
.go.circle {
23+
border-radius: 50%;
24+
}
25+
26+
.go.red {
27+
background: red;
28+
}
29+
30+
.go.purple {
31+
background: purple;
32+
color: white;
33+
}
34+
35+
.go.fadeOut {
36+
opacity: 0;
37+
}
38+
39+
</style>
40+
<div class="go">Click Me</div>
41+
<script>/* eslint-disable */
42+
43+
const goButton = document.querySelector('.go');
44+
const wait = (ms = 0) => new Promise(resolve => setTimeout(resolve, ms));
45+
46+
function animate(el) {
47+
el = el.currentTarget;
48+
el.textContent = 'GO!';
49+
wait(1000)
50+
.then(() => {
51+
el.classList.add('circle');
52+
return wait(800);
53+
})
54+
.then(() => {
55+
el.classList.add('red');
56+
return wait(1000)
57+
})
58+
.then(() => {
59+
el.classList.remove('circle')
60+
return wait(1500);
61+
})
62+
.then(() => {
63+
el.classList.remove('red')
64+
el.classList.add('purple');
65+
return wait(1500);
66+
})
67+
.then(() => {
68+
el.classList.add('fadeOut');
69+
return wait(1500);
70+
})
71+
}
72+
73+
goButton.addEventListener('click', (event) => animate(event));
74+
75+
76+
// function go(e) {
77+
// const el = e.currentTarget;
78+
// // 1. Change the text to GO when clicked.
79+
// el.textContent = 'GO';
80+
// setTimeout(() => {
81+
// // 2. Make it a circle after 2 seconds
82+
// el.classList.add('circle');
83+
// setTimeout(() => {
84+
// // 3. Make it red after 0.5s
85+
// el.classList.add('red');
86+
// setTimeout(() => {
87+
// // 4. make it square after 0.25s
88+
// el.classList.remove('circle');
89+
// setTimeout(() => {
90+
// // 5. make it purple
91+
// el.classList.remove('red');
92+
// el.classList.add('purple');
93+
// setTimeout(() => {
94+
// // 6. fade out after 0.5s
95+
// el.classList.add('invisible');
96+
// setTimeout(() => {
97+
// console.log('You have reacted the 7th layer of callback hell');
98+
// el.classList.remove('invisible', 'purple');
99+
// }, 500);
100+
// }, 500);
101+
// }, 500);
102+
// }, 500);
103+
// }, 500);
104+
// })
14105
</script>
15106
</body>
16107

0 commit comments

Comments
 (0)