Hide plural S if 1 hour or minute remains

PlaceNL · Jul 23, 2023 · 48ab497 · 48ab497
1 parent edca7dd
commit 48ab497
Showing 1 changed file with 18 additions and 5 deletions.
diff --git a/web/index.html b/web/index.html
@@ -43,8 +43,10 @@ <h1 class="fs-1 text-light"><span id="pixels-per-minute" class="odometer">0</spa
                         </h1>
                         <h4 class="text-secondary">estimated place rate</h4>
                         <h6 id="time-left" class="text-secondary d-none">(<span id="time-hours-left"
-                            class="odometer text-light">0</span> hour(s) and
-                        <span id="time-minutes-left" class="odometer text-light">0</span> minute(s) left until completion at this pace.)</h6>
+                                                                                class="odometer text-light">0</span>
+                            hour<span id="time-hours-left-plural">s</span> and
+                            <span id="time-minutes-left" class="odometer text-light">0</span> minute<span
+                                id="time-minutes-left-plural">s</span> left until completion at this pace)</h6>
                     </div>
                 </div>
             </div>
@@ -177,18 +179,29 @@ <h6 class="text-secondary">(<span id="template-pixel-right-percentage"
                             document.querySelector('#completion-stat').classList.remove('d-none');
 
                             const timeLeft = (payload.completion.wrong && payload.capabilities.place) ? payload.completion.wrong / (payload.capabilities.place / 5) : 0;
-                            var hoursLeft = 0;
-                            var minutesLeft = 0;
+                            let hoursLeft = 0;
+                            let minutesLeft = 0;
                             if (timeLeft <= 0) {
                                 document.querySelector('#time-left').classList.add('d-none');
                             } else {
                                 document.querySelector('#time-left').classList.remove('d-none');
                                 hoursLeft = Math.floor(timeLeft / 60);
                                 minutesLeft = Math.floor(timeLeft % 60);
+
+                                if (hoursLeft === 1) {
+                                    document.querySelector('#time-hours-left-plural').classList.add('d-none');
+                                } else {
+                                    document.querySelector('#time-hours-left-plural').classList.remove('d-none');
+                                }
+                                if (minutesLeft === 1) {
+                                    document.querySelector('#time-minutes-left-plural').classList.add('d-none');
+                                } else {
+                                    document.querySelector('#time-minutes-left-plural').classList.remove('d-none');
+                                }
                             }
                             document.querySelector('#time-hours-left').innerText = hoursLeft;
                             document.querySelector('#time-minutes-left').innerText = minutesLeft;
-                            
+
                             const percentageWrong = payload.completion.wrong / payload.completion.total * 100;
                             const percentageRight = 100 - percentageWrong;