refactor: rewrote the JS in TS

ThinkR-open · Aug 17, 2022 · a0677f9 · a0677f9
1 parent 482f241
commit a0677f9
Show file tree

Hide file tree

Showing 3 changed files with 142 additions and 39 deletions.
diff --git a/script.js b/script.js
@@ -1,42 +1,63 @@
-document.addEventListener("DOMContentLoaded", function() {
-    let timer = document.querySelector("#timer");
-    timer.style.fontSize = timer.offsetWidth / 2 + "px";
-    const minq = window.location.search.split("?")[1]
-    if (minq) {
-        document.querySelector("#minutes").innerHTML = minq;
-    } else {
-        document.querySelector("#minutes").innerHTML = "5";
+// We query the timer object. We want it to be of type 
+// HTMLHeadingElement so that it can only 
+// receive a heading element. 
+// Other type could have been HTMLElement, an interface for all html elements
+// but it's a larger type.
+var timer = document.querySelector("#timer");
+// This wil set the size of the timer
+timer.style.fontSize = timer.offsetWidth / 2 + "px";
+// We'll search for the query params in the url
+var loc = window.location;
+var minutes = loc.search.split("?")[1];
+var doc = document.querySelector("#minutes");
+// If there is a minute query param, we'll set the innerHTML
+// of #minutes to that value.
+// That means that we always start with NUMBER:00 as a default, 
+// i.e the minutes values is always 0 at the start.
+if (minutes) {
+    doc.innerHTML = minutes;
+}
+else {
+    doc.innerHTML = "5";
+}
+var sec = document.querySelector("#seconds");
+sec.innerHTML = "00";
+function getAsNumberFromQS(id) {
+    var sec = document.querySelector(id);
+    return parseInt(sec.innerHTML);
+}
+function updateByQS(id, value) {
+    var domEl = document.querySelector(id);
+    domEl.innerHTML = value;
+}
+function tick() {
+    var secnum = getAsNumberFromQS("#seconds");
+    if (secnum === 0) {
+        var minnum = getAsNumberFromQS("#minutes");
+        // If the minutes is 0, we'll stop the timer.
+        // as it means that we have reached 00:00
+        if (minnum === 0) {
+            clearInterval(ticker_interv);
+        }
+        else {
+            // Here, the seconds is 0, so we'll set it back to 
+            //59 and decrement the minutes.
+            updateByQS("#seconds", "59");
+            updateByQS("#minutes", (minnum - 1).toString());
+        }
     }
-
-    document.querySelector("#seconds").innerHTML = "00";
-
-    function tick() {
-        let sec = document.querySelector("#seconds");
-        let secnum = parseInt(sec.innerHTML)
-        if (secnum === 0) {
-            let min = document.querySelector("#minutes");
-            let minnum = parseInt(min.innerHTML);
-            if (minnum === 0) {
-                clearInterval(ticker_interv)
-            } else {
-                sec.innerText = 59
-                min.innerHTML = minnum - 1
-            }
-        } else {
-            let minone = secnum - 1;
-            minone = minone.toString();
-            if (minone.length === 1) {
-                minone = "0" + minone
-            }
-            sec.innerText = minone
+    else {
+        // We're not at MIN:00, so we'll just decrement the seconds.
+        var new_secnum = (secnum - 1).toString();
+        if (new_secnum.length === 1) {
+            new_secnum = "0" + new_secnum;
         }
+        updateByQS("#seconds", new_secnum);
     }
-
-    let ticker_interv = setInterval(tick, 1000);
-
-    window.onresize = function() {
-        let timer = document.querySelector("#timer");
-        timer.style.fontSize = timer.offsetWidth / 2 + "px";
-    };
-
-});
+}
+var ticker_interv = setInterval(tick, 1000);
+window.onresize = function () {
+    // Reupdate the font size of the timer whenever the 
+    // window is resized. We reuse the global timer variable.
+    timer.style.fontSize = timer.offsetWidth / 2 + "px";
+};
diff --git a/script.ts b/script.ts
@@ -0,0 +1,70 @@
+// We query the timer object. We want it to be of type 
+// HTMLHeadingElement so that it can only 
+// receive a heading element. 
+// Other type could have been HTMLElement, an interface for all html elements
+// but it's a larger type.
+let timer: HTMLHeadingElement = document.querySelector("#timer") as HTMLHeadingElement;
+
+// This wil set the size of the timer
+timer.style.fontSize = timer.offsetWidth / 2 + "px";
+
+// We'll search for the query params in the url
+let loc: Location = window.location;
+let minutes: string = loc.search.split("?")[1];
+let doc: HTMLSpanElement = document.querySelector("#minutes") as HTMLSpanElement;
+
+// If there is a minute query param, we'll set the innerHTML
+// of #minutes to that value.
+// That means that we always start with NUMBER:00 as a default, 
+// i.e the minutes values is always 0 at the start.
+if (minutes) {
+    doc.innerHTML = minutes;
+} else {
+    doc.innerHTML = "5";
+}
+
+let sec: HTMLSpanElement = document.querySelector("#seconds") as HTMLSpanElement;
+sec.innerHTML = "00";
+
+function getAsNumberFromQS(id: string): number {
+    let sec: HTMLSpanElement = document.querySelector(id) as HTMLSpanElement;
+    return parseInt(sec.innerHTML);
+}
+
+function updateByQS(id: string, value: string): void {
+    let domEl: HTMLSpanElement = document.querySelector(id) as HTMLSpanElement;
+    domEl.innerHTML = value;
+}
+
+
+function tick(): void {
+    let secnum: number = getAsNumberFromQS("#seconds");
+    if (secnum === 0) {
+        let minnum: number = getAsNumberFromQS("#minutes");
+        // If the minutes is 0, we'll stop the timer.
+        // as it means that we have reached 00:00
+        if (minnum === 0) {
+            clearInterval(ticker_interv)
+        } else {
+            // Here, the seconds is 0, so we'll set it back to 
+            //59 and decrement the minutes.
+            updateByQS("#seconds", "59");
+            updateByQS("#minutes", (minnum - 1).toString())
+        }
+    } else {
+        // We're not at MIN:00, so we'll just decrement the seconds.
+        let new_secnum: string = (secnum - 1).toString();
+        if (new_secnum.length === 1) {
+            new_secnum = "0" + new_secnum;
+        }
+        updateByQS("#seconds", new_secnum)
+    }
+}
+
+let ticker_interv: number = setInterval(tick, 1000);
+
+window.onresize = function () {
+    // Reupdate the font size of the timer whenever the 
+    // window is resized. We reuse the global timer variable.
+    timer.style.fontSize = timer.offsetWidth / 2 + "px";
+};
diff --git a/tsconfig.json b/tsconfig.json
@@ -0,0 +1,12 @@
+/** * tsconfig.json * Configuration file in the project folder for the Typescript compiler */
+/* from https://svijaykoushik.github.io/blog/2019/09/27/typescript-dom-manipulation/ */
+{
+    "compilerOptions": {
+        "lib": [
+            "es2015",
+            "dom"
+        ],
+        "strict": true,
+        "target": "es2015"
+    }
+}