DEV Community

Cover image for Today I built a 'we are the champion' web app from scrimba
anderu
anderu

Posted on • Updated on

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!

We are the champion app image screenshot
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'
Enter fullscreen mode Exit fullscreen mode
  • 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> 
Enter fullscreen mode Exit fullscreen mode
  • 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) {...}
Enter fullscreen mode Exit fullscreen mode
  • 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--)
Enter fullscreen mode Exit fullscreen mode
  • 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);
  });
Enter fullscreen mode Exit fullscreen mode
  • 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

Top comments (0)