JSFiddle - React, Tailwind, and code Playground

by Muneeb JS

HTML

<div>
  <h3 id="time1">
  </h3>
  <h3 id="time2">

  </h3>
  <h3 id="time3">

  </h3>
  <h3 id="time4">

  </h3>
</div>

CSS

.green {
  color: green;
}

JavaScript

function timeConversion(s) {
  let h24;
  let m24;
  let sec24;

  const splittedDate = s.split(":");
  const h = parseInt(splittedDate[0], 10);
  const m = parseInt(splittedDate[1], 10);
  const sec = parseInt(splittedDate[2][0] + splittedDate[2][1], 10);
  const meridiem = splittedDate[2][2] + splittedDate[2][3];

  if (meridiem === "AM") {
    if (h === 12) {
      h24 = '00';
    } else {
      h24 = h;
      if (h24 < 10) {
        h24 = '0' + h24;
      }
    }
    m24 = m;
    sec24 = sec;
  } else if (meridiem === "PM") {
    if (h === 12) {
      h24 = h
    } else {
      h24 = h + 12;
      if (h24 < 10) {
        h24 = '0' + h24;
      }
    }
    m24 = m;
    sec24 = sec;
  }


  if (m24 < 10) {
    m24 = '0' + m24;
  }

  if (sec24 < 10) {
    sec24 = '0' + sec24;
  }

  return h24 + ":" + m24 + ":" + sec24;
}
document.getElementById('time1').innerHTML = "12:00:00AM => <span class='green'>" + timeConversion("12:00:00AM") + "</span>";
document.getElementById('time2').innerHTML = "06:40:03AM => <span class='green'> " + timeConversion("06:40:03AM") + "</span>";
document.getElementById('time3').innerHTML = "1:10:00PM =>  <span class='green'> " + timeConversion("1:10:00PM") + "</span>";
document.getElementById('time4').innerHTML = "12:00:00PM =>  <span class='green'> " + timeConversion("12:00:00PM") + "</span>";