Promises

Author: pktcodes

app.js

@@ -1,29 +1,32 @@
 // callbacks, promises, async/await
+// PROMISES - Pending, Resolved, Rejected
+// then catch - pass another callback
 
 const heading1 = document.querySelector(".heading-1");
 const heading2 = document.querySelector(".heading-2");
 const heading3 = document.querySelector(".heading-3");
 const btn = document.querySelector(".btn");
 
-/* Initial Example */
-// btn.addEventListener("click", () => {
-//   console.log("You clicked the button.");
-// });
-
-// console.log("I'm second");
-// for (let i = 0; i < 10000; i++) {
-//   console.log("I am busy");
-// }
-
-/* Second Example - The challenge here second one should start executing once first one completes and same goes for third to second*/
 btn.addEventListener("click", () => {
-  setTimeout(() => {
-    heading1.style.color = "red";
-    setTimeout(() => {
-      heading2.style.color = "green";
-      setTimeout(() => {
-        heading3.style.color = "blue";
-      }, 1000);
-    }, 2000);
-  }, 1000);
+  console.log("You clicked the button.");
+});
+
+/* Promise */
+const promise = new Promise((resolve, reject) => {
+  const value = false;
+  if (value) {
+    resolve("The value is true");
+  } else {
+    reject("there was a error, value is false");
+  }
 });
+
+promise
+  .then((result) => {
+    console.log(result);
+  })
+  .catch((error) => {
+    console.log(error);
+  });
+
+console.log(promise);

callback-example.js

@@ -0,0 +1,29 @@
+// callbacks, promises, async/await
+
+const heading1 = document.querySelector(".heading-1");
+const heading2 = document.querySelector(".heading-2");
+const heading3 = document.querySelector(".heading-3");
+const btn = document.querySelector(".btn");
+
+/* Initial Example */
+// btn.addEventListener("click", () => {
+//   console.log("You clicked the button.");
+// });
+
+// console.log("I'm second");
+// for (let i = 0; i < 10000; i++) {
+//   console.log("I am busy");
+// }
+
+/* Second Example - The challenge here second one should start executing once first one completes and same goes for third to second*/
+btn.addEventListener("click", () => {
+  setTimeout(() => {
+    heading1.style.color = "red";
+    setTimeout(() => {
+      heading2.style.color = "green";
+      setTimeout(() => {
+        heading3.style.color = "blue";
+      }, 1000);
+    }, 2000);
+  }, 1000);
+});