Simple Countdown

<style>
    body {
    margin: 0;
    padding: 0;
}
.container {
    background: #222;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
#timer {
    color: #fff;
    font-size: 4rem;
}
.label {
    font-size: 2.5rem;
    padding-left: 0.25rem;
}
</style>
<div class="container">
    <p id="timer">
        <span id="timer-days"></span>
        <span id="timer-hours"></span>
        <span id="timer-mins"></span>
        <span id="timer-secs"></span>
    </p>
</div>
<?php
    // $KGB = date('Y-m-d H:i:s', strtotime($pegawai->KENAIKANBERIKUTNYA));
    $KGB = date('Y-m-d H:i:s', strtotime("01-04-2020"));
?>
<script>
    var endDate = new Date("<?=$KGB?>").getTime(),
    timer = setInterval(function() {
        let e = (new Date).getTime(),
            n = endDate - e;
        if (n >= 0) {
            let e = Math.floor(n / 864e5),
                t = Math.floor(n % 864e5 / 36e5),
                l = Math.floor(n % 36e5 / 6e4),
                a = Math.floor(n % 6e4 / 1e3);
            document.getElementById("timer-days").innerHTML = e + "<span class='label'>DAY(S)</span>", document.getElementById("timer-hours").innerHTML = ("0" + t).slice(-2) + "<span class='label'>HR(S)</span>", document.getElementById("timer-mins").innerHTML = ("0" + l).slice(-2) + "<span class='label'>MIN(S)</span>", document.getElementById("timer-secs").innerHTML = ("0" + a).slice(-2) + "<span class='label'>SEC(S)</span>"
        } else document.getElementById("timer").innerHTML = "The countdown is over!"
    }, 1e3);
</script>