Web API

AzharAli-github · AzharAli-github · commit 0c94e34c90e2 · 2023-01-17T10:43:52.000+05:00
diff --git a/JavaScript/Advance/Web API/fetch API/FIVERR.txt b/JavaScript/Advance/Web API/fetch API/FIVERR.txt
@@ -0,0 +1,22 @@
+                 GIG FRONT END WEB DEVELOPER(MAIN)       GIG TWO NFT WEBSITE            GIG THREE PSD TO HTML
+
+DAY1|           305 ----video (Day1)                       
+DAY2|           320 ----without Video  {PAGE 2-LINE3             50                               49
+DAY3|           378 ----changed picture + keyword P-2(L-4(1)     72                               51
+DAY4|           385 ----changed picture + keyword P-2            91                               53
+DAY5|           372-----not worked  P-2 L-3(4)                   112                              7 (NEW)
+DAY6|           356-----change picture P-2 L-3(2)                130                              11(NEW)
+DAY7|           380-----changed picture P-2 L-4(4)               144                              51
+DAY8|           381-----nothing   P-2 L-2(4)                     166                              64
+DAY9|           285-----nothing   P-2 L-4(2)                     100                              87
+DAY9|           264----nothing    P-2 L-7(3)                     82                               93
+DAY10|          232----nothing    P-2 L-8(3)                     92                               62
+DAY11|          225----nothing    P-2 L-8(5)                     100                              53
+DAY12|          246----change picture + keyword P-2 L-4(0)       73                               19
+DAY13|           267----video     P-2 L-2(2)                     54                               13
+DAY14|          270-----keyword   P-1 L-10(4)                    68                               8
+DAY15           283----nothing    P-1 L-11(2)                    71                               8
+
+
+
+
diff --git a/JavaScript/Advance/Web API/fetch API/images/js-logo.png b/JavaScript/Advance/Web API/fetch API/images/js-logo.png
diff --git a/JavaScript/Advance/Web API/fetch API/index.html b/JavaScript/Advance/Web API/fetch API/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Fetch API</title>
+</head>
+
+<body>
+    <h1>Fetch API</h1>
+    <!-- Documentation -->
+    <button onclick="DisplayOne()">View Doc</button>
+    <p id="textOne"></p>
+    <!-- Example One -->
+    <h2>Fetch API Method One</h2>
+    <button onclick="DisplayTwo()">click</button>
+    <p id="textTwo"></p>
+    <!-- Example Two -->
+    <h2>Fetch API Method Two</h2>
+    <button onclick="DisplayThree()">click</button>
+    <p id="textThree"></p>
+    <!-- Example Three -->
+    <h2>Fetch API Method Three</h2>
+    <button onclick="DisplayFour()">click</button>
+    <p id="textFour"></p>
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/JavaScript/Advance/Web API/fetch API/script.js b/JavaScript/Advance/Web API/fetch API/script.js
@@ -0,0 +1,49 @@
+//    Fetch API
+let textOne = document.getElementById('textOne');
+
+function DisplayOne() {
+    textOne.innerHTML = `
+    <p>The Fetch API interface allows web browser to make HTTP requests to web servers.
+    😀 No need for XMLHttpRequest anymore.</p>
+    <h3>Understand the Below Example
+    </h3>
+    `
+}
+
+//   Example 1 : Fetch API   :  Simple Way to understand
+let textTwo = document.getElementById('textTwo')
+
+function DisplayTwo() {
+    let file = "FIVERR.txt"
+    fetch(file)
+        .then(x => x.text())
+        .then(y => textTwo.innerHTML = y);
+}
+
+//   Example 2   :  Fetch API  :    Better Way of UnderStanding
+
+let textThree = document.getElementById('textThree')
+
+function DisplayThree() {
+    getText("FIVERR.txt");
+
+    async function getText(file) {
+        let x = await fetch(file);
+        let y = await x.text();
+        textThree.innerHTML = y;
+    }
+}
+
+//    Example 3    :  Fetch API  :   Best Way of UnderStanding
+
+let textFour = document.getElementById('textFour')
+
+function DisplayFour() {
+    getText("FIVERR.txt");
+
+    async function getText(file) {
+        let myObject = await fetch(file);
+        let myText = await myObject.text();
+        textFour.innerHTML = myText;
+    }
+}
