JSFiddle - React, Tailwind, and code Playground

by mgiuffrida

HTML

<div id="time"></div>
<div id="is24hour"><span class="is12">12</span> / <span class="is24">24</span></div>
<div id="locked">locked</div>

CSS

.bold {
  font-weight: bold;
}

JavaScript

function displayTime(is24Hour) {
  var d = new Date();
  var dateStr = '';
  if (is24Hour) {
    dateStr += d.getHours();
  } else {
    var hour = d.getHours();
    if (hour > 12)
      hour %= 12;
    dateStr += hour;
  }
  dateStr += ':';
  if (d.getMinutes() < 10)
    dateStr += '0';
  dateStr += d.getMinutes() ;
  if (!is24Hour)
    dateStr += d.getHours >= 12 ? ' pm' : ' am';
    
  document.querySelector('#time').innerText = dateStr;
  
  var state12 = document.querySelector('#is24hour .is12');
  var state24 = document.querySelector('#is24hour .is24');
  if (is24Hour) {
    state24.classList.add('bold');
    state12.classList.remove('bold');
  } else {
    state12.classList.add('bold');
    state24.classList.remove('bold');
  }
}

function setLockedState(isLocked) {
  document.querySelector('#locked').innerText = isLocked ? 'locked' : 'unlocked';
}

var buttons = [false, false];
function getButtonTouched(buttonId) {
  if (buttonId < 0 || buttonId > 1)
    throw new Error('buttonId out of range');
  return buttons[buttonId];
}

var lastTime = 0;
function getTime() {
  var time = new Date().valueOf();
  // TODO: requestAnimationFrame
  while (time == lastTime)
    time = new Date().valueOf();
  lastTime = time;
  return time;
}

function loop() {
}

getTime();
displayTime(false);


// function displayTime(is24Hour) {
// function setLockedState(isLocked) {
// function getButtonTouched(buttonId) {
// function getTime() {

function loop(state) {
  getTime();
  displayTime(false);
}
loop();
for (var i = 0; i < 1000; i++) {
  loop();
}