Merge pull request #1 from fellow-developers/add-fetch-api

satyam-seth · web-flow · commit 0af6898eff41 · 2024-10-03T22:21:22.000+05:30
Add fetch api title on click
diff --git a/index.html b/index.html
@@ -0,0 +1,40 @@
+<!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>
+<style>
+    * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+    }
+
+    body {
+        padding: 1rem;
+        display: grid;
+        place-items: center;
+    }
+
+    .post {
+        margin: 1rem;
+        padding: 1rem;
+        border: 0.125rem solid black;
+    }
+
+    h1 {
+        padding: 1rem;
+    }
+</style>
+<body>
+    <button id="fetch-api-button">Click To Fetch</button>
+    <h1>API Titles</h1>
+    <div class="append-titles">
+    </div>
+
+
+<script src="./script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,39 @@
+
+const postApi = "https://jsonplaceholder.typicode.com/todos";
+
+// Fetch API Function
+async function fetchTodo(apiUrl) {
+    try {
+        const response = await fetch(apiUrl);
+        if (!response.ok) {
+            throw new Error('Network response was not ok');
+        }
+        const json = await response.json();
+        return json;
+    } catch (error) {
+        console.error('There was a problem with the fetch operation:', error);
+    }
+}
+
+
+// Append data in DOM 
+function appendData(data) {
+    const container = document.querySelector('.append-titles');
+    data.forEach((item) => {
+        const newTitle = document.createElement('div');
+        newTitle.className = 'post';
+        newTitle.innerHTML = item.title;
+        container.appendChild(newTitle);
+    });
+}
+
+// Helper function to store data from fetch function and pass on to appendData function
+async function clickHandler() {
+    const data = await fetchTodo(postApi);
+    appendData(data);
+}
+
+window.onload = () => {
+    const button = document.getElementById('fetch-api-button');
+    button.addEventListener('click', clickHandler);
+}
