JSFiddle - React, Tailwind, and code Playground

by tylerpachal

HTML

<p id="future"></p>
<p id="past"></p>

JavaScript

function formatTime(dateObj){

    var dateString = "";
    var hour = dateObj.getHours();  
    var minutes = dateObj.getMinutes();
    var pm = false;
    
    if (hour >= 12)
        pm = true;
    
    if (pm === true){
        var pmHour = (hour>=13) ? hour-12:hour;
        dateString += pmHour.toString();
        dateString += ":";
        dateString += minutes.toString();
        dateString += " pm";
    }
    
    else{
        dateString += hour.toString();
        dateString += ":";
        dateString += minutes.toString();
        dateString += " am";
    }
    
    return dateString;
}

var currentTime = new Date();

var futureTime = new Date(currentTime.getTime());
futureTime.setMinutes(futureTime.getMinutes() + 10);
var f = document.getElementById("future");
f.innerHTML = formatTime(futureTime);

var pastTime = new Date(currentTime.getTime());
pastTime.setMinutes(pastTime.getMinutes() - 50);
var f = document.getElementById("past");
f.innerHTML = formatTime(pastTime);