Use JavaScript to render all posts

helenclx · Feb 6, 2024 · fa20385 · fa20385
1 parent 994febf
commit fa20385
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 2 deletions.
diff --git a/m4-oldagram/index.html b/m4-oldagram/index.html
@@ -19,7 +19,7 @@
         <img src="images/user-avatar.png" alt="User avatar" class="header__avatar">
     </header>
     <main class="post-container">
-        <article class="post">
+        <!-- <article class="post">
             <section class="post__author">
                 <img src="images/avatar-vangogh.jpg" alt="Avatar of Vincent van Gogh" class="post__author--avatar">
                 <div class="post__author--info">
@@ -37,7 +37,7 @@
                 <p class="post__content-likes">21 likes</p>
                 <p class="post__content--caption"><span class="post__content--username">vincey1853</span> just took a few mushrooms lol</p>
             </section>
-        </article>
+        </article> -->
     </main>
     <footer class="attribution">
         Coded by <a href="https://helenclx.github.io/" target="_blank">Helen Chong</a>.

diff --git a/m4-oldagram/script.js b/m4-oldagram/script.js
@@ -28,3 +28,28 @@ const posts = [
     }
 ]
 
+const postContainerEl = document.querySelector(".post-container");
+
+posts.forEach((post) => {
+    postContainerEl.innerHTML += `
+        <article class="post">
+            <section class="post__author">
+                <img src="${post.avatar}" alt="Avatar of ${post.name}" class="post__author--avatar">
+                <div class="post__author--info">
+                    <p class="post__author--name">${post.name}</p>
+                    <p class="post__author--location">${post.location}</p>
+                </div>
+            </section>
+            <img src="${post.post}" alt="Illustration of ${post.name}" class="post__img">
+            <section class="post__content">
+                <div class="post__content--icons">
+                    <img src="images/icon-heart.png" alt="">
+                    <img src="images/icon-comment.png" alt="">
+                    <img src="images/icon-dm.png" alt="">
+                </div>
+                <p class="post__content-likes">${post.likes} likes</p>
+                <p class="post__content--caption"><span class="post__content--username">${post.username}</span> ${post.comment}</p>
+            </section>
+        </article>
+    `
+});