Merge pull request #4 from RaviTejaM9602/Milestone2

Hitting API Populate on Leader Board

README.md

@@ -20,7 +20,11 @@ In the following link, you can view (Coming Soon)).
 
 ## Screenshot
 
-In the following link, you can view (Coming Soon)).
+![LeaderBoard_App](./images/LeaderBoard.png)
+![LeaderBoard_App](./images/LeaderBoard2.png)
+
+
+
 
 ## Usage
 

dist/index.html

@@ -14,7 +14,9 @@ <h1 id="header">LeaderBoard</h1>
           <h2>Recent scores</h2>
           <button type="button" id="refresh">Refresh</button>
         </div>
-        <table id="items"></table>
+        <ul id="items">
+
+        </ul>
       </div>
       <form id="add-item">
         <h2>Add your score</h2>
@@ -35,6 +37,6 @@ <h2>Add your score</h2>
         <button type="submit">Submit</button>
       </form>
     </div>
-    <script defer="defer" src="main.js"></script>
+    <script defer="defer" src="index.js"></script>
   </body>
 </html>

src/index.js

@@ -1,16 +1,21 @@
 import './style.css';
+import { leaderboard, refreshLeaderboard } from './modules/refresh.js';
 
-const leaderboard = document.querySelector('#items');
 const FORM = document.querySelector('form');
 const NAME = FORM.querySelector('input');
 const SCORE = FORM.querySelector('input[type="number"]');
 const REFRESH = document.querySelector('#refresh');
 
+const refreshInput = () => {
+  NAME.value = '';
+  SCORE.value = '';
+};
+
 (() => {
   FORM.addEventListener('submit', (e) => {
     e.preventDefault();
     fetch(
-      'https://us-central1-js-capstone-backend.cloudfunctions.net/api/games/oHFx2AoOEAVDqu2U4dC1/scores',
+      'https://us-central1-js-capstone-backend.cloudfunctions.net/api/games/BxXNm40rTdIjhpN9YGnO/scores',
       {
         method: 'POST',
         headers: {
@@ -21,29 +26,12 @@ const REFRESH = document.querySelector('#refresh');
           score: SCORE.value,
         }),
       },
+      refreshInput(),
     );
   });
 })();
 
-const refreshLeaderboard = async () => {
-  const response = await fetch(
-    'https://us-central1-js-capstone-backend.cloudfunctions.net/api/games/oHFx2AoOEAVDqu2U4dC1/scores',
-  );
-  const scoreText = await response.text();
-  const score = JSON.parse(scoreText);
-  score.result.forEach((player) => {
-    if (player.length === 0) {
-      leaderboard.style.border = 'none';
-    } else {
-      leaderboard.style.border = '2px solid rgb(36, 1, 1)';
-      leaderboard.innerHTML += `<li>
-      ${player.user}: ${player.score}</td>
-      </li>`;
-    }
-  });
-};
-
-REFRESH.adudEventListener('click', () => {
+REFRESH.addEventListener('click', () => {
   leaderboard.innerHTML = '';
   refreshLeaderboard();
 });

src/modules/refresh.js

@@ -0,0 +1,19 @@
+export const leaderboard = document.querySelector('#items');
+
+export const refreshLeaderboard = async () => {
+  const response = await fetch(
+    'https://us-central1-js-capstone-backend.cloudfunctions.net/api/games/BxXNm40rTdIjhpN9YGnO/scores',
+  );
+  const scoreText = await response.text();
+  const score = JSON.parse(scoreText);
+  score.result.forEach((player) => {
+    if (player.length === 0) {
+      leaderboard.style.border = 'none';
+    } else {
+      leaderboard.style.border = '2px solid rgb(36, 1, 1)';
+      leaderboard.innerHTML += `<li>
+      ${player.user}  :  ${player.score}</td>
+      </li>`;
+    }
+  });
+};