Skip to content

Commit 4378308

Browse files
last-endcodelast-endcode
committed
update
1 parent 42d350c commit 4378308

6 files changed

+218
-0
lines changed

‎async_JS/07_reject_example.js

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
// reject example
2+
const btn = document.querySelector('.btn');
3+
const container = document.querySelector('.img-container');
4+
5+
btn.addEventListener('click', () => {
6+
const url = `https://source.unsplash.com/random?sig=${Math.random()}`;
7+
// invoke promise function
8+
loadImage(url)
9+
.then((response) => container.appendChild(response))
10+
.catch((err) => console.log(err));
11+
});
12+
13+
// function for promise
14+
function loadImage(url) {
15+
return new Promise((resolve, reject) => {
16+
let img = new Image();
17+
img.addEventListener('load', () => {
18+
resolve(img);
19+
});
20+
img.addEventListener('error', () => {
21+
reject(new Error(`Your URL is failed ${url}`));
22+
});
23+
img.src = url;
24+
});
25+
}

‎async_JS/08_promises_example.js

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
// promises example
2+
3+
const heading1 = document.querySelector('.one');
4+
const heading2 = document.querySelector('.two');
5+
const heading3 = document.querySelector('.three');
6+
const btn = document.querySelector('.btn');
7+
8+
btn.addEventListener('click', () => {
9+
// invoke
10+
// disini then dia berfungsi karena promise resolve()
11+
// jadi jika resolve di tidak adakan
12+
// yang tercetak hanyalah heading1 saja
13+
// dan yg then tidak ingat slalu then is true dan butuh resolve
14+
15+
changeColors(1000, heading1, 'red')
16+
.then(() => changeColors(1000, heading2, 'blue'))
17+
.then(() => changeColors(1000, heading3, 'green'))
18+
.catch((err) => console.log(err));
19+
});
20+
21+
// membuat promises function
22+
// callbackfunction is time, element, colors
23+
function changeColors(time, element, colors) {
24+
return new Promise((resolve, reject) => {
25+
// if exist
26+
if (element) {
27+
setTimeout(() => {
28+
element.style.color = colors;
29+
resolve();
30+
}, time);
31+
} else {
32+
reject(new Error(`Your element is failed cause ${element}`));
33+
}
34+
});
35+
}

‎async_JS/09_asyncawait.js

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
// callbacks, promises, async/await
2+
// must have async
3+
// await waits till promises is settled
4+
// error handling - try / catch
5+
6+
/*
7+
just for reference:
8+
#await is promise resolved
9+
async function someFunction(){
10+
await
11+
}
12+
13+
const otherFunctions = async() => {
14+
await
15+
}
16+
17+
*/
18+
const heading1 = document.querySelector('.one');
19+
const heading2 = document.querySelector('.two');
20+
const heading3 = document.querySelector('.three');
21+
const btn = document.querySelector('.btn');
22+
23+
btn.addEventListener('click', async () => {
24+
// log data get hello
25+
// displayColors().then((data) => console.log(data));
26+
27+
// and here no need then and change use await
28+
const result = await displayColors();
29+
});
30+
31+
async function displayColors() {
32+
// here await make sure promise is settled
33+
try {
34+
await changeColors(1000, heading1, 'red');
35+
await changeColors(1000, heading2, 'green');
36+
await changeColors(1000, heading3, 'blue');
37+
} catch (error) {
38+
console.log(error);
39+
}
40+
// return `hello`;
41+
}
42+
43+
// membuat promises function
44+
// callbackfunction is time, element, colors
45+
function changeColors(time, element, colors) {
46+
return new Promise((resolve, reject) => {
47+
// if exist
48+
if (element) {
49+
setTimeout(() => {
50+
element.style.color = colors;
51+
resolve();
52+
}, time);
53+
} else {
54+
reject(new Error(`Your element is failed cause ${element}`));
55+
}
56+
});
57+
}

‎async_JS/asynwait_example.html

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Document</title>
7+
</head>
8+
<style>
9+
body {
10+
text-align: center;
11+
}
12+
h1 {
13+
text-align: center;
14+
font-weight: bold;
15+
}
16+
.btn {
17+
padding: 10px;
18+
}
19+
20+
img {
21+
width: 100%;
22+
height: 200px;
23+
object-fit: cover;
24+
}
25+
</style>
26+
<body>
27+
<h1>Asyncronous JS</h1>
28+
<h2 class="one">Heading ONE</h2>
29+
<h2 class="two">Heading TWO</h2>
30+
<h2 class="three">Heading Three</h2>
31+
<button class="btn">click me</button>
32+
</body>
33+
<script src="./09_asyncawait.js"></script>
34+
</html>

‎async_JS/promises_example.html

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Document</title>
7+
</head>
8+
<style>
9+
body {
10+
text-align: center;
11+
}
12+
h1 {
13+
text-align: center;
14+
font-weight: bold;
15+
}
16+
.btn {
17+
padding: 10px;
18+
}
19+
20+
img {
21+
width: 100%;
22+
height: 200px;
23+
object-fit: cover;
24+
}
25+
</style>
26+
<body>
27+
<h1>Asyncronous JS</h1>
28+
<h2 class="one">Heading one</h2>
29+
<h2 class="two">Heading two</h2>
30+
<h2 class="three">Heading three</h2>
31+
<button class="btn">click me</button>
32+
</body>
33+
<script src="./08_promises_example.js"></script>
34+
</html>

‎async_JS/reject_example.html

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Document</title>
7+
</head>
8+
<style>
9+
body {
10+
text-align: center;
11+
}
12+
h1 {
13+
text-align: center;
14+
font-weight: bold;
15+
}
16+
.btn {
17+
padding: 10px;
18+
}
19+
20+
img {
21+
width: 100%;
22+
height: 200px;
23+
object-fit: cover;
24+
}
25+
</style>
26+
<body>
27+
<div class="img-container">
28+
<!-- <img src="https://source.unsplash.com/random" alt="random image" /> -->
29+
</div>
30+
<button class="btn">click me</button>
31+
</body>
32+
<script src="./07_reject_example.js"></script>
33+
</html>

0 commit comments

Comments
 (0)