Fizz Buzz Clock

Matt Barrett · JSFiddle ·

2 min read Original article ↗

An unusable fizzbuzz clock for demonstration.

by Matt Barrett

HTML

<body onload="updateTime()">
    <p>A completely unusable FizzBuzz Clock.</p>
    <div id="clock"></div>
</body>

CSS

#clock span {
    width:80px;
    display:inline-block;
    text-align:center;
    font-size:18px;
}

JavaScript

function updateTime() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var s = today.getSeconds();
    m = checkTime(m);
    s = checkTime(s);

    //old quick way - not used
    function makeFizz(a) {
        var x = a;
        //added check for 0, so 0 displays as 00
        if (a % 3 == 0 && a % 5 == 0 && a != 0) {
            x = 'FizzBuzz';
        } else if (a % 3 == 0 && a != 0) {
            x = 'Fizz';
        } else if (a % 5 == 0 && a != 0) {
            x = 'Buzz';
        }
        return x;
    }
    
    //better way imo
    function makeFizz2(a) {
        var x = '';
        //still check for 0 so it displays as 00
        if (a % 3 == 0 && a != 0) x += 'Fizz';
        if (a % 5 == 0 && a != 0) x += 'Buzz';
        if (x == '') x = a;
        
        return x;
    }

    s = makeFizz2(s);
    m = makeFizz2(m);
    h = makeFizz2(h);

    document.getElementById('clock').innerHTML = '<span>' + h + "</span>:<span>" + m + "</span>:<span>" + s + '</span>';
    var t = setTimeout(function () {
        updateTime()
    }, 500);
}

//add zero in front for 1-9
function checkTime(i) {
    if (i < 10) i = "0" + i;
    return i;
}