Percentage added

fabianmendozaospina · Dec 7, 2024 · 66454fd · 66454fd
1 parent 32e1091
commit 66454fd
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 22 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -499,14 +499,24 @@ input[type="text"]::placeholder {
             th {
                 color: var(--app-red-light);
                 font-size: 14px;
+                width: 10px;
             }
 
             td {
                 color: var(--app-white);
                 font-size: 14px;
                 border-bottom-width: 1px;
-                border-bottom-color: var(--app-dark-gray);                
+                border-bottom-color: var(--app-dark-gray);
+                width: 45px;             
             }
+
+            td:nth-last-child(2) {
+                width: 110px;
+            }
+
+            td:last-child {
+                width: 280px; 
+            }     
         }
     }
 }

diff --git a/assets/js/index.js b/assets/js/index.js
@@ -24,6 +24,7 @@ let wordToType = '';
 let wordToTypeIndex = 0;
 let intervalId = null;
 let hits = 0;
+let percentage = 0;
 let letterElements = [];
 let animatedLetters = [];
 
@@ -76,7 +77,7 @@ function start() {
         if (counter === 0) {
             outputObj.innerText = 'Game Over!';
             stop(false);
-            saveScore(hits);
+            saveScore(hits, percentage);
             disableButtons(false);
         }
     }, 1000);
@@ -165,16 +166,16 @@ listen('input', inputObj, () => {
 
     if (areWordsIquals(input, wordToType)) {
         hits++;
-        console.log(" wordBank.length", wordBank.length)
-        hitsObj.innerText = `${hits} hit${hits === 1 ? '' : 's'}`;
+        percentage = (hits * 100) / wordBank.length;
+        hitsObj.innerText = `${hits} hit${hits === 1 ? '' : 's'}\n${percentage.toFixed(1)}%`;
 
         if (wordToTypeIndex < wordBank.length) {
             wordToType = getWordToType();
 
         } else {
             outputObj.innerText = 'Congrats!!';
             stop(false);
-            saveScore(hits);
+            saveScore(hits, percentage);
             disableButtons(false);
         }
     }

diff --git a/assets/js/modal-score.js b/assets/js/modal-score.js
@@ -1,6 +1,6 @@
 'use strict';
 
-import { select, listen, formatCounter, formatDate } from "./utils.js";
+import { select, listen, formatCounter, formatDate, formatPercentage } from "./utils.js";
 //TODO: Check possibility to use the class Score:
 //import Score from "./Score.js";
 
@@ -46,7 +46,7 @@ function getScores() {
     return scores;
 }
 
-export function saveScore(hits) {
+export function saveScore(hits, percentage) {
     const date = new Date();
 
     //TODO: Check possibility to use the class Score:
@@ -55,6 +55,7 @@ export function saveScore(hits) {
     let scores = getScores();
     const newScore = {
         hits,
+        percentage,
         date
     };
 
@@ -74,33 +75,28 @@ function showScores() {
 
     scoreTable.style.fontFamily = monospaceFont;
     const scores = getScores();
-    const titlePosition = 'Pos.';
-    const titleHits = 'Hits';
-    const titleDate = 'Date';
-    let table = `<table><th>${titlePosition}${showSpace(titlePosition)}</th><th>${titleHits}${showSpace(titleHits)}</th><th>${titleDate}</th>`;
+    let table = `<table><th>Pos.</th>
+                        <th>Hits</th>
+                        <th>Perc.</th>
+                        <th>Date</th>`;
 
     for (let i = 0; i < scores.length; i++) {
         const score = scores[i];
         const position = formatCounter(i + 1, ' ');
         const hits = formatCounter(score.hits);
+        const percentage = formatPercentage(score.percentage);
         const date = formatDate(score.date);
-
-        table = table + `<tr><td>#${position}${showSpace(position)}</td><td>${hits}${showSpace(hits)}</td><td>${date}</td></tr>`;
+
+        table = table + `<tr><td>#${position}</td>
+                             <td>${hits}</td>
+                             <td>${percentage}</td>
+                             <td>${date}</td></tr>`;
     }
 
     table = table + '</table>';
     scoreTable.innerHTML = table;    
 }
 
-function showSpace(text) {
-    const totalChars = 7;
-    const lengthText = text.length;
-    const space = totalChars - lengthText;
-    console.log("text.length", text.length)
-
-    return ' '.repeat(space);
-}
-
 listen('click', scoreOpen, () => {
     openModal();
 });

diff --git a/assets/js/utils.js b/assets/js/utils.js
@@ -20,6 +20,17 @@ export function formatCounter(counter, symbol = '0') {
     return (counter < 10 ? symbol : '') + `${counter}`;
 }
 
+export function formatPercentage(input) {
+    let value = input.toString();
+    const sep = value.indexOf(',') > -1 ? ',' : '.';
+
+    if (isInteger(value)) {
+        value = value + '.0'
+    }
+
+    return value + '0'.repeat(5 - value.length) + '%';
+}
+
 export function formatDate(input) {
     let date;
 
@@ -34,4 +45,9 @@ export function formatDate(input) {
     });
 
     return formattedDate;
+}
+
+function isInteger(value) {
+    const regex = /^-?\d+$/;
+    return regex.test(value);
 }