Skip to content

Instantly share code, notes, and snippets.

@anjanesh

anjanesh/alpinejs-onchange.html

Created August 21, 2022 16:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anjanesh/e629471dba98f7f5d244c9dba126bd2e to your computer and use it in GitHub Desktop.
Save anjanesh/e629471dba98f7f5d244c9dba126bd2e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
alpinejs-onchange.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AlpineJS - Indian Number System for Amount in Rupees</title>
<script src="https://unpkg.com/alpinejs@3.10.3/dist/cdn.min.js" defer></script>
<script>
const INR_THOUSAND = 1000;
const INR_LAKH = 100 * INR_THOUSAND;
const INR_CRORE = 100 * INR_LAKH;
const formatter = new Intl.NumberFormat('en', { minimumFractionDigits: 0, maximumFractionDigits: 2 });
function amountInINR(amount)
{
INR = amount;
ext = "";
if (amount > INR_CRORE)
{
INR = amount / INR_CRORE;
ext = INR == 1 ? "crore" : "crores";
INR = formatter.format(amount / INR_CRORE, 2) + ' ' + ext;
}
else if (amount > INR_LAKH)
{
INR = amount / INR_LAKH;
ext = INR == 1 ? "lakh" : "lakhs";
INR = formatter.format(amount / INR_LAKH, 2) + ' ' + ext;
}
else if (amount > INR_THOUSAND)
{
INR = amount / INR_THOUSAND;
ext = INR == 1 ? "lakh" : "K";
INR = formatter.format(amount / INR_THOUSAND, 2) + ' ' + ext;
}
else
{
INR = formatter.format(amount, 2);
}
return INR;
}
console.log(amountInINR(15000));
console.log(amountInINR(1500000));
console.log(amountInINR(150000000));
console.log(amountInINR(9876543210));
</script>
</head>
<body>
<div x-data="{ indian_amount: '' }">
<input type="text" name="amount" required id="amount" x-model="indian_amount" />
&nbsp;₹<span x-text="amountInINR(indian_amount)"></span>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment