Today I built a 'we are the champion' web app from scrimba

Feel free to take a look on my work!
We are the champion App

Source code

This is my first post to share about my self learn coding journey which I begin since August 2023. I was try to make a career switch and become a frontend developer!

In this project, i have been ask to build an app that will take the endorsements message send to firebase database then retrieve the data and show on the app.

My focus will be on JS part.

• When the submit button clicked then the 'message', 'from' and 'to' value will be save as object and send to firebase.

item[1].'Object_Key'

• appendCommentToDiv() function will use the data retrieve from firebase which in the form of [key, object] on line 85 to 87

<div class="comment">
     <p class="bolder">TO DATA</p>
     <p> ENDORSEMENT DATA</p>
      <div class="comment-footer">
        <p class="bolder from-comment">FROM DATA</p>
        <p class="emoji">❤️ 0</p>
      </div>
</div> 

• Then I create and append element with the design show above but I was wondering is there a better way to do it as longer code to append child element from line 89 to 126.

onValue(endorsementsListInDB, function (snapshot) {...}

• onValue function used to retrieve data from firebase and then display the message on the page. If there is empty list and 'snapshot.exists()' return null then 'No comment showed...' message will be display.

Thing to highlight

for (let i = commentArray.length - 1; i >= 0; i--)

• On line 57, i use for loop in reverse order so that the latest endorsement message will show on top.

 emojiButton.classList.add('emoji');
  let emojiCount = localStorage.getItem(item[0]) || 0;
  emojiButton.textContent = `❤️ ${emojiCount}`;
  emojiButton.addEventListener('click', function () {
    emojiCount++;
    emojiButton.textContent = `❤️ ${emojiCount}`;
    localStorage.setItem(item[0], emojiCount);
  });

• Line 109-116, with the use of localStrorage.getItem and localStrorage.setItem to record the emoji like button count.

It's satisfying to learn new knowledge, create something meaningful, and witness the gradual progress, much like playing a RPG game where I can level up, allocate skill points, and then challenge high-level bosses!

Eat, sleep, code, repeat!
Andrew Tan