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.