Day 38 & 39: XMLHTTPRequest and Try Catch and Throw, Error

edyoda · Nov 26, 2022 · 69cfd76 · 69cfd76
1 parent faf116f
commit 69cfd76
Show file tree

Hide file tree

Showing 4 changed files with 236 additions and 0 deletions.
diff --git a/javascript/Day38/ajax.js b/javascript/Day38/ajax.js
@@ -0,0 +1,124 @@
+function apiCall() {
+  try {
+    const request = new XMLHttpRequest(); //readyState:0
+
+    request.open("GET", "https://jsonplaceholder.typicode.com/posts"); // readyState:1
+
+    request.send(); // readyState:2
+
+    request.onreadystatechange = function () {
+      console.log(this);
+
+      if (this.readyState === 3) {
+        // readyState:3 in progress
+        // show progress bar on screen
+        showLoader();
+      }
+      if (this.readyState === 4) {
+        // readyState:4 api means done with response
+        // show response on the screen
+        hideLoader();
+        if (this.status >= 200 && this.status < 400) {
+          const response = this.responseText; // successfull response
+          const parsedResponse = JSON.parse(response);
+          console.log(parsedResponse);
+          createList();
+          parsedResponse.forEach((each_item) => {
+            createListItem(each_item);
+          });
+        } else if (this.status === 400) {
+          console.log("Bad Request");
+        } else if (this.status === 401) {
+          console.log("You are not authorised user");
+        } else if (this.status === 404) {
+          console.log("Wrong API");
+        } else {
+          console.log("Something went wrong, Try again later!");
+        }
+      }
+    };
+  } catch (e) {
+    console.log(e);
+  }
+}
+
+function createList() {
+  const ul = document.createElement("ul");
+  const main = document.querySelector("main");
+  main.append(ul);
+}
+
+function createListItem(item) {
+  const li = document.createElement("li");
+  const title = document.createElement("b");
+  const body = document.createElement("p");
+
+  title.innerHTML = item.title;
+  body.innerHTML = item.body;
+  li.append(title);
+  li.append(body);
+  const ul = document.querySelector("main ul");
+  ul.append(li);
+}
+
+function showLoader() {
+  const loader = document.querySelector("main #loader");
+  loader.classList.replace("d-none", "d-block");
+}
+
+function hideLoader() {
+  const loader = document.querySelector("main #loader");
+  loader.classList.replace("d-block", "d-none");
+}
+
+apiCall();
+
+const requestObj = {
+  title: "foo",
+  body: "bar",
+  userId: 1,
+};
+
+function postListItem(requestObj) {
+  const request = new XMLHttpRequest(); // browser inbuilt class, object, // readyState:0
+
+  request.open("POST", "https://jsonplaceholder.typicode.com/posts", true); // readyState:1
+
+  const requestData = JSON.stringify(requestObj);
+
+  request.send(requestData); // readyState:2
+  request.onreadystatechange = function () {
+    // console.log(this);
+    if (this.readyState === 3) {
+      // readyState:3 in progress
+      // show progress bar on screen
+      showLoader();
+    }
+    if (this.readyState === 4) {
+      // readyState:4 means done with response
+      // show response on the screen
+      hideLoader();
+      if (this.status >= 200 && this.status < 300) {
+        const response = this.responseText; // successfull response
+        const parsedResponse = JSON.parse(response);
+
+        console.log(parsedResponse);
+      } else if (this.status === 400) {
+        console.log("Bad Request");
+      } else if (this.status === 401) {
+        console.log("You are not authorised user");
+      } else if (this.status === 404) {
+        console.log("Wrong API");
+      } else {
+        console.log("Something went wrong, Try again later!");
+      }
+    }
+  };
+}
+postListItem();
+
+try {
+  console.log(kite);
+} catch (err) {
+  console.log(err);
+}
diff --git a/javascript/Day38/index.html b/javascript/Day38/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Ajax</title>
+    <link rel="stylesheet" href="./style.css" />
+  </head>
+  <body>
+    <h1>Welocome to Ajax</h1>
+    <main>
+      <b id="loader" class="d-none">Loading....</b>
+    </main>
+
+    <script src="./ajax.js" type="text/javascript"></script>
+  </body>
+</html>
diff --git a/javascript/Day38/style.css b/javascript/Day38/style.css
@@ -0,0 +1,7 @@
+.d-none {
+  display: none;
+}
+
+.d-block {
+  display: block;
+}
diff --git a/javascript/Day39/index.js b/javascript/Day39/index.js
@@ -0,0 +1,90 @@
+try{
+    consol.log('Hello');
+    console.log('Second')
+  }catch(error){
+    console.log('Oh there is an error',error.message)
+  }
+  try{
+    consol.log('Hello');
+    console.log('Second')
+  }catch(error){
+    console.log('Oh there is an error',error.message)
+  }finally{
+    console.log('Final Block');
+  }
+
+try {
+    console.log('First')
+    let a=10;
+    if(a<=10){
+      throw {
+        message:'I am an error'
+      };
+    }
+    console.log("Hello");
+  } catch (err) {
+    console.log(err);
+  }
+
+  let x = 24;
+
+try {
+  if (x === "") throw "empty";
+  if (isNaN(x)) throw "not a number";
+  x = Number(x);
+  if (x < 5) throw "too low";
+  if (x > 10) throw "too high";
+} catch (err) {
+  console.log("Input is " + err);
+}
+
+
+
+try {
+    consol.log('Kdd')
+  } catch (e) {
+    console.log(e.name,e.message,e.stack);
+  }
+
+  let z = 5;
+try {
+  z = y + 1;
+} catch (err) {
+  switch (err.name) {
+    case "ReferenceError":
+      console.log("Ref error " + err.message);
+      break;
+    case "RangeError":
+      console.log("Range error " + err.message);
+      break;
+    case "TypeError":
+      console.log("Type error " + err.message);
+      break;
+  }
+}
+
+
+try {
+    throw new Error("Oops", "An Error ocured, come back later!");
+  } catch (e) {
+    console.log(e.name, e.message);
+  }
+  function doIt() {
+    try {
+      return 1;
+    } finally {
+      return 2;
+    }
+  }
+
+  console.log(doIt());
+
+  try {
+    try {
+      throw new Error("oops");
+    } finally {
+      console.log("finally");
+    }
+  } catch (ex) {
+    console.error(ex.message);
+  }