feat: add promise

Author: brijeshkumar-chavda

13_function/1_function.js

@@ -11,6 +11,7 @@
 // - When argument doesn't pass it will take value as a undefined (In other word empty function return undefine).
 // - functionName -> Reference (function definition)
 // - functionName() -> Execution (Calling)
+// - If you use {}, you need to use return keyword for getting value form the function.
 
 // Example
 function myFunction(parameter1, parameter2) {

13_function/multiverse_of_function.js renamed to 13_function/different_types_of_functions/1_different_types_of_functions.js

@@ -1,28 +1,34 @@
-// Normal Function
+// Function Declaration
 function myFunction(parameter) {
   console.log(parameter);
   return;
 }
 
 // Function Expression
-const myVariable = function myFunction(parameter) {
+// Named Function Expression
+const myVariable1 = function myFunction(parameter) {
   console.log(parameter);
   return;
 };
 
-// Anonymous Function
-const myVariable1 = function myFunction(parameter) {
+// Anonymous Function Expression
+const myVariable = function (parameter) {
   console.log(parameter);
   return;
 };
 
 // Function inside the object
 // - Do not confuse between storing function inside variable and storing function inside object using key.
-// - When you store function inside variable it's function expression and also be anonymous function.
+// - When you store function inside variable it's function expression and also it is anonymous function.
 // - But when you store function inside object using the key and value pair. It's only anonymous function.
 const myObject = {
-  myFunction: function myFunction(parameter) {
+  myFunction: function (parameter) {
     console.log(parameter);
     return;
   },
-};
+};
+
+// Arrow Function (Anonymous by Default)
+const arrowFunction = (parameter) => {
+  console.log(parameter);
+};

13_function/different_types_of_functions/2_different_types_of_functions.md

@@ -0,0 +1,14 @@
+| Feature                          | Function Declaration                                   | Named Function Expression                                                                                                           | Anonymous Function Expression                          | Arrow Function                                                 |
+| -------------------------------- | ------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ | -------------------------------------------------------------- |
+| **Syntax**                       | `function functionName(parameter) { ... }`             | `const variable = function functionName(parameter) { ... }`                                                                         | `const variable = function(parameter) { ... }`         | `const variable = (parameter) => { ... }`                      |
+| **Name**                         | Yes                                                    | Yes                                                                                                                                 | No                                                     | No                                                             |
+| **Named Recursion**              | Yes                                                    | Yes                                                                                                                                 | No                                                     | No                                                             |
+| **Hoisting**                     | Yes                                                    | No                                                                                                                                  | No                                                     | No                                                             |
+| **Invocation before Definition** | Allowed                                                | Not allowed                                                                                                                         | Not allowed                                            | Not allowed                                                    |
+| **Reference**                    | `functionName()` is the function reference             | `functionName()` is the function reference but inside the function within scope. For outside `variable()` is the function reference | `variable()` is the variable reference                 | `variable()` is the variable reference                         |
+| **Reassignment**                 | Cannot be reassigned                                   | Can be reassigned                                                                                                                   | Can be reassigned                                      | Can be reassigned                                              |
+| **Scope**                        | Function name available throughout the scope           | Function name available throughout the scope                                                                                        | Only accessible through the variable it's assigned to  | Only accessible through the variable it's assigned to          |
+| **Arguments Object**             | Has its own `arguments` object                         | Has its own `arguments` object                                                                                                      | Has its own `arguments` object                         | No `arguments` object, uses `arguments` of surrounding context |
+| **`this` Binding**               | Dynamic (`this` depends on how the function is called) | Dynamic (`this` depends on how the function is called)                                                                              | Dynamic (`this` depends on how the function is called) | Lexical (`this` is bound to the surrounding scope)             |
+| **Constructor**                  | Can be used as a constructor (with `new` keyword)      | Can be used as a constructor (with `new` keyword)                                                                                   | Can be used as a constructor (with `new` keyword)      | Cannot be used as a constructor                                |
+| **Debugging/Stack Traces**       | Function name appears in stack traces                  | Function name appears in stack traces                                                                                               | Variable name or "anonymous" in stack traces           | Variable name or "anonymous" in stack traces                   |

15_this_keyword/1_this_keyword.js

@@ -80,4 +80,4 @@ const outerObject = {
   },
 };
 console.log(outerObject.innerObject.arrowFunction());
-// `this` just doesn't care. It won't show the key1's -> va lue.
+// `this` just doesn't care. It won't show the key1's -> value.

24_event/event_basic_1.html

@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body style="background-color: #414141; color: #fff">
+    <h2>Amazing Images</h2>
+    <div>
+      <ul id="images">
+        <li>
+          <img
+            width="200px"
+            id="photoshop"
+            src="https://images.pexels.com/photos/3561339/pexels-photo-3561339.jpeg?auto=compress&cs=tinysrgb&w=1600&lazy=load"
+            alt="photoshop"
+          />
+        </li>
+        <li>
+          <img
+            width="200px"
+            id="japan"
+            src="https://images.pexels.com/photos/3532553/pexels-photo-3532553.jpeg?auto=compress&cs=tinysrgb&w=1600&lazy=load"
+            alt=""
+          />
+        </li>
+        <li>
+          <img
+            width="200px"
+            id="river"
+            src="https://images.pexels.com/photos/3532551/pexels-photo-3532551.jpeg?auto=compress&cs=tinysrgb&w=1600&lazy=load"
+            alt=""
+          />
+        </li>
+        <li>
+          <img
+            width="200px"
+            id="owl"
+            src="https://images.pexels.com/photos/3532552/pexels-photo-3532552.jpeg?auto=compress&cs=tinysrgb&w=1600&lazy=load"
+            alt=""
+          />
+        </li>
+        <li>
+          <img
+            width="200px"
+            id="prayer"
+            src="https://images.pexels.com/photos/2522671/pexels-photo-2522671.jpeg?auto=compress&cs=tinysrgb&w=1600&lazy=load"
+            alt=""
+          />
+        </li>
+        <li>
+          <a style="color: aliceblue" href="https://google.com" id="google"
+            >Google</a
+          >
+        </li>
+      </ul>
+    </div>
+  </body>
+  <script>
+    // (Not Recommended)
+    // document.getElementById("owl").onclick = function () {
+    //   alert(`owl clicked`);
+    // };
+
+    // Old ways to working with event and eventObject
+    // attachEvent(); -> It was use in internet explore.
+    // jQuery -> It was famous before ReactJS.
+
+    // Important Events:
+    // type, timeStamp, defaultPrevent
+    // target, toElement, sourceElement, currentTarget
+    // clientX, clientY, screenX, screenY
+    // altkey, ctrlkey, shiftkey, keyCode
+
+    // Event Propagation:
+    // 1. Bubbling phase
+    // - It evaluate events bottom to top.
+    // - By default value is false.
+    // 2. Capture phase
+    // - It evaluate events top to bottom.
+    // - We manually change need to change value to true.
+
+    // document.getElementById("images").addEventListener(
+    //   "click",
+    //   function (e) {
+    //     alert(`image list has been clicked`);
+    //   },
+    //   false
+    // );
+    // document.getElementById("owl").addEventListener(
+    //   "click",
+    //   function (e) {
+    //     alert(`owl clicked`);
+    //     e.stopPropagation(); // Stop event bubbling
+    //   },
+    //   false
+    // );
+
+    // document.getElementById("google").addEventListener(
+    //   "click",
+    //   function (e) {
+    //     e.preventDefault();
+    //     // e.stopPropagation();
+    //     console.log("google clicked");
+    //   },
+    //   false
+    // );
+
+    document.querySelector("#images").addEventListener(
+      "click",
+      function (e) {
+        // console.log(e.target);
+        // console.log(e.target.parentNode);
+        console.log(e.target.tagName);
+        if (e.target.tagName === "IMG") {
+          console.log(e.target.id);
+          let removeImage = e.target.parentNode;
+          removeImage.remove();
+        }
+        // removeImage.parentNode.removeChild(removeImage);
+      },
+      false
+    );
+  </script>
+</html>

24_event/event_basic_2.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body style="background-color: #414141; color: #fff">
+    <h1></h1>
+    <button id="stopButton">Stop</button>
+  </body>
+  <script>
+    const sayName = function () {
+      console.log("Brijesh");
+    };
+
+    const changeTitle = function () {
+      document.querySelector("h1").innerHTML = "Event Basic - 2";
+    };
+
+    const changeMe = setTimeout(changeTitle, 2000);
+    
+    document
+      .querySelector("#stopButton")
+      .addEventListener("click", function () {
+        clearTimeout(changeMe);
+        console.log("Stopped");
+      });
+  </script>
+</html>

24_event/event_basic_3.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body>
+    <h1>Event Basic - 3</h1>
+    <button id="startButton">Start</button>
+    <button id="stopButton">Stop</button>
+  </body>
+  <script>
+    // const sayDate = function (thirdParameter) {
+    //     // console.log(thirdParameter, Date.now());
+    // };
+    // const intervalID = setInterval(sayDate, 1000, "thirdArgument");
+
+    const startPrintingDate = function () {
+      console.log(Date.now());
+    };
+
+    const intervalID = setInterval(startPrintingDate, 1000);
+
+    document
+      .querySelector("#startButton")
+      .addEventListener("click", startPrintingDate);
+
+    document
+      .querySelector("#stopButton")
+      .addEventListener("click", function () {
+        clearInterval(intervalID);
+      });
+  </script>
+</html>

pending_concept/asynchronous_javascript/01_setTimeout_and_setInterval/setTimeout_and_setInterval.js renamed to 25_asynchronous_javascript/01_setTimeout_and_setInterval/setTimeout_and_setInterval.js

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+  </head>
+  <body style="background-color: #414141; color: #fff">
+    <div id="userAvatar"></div>
+    <div id="followers"></div>
+  </body>
+  <script>
+    const requestURL = "https://api.github.com/users/iambrijeshtoo";
+    const xmlRequest = new XMLHttpRequest();
+    let data;
+
+    xmlRequest.open("GET", requestURL);
+
+    xmlRequest.onreadystatechange = function () {
+      // console.log(xmlRequest.readyState);
+      if (xmlRequest.readyState === 4) {
+        data = JSON.parse(this.responseText);
+        // console.log(data);
+        // console.log(data.followers);
+
+        document.querySelector(
+          "#userAvatar"
+        ).innerHTML = `<img src="${data.avatar_url}" alt="User Avatar"/>`;
+        document.querySelector(
+          "#followers"
+        ).innerHTML = `Followers: ${data.followers}`;
+      }
+    };
+    xmlRequest.send();
+  </script>
+</html>