clockfiddle

HTML

<div class="time">
                            <div id="MyClockDisplay" class="clock" onload="showTime()"></div>
                            <script src="/scripts/clock.js"></script>
                        </div>

CSS

.time {
    display: flex;
    text-align: center;
    border-radius: 5px;
    justify-content: center;
}

.clock {
    font-weight: bold;
    letter-spacing: 4px;
}

JavaScript

function showTime(){
    var date = new Date();
    var h = date.getHours(); // 0 - 23
    var m = date.getMinutes(); // 0 - 59
    var s = date.getSeconds(); // 0 - 59
    var session = "AM";
    
    if(h == 0){
        h = 12;
    }
    
    if(h > 12){
        h = h - 12;
        session = "PM";
    }
    
    h = (h < 10) ? "0" + h : h;
    m = (m < 10) ? "0" + m : m;
    s = (s < 10) ? "0" + s : s;
    
    var time = h + ":" + m + ":" + s + " " + session;
    document.getElementById("MyClockDisplay").innerText = time;
    document.getElementById("MyClockDisplay").textContent = time;
    
    setTimeout(showTime, 1000);
    
}

showTime();