progress is made in showPosts

pablo-sch · pablo-sch · commit 8e55384e8629 · 2025-04-14T20:19:00.000+02:00
diff --git a/src/main.js b/src/main.js
@@ -1,5 +1,9 @@
+import { showPostsController } from "./modules/show-posts/showPostsController.js";
+
 
 // this callback is executed once the DOM is fully loaded.
 document.addEventListener("DOMContentLoaded", () => {
-    
+    const container = document.querySelector(".posts-container")
+    showPostsController(container)
+
 })
diff --git a/src/modules/show-posts/showPostsController.js b/src/modules/show-posts/showPostsController.js
@@ -0,0 +1,30 @@
+import { getPosts } from "./showPostsModel.js"
+import { buildPost } from './showPostsView.js';
+
+export async function showPostsController(container) { // the container is ".posts-container"
+
+    try {
+        const posts = await getPosts();
+        drawPosts(posts, container)
+    } catch (error) {
+        /* ...  */
+    } finally {
+        /*  ...  */
+    }
+
+}
+
+function drawPosts(posts, container) { // the container is ".posts-container"
+
+    container.innerHTML = '';
+
+
+    posts.forEach((post) => {
+
+        const postHtml = document.createElement("div");
+
+        postHtml.innerHTML = buildPost(post)
+
+        container.appendChild(postHtml)
+    })
+}
diff --git a/src/modules/show-posts/showPostsModel.js b/src/modules/show-posts/showPostsModel.js
@@ -0,0 +1,13 @@
+export async function getPosts() {
+
+    let posts = [];
+  
+    try {
+      const response = await fetch('http://localhost:8000/api/posts')
+      posts = await response.json();
+    } catch (error) {
+      throw new Error("It was not possible to get the posts. Please try again later.")
+    }
+    
+    return posts;
+  }
diff --git a/src/modules/show-posts/showPostsView.js b/src/modules/show-posts/showPostsView.js
@@ -0,0 +1,16 @@
+export const buildPost = (post) => {
+    let postView = `
+        <p>${post.userId}</p>
+        <p>${post.name}</p>
+        <p>${post.description}</p>
+        <p>${post.price}</p>
+        <p>${post.photo}</p>
+        <p>${post.sale_purchase}</p>
+        `;
+
+    return postView
+}
+
+export const buildNoTweetsAdvice = () => {
+    return '<h3>Sorry, no posts available!</h3>'
+}
diff --git a/views/index.html b/views/index.html
@@ -6,6 +6,7 @@
     <title>Document</title>
 </head>
 <body>
+    <div class="posts-container"></div>
 
     <script type="module" src="../src/main.js"></script>
 </body>
