JSFiddle - React, Tailwind, and code Playground

by der_robert

HTML

<div class="content">  
    <span id="time"></span>
    <span id="hex" class="hidden"></span>
  </div>

CSS

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#time, #hex{
  font-family: arial;
  font-weight: bold;
  font-size: 30px;
}

.hidden{
  display: none;
}

JavaScript

$("span#time").on("click",function(){
    	$("span#time").addClass("hidden");
      $("span#hex").removeClass("hidden");
    });
    
    $("span#hex").on("click",function(){
    	$("span#hex").addClass("hidden");
      $("span#time").removeClass("hidden");
    });

		function getTime() {
			var date = new Date(),
				hour = date.getHours();
			return {
				hour: appendZero(hour),
				minute: appendZero(date.getMinutes()),
				second: appendZero(date.getSeconds())
			};
		}

		function appendZero(num) {
			if (num < 10) {
				return "0" + num;
			}
			return num;
		}

		function refreshTime() {
			var now = getTime();
     
      var xhour = Math.round(parseInt(now.hour)   * 10.625).toString(16);
      var xmin  = Math.round(parseInt(now.minute) * 4.25).toString(16);
      var xsec  = Math.round(parseInt(now.second) * 4.25).toString(16);
      
      $("body").css("backgroundColor","#"+xhour+xmin+xsec);
      $("#time").html(now.hour+":"+now.minute+":"+now.second);
      $("#hex").html("#"+xhour+xmin+xsec);
		}

		refreshTime();
setInterval(refreshTime, 1000);