Feature/timer

app.js

@@ -42,15 +42,40 @@ console.log(`Initial rejections: red - ${rejectRed}, green - ${rejectGreen}, blu
 let retainLogs = window.localStorage.getItem('promiviz-persist-logs') || false;
 document.getElementById('persist-logs').checked = (retainLogs === 'true');
 
+// Define min and max delay 
+var minDelay = [redDelay, greenDelay, blueDelay].reduce((a, b) => a < b ? a : b) / 1000;
+var maxDelay = [redDelay, greenDelay, blueDelay].reduce((a, b) => a > b ? a : b) / 1000;
+
 // Call this function when a delay is set for a color
 const selectDelay = () => {
     redDelay = document.getElementById("red-delays-id").value;
-    greenDelay = document.getElementById("green-delays-id").value;;
-    blueDelay = document.getElementById("blue-delays-id").value;;
+    greenDelay = document.getElementById("green-delays-id").value;
+    blueDelay = document.getElementById("blue-delays-id").value;
+
+    minDelay = [redDelay, greenDelay, blueDelay].reduce((a, b) => a < b ? a : b) / 1000;
+    maxDelay = [redDelay, greenDelay, blueDelay].reduce((a, b) => a > b ? a : b) / 1000;
+
     console.log(`Delays: red - ${redDelay}, green - ${greenDelay}, blue - ${blueDelay}`);
     selectValue();
 }
 
+
+// Create timer 
+const startTimer = (deadline, seconds = 0) => {
+    // var seconds = 0; 
+
+    var x = setInterval(function() {
+        seconds += 1;
+        document.getElementById("second").innerHTML = seconds;
+        deadline -= 1;
+        // stop timer
+        if(deadline === 0) clearInterval(x);
+
+
+    }, 1000);
+}
+
+
 // Call this function when a reject flag is set for a color
 const rejectColor = () => {
     rejectRed = document.getElementById("red-error-id").checked;
@@ -66,9 +91,11 @@ const selectValue = () => {
     if (!retainLogs) {
         clearLogs();
     }
+
     const apiSelectBox = document.getElementById("apis-list-id");
-    const selected = apiSelectBox.value;
+    const selected = apiSelectBox.value;    
     console.log(selected);
+
     switch (selected) {
         case 'all':
             explain(
@@ -113,6 +140,7 @@ const selectValue = () => {
             break
         default:
             explain(``);
+            document.getElementById("second").innerHTML = "0";
             break;
     }
 };
@@ -197,6 +225,7 @@ const explain = msg => {
 
 // Handle the Promise.all() API
 const handleAll = async () => {
+    startTimer(maxDelay);
     try {
         log(`🕛 Started handling all the colors using Promise.all([red, green, blue])`);
 
@@ -205,11 +234,13 @@ const handleAll = async () => {
                 rejectRed ? reject('red') : resolve('red');
             }, redDelay);
         });
+
         const green = new Promise((resolve, reject) => {
             setTimeout(() => {
                 rejectGreen ? reject('green') : resolve('green');
             }, greenDelay);
         });
+
         const blue = new Promise((resolve, reject) => {
             setTimeout(() => {
                 rejectBlue ? reject('blue') : resolve('blue');
@@ -219,7 +250,7 @@ const handleAll = async () => {
         const colors = await Promise.all([red, green, blue]);
         console.log(colors);
         colors.forEach(color => {
-            setValues(color, color, '3s');
+            setValues(color, color, maxDelay + 's');
         })
         log(`✔️ Finished handling all the colors using Promise.all([red, green, blue])`); 
     }catch(err) {
@@ -229,6 +260,7 @@ const handleAll = async () => {
 
 // Handle the Promise.any() API
 const handleAny = async () => {
+    startTimer(minDelay);
     try {
         log(`🕛 Started handling any of the colors using Promise.any([red, green, blue])`); 
 
@@ -251,7 +283,7 @@ const handleAny = async () => {
 
         const color = await Promise.any([red, green, blue]);
         log(`${color} got picked up! Lucky one.`);
-        setValues(color, color, '3s');
+        setValues(color, color, minDelay + 's');
         log(`✔️Finished handling any of the colors using Promise.any([red, green, blue])`); 
     }catch(err) {
         log(`❌ Rejected the color ${err}.`, true);
@@ -260,6 +292,7 @@ const handleAny = async () => {
 
 // Handle the Promise.race() API
 const handleRace = async () => {
+    startTimer(minDelay);
     try{
         log(`🕛 Started racing of the colors using Promise.race([red, green, blue])`);
 
@@ -281,7 +314,7 @@ const handleRace = async () => {
 
         const color = await Promise.race([ green, red, blue]);
         log(`${color} own the race! Great champ.`);
-        setValues(color, color, '3s');
+        setValues(color, color, minDelay + 's');
         log(`✔️ Finished racing of the colors using Promise.race([red, green, blue])`);
 
     } catch(err) {
@@ -291,6 +324,7 @@ const handleRace = async () => {
 
 // Handle the Promise.allSettled() API
 const handleAllSettled = async () => {
+    startTimer(maxDelay);
     log(`🕛 Started settling of the colors using Promise.allSettled([red, green, blue])`); 
 
     const red = new Promise((resolve, reject) => {
@@ -319,7 +353,7 @@ const handleAllSettled = async () => {
         if (status === 'rejected') {
             log(`❌ Rejected the color ${reason}.`, true);
         } else if (status === 'fulfilled') {
-            setValues(value, value, '3s');
+            setValues(value, value, maxDelay + 's');
         }
     }
 
@@ -328,6 +362,7 @@ const handleAllSettled = async () => {
 
 // Handle the Promise.resolve() API
 const handleResolve = async () => {
+    startTimer(maxDelay);
     try {
         log(`🕛 Resolving all colors individually with Promise.resolve(color => red, green, blue)`); 
         const red = new Promise((resolve, reject) => {
@@ -350,15 +385,15 @@ const handleResolve = async () => {
 
         const redResolved = await Promise.resolve(red);
         log(`✔️ Finished resolving ${redResolved} using Promise.resolve(${redResolved})`); 
-        setValues(redResolved, redResolved, '3s');
+        setValues(redResolved, redResolved, redDelay);
 
         const greenResolved = await Promise.resolve(green);
         log(`✔️ Finished resolving ${greenResolved} using Promise.resolve(${greenResolved})`); 
-        setValues(greenResolved, greenResolved, '3s');
+        setValues(greenResolved, greenResolved, greenDelay);
 
         const blueResolved = await Promise.resolve(blue);
         log(`✔️ Finished resolving ${blueResolved} using Promise.resolve(${blueResolved})`); 
-        setValues(blueResolved, blueResolved, '3s');
+        setValues(blueResolved, blueResolved, blueDelay);
     }catch(err) {
         log(`❌ Rejected the color ${err}.`, true);
     };

counter.css

@@ -0,0 +1,39 @@
+body{
+  text-align: center;
+  background: #00ECB9;
+  font-family: sans-serif;
+  font-weight: 100;
+}
+h1{
+  color: #396;
+  font-weight: 100;
+  font-size: 40px;
+  margin: 40px 0px 20px;
+}
+ #timer{
+    font-family: sans-serif;
+    color: #fff;
+    display: inline-block;
+    font-weight: 100;
+    text-align: center;
+    font-size: 30px;
+}
+#timer > div{
+    padding: 10px;
+    border-radius: 3px;
+    background: #00BF96;
+    display: inline-block;
+}
+#timer div > span{
+    padding: 15px;
+    border-radius: 3px;
+    background: #00816A;
+    display: inline-block;
+}
+.smalltext{
+    padding-top: 5px;
+    font-size: 16px;
+}
+.select-api{
+    margin-bottom: 5%;
+}

index.html

@@ -43,6 +43,7 @@
 
     <!-- Stylesheet -->
     <link rel="stylesheet" href="main.css">
+    <link rel="stylesheet" href="counter.css">
 
     <title>PromiViz - Visualize Promise APIs</title>
 </head>
@@ -120,6 +121,13 @@ <h1>🤝 PromiViz</h1>
                         <option value="allSettled">Promise.allSettled</option>
                     </select>
                 </section>
+                <!-- Timer in seconds -->
+                <div id="timer">
+                    <div>
+                      <span class="seconds" id="second">0</span>
+                      <div class="smalltext">Seconds</div>
+                    </div>
+                </div>
             </div>
 
             <div id='explanation-id' class='explanation'>