Ensuring the clock says 12:01 rather than 0:01

Question

I am creating this clock .

The code is very straight forward. It is run by using js as below. The problem is when the clock ticks between 12-1, it shows 0:01pm for example. That is what it should do. However, I want this to say 12:01 pm. That I think will make more sense to user.

Similarly, if it is morning time, then the clock should say 12:01 am rather than 0:01 am.

Definitely 1:01am or 1:01pm is ok.

How to fix that in the code? I have a codepen http://codepen.io/hellouniverse/pen/GraxaQ

"use strict";
var getDate = function getDate() {
    var date = new Date();

    var month = date.getMonth();
    var day = date.getDate();
    var hour = date.getHours();
    var minutes = date.getMinutes();

    var monthNames = [
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December"
    ];
    var timePeriod = hour < 12 ? "am" : "pm";
    var dateString;
    var timeString;

    hour = hour % 12;
    hour = hour == 0 ? 1 : hour;

    hour = (hour < 10 ? "0" : "") + hour;
    minutes = ("0" + minutes).slice(-2);

    dateString = monthNames[month] + " " + day;
    timeString = hour + ":" + minutes + " " + timePeriod;

    document.getElementById("js-date").innerHTML = dateString;
    document.getElementById("js-time").innerHTML = timeString;
};

if ($("#js-nova_evo_clock").length > 0) {
    setInterval(function() {
        getDate();
    }, 500);
}

And, the html looks like below

<div class="pane-nova-widgets-nova-clock">
<div class="nova_evo_clock" id="js-nova_evo_clock"><span id="js-time">&nbsp;</span><span class="seperator-clock">,</span><span id="js-date">&nbsp;</span></div></div>

Also, if you think the code can get any better, then feel free to suggest

Answer 1

Only thing i found wrong is this

 hour = hour == 0 ? 1 : hour;

which shoulf have been

 hour = hour == 0 ? 12 : hour;