JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

HTML

<div class="time"><h1 id="timetext">8:17</h1></div>

CSS

.time {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 100px 100px 0 0;
    border-color: #007bff transparent transparent transparent;
}
body {
    margin:0px;
}
.time h1 {
    position:fixed;
    top:-5px;
    left:0px;
    -webkit-transform:rotate(-45deg);
    color:white;
}

JavaScript

window.onload=startTime();

function startTime()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
// add a zero in front of numbers<10
m=checkTime(m);
// make sure hours are 12 hour time
h=checkhour(h);
document.getElementById('timetext').innerHTML=h+":"+m;
t=setTimeout(function(){startTime()},1000);
}

function checkTime(i)
{
if (i<10)
  {
  i="0" + i;
  }
return i;
}

function checkhour(i) {
    if (i <= 12) {
        return i;
    } else {
        return i%12;
    }
}