The Simple Clock

Last updated on May 31st, 2023

In this guide, you will build your first Custom App, a simple digital clock.

Create your first index.html file

Every App has a single entry point, the ” index.html ” file. The web viewer loads up this HTML file locally from the storage of the Player.

Let’s create a sample. Using your favorite editor, create a file called ” index.html ” with the following contents:

index.html

<!DOCTYPE html>
<html>
<head>
<script>

function startTime() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
    m = checkTime(m);
    s = checkTime(s);
    document.getElementById('txt').innerHTML =
    h + ":" + m + ":" + s;
    var t = setTimeout(startTime, 500);
}
function checkTime(i) {
    if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
    return i;
}
</script>
</head>
<body onload="startTime()">

<div id="txt" style="font-size: 48px"></div>

</body>
</html>