Fetching APIs are completed

kunalarya873 · Jan 25, 2024 · a696c91 · a696c91
1 parent e7c9bd3
commit a696c91
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 0 deletions.
diff --git a/JS by Shradha Mam/Fetch API/index.html b/JS by Shradha Mam/Fetch API/index.html
@@ -6,6 +6,9 @@
     <title>Fetch API</title>
 </head>
 <body>
+    <button id="btn">Click me</button>
+    <p id="fact"></p>
+
     <script src = 'script.js'></script>
 </body>
 </html>
diff --git a/JS by Shradha Mam/Fetch API/script.js b/JS by Shradha Mam/Fetch API/script.js
@@ -0,0 +1,37 @@
+const URL = "https://cat-fact.herokuapp.com/facts";
+const factPara = document.querySelector("#fact");
+const btn = document.querySelector("#btn")
+
+const getFacts = async () => {
+    console.log("Getting data");
+    try {
+      const response = await fetch(URL);
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      const data = await response.json();
+      if (data.length < 5) {
+        console.error("The data array has less than five elements");
+        return;
+      }
+      for (let i = 0; i < 5; i++) {
+        factPara.innerHTML = `${factPara.innerHTML}<p>${i+1}. ${data[i].text}</p>`;
+      }
+    } catch (error) {
+      console.error("Error fetching data:", error);
+    }
+  };
+
+function getFacts_byPromise() {
+    fetch(URL)
+    .then((response) =>{
+        return response.json();
+    })
+    .then((data) => {
+        console.log(data);
+        factPara.innerText = data[2].text;
+    })
+}
+
+btn.addEventListener("click", getFacts_byPromise())
+btn.addEventListener('click', getFacts);