Tuesday, July 07, 2009

Having fun with jquery -- Numbers to words

Having some fun with jquery, its cool btw...
Type in some numbers in the input box, (it should be in focus when u load this page, if not well u know who to blame - jquery of course, not me :-P)
And if you (un)knowingly type in something other than a number, it should tell you whats wrong.
Then click "Convert to words" and you'll get your number in words... one in Indian number system and another one in international standard. And, if you are really trying this out, you can use keyboard enter, escape.. i bound them to calculate and hide the results etc.

Just some plain short fun :)

[you can use enter and escape]
Enter a number:


And yeah, of course, here's the code (use this link to convert ur javascript into blogger friendly code):


<script type="text/javascript" src="http://abhi-sanoujam-blogspot-posts.googlecode.com/svn/trunk/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function NumberToWords() {

var units = [ "Zero", "One", "Two", "Three", "Four", "Five", "Six",
"Seven", "Eight", "Nine", "Ten" ];
var teens = [ "Eleven", "Twelve", "Thirteen", "Fourteen", "Fifteen",
"Sixteen", "Seventeen", "Eighteen", "Nineteen", "Twenty" ];
var tens = [ "", "Ten", "Twenty", "Thirty", "Forty", "Fifty", "Sixty",
"Seventy", "Eighty", "Ninety" ];

var othersIndian = [ "Thousand", "Lakh", "Crore" ];

var othersIntl = [ "Thousand", "Million", "Billion", "Trillion" ];

var INDIAN_MODE = "indian";
var INTERNATIONAL_MODE = "international";
var currentMode = INDIAN_MODE;

var getBelowHundred = function(n) {
if (n >= 100) {
return "greater than or equal to 100";
};
if (n <= 10) {
return units[n];
};
if (n <= 20) {
return teens[n - 10 - 1];
};
var unit = Math.floor(n % 10);
n /= 10;
var ten = Math.floor(n % 10);
var tenWord = (ten > 0 ? (tens[ten] + " ") : '');
var unitWord = (unit > 0 ? units[unit] : '');
return tenWord + unitWord;
};

var getBelowThousand = function(n) {
if (n >= 1000) {
return "greater than or equal to 1000";
};
var word = getBelowHundred(Math.floor(n % 100));

n = Math.floor(n / 100);
var hun = Math.floor(n % 10);
word = (hun > 0 ? (units[hun] + " Hundred ") : '') + word;

return word;
};

return {
numberToWords : function(n) {
if (isNaN(n)) {
return "Not a number";
};

var word = '';
var val;

val = Math.floor(n % 1000);
n = Math.floor(n / 1000);

word = getBelowThousand(val);

if (this.currentMode == INDIAN_MODE) {
othersArr = othersIndian;
divisor = 100;
func = getBelowHundred;
} else if (this.currentMode == INTERNATIONAL_MODE) {
othersArr = othersIntl;
divisor = 1000;
func = getBelowThousand;
} else {
throw "Invalid mode - '" + this.currentMode
+ "'. Supported modes: " + INDIAN_MODE + "|"
+ INTERNATIONAL_MODE;
};

var i = 0;
while (n > 0) {
if (i == othersArr.length - 1) {
word = this.numberToWords(n) + " " + othersArr[i] + " "
+ word;
break;
};
val = Math.floor(n % divisor);
n = Math.floor(n / divisor);
if (val != 0) {
word = func(val) + " " + othersArr[i] + " " + word;
};
i++;
};
return word;
},
setMode : function(mode) {
if (mode != INDIAN_MODE && mode != INTERNATIONAL_MODE) {
throw "Invalid mode specified - '" + mode
+ "'. Supported modes: " + INDIAN_MODE + "|"
+ INTERNATIONAL_MODE;
};
this.currentMode = mode;
}
}
}

function clear() {
$("#errSpan").hide();
$("#resultDiv").hide();
}

var num2words = new NumberToWords();

function translate() {
clear();
var input = $("#input").val();
if (isNaN(input)) {
$("#errSpan").html("This is not a number - " + input);
$("#errSpan").show();
$("#input").focus();
return;
};

num2words.setMode("indian");
var indian = num2words.numberToWords(input);

num2words.setMode("international");
var intl = num2words.numberToWords(input);

$("#resultDiv").html(
"<table bgcolor='#CCFFFF'><tr><td>In India</td><td>" + indian
+ "</td></tr><tr><td>Internationally</td><td>" + intl
+ "</td></tr></table>");
$("#resultDiv").show("slow");

}

$(document).ready( function() {
$("#resultDiv").hide();
$("#input").focus();
$(document).keypress( function(e) {
if (e.keyCode == 27) {
clear();
};
if (e.keyCode == 13) {
translate();
};
});
});
</script>

<div id="content" align="center">[you can use enter and escape]<br />
<span id="errSpan" style="color: #FF0000;"></span>
<div>Enter a number: <input id="input" type="text" size="15" /><input
type="button" onclick="translate()" value="Convert to words" /></div>

<div id="resultDiv" style="border: solid black 1px;"></div>
</div>

16 comments:

abhi.sanoujam said...

Notes to myself. Gotchas when posting javascript to blogger:

1) You need to have your js in one single line

2) If you do some OOPs in your javascript, don't forget to end your statements with ";", specially if you are declaring functions as a variable. Like this:
var myFunc : function(someArg) {
alert('Hi');
};
I'm talking about the last ";" at the third line.

3) If you are using this link to convert your javascript into one single line, don't forget to strip off one liner comments from your code. I know its my fault there :)

bembem said...

nice

Chris said...

1000

In India One Thousand Zero
Internationally One Thousand Zero

Anonymous said...

Hi, thanks for the code. Very helpful indeed. I modified it a bit to add the "cents" part so that I can translate dollars & cents. =)

abhi.sanoujam said...

Cool... hope you fixed the bug Chris pointed out above, should be quite easy to fix :)

Anonymous said...

Hi,

Thanks for this script! Any chance you can post the mod for dollars and cets?

Thanks,

TonyG

oshkosh said...

Hi, I was the anonymous guy on Jan 4th. Thanks to your post I've written my first jquery plugin =).

Currently only works for converting numbers to dollars & cents.

Plugin with example can be downloaded at this address: http://lab.okijana.com/num2words/num2words.zip

Thanks!

Anonymous said...

hacked the bug by replacing
"Zero" with ""

however won't display zero.

RAVI GUPTA said...

nice post, It saved a lot time. Thanks.

Anonymous said...

@oskosh, thanks for the link.. it helps me big :)

Anonymous said...

wewewe

Mr.sovann said...

@oshkosh: Thanks so much for the link... :)

Anonymous said...

@oshkosh: Thanks so much for the link... :)

Anonymous said...

@oshkosh: Thanks so much for the link... :)

Anonymous said...

Late to visit the blog thank you for your post

Here the code to remove extra zeros.

Change the getBelowHundred bit as

var getBelowHundred = function(n) {
if (n >= 100) {
return "greater than or equal to 100";
};
if (n > 0 && n <= 10) {
return units[n];
}else if(n == 0){
return "";
};
if (n <= 20) {
return teens[n - 10 - 1];
};
var unit = Math.floor(n % 10);
n /= 10;
var ten = Math.floor(n % 10);
var tenWord = (ten > 0 ? (tens[ten] + " ") : '');
var unitWord ="";
alert(unit);
if(unit != 0) unitWord = (unit > 0 ? units[unit] : '');
return tenWord + unitWord;
};

Alkshendra said...

thanks mate! it saved me a lot of time!

Post a Comment