Skip to main content

Cash Register Effect

Published 1 min readMarkdown

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

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

174 views

About the author

  • I am a web consultant from Navi Mumbai. Mainly dealt with LAMP stack, now into Django and getting into Laravel and Cloud. Founder of nerul.in and gaali.in

No comments yet. Be the first to comment.