Finish with lesson 3

talgat-ruby · talgat-ruby · commit 699dc3dbfbf8 · 2022-04-27T19:19:55.000+06:00
diff --git a/index.html b/index.html
@@ -1,8 +1,10 @@
 <html>
 	<head>
 		<title>Dummy page</title>
-		<script src="lesson3-async/index2.js"></script>
+		<script src="lesson3-async/index3.js"></script>
 	</head>
-	<body></body>
-	<script src="lesson3-async/index2-script.js"></script>
+	<body>
+		<button id="btn">Click me</button>
+		<button id="btn2">Second button</button>
+	</body>
 </html>
diff --git a/lesson3-async/index2.js b/lesson3-async/index2.js
@@ -1,11 +1,14 @@
 // Callbacks
+function main() {
+	const btn = document.getElementById("btn");
+	btn.addEventListener("click", clickButton);
+}
 
-function loadScript(src) {
-	// creates a <script> tag and append it to the page
-	// this causes the script with given src to start loading and run when complete
-	let script = document.createElement("script");
-	script.src = src;
-	document.head.append(script);
+function clickButton() {
+	console.log("%c btn clicked -> ", "background: #222; color: royalblue");
 }
 
-loadScript("/my/script.js"); // the script has "function sampleFn() {…}"
+const arr = [1, 2, 3];
+
+const newArr = arr.map((a) => a * 2);
+console.log(newArr);
diff --git a/lesson3-async/index3.js b/lesson3-async/index3.js
@@ -0,0 +1,19 @@
+console.log("Page loading");
+console.log("%c document -> ", "background: #222; color: royalblue", document);
+
+function clickButton(number) {
+	console.log(
+		`%c btn ${number} clicked -> `,
+		"background: #222; color: royalblue"
+	);
+}
+
+window.addEventListener("load", () => {
+	console.log("Page loaded");
+	const btn = document.getElementById("btn");
+	btn.addEventListener("click", clickButton);
+	btn.removeEventListener("click", clickButton);
+
+	const btn2 = document.getElementById("btn2");
+	btn2.addEventListener("click", clickButton);
+});
diff --git a/lesson3-async/index4.js b/lesson3-async/index4.js
@@ -0,0 +1,63 @@
+function asyncRequest(str) {
+	const p = new Promise((res, rej) => {
+		if (str.includes("please")) {
+			res(str);
+		} else {
+			rej(new Error("Be pollite!"));
+		}
+	});
+	return p;
+}
+
+function main() {
+	const req = asyncRequest("Take please");
+	console.log(1);
+	req.then((res) => {
+		console.log(`Success!, ${res}`);
+		return "New Then!";
+	})
+		// .then((res) => {
+		// 	console.log(res);
+		// 	return "New Then2";
+		// })
+		.catch((err) => {
+			console.log(`Fail! ${err.message}`);
+			return Promise.reject(err);
+		})
+		// .catch((err) => {
+		// 	console.log(`Fail! ${err.message}`);
+		// })
+		// .then((res) => {
+		// 	console.log(res);
+		// })
+		.finally(() => {
+			console.log("Finally");
+		});
+	console.log(2);
+}
+
+async function mainAsyncAwait() {
+	console.log(1);
+	try {
+		// const takeRes = await asyncRequest("Take please");
+		// const giveRes = await asyncRequest("Give please");
+		// const [takeRes, giveRes] = await Promise.all([
+		// 	asyncRequest("Take please"),
+		// 	asyncRequest("Give please"),
+		// ]);
+		// const pr1 = asyncRequest("Take please");
+		// const pr2 = asyncRequest("Give please");
+
+		// const takeRes = await pr1;
+		// const giveRes = await pr2;
+		console.log(`Success!, ${takeRes}`);
+		console.log(`Success!, ${giveRes}`);
+	} catch (err) {
+		console.log(`Fail! ${err.message}`);
+	} finally {
+	}
+	console.log(2);
+}
+
+// main();
+mainAsyncAwait();
