diff --git a/frontend/src/ts/test/timer-progress.ts b/frontend/src/ts/test/timer-progress.ts
index a1fe882caa08..eb5a4db0bbd7 100644
--- a/frontend/src/ts/test/timer-progress.ts
+++ b/frontend/src/ts/test/timer-progress.ts
@@ -19,49 +19,29 @@ const textEl = document.querySelector(
 ) as HTMLElement;
 const miniEl = document.querySelector("#liveStatsMini .time") as HTMLElement;
 
+function showElement(el: HTMLElement): void {
+  animate(el, {
+    opacity: [0, 1],
+    duration: applyReducedMotion(125),
+    onBegin: () => {
+      el.classList.remove("hidden");
+    },
+  });
+}
+
 export function show(): void {
   if (!TestState.isActive) return;
   requestDebouncedAnimationFrame("timer-progress.show", () => {
     if (Config.mode !== "zen" && Config.timerStyle === "bar") {
-      animate(barOpacityEl, {
-        opacity: [0, 1],
-        duration: applyReducedMotion(125),
-        onBegin: () => {
-          barOpacityEl.classList.remove("hidden");
-        },
-      });
+      showElement(barOpacityEl);
     } else if (Config.timerStyle === "text") {
-      animate(textEl, {
-        opacity: [0, 1],
-        duration: applyReducedMotion(125),
-        onBegin: () => {
-          textEl.classList.remove("hidden");
-        },
-      });
+      showElement(textEl);
     } else if (Config.timerStyle === "flash_mini") {
-      animate(miniEl, {
-        opacity: [0, 1],
-        duration: applyReducedMotion(125),
-        onBegin: () => {
-          miniEl.classList.remove("hidden");
-        },
-      });
+      showElement(miniEl);
     } else if (Config.timerStyle === "flash_text") {
-      animate(textEl, {
-        opacity: [0, 1],
-        duration: applyReducedMotion(125),
-        onBegin: () => {
-          textEl.classList.remove("hidden");
-        },
-      });
+      showElement(textEl);
     } else if (Config.mode === "zen" || Config.timerStyle === "mini") {
-      animate(miniEl, {
-        opacity: [0, 1],
-        duration: applyReducedMotion(125),
-        onBegin: () => {
-          miniEl.classList.remove("hidden");
-        },
-      });
+      showElement(miniEl);
     }
   });
 }
@@ -85,28 +65,30 @@ export function reset(): void {
   });
 }
 
+function hideElement(el: HTMLElement, hideOnComplete: boolean): void {
+  const args = {
+    opacity: 0,
+    duration: applyReducedMotion(125),
+  };
+
+  animate(
+    el,
+    hideOnComplete
+      ? {
+          ...args,
+          onComplete: () => {
+            el.classList.add("hidden");
+          },
+        }
+      : args,
+  );
+}
+
 export function hide(): void {
   requestDebouncedAnimationFrame("timer-progress.hide", () => {
-    animate(barOpacityEl, {
-      opacity: 0,
-      duration: applyReducedMotion(125),
-    });
-
-    animate(miniEl, {
-      opacity: 0,
-      duration: applyReducedMotion(125),
-      onComplete: () => {
-        miniEl.classList.add("hidden");
-      },
-    });
-
-    animate(textEl, {
-      opacity: 0,
-      duration: applyReducedMotion(125),
-      onComplete: () => {
-        textEl.classList.add("hidden");
-      },
-    });
+    hideElement(barOpacityEl, false);
+    hideElement(miniEl, true);
+    hideElement(textEl, true);
   });
 }
 
@@ -131,6 +113,24 @@ function getCurrentCount(): number {
   }
 }
 
+function setTimerHtmlToInputLength(el: HTMLElement, wrapInDiv: boolean): void {
+  let historyLength = `${TestInput.input.getHistory().length}`;
+
+  if (wrapInDiv) {
+    historyLength = `<div>${historyLength}</div>`;
+  }
+
+  el.innerHTML = historyLength;
+}
+
+function updateTimer(el: HTMLElement, outof: number, wrapInDiv: boolean): void {
+  if (outof === 0) {
+    setTimerHtmlToInputLength(el, wrapInDiv);
+  } else {
+    el.innerHTML = `${getCurrentCount()}/${outof}`;
+  }
+}
+
 export function update(): void {
   requestDebouncedAnimationFrame("timer-progress.update", () => {
     const time = Time.get();
@@ -215,40 +215,25 @@ export function update(): void {
           width: percent + "vw",
           duration: 250,
         });
-      } else if (Config.timerStyle === "text") {
-        if (outof === 0) {
-          textEl.innerHTML = `<div>${TestInput.input.getHistory().length}</div>`;
-        } else {
-          textEl.innerHTML = `<div>${getCurrentCount()}/${outof}</div>`;
-        }
-      } else if (Config.timerStyle === "flash_mini") {
-        if (outof === 0) {
-          miniEl.innerHTML = `${TestInput.input.getHistory().length}`;
-        } else {
-          miniEl.innerHTML = `${getCurrentCount()}/${outof}`;
-        }
-      } else if (Config.timerStyle === "flash_text") {
-        if (outof === 0) {
-          textEl.innerHTML = `<div>${TestInput.input.getHistory().length}</div>`;
-        } else {
-          textEl.innerHTML = `<div>${getCurrentCount()}/${outof}</div>`;
-        }
-      } else if (Config.timerStyle === "mini") {
-        if (outof === 0) {
-          miniEl.innerHTML = `${TestInput.input.getHistory().length}`;
-        } else {
-          miniEl.innerHTML = `${getCurrentCount()}/${outof}`;
-        }
+      } else if (
+        Config.timerStyle === "text" ||
+        Config.timerStyle === "flash_text"
+      ) {
+        updateTimer(textEl, outof, true);
+      } else if (
+        Config.timerStyle === "mini" ||
+        Config.timerStyle === "flash_mini"
+      ) {
+        updateTimer(miniEl, outof, false);
       }
     } else if (Config.mode === "zen") {
-      if (Config.timerStyle === "text") {
-        textEl.innerHTML = `<div>${TestInput.input.getHistory().length}</div>`;
-      } else if (Config.timerStyle === "flash_mini") {
-        miniEl.innerHTML = `${TestInput.input.getHistory().length}`;
-      } else if (Config.timerStyle === "flash_text") {
-        textEl.innerHTML = `<div>${TestInput.input.getHistory().length}</div>`;
-      } else {
-        miniEl.innerHTML = `${TestInput.input.getHistory().length}`;
+      if (Config.timerStyle === "text" || Config.timerStyle === "flash_text") {
+        setTimerHtmlToInputLength(textEl, true);
+      } else if (
+        Config.timerStyle === "mini" ||
+        Config.timerStyle === "flash_mini"
+      ) {
+        setTimerHtmlToInputLength(miniEl, false);
       }
     }
   });