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>

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

https://codepen.io/anjanesh/pen/ZEejMLx

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

Cash Register Effect

Comments

More from this blog

Email validity checker using Google's JSON API for DNS over HTTPS (DoH) in Google Sheets

Getting picoclaw to work on Windows

The core use-case of TypeScript

Hashnode's GraphQL API for RSS feeds

make makemigrations work again

Command Palette

Comments

More from this blog