Change colors in the middle of a JavaScript string?

I’m trying to build a multi-timezone clock that’ll be displayed in a web browser in kiosk mode.

I’ve stolen the basic code from
https://ampron.eu/article/use-case/digital-wall-clock-with-raspberry-pi/
and the kiosk setup from:
https://pimylifeup.com/raspberry-pi-kiosk/
and modified it into:
http://dotnetdotcom.net/tzclock.html
but I can’t figure out how to change the color of each of the timezones.

JavaScript isn’t really anything I have any experience with, so if I’m doing it all wrong, please point me in the right direction.

Many thanks in advance!

Here’s my code so far (87 lines):

"use strict";

var textElem = document.getElementById("clocktext");
clocktext.setAttribute('style', 'white-space: pre;');
var targetWidth = 0.90; // Proportion of full screen width
var curFontSize = 20; // Do not change

function updateClock() {
  var d = new Date();
  var s = "";
  s += "UTC - "
  s += (10 > d.getUTCHours() ? "0" : "") + d.getUTCHours() + ":";
  s += (10 > d.getUTCMinutes() ? "0" : "") + d.getUTCMinutes() + ":";
  s += (10 > d.getUTCSeconds() ? "0" : "") + d.getUTCSeconds();
  s += '\r\n';
  s += "Loc - "
  s += (10 > d.getHours() ? "0" : "") + d.getHours() + ":";
  s += (10 > d.getMinutes() ? "0" : "") + d.getMinutes() + ":";
  s += (10 > d.getSeconds() ? "0" : "") + d.getSeconds();
  textElem.textContent = s;
  setTimeout(updateClock, 1000 - d.getTime() % 1000 + 20);
}

function updateTextSize() {
  for (var i = 0; 3 > i; i++) { // Iterate for better better convergence
    curFontSize *= targetWidth / (textElem.offsetWidth / textElem.parentNode.offsetWidth);
    textElem.style.fontSize = curFontSize + "pt";
  }
}

updateClock();
updateTextSize();
window.addEventListener("resize", updateTextSize);


$(document).ready(function() {
  // iOS web app full screen hacks.
  if (window.navigator.standalone == true) {
    // make all link remain in web app mode.
    $('a').click(function() {
      window.location = $(this).attr('href');
      return false;
    });
  }
});
@font-face {
  font-family: "Digital-7";
  src: url(digital-7.ttf) format("truetype");
}

p.customfont {
  font-family: "Digital-7";
}

html {
  background: #000000;
  font-family: "Digital-7", sans-serif;
  font-weight: normal;
  color: #00ffff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html style="height:100%; margin:0; padding:0">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name='viewport' content='width = device-width, initial-scale = 1, minimum-scale = 1, maximum-scale = 1, user-scalable = no, viewport-fit=cover'>
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="apple-mobile-web-app-title" content="Ampron Clock">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>GeekHo Clock</title>

</head>

<body style="display:flex; height:100%; margin:0; padding:0; justify-content:center; align-items:center">

  <span id="clocktext" style="font-kerning:none"></span>

</body>

</html>

2 thoughts on “Change colors in the middle of a JavaScript string?”

  1. There are a few ways to accomplish your goal. I chose the one that fits into your code the easiest.

    1. Put <span> tags around the timezones and give them a class to style it with the new color
    2. Change: textElem.textContent = s; to textElem.innerHTML = s;
      • This is safe here because you control the content completely.
    3. Add a CSS class (tz) and provide the new color.

    If you want different colors for each time zone use different class names with different colors defined in CSS.

    "use strict";
    
    var textElem = document.getElementById("clocktext");
    clocktext.setAttribute('style', 'white-space: pre;');
    var targetWidth = 0.90; // Proportion of full screen width
    var curFontSize = 20; // Do not change
    
    function updateClock() {
      var d = new Date();
      var s = '<span class="tz">UTC</span>';
      s += " - "
      s += (10 > d.getUTCHours() ? "0" : "") + d.getUTCHours() + ":";
      s += (10 > d.getUTCMinutes() ? "0" : "") + d.getUTCMinutes() + ":";
      s += (10 > d.getUTCSeconds() ? "0" : "") + d.getUTCSeconds();
      s += '\r\n';
      s += '<span class="tz">Loc</span>';
      s += " - "
      s += (10 > d.getHours() ? "0" : "") + d.getHours() + ":";
      s += (10 > d.getMinutes() ? "0" : "") + d.getMinutes() + ":";
      s += (10 > d.getSeconds() ? "0" : "") + d.getSeconds();
      textElem.innerHTML = s;
      setTimeout(updateClock, 1000 - d.getTime() % 1000 + 20);
    }
    
    function updateTextSize() {
      for (var i = 0; 3 > i; i++) { // Iterate for better better convergence
        curFontSize *= targetWidth / (textElem.offsetWidth / textElem.parentNode.offsetWidth);
        textElem.style.fontSize = curFontSize + "pt";
      }
    }
    
    updateClock();
    updateTextSize();
    window.addEventListener("resize", updateTextSize);
    
    
    $(document).ready(function() {
      // iOS web app full screen hacks.
      if (window.navigator.standalone == true) {
        // make all link remain in web app mode.
        $('a').click(function() {
          window.location = $(this).attr('href');
          return false;
        });
      }
    });
    @font-face {
      font-family: "Digital-7";
      src: url(digital-7.ttf) format("truetype");
    }
    
    p.customfont {
      font-family: "Digital-7";
    }
    
    html {
      background: #000000;
      font-family: "Digital-7", sans-serif;
      font-weight: normal;
      color: #00ffff;
    }
    
    .tz {
      color: pink;
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!DOCTYPE html>
    <html style="height:100%; margin:0; padding:0">
    
    <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name='viewport' content='width = device-width, initial-scale = 1, minimum-scale = 1, maximum-scale = 1, user-scalable = no, viewport-fit=cover'>
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
      <meta name="apple-mobile-web-app-title" content="Ampron Clock">
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <title>GeekHo Clock</title>
    
    </head>
    
    <body style="display:flex; height:100%; margin:0; padding:0; justify-content:center; align-items:center">
    
      <span id="clocktext" style="font-kerning:none"></span>
    
    </body>
    
    </html>
    Reply

Leave a Comment