Improved UI Title options

Minor changes in the title to preview the time all the time.

browserSpecific/js/actions.js

@@ -4,10 +4,11 @@ let nMobile = (os === "iOS" || os === "Android");
 let requestWakeLock;
 
 function browserChangeTitle(currentTime) {
-    if (currentTime !== '')
-        document.title = `${currentTime} - Toastmasters Timer`;
-    else
-        document.title = `Toastmasters Timer`;
+    document.title = currentTime !== '' ? `${currentTime} - Toastmasters Timer` : `Toastmasters Timer`;
+}
+
+function browserChangeFavIcon(fav){
+    document.querySelector("link[rel*='icon']").href = fav === '' ? `img/favicon-32x32.png` : `img/${fav}.png`;
 }
 
 function browserStartBeep() {
@@ -24,9 +25,8 @@ function browserStartBeep() {
 }
 
 function browserStartVibrate() {
-    if (green === 1 || yellow === 1 || red === 1)
-        if (hasVibrator)
-            navigator.vibrate(1000);
+    if ((green === 1 || yellow === 1 || red === 1) && hasVibrator)
+        navigator.vibrate(1000);
 }
 
 function browserStartClapping() {

index.html

@@ -40,8 +40,8 @@
     <meta name="apple-mobile-web-app-title" content="Toastmasters Timer">
     <meta name="theme-color" content="#ffffff">
     <meta name="author" content="Federico Navarrete">
-    <title>Toastmasters Timer - Material Design</title>
-    <link rel="icon" type="image/png" href="img/favicon.png" />
+    <title>Toastmasters Timer</title>
+    <link rel="icon" type="image/png" href="img/favicon-32x32.png" />
     <link rel="stylesheet" href="css/materialdesignicons.min.css" defer />
     <link rel="stylesheet" href="css/timer.css" defer />
     <link rel="stylesheet" href="css/material.indigo-pink.min.css" defer />

js/timer.js

@@ -231,6 +231,8 @@ function resetState() {
     btnRestart.innerHTML = "<span class='mdi mdi-restart'></span>";
     timeLeft = 0;
     currentState = 1;
+    browserChangeFavIcon('');
+    browserChangeTitle('');
 }
 
 function timer(seconds) { //counts time, takes seconds
@@ -246,18 +248,21 @@ function timer(seconds) { //counts time, takes seconds
             startBeep();
             startVibrate();
             lastColor = "green";
+            browserChangeFavIcon('min');
         } else if (counter >= average && counter < maximum) {
             yellow++;
             document.body.style.background = "#ffeb3b";
             startBeep();
             startVibrate();
             lastColor = "yellow";
+            browserChangeFavIcon('opt');
         } else if (counter >= maximum) {
             red++;
             document.body.style.background = "#e53935";
             startBeep();
             startVibrate();
             lastColor = "red";
+            browserChangeFavIcon('max');
         }
         if (counter >= maximum + clappingTime) {
             if (!clappingStarted)
@@ -407,7 +412,7 @@ function displayTimeLeft(timeLeft) { //displays time on the input
     let seconds = fixedTime % 60;
     let displayString = `${hours < 10 ? '0' : ''}${hours}:${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
     displayOutput.textContent = displayString;
-    if (!isContestMode)
+    if (!isContestMode && isStarted)
         browserChangeTitle(displayString);
     update(timeLeft, wholeTime);
 }
@@ -750,6 +755,10 @@ btnChampion.addEventListener('click', function(event) {
         setLocalStorage("isNinjaMode", isNinjaMode);
     } else {
         isContestMode = !isContestMode;
+        if (isContestMode)
+            browserChangeTitle('');
+        else
+            browserChangeTitle(displayOutput.textContent);
         setContestImg();
         checkMode();
         setContestMode();