Merge pull request #2 from LarryIVC/hit-Api

Leaderborad - Hit Api
LarryIVC · Apr 21, 2023 · bf95011 · bf95011
2 parents 95808f7 + 6acc3dd
commit bf95011
Show file tree

Hide file tree

Showing 14 changed files with 133 additions and 359 deletions.
diff --git a/README.md b/README.md
@@ -1,7 +1,7 @@
 <a name="readme-top"></a>
 
 <div align="center" style="text-align: center">
-  <img src = "logo.png">  
+  <img src = "src/logo.png">  
   <h1><b>Leaderboard Scores</b></h1>
 </div>
 
@@ -56,9 +56,13 @@
 **Enlist skill sets and tech stack**
 
 - Add template for Leaderboard
-- Setup Webpack
-- Apply GitFlow
+- Setup `Webpack`
+- Apply `GitFlow`
 - Verified Linters
+- Read and write to an API
+- Implement `Form` for add Scores
+- Use Arrow functions
+- Using `async` and `await` `Javascript` features.
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 

diff --git a/dist/index.bundle.js b/dist/index.bundle.js
diff --git a/dist/index.html b/dist/index.html
@@ -1,42 +1 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
-<script defer src="/runtime.bundle.js"></script><script defer src="/index.bundle.js"></script></head>
-<body>
-  <header class="container-width">
-    <h1>Leaderboard</h1>    
-  </header>
-  <main class="container-width">
-    <article class="left">
-      <div class="header-left">
-        <h2>Recent scores</h2>
-        <button>Refresh</button>
-      </div>
-      <div class="scores-list">
-        <ul>
-          <li><span>Name: </span><span>100</span></li>
-          <li><span>Name: </span><span>50</span></li>
-          <li><span>Name: </span><span>10</span></li>
-          <li><span>Name: </span><span>30</span></li>
-          <li><span>Name: </span><span>100</span></li>
-          <li><span>Name: </span><span>80</span></li>
-          <li><span>Name: </span><span>60</span></li>
-        </ul>
-      </div>
-    </article>
-    <article class="right">
-      <h2>Add your score</h2>
-      <form class="frm-add-score">
-        <label for="name"><input type="text" id="name" name="name" required placeholder="Your name"></label>
-        <label for="score"><input type="text" id="score" name="score" required placeholder="Your score"></label>
-        <div class="btn-cnt">
-          <button type="submit">Submit</button>
-        </div>
-      </form>
-    </article>
-  </main>
-</body>
-</html>
+<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Leaderboard Scores - consuming Api</title><script defer="defer" src="/runtime.bundle.js"></script><script defer="defer" src="/index.bundle.js"></script></head><body><header class="container-width"><h1>Leaderboard</h1></header><main class="container-width"><article class="left"><div class="header-left"><h2>Recent scores</h2><button id="btn-refresh">Refresh</button></div><div class="scores-list"><ul id="ul-scores"></ul></div></article><article class="right"><h2>Add your score</h2><form class="frm-add-score" id="frm-add-score"><label for="name"><input id="name" name="name" required placeholder="Your name"></label> <label for="score"><input id="score" name="score" required placeholder="Your score"></label><div class="btn-cnt"><button type="submit">Submit</button></div></form></article></main></body></html>
diff --git a/dist/runtime.bundle.js b/dist/runtime.bundle.js
diff --git a/package.json b/package.json
@@ -4,6 +4,7 @@
   "description": "Project that consume api Leaderboard service",
   "main": "./src/index.js",
   "private": true,
+  "type":"module",
   "scripts": {
     "build": "webpack --mode=production",
     "dev": "webpack --mode=development",

diff --git a/src/index.css b/src/index.css
@@ -65,7 +65,7 @@ main {
   padding: 10px;
 }
 
-.scores-list ul {
+#ul-scores {
   display: flex;
   flex-direction: column;
   gap: 5px;

diff --git a/src/index.html b/src/index.html
@@ -4,6 +4,7 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">  
+  <title>Leaderboard Scores - consuming Api</title>
 </head>
 <body>
   <header class="container-width">
@@ -13,23 +14,17 @@ <h1>Leaderboard</h1>
     <article class="left">
       <div class="header-left">
         <h2>Recent scores</h2>
-        <button>Refresh</button>
+        <button id="btn-refresh">Refresh</button>
       </div>
       <div class="scores-list">
-        <ul>
-          <li><span>Name: </span><span>100</span></li>
-          <li><span>Name: </span><span>50</span></li>
-          <li><span>Name: </span><span>10</span></li>
-          <li><span>Name: </span><span>30</span></li>
-          <li><span>Name: </span><span>100</span></li>
-          <li><span>Name: </span><span>80</span></li>
-          <li><span>Name: </span><span>60</span></li>
+        <ul id="ul-scores">
+          <!-- Render information from Api -->
         </ul>
       </div>
     </article>
     <article class="right">
       <h2>Add your score</h2>
-      <form class="frm-add-score">
+      <form class="frm-add-score" id="frm-add-score">
         <label for="name"><input type="text" id="name" name="name" required placeholder="Your name"></label>
         <label for="score"><input type="text" id="score" name="score" required placeholder="Your score"></label>
         <div class="btn-cnt">

diff --git a/src/index.js b/src/index.js
@@ -1,2 +1,6 @@
-// import _ from 'lodash';
 import './index.css';
+import App from './modules/App.js';
+
+window.onload = () => {
+  App();
+};
diff --git a/logo.png → src/logo.png b/logo.png → src/logo.png
diff --git a/src/modules/Api.js b/src/modules/Api.js
@@ -0,0 +1,32 @@
+import { API_URL, KEY } from './Vars.js';
+
+// function to GET scores
+export const getGame = async () => {
+  try {
+    const response = await fetch(`${API_URL}games/${KEY}/scores/`);
+    const json = await response.json();
+    return json;
+  } catch (error) {
+    return error;
+  }
+};
+
+// function to POST new score
+export const createScore = async (user, score) => {
+  try {
+    const response = await fetch(`${API_URL}games/${KEY}/scores/`, {
+      method: 'POST',
+      body: JSON.stringify({
+        user,
+        score,
+      }),
+      headers: {
+        'Content-type': 'application/json; charset=UTF-8',
+      },
+    });
+    const json = await response.json();
+    return json;
+  } catch (error) {
+    return error;
+  }
+};
diff --git a/src/modules/App.js b/src/modules/App.js
@@ -0,0 +1,53 @@
+import { getGame, createScore } from './Api.js';
+
+// Display Scores
+const renderList = async () => {
+  const doc = document;
+  const ul = doc.getElementById('ul-scores');
+  ul.innerHTML = '';
+
+  const game = await getGame();
+  const { result } = game;
+
+  result.forEach((item) => {
+    const li = doc.createElement('li');
+    const spanName = doc.createElement('span');
+    const spanScore = doc.createElement('span');
+    const { user, score } = item;
+    spanName.textContent = `${user}:`;
+    spanScore.textContent = `${score}`;
+    li.appendChild(spanName);
+    li.appendChild(spanScore);
+    ul.appendChild(li);
+  });
+};
+
+// Add new score
+const addScores = () => {
+  const frmScores = document.getElementById('frm-add-score');
+  frmScores.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const output = await createScore(frmScores.name.value, frmScores.score.value);
+    renderList();
+    frmScores.name.value = '';
+    frmScores.score.value = '';
+    return output;
+  });
+};
+
+// Refresh button
+const refresh = () => {
+  const btnRefresh = document.getElementById('btn-refresh');
+  btnRefresh.addEventListener('click', () => {
+    renderList();
+  });
+};
+
+// Principal function
+const App = () => {
+  addScores();
+  renderList();
+  refresh();
+};
+
+export default App;