Add functions to render endorsements

helenclx · Jan 27, 2024 · c385b03 · c385b03
1 parent 42c5806
commit c385b03
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 3 deletions.
diff --git a/m3-we-are-the-champions/index.html b/m3-we-are-the-champions/index.html
@@ -33,6 +33,7 @@ <h1>We are the Champions</h1>
 
         <section class="endorsements">
             <h2>- Endorsements -</h2>
+            <div class="endorsements__list"></div>
         </section>
     </main>
     <footer class="attribution">

diff --git a/m3-we-are-the-champions/script.js b/m3-we-are-the-champions/script.js
@@ -14,7 +14,7 @@ const msgInputEl = document.querySelector('#message-input');
 const fromInputEl = document.querySelector('#from-input');
 const toInputEl = document.querySelector('#to-input');
 const publishBtn = document.querySelector('.form__btn');
-const endorsementsEl = document.querySelector('.endorsements');
+const endorsementListEl = document.querySelector('.endorsements__list');
 
 let endorsementObj = {
     from: '',
@@ -55,7 +55,29 @@ onValue(endorsementsInDB, (snapshot) => {
     if (snapshot.exists()) {
         let endorsementsArr = Object.entries(snapshot.val()).reverse();
         console.log(endorsementsArr);
+
+        clearEndorsementListEl();
+
+        endorsementsArr.forEach((item) => {
+            renderEndorsement(item);
+        });
     } else {
-        endorsementsEl.innerHTML += 'No endorsements here... yet';
+        endorsementListEl.innerHTML += 'No endorsements here... yet';
     }
-});
+});
+
+const clearEndorsementListEl = () => {
+    endorsementListEl.innerHTML = '';
+};
+
+const renderEndorsement = (item) => {
+    const itemValue = item[1];
+
+    endorsementListEl.innerHTML += `
+        <div class="endorsement">
+            <p class="endorsement__name">To ${itemValue.to}</p>
+            <p>${itemValue.message}</p>
+            <p class="endorsement__name">From ${itemValue.from}</p>
+        </div>
+    `;
+};