nick34992
3/16/2017 - 8:40 PM

JavaScript: Mark Time

JavaScript: Mark Time

p#demo {
    font-size: 700%;
    font-family: Helvetica, Arial, Sans-Serif;
}
p#title {
    font-size: 150%;
}
.button {
    font-size: 200%;
    padding: 10px;
}
// add leading zeros, e.g. 09:00
function leadZero(i) {
    if (i < 10) {
        i = "0" + i;
    }
    return i;
}

// logic for 'Mark Time' button
function markTime() {
    var d = new Date();
    var t = document.getElementById('demo');
    var h = leadZero(d.getHours());
    var m = leadZero(d.getMinutes());
    var s = leadZero(d.getSeconds());
    t.innerHTML = `${h}:${m}:${s}`;
}
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p id="title">Click to mark current hours, minutes and seconds.</p>
    <button class="button" onclick="markTime()">Mark Time</button>
    <p id="demo"></p>
    <script type="text/javascript" src="script.js"></script>
</body>
</html>