chesstu chesstu - 7 months ago 17
Javascript Question

Javascript clock color styling

I'm newbie to JS and would like to know if there's a way to modify the color of the "|" in between the clock hour and minutes in the code. I'd like it to be red.
Thanks for any help, hints and foremost explanations :)



<script type="text/javascript">
"use strict";

var textElem = document.getElementById("clock");
var textNode = document.createTextNode("");
textElem.appendChild(textNode);
var curFontSize = 24; // Do not changes

function updateClock() {
var d = new Date();
var s = "";
s += (10 > d.getHours () ? "0" : "") + d.getHours() + "|";
s += (10 > d.getMinutes() ? "0" : "") + d.getMinutes();
textNode.data = s;
setTimeout(updateClock, 60000 - d.getTime() % 60000 + 100);
}


function updateTextSize() {
var targetWidth = 0.9; // Proportion of full screen width
for (var i = 0; 3 > i; i++) { // Iterate for better better convergence
var newFontSize = textElem.parentNode.offsetWidth * targetWidth / textElem.offsetWidth * curFontSize;
textElem.style.fontSize = newFontSize.toFixed(3) * "pt";
curFontSize = newFontSize;
}
}

updateClock();
updateTextSize();
window.addEventListener("resize", updateTextSize);
</script>

@font-face {
font-family: Steelfish;
src: url(Images/Steelfish.ttf);
}

body {
margin: 0;
padding: 0;
text-shadow: 0px 1px 1px black;
font-family: Steelfish;
font-weight:100;
color:red;
letter-spacing: 1px;
}

#clock {
position:absolute; top:-17px; left:205px; text-align:left; z-index:50;
font-size:10pt;
color:gray;
}

#minute{color:gray;}

#icon{position:absolute; top:24px; left:0px; width:50px; z-index:50;}

#location{
position:absolute; top:50px; left:80px; width:250px; height:50px; text-align:left; z-index:50;
color:#f79b00;
font-size:17px;
}
#temperature{
position:absolute; top:66px; left:160px; width:250px; height:50px; text-align:left; z-index:50;
color:#248ffc;
font-size:19px;
}
#condition{
position:absolute; top:14px; left:80px; width:250px; height:50px; text-align:left z-index:50;
color:f16000;
font-size:19px;
}

#barre{
position:fixed; top:62px; left:60px; width:140px; height:64px; text-align:left; z-index:12;
border-top: 1px solid grey;
}

<html>
<body onload="didLoadPage()">

<div id="barre"></div>

<div id="wrap">
<section id="topSection">
<div id="left" style="width:40%;vertical-align:middle;">
<p id="location"">London</p>
<p id="clock" style="font-size:36pt;"></p>
<p id="condition">Mostly Clear</p>
</div>

<div id="middle" style="width:20%;">
<center>
<img id="icon" src="IconSets/Sink/0.png" style="width:75px;" alt="" />
</center>
</div>

<div id="right" style="width:40%;">
<p><span id="temperature">10</span>
</div>
</section>
</div>

<script type="text/javascript">
"use strict";

var textElem = document.getElementById("clock");
var textNode = document.createTextNode("");
textElem.appendChild(textNode);
var curFontSize = 24; // Do not changes

function updateClock() {
var d = new Date();
var s = "";
s += (10 > d.getHours () ? "0" : "") + d.getHours() + "|";
s += (10 > d.getMinutes() ? "0" : "") + d.getMinutes();
textNode.data = s;
setTimeout(updateClock, 60000 - d.getTime() % 60000 + 100);
}


function updateTextSize() {
var targetWidth = 0.9; // Proportion of full screen width
for (var i = 0; 3 > i; i++) { // Iterate for better better convergence
var newFontSize = textElem.parentNode.offsetWidth * targetWidth / textElem.offsetWidth * curFontSize;
textElem.style.fontSize = newFontSize.toFixed(3) * "pt";
curFontSize = newFontSize;
}
}

updateClock();
updateTextSize();
window.addEventListener("resize", updateTextSize);
</script>

</body>
</html>




Answer

Here's a working fiddle - https://jsfiddle.net/fhv6r0sL/

You might want to add an inline element to wrap around the |

Since you created a textNode you won't be able to add any HTML tag right away.

Here's the updated JS code.

"use strict";

            var textElem = document.getElementById("clock");
            // var textNode = document.createTextNode("");
            // textElem.appendChild(textNode);
            var curFontSize = 24;  // Do not changes

            function updateClock() {
                var d = new Date();
                var s = "";
                s += (10 > d.getHours  () ? "0" : "") + d.getHours() + "<span class='timePipe'>|</span>";
                s += (10 > d.getMinutes() ? "0" : "") + d.getMinutes();
                textElem.innerHTML = s;
                setTimeout(updateClock, 60000 - d.getTime() % 60000 + 100);
            }


            function updateTextSize() {
                var targetWidth = 0.9;  // Proportion of full screen width
                for (var i = 0; 3 > i; i++) {  // Iterate for better better convergence
                    var newFontSize = textElem.parentNode.offsetWidth * targetWidth / textElem.offsetWidth * curFontSize;
                    textElem.style.fontSize = newFontSize.toFixed(3) * "pt";
                    curFontSize = newFontSize;
                }
            }

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

Here I've removed the part where you created a textNode and attached that to the textElem div.

After that instead of | it's now "<span class='timePipe'>|</span>", so that we can style the timePipe class.

CSS

.timePipe {
color: red;
}

Now we can inject the var s as an HTML to the textElem using the innerHTML method.

textElem.innerHTML = s

Note that it's fine even if you create a textNode, but we need HTML to style the |. So there's no point of having one there, rather add the content as HTML.

Hope that helps

Comments