Change colors in the middle of a JavaScript string?

by

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>

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

  39. Excellent blog you have here but I was curious about if you knew
    of any message boards that cover the same topics talked about here?

    I’d really love to be a part of community where I can get feed-back from other knowledgeable individuals that share
    the same interest. If you have any recommendations, please let me know.
    Thank you! http://cleckleyfloors.com/

    Reply

  86. You could definitely see your expertise in the article you write.
    The world hopes for even more passionate writers like you who are not afraid to mention how they believe.
    Always follow your heart.

    Reply

  89. I was more than happy to discover this page. I want to to thank you for your
    time for this fantastic read!! I definitely enjoyed every part of it and i also have you bookmarked to look at
    new stuff in your blog.

    Reply

  98. First of all I want to say wonderful blog!

    I had a quick question that I’d like to ask if you do not mind.
    I was curious to find out how you center yourself and clear your thoughts prior
    to writing. I have had a difficult time clearing my thoughts in getting
    my thoughts out there. I truly do take pleasure in writing however it just seems like the first 10 to 15 minutes are lost simply
    just trying to figure out how to begin. Any recommendations or hints?
    Cheers! quest bars http://bit.ly/3C2tkMR quest bars

    Reply