JSFiddle - React, Tailwind, and code Playground
HTML
<!--
/**
* @author Larry Battle <http://bateru.com/news/contact-me>
* @date May 16, 2012
* @license MIT and GPLv3
*/
-->
<!DOCTYPE HTML PUBLIC>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/qunit/git/qunit.css" type="text/css" media="screen" />
</head>
<body>
<fieldset>
<legend>Javascript Demo: toFixed() vs decimalExpansion()</legend>
Fraction:
<input type="text" class="inputs" name="input-numerator" id="input-numerator" size="4"> / <input type="text" class="inputs" id="input-denominator" size="4"><br/><br/>
Decimal Length:
<input type="text" class="inputs" id="decimalLength">
<br/>
<dl>
<dt>Output from ( a/b ).toFixed( decimalLength )</dt>
<dd><textarea cols=45 id="javascript-output"></textarea><br/></dd>
</dl>
<dl>
<dt>Output from decimalExpansion( a, b, decimalLength )</dt>
<dd><textarea cols=45 id="decimalExpansion-output"></textarea><br/></dd>
</dl>
<input type="button" id="exampleButton" value="Generate Random Example"/>
<br/>
</div>
For more information visit: <a href="http://bateru.com/news/?s=decimal+expansion">Bateru.com/news/</a>
</fieldset>
<h1 id="qunit-header">Decimal Expansion example</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture">test markup, will be hidden</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://code.jquery.com/qunit/git/qunit.js"></script>
</body>
</html>
JavaScript
$(function () {
// main source
// from jquery 1.7.2
var isNumeric = function (val) {
return !isNaN(parseFloat(val)) && isFinite(val);
};
// has problems with "361111111111111111 / 86".
// real answer = 4.19896640826873384884e15
// javascript gives = 4198966408268734.00000000000000000000
// decimalExpansion gives 4198966408268734.7674418604651
/**
* @author Larry Battle <http://bateru.com/news/contact-me>
* @date May 16, 2012
* @license MIT and GPLv3
*/
//decimalExpansion returns a string representation of a divided by b to a fixed length.
// All the paramaters must be whole numbers.
// Example: decimalExpansion( 1, 3, 3 ) === "0.333"
var decimalExpansion = function (top, bottom, decLength) {
if (!isNumeric(top) || !isNumeric(bottom) || !isNumeric(decLength) || !bottom) {
return null;
}
var sign = ((top * bottom) != Math.abs(top * bottom)) ? "-" : "";
top = Math.abs(top);
bottom = Math.abs(bottom);
decLength = Math.abs(decLength);
var result = Math.floor(top / bottom),
remainder = top % bottom,
maxDecimal = 100,
i = Math.min(Math.max(0, decLength), maxDecimal) + 1;
if (1 < i) {
result += ".";
while (i--) {
top = remainder * 10;
remainder = top % bottom;
result += "" + Math.floor(top / bottom);
}
result = result.replace(/(\d)(\d)$/, function (match, a, b) {
return +b > 4 ? +a + 1 : a;
});
}
return sign + result;
};
// test cases.
test("test for invalid inputs", function () {
equal(decimalExpansion("s", 3, 1), null);
equal(decimalExpansion(1, "s", 1), null);
equal(decimalExpansion(1, "s", -1), null);
equal(decimalExpansion(1, 0, 1), null);
});
test("test whole numbers result...