JSFiddle - React, Tailwind, and code Playground

by rionmonster

HTML

<div id='time'>
    <div id='currenttime'>
        
    </div>
    <div id='day'>
        
    </div>
    <div id='date'>
        <span id='month'></span> <span id='dayth'></span>
    </div>
</div>

CSS

body{ background-color: black; opacity: 0.95;}

#time
{
     position: absolute;
     bottom: 0;
     left: 30px;
     border: 2px solid white;
     color: White;
     font-family: Segoe UI;
     width: 525px;;
     height: 270px;
}

#currenttime
{
     font-size: 100px;   
     color: White;
}

#day { font-size: 60px; margin-top: -30px; color: White;}
#date { font-size: 60px; margin-top: -10px; color: White;}

JavaScript

initializeClock();
window.setInterval(function(){setClockTime();},60000);

function setClockTime()
{
   var now    = new Date();
   var hour   = now.getHours();
   var minute = now.getMinutes();
   var ap = (hour   > 11) ? "PM" : "AM";
   hour = (hour > 12) ? hour - 12 : (hour == 0) ? 12 : hour;
   if (minute < 10) { minute = "0" + minute; }
   $("#currenttime").text(hour +':' +minute +" " +ap).hide().fadeIn();
}

function initializeClock()
{
      setClockTime();
      var d=new Date();
      var wd= [ 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
      $("#day").text(wd[d.getDay()]);
      var m= [ 'January', 'February', 'March', 'April', 'May', 'June', 'July','August','September','October','November','December'];
      $("#month").text(m[d.getMonth()]);
      
      var dayth = getGetOrdinal(d.getDate());
      $("#dayth").text(dayth);
      
}

function getGetOrdinal(n) {
   var s=["th","st","nd","rd"],
       v=n%100;
   return n+(s[(v-20)%10]||s[v]||s[0]);
}