Refactor in POO

2026-05-13 17:22:04 +00:00 · 2021-07-04 16:09:20 +02:00
parent fa0a0fc1aa
commit ae62ecc4bd
5 changed files with 71 additions and 50 deletions
@@ -8,11 +8,16 @@ Objective : Make a timer in JavaScript

 -   **Download** the repository and **execute** the `index.htm` file in your navigator

-   To set time, you need to edit the url and add `?time=<number_of_seconds>`
+-   To set time, you need to add parameters in the URL : 
+    URL syntax : `<URL>?[param1]&[param2]&[...]`
+    Parameter syntax : `<type>=<value>`
+    
+    -   Differents `type` : `seconds`, `minutes` and `hours`
+        If there is not parameters : **5 minutes** are in the timer by default
+        (There is no order for parameters) 
+    
    Example :
    
    ```url
-    https://lucasvbr.github.io/javascript-timer/index.htm?time=500
+    https://lucasvbr.github.io/javascript-timer/index.htm?hours=10&minutes=10&seconds=10
    ```
-
-    
@@ -8,6 +8,8 @@
 </head>
 <body>
    <p id="timer"></p>
+    <script src="./js/url.js"></script>
+    <script src="./js/timer.js"></script>
    <script src="./js/main.js"></script>
 </body>
 </html>
@@ -1,28 +1,19 @@
-var htmlTimer = document.getElementById("timer");
+/* HTML contents */
+var timerHTML = document.getElementById("timer");

-var timer = setInterval(timerLoop, 1000);
+/* GET url variable */
 const queryString = window.location.search;
 const urlParams = new URLSearchParams(queryString);
-let time = parseInt(urlParams.get('time'))
+time = getTimeUrl();

+/* Set the timer */
+let timer = new Timer(time)

-function timerLoop() {
-    htmlTimer.innerHTML = convertSecMin(time);
-    time--;
-    if(time < 0) {
-        clearInterval(timer)
-        htmlTimer.style.color = "red";
+let localTimer = setInterval(() => {
+    timerHTML.innerHTML = timer.toString();
+    timer.decrement();
+    if(timer.getTime() < 0) {
+        clearInterval(localTimer);
+        timerHTML.style.color = "red";
    }
-}
-
-function convertSecMin(value) {
-    let seconds = Math.floor(value % 60);
-    let minuts = Math.floor(value / 60);
-    return `${convertDigits(minuts)}:${convertDigits(seconds)}` 
-}
-
-function convertDigits(number) {
-    return number.toLocaleString('en-US', {
-        minimumIntegerDigits : 2,
-        useGrouping : false});
-}
+}, 1000);
@@ -1,5 +1,3 @@
-// NOT USED CURRENTLY
-
 class Timer {
    
    /**
@@ -8,32 +6,39 @@ class Timer {
     * @throws TypeError if time is not a positive Integer  
     */
    constructor(time) {
-        if (!isValid(time)) throw new TypeError(`${time} n'est pas un entier valide`);
+        if (!Number.isInteger(time) && time <= 0)
+            throw new TypeError(`${time} is not valid`);
        this.time = time;
    }

-
    /**
-     * Predicate that show if the value of the timer is correctly set
-     * @param {int} valueTest 
-     * @return True if the predicate is verified
-     *         False else
+     * Show the timer in a String version
+     * in the format hh:mm:ss
     */
-    isValid(valueTest) {
-        return Number.isInteger(valueTest) && valueTest > 0
+    toString() {
+        function formatDigits(number) {
+            return number.toLocaleString('en-US', {
+                minimumIntegerDigits : 2,
+                useGrouping : false}
+            );
+        }
+
+        let hours = Math.floor(this.time / 3600);
+        let minuts = Math.floor(this.time / 60) - hours * 60;
+        let seconds = Math.floor(this.time % 60);
+
+        return `${formatDigits(hours)}:`
+               + `${formatDigits(minuts)}:`
+               + `${formatDigits(seconds)}`
    }

-    /**
-     * @return the current time
-     */
+    /** Decrement the value of the current time */
+    decrement() {
+        this.time--
+    }
+
+    /** @returns the current time */
    getTime() {
-        return this.time
-    }
-
-    /**
-     * Make start the timer
-     */
-    startTimer() {
-        setTimeout(this.time--, 1000)
+        return this.time;
    }
 }
@@ -0,0 +1,18 @@
+function getTimeUrl() {
+    let time = 0;
+
+    if (!urlParams.has('seconds')
+        && !urlParams.has('minutes')
+        && !urlParams.has('hours')) {
+            time = 300
+    } else {
+        if (urlParams.has('seconds'))
+            time += parseInt(urlParams.get('seconds'));
+        if (urlParams.has('minutes'))
+            time += parseInt(urlParams.get('minutes')) * 60;
+        if (urlParams.has('hours'))
+            time += parseInt(urlParams.get('hours')) * 3600;
+    }
+    
+    return time;
+}