add basic styling for post tile

satyam-seth · satyam-seth · commit 7a75e4b188b6 · 2024-10-03T22:17:59.000+05:30
diff --git a/index.html b/index.html
@@ -6,15 +6,32 @@
     <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">
-        <h1>API Titles</h1>
     </div>
 
 
diff --git a/script.js b/script.js
@@ -20,19 +20,20 @@ async function fetchTodo(apiUrl) {
 function appendData(data) {
     const container = document.querySelector('.append-titles');
     data.forEach((item) => {
-        const newTitle = document.createElement('span');
+        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
-const getData = async () => {
+async function clickHandler() {
     const data = await fetchTodo(postApi);
     appendData(data);
 }
 
 window.onload = () => {
     const button = document.getElementById('fetch-api-button');
-    button.addEventListener('click', getData);
+    button.addEventListener('click', clickHandler);
 }
