Change to monospace, better error handling

index.html

@@ -8,6 +8,7 @@
     body {
       background-color: #1e1e1e;
       color: #f0f0f0;
+      font-family: 'Courier New', monospace;
     }
 
     table {
@@ -19,7 +20,7 @@
     th,
     td {
       padding: 12px;
-      text-align: center;
+      text-align: left;
       border-bottom: 1px solid #ddd;
     }
 
@@ -37,8 +38,7 @@
       <tr>
         <th>Name</th>
         <th>Added At</th>
-        <th>Completed tests</th>
-        <th>Started tests</th>
+        <th>Compl./started</th>
         <th>Time Typing</th>
         <th>Best 15s</th>
         <th>Best 30s</th>
@@ -69,7 +69,15 @@
 
     for (url of urls) {
       fetch(url)
-        .then(response => response.json())
+        .then(response => {
+          if(response.status == 429) {
+            throw new Error('Rate limiting triggered, please wait a few minutes');
+          }
+          else if(!response.ok) {
+            throw new Error('Code ' + response.status);
+          }
+          return response.json();
+          })
         .then(data => {
           const { name, addedAt, typingStats, personalBests } = data.data;
           const { completedTests, startedTests, timeTyping } = typingStats;
@@ -83,7 +91,11 @@
                 max_acc = acc;
               }
             }
-            return max_wpm + ' | ' + max_acc + '%';
+            
+            max_wpm = Math.round(max_wpm);
+            // set max_wpm to fixed-length of 3
+            max_wpm = '&nbsp;'.repeat(3 - max_wpm.toString().length) + max_wpm;
+            return '<strong>' + max_wpm + '</strong> ' + max_acc.toFixed(1) + '%';
           }
 
           const best15s = getMaxWpmAcc(time['15']);
@@ -99,8 +111,7 @@
             <tr>
               <td>${name}</td>
               <td>${new Date(addedAt).toLocaleDateString()}</td>
-              <td>${completedTests}</td>
-              <td>${startedTests}</td>
+              <td>${completedTests}/${startedTests}</td>
               <td>${new Date(timeTyping * 1000).toISOString().substr(11, 8)}</td>
               <td>${best15s}</td>
               <td>${best30s}</td>
@@ -115,7 +126,7 @@
 
           table.insertAdjacentHTML('beforeend', row);
         })
-        .catch(error => { alert(error); console.error(error); });
+        .catch(error => { document.body.insertAdjacentHTML('beforeend', '<h4>' + error + '</h4>') });
     }
 
   </script>