Merge pull request #2 from braincee/api-url

Leaderboard API Usage

Author: braincee

MIT.md

@@ -0,0 +1,8 @@
+## Copyright 2021, [STEPHEN ANNOR]
+
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this [LEADERBOARD PROJECT] and associated documentation files, to deal in the [LEADERBOARD PROJECT] without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the [LEADERBOARD PROJECT], and to permit persons to whom the [LEADERBOARD PROJECT] is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the [LEADERBOARD PROJECT].
+
+THE [LEADERBOARD PROJECT] IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE [LEADERBOARD PROJECT] OR THE USE OR OTHER DEALINGS IN THE [LEADERBOARD PROJECT].

README.md

@@ -33,7 +33,7 @@ To get a local copy up and running follow these simple example steps.
    ```
 
 
-## Screenshots of Todo List
+## Screenshots of Leaderboard
 
 ![]()
 

dist/index.html

@@ -12,8 +12,8 @@ <h1 class="header">Leaderboard</h1>
   <main>
     <section class="board-1">
       <div class="recent-goals">
-        <h2>Recent Goals</h2>
-        <button type="button">Refresh</button>
+        <h2>Recent Scores</h2>
+        <button type="button" class="refresh">Refresh</button>
       </div>
 
       <ul class="table">
@@ -22,11 +22,11 @@ <h2>Recent Goals</h2>
     </section>
     <section class="board-2">
       <div class="table">
-        <h2>Add the goals</h2>
+        <h2>Add Persons Score</h2>
       </div>
       <form action="#" class="name-goal">
-        <input type="text" name="name" placeholder="Player name">
-        <input type="number" name="goals" placeholder="Player goals">
+        <input type="text" name="name" placeholder="Person's name">
+        <input type="number" name="score" placeholder="Person's score">
         <button type="submit" class="submit">Submit</button>
       </form>
     </section>

dist/main.js

@@ -11,9 +11,9 @@ <h1 class="header">Leaderboard</h1>
   </header>
   <main>
     <section class="board-1">
-      <div class="recent-goals">
-        <h2>Recent Goals</h2>
-        <button type="button">Refresh</button>
+      <div class="recent-score">
+        <h2>Recent Scores</h2>
+        <button type="button" class="refresh">Refresh</button>
       </div>
 
       <ul class="table">
@@ -22,11 +22,11 @@ <h2>Recent Goals</h2>
     </section>
     <section class="board-2">
       <div class="table">
-        <h2>Add the goals</h2>
+        <h2>Add Persons Score</h2>
       </div>
-      <form action="#" class="name-goal">
-        <input type="text" name="name" placeholder="Player name">
-        <input type="number" name="goals" placeholder="Player goals">
+      <form action="#" class="name-score">
+        <input type="text" name="name" placeholder="Person's name">
+        <input type="number" name="score" placeholder="Person's score">
         <button type="submit" class="submit">Submit</button>
       </form>
     </section>

src/index.html

@@ -1,4 +1,29 @@
 import './style.css';
-import playerGoals from './modules/goals.js';
 
-document.addEventListener('DOMContentLoaded', playerGoals);
+import { newScore } from './modules/api_url.js';
+import outcomeScores from './modules/scores.js';
+
+const form = document.querySelector('.name-score');
+
+const newScoreApi = () => {
+  const name = form.elements.name.value;
+  const score = form.elements.score.value;
+  if (score !== '' && name !== '') {
+    newScore(name, score);
+  }
+};
+
+document.addEventListener('click', (e) => {
+  if (e.target.className === 'submit') {
+    e.preventDefault();
+    newScoreApi();
+  } else if (e.target.className === 'refresh') {
+    const persons = document.querySelector('.board-1 .table');
+    while (persons.firstChild) {
+      persons.removeChild(persons.firstChild);
+    }
+    outcomeScores();
+  }
+});
+
+document.addEventListener('DOMContentLoaded', () => { outcomeScores(); });

src/index.js

@@ -0,0 +1,33 @@
+const apiUrl = 'https://us-central1-js-capstone-backend.cloudfunctions.net/api';
+
+export const newGame = async () => {
+  const response = { name: 'My new Game' };
+  const result = await fetch(`${apiUrl}/games/`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(response),
+  });
+  await result.json();
+};
+
+let apiUrlScores;
+
+export const urlScores = async () => {
+  const result = await fetch(`${apiUrl}/games/uFmmrkKjMO7S5RsdkjfE/scores`);
+  apiUrlScores = await result.json();
+  return apiUrlScores;
+};
+
+export const newScore = async (user, score) => {
+  const response = { user, score };
+  const result = await fetch(`${apiUrl}/games/uFmmrkKjMO7S5RsdkjfE/scores`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(response),
+  });
+  return result.json();
+};

src/modules/api_url.js

@@ -0,0 +1,18 @@
+import { urlScores } from './api_url.js';
+
+const persons = document.querySelector('.board-1 .table');
+
+const outcomeScores = async () => {
+  const newScore = await urlScores();
+  newScore.result.forEach((score) => {
+    const person = document.createElement('li');
+    const span = document.createElement('span');
+    span.textContent = score.score;
+    person.className = 'table-records';
+    person.textContent = `${score.user}:`;
+    person.appendChild(span);
+    persons.appendChild(person);
+  });
+};
+
+export default outcomeScores;

src/modules/goals.js

@@ -20,14 +20,14 @@ main {
   gap: 2rem;
 }
 
-.board-1 .recent-goals {
+.board-1 .recent-score {
   display: flex;
   gap: 2rem;
   padding: 2rem;
 }
 
-.board-1 .recent-goals h2,
-.board-2 .recent-goals h2 {
+.board-1 .recent-score h2,
+.board-2 .recent-score h2 {
   padding: 0;
   margin: 0;
 }
@@ -42,7 +42,7 @@ main {
   box-shadow: 1px 1px rgb(102, 99, 99);
 }
 
-.board-1 .recent-goals button {
+.board-1 .recent-score button {
   width: 6rem;
   height: 2rem;
   padding: 5px;