Anjanesh

Anjanesh

Cash Register Effect

Exactly 10 years ago, I was asked to create a webpage containing a cash register effect for the price amount of the result. I didn't do it then. Now it's here.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Cash Register</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
function CashRegister(start, end, el = 'amount')
{
    const diff = end - start; // 5000
    let int = 10;
    let t = diff / int; // 500

    let i = start;

    let stopRoll = setInterval(roll, int);

    function roll()
    {
        console.log(i);
        document.getElementById(el).innerHTML = i;

        i += 35; // update every $35

        if ((i - start) % t == 0)
        {
            console.log("int = ", int);
            clearInterval(stopRoll);
            stopRoll = setInterval(roll, int--);
        }        

        if (i > end)
        {
            i = end;
            clearInterval(stopRoll);
            document.getElementById(el).innerHTML = i;
        }
    }
}
</script>
</head>
<body>

<h1>$<span id="amount"></span></h1>
<script>CashRegister(0, 5000, 'amount');</script>

</body>
</html>

anjanesh.s3.amazonaws.com/cash-register.html

This was for a front-end developer interview for Cleartrip circa 2011.

 
Share this