JSFiddle - React, Tailwind, and code Playground

by briguy37

HTML

4-digit 24-hour time: <input id="fourDigitTime" maxLength="4" value="0000"/><br/><br/>
<input id="getTime" type="submit" value="Get Formatted Time"/><br/><br/>
Formatted Time:  <div id="formattedTime">12:00am</div>

JavaScript

getFormattedTime = function (fourDigitTime){
    var hours24 = parseInt(fourDigitTime.substring(0,2));
    var hours = ((hours24 + 11) % 12) + 1;
    var amPm = hours24 > 11 ? 'pm' : 'am';
    var minutes = fourDigitTime.substring(2);
    
    return hours + ':' + minutes + amPm;
};
    
document.getElementById('getTime').onclick = function(){
    var fourDigitTime = document.getElementById('fourDigitTime').value;
    if(fourDigitTime.length != 4){
    	alert('please enter the time as 4 digits.');
        return;
    }
    document.getElementById('formattedTime').innerHTML = getFormattedTime(fourDigitTime);
};