add score | style changes

game.html

@@ -38,18 +38,23 @@
         </nav>
     </div>
     <div class="container">
+        <div class="row">
+            <div class="col-12 text-center">
+                <div class="h2">Current Score: <span id="score" style="color: violet;">0</span></div>
+            </div>
+        </div>
         <div class="row mt-3">
             <div class="col-sm border text-center p-2" id="col1">
                 <span class="h2" id="currentCpuTitle"></span>
                 <br>
                 <span class="h3">cpu score:</span>
-                <span class="h3" id="currentCpuScore"></span>
+                <span class="h3" id="currentCpuScore" style="color: blue;"></span>
             </div>
             <div class="col-sm border text-center p-2" id="col2">
                 <span class="h2" id="nextCpuTitle"></span>
                 <br>
                 <span class="h3">cpu score:</span>
-                <span class="h3 counter-count" id="nextCpuScore">?</span>
+                <span class="h3 counter-count" id="nextCpuScore" style="color: blue;">?</span>
                 <br>
                 <button class="btn btn-lg bg-info m-3" onclick="btnHigherClick()" id="btnHigher">Higher</button>
                 <br>

game.js

@@ -4,6 +4,9 @@ var cpuList;
 var currentCpu;
 var nextCpu;
 
+// current user score
+var score;
+
 export async function main() {
     await fetch('./data.json')
         .then((response) => response.json())
@@ -11,6 +14,7 @@ export async function main() {
 
     currentCpu = getRandomCpu();
     nextCpu = getRandomCpu();
+    score = 0;
     updateLayout();
 }
 
@@ -35,10 +39,13 @@ function showResult(isCorrect) {
     document.getElementById("btnLower").setAttribute("disabled", "");
 
     document.getElementById("col2").style.backgroundColor = isCorrect ? "lightgreen" : "#FF4444";
+    score = isCorrect ? score + 1 : 0;
+    document.getElementById("score").innerText = score;
 
     countUp();
 }
 
+// updates view based on the cpu objects
 function updateLayout() {
     document.getElementById("currentCpuTitle").innerText = currentCpu.name;
     // add "." to large numbers
@@ -68,7 +75,7 @@ async function countUp() {
         counter.error(demo.error);
     }
 
-    await delay(3000)
+    await delay(2500)
     nextRound();
 
     document.getElementById("btnHigher").removeAttribute("disabled");