JSFiddle - React, Tailwind, and code Playground

by Humphry Huang

HTML

<h1>Enter an Expression：</h1>
	<input type="text" id="text">
	<ul id="result" class="result"></ul>
	<div class="try">
		<h2>Try them out:</h2>
		<dl>
			<dt>Extreme Numbers</dt>
			<dd><a href="#0">0</a></dd>
			<dd><a href="#NaN">NaN</a></dd>
			<dd><a href="#1/0">1/0</a></dd>
			<dd><a href="#1/-0">1/-0</a></dd>
		</dl>
		<dl>
			<dt>Big Numbers</dt>
			<dd><a href="#Number.MAX_VALUE">Number.MAX_VALUE</a></dd>
			<dd><a href="#Math.pow(2,53)-1">Math.pow(2,53)-1</a></dd>
			<dd><a href="#Math.pow(2,53)">Math.pow(2,53)</a></dd>
			<dd><a href="#Math.pow(2,53)+1">Math.pow(2,53)+1</a></dd>
			<dd><a href="#Math.pow(2,53)+2">Math.pow(2,53)+2</a></dd>
		</dl>
		<dl>
			<dt>Small Numbers</dt>
			<dd><a href="#Math.pow(2,-4)">Math.pow(2,-4)</a></dd>
			<dd><a href="#Math.pow(2,-1022)">Math.pow(2,-1022)</a></dd>
			<dd><a href="#Math.pow(2,-1023)">Math.pow(2,-1023)</a></dd>
			<dd><a href="#Math.pow(2,-1024)">Math.pow(2,-1024)</a></dd>
			<dd><a href="#Number.MIN_VALUE">Number.MIN_VALUE</a></dd>
		</dl>
	</div>
    <p>*<i>This app only supports webkit ＆ Firefox.</i></p>
	<h2>Reference</h2>
	<ul>
		<li>
			<a href="http://en.wikipedia.org/wiki/IEEE_754">IEEE 754</a>
		</li>
		<li>
			<a href="http://www.2ality.com/2012/04/number-encoding.html">"How numbers are encoded in JavaScript"</a>
		</li>
	</ul>
	<script type="text/html" id="template">
		<li class="result">
			$result$
        </li>
		<li class="type">
			$type$
		</li>
		<li class="memory">
			<span class="prefix">$mP$</span><span class="significant">$mX$</span><span class="exponent">$mY$</span><span class="plusminus">$mZ$</span>
		</li>
		<li class="binary">
			$binary$
		</li>
		<li class="math" $mathHide$>
			<span class="plusminus">
				<span>(-1)</span><sup>$Z$</sup>
			</span>
			·
			<span class="exponent">
				<span>2</span><sup>-1023+$Y$</sup>
			</span>
			·
			<span class="prefix">$mP$</span><span class="significant">$X$</span><sub>2</sub>
        </li>
	</script>

CSS

* { font-family: Consolas,Monaco,'Andale Mono',monospace; -moz-box-sizing: border-box; box-sizing: border-box; word-break:break-all; }
body { padding: 2em; margin: 0; border-left: 5px solid #666;  }
input { display: block; width: 100%; height: 43px; padding: 10px 1em 10px 7rem; font-size: 20px; line-height: 1.428571429; color: #333333; vertical-align: middle; background-color: #ffffff; border: 1px solid #F3F3F3; }
input:focus { border-color: #66afe9; outline: 0; color: #66afe9; }
h1 { font-size: 150%; margin-top: 0; }

.result { background: #F3F3F3; padding: 0 ; margin: 0; }
.result li { position: relative; padding: 0 .2rem 0 7rem; line-height: 2.4rem; list-style: none; }
.result li:nth-child(odd) { background: #f9f9f9; }
.result li:before { content: attr(class) ; width: 7rem; position: absolute; left: 0; top: 50%; bottom: 0; font-size: 1rem; height: 1rem; line-height: 1rem; text-align: center;
	margin-top: -.5rem; color: #666; text-transform: uppercase; }

.try { padding-left: 0;  }
.try dl:after { display: table; content: "\0020" ; clear: both; }
.try dt { float: left; width: 10em; }
.try dd { color: #667 ; background-color: #F6F6F6 ; float: left; margin: 0 .4rem .4rem 0 ; }
.try dd a { display: block; height: 100%; padding: .2em .6em; text-decoration: none;}

.result { font-size: 20px; }
.type { font-size: 18px; }
.binary { font-size: 12px; }

.prefix { color: #808284 }
.significant { color: #438DCB }
.exponent { color: #D78E28 }
.plusminus { color: #BD2025 }

JavaScript

"use strict" ;
	String.prototype.regRep = function(obj) {
	  return this.replace(/\$\w+\$/gi, function(matchs) {
		var returns = obj[matchs.replace(/\$/g, "")];
		return (returns + "") == "undefined"? "": returns;
	  });
	};

	var TYPE = {
		regs : {
			Normalized : /^-?1\.?[01]*$/ ,
			MaybeDenormalized : /^-?0\.[01]*1$/ ,
			NotANumber : /^NaN$/ ,
			Infinities :/^-?Infinity$/ ,
			Zero : /^0$/ ,
		} ,
		getType : function (str) {
			for ( var i in this.regs ) {
				if ( this.regs[i].test(str) ) {
					return i ;
				}
			}
			return "Unexpected Value" ;
		}
	} ;

	function getEnoughAfter( str , length , wit ) {
		var i = str.length ;
		while ( i < length ) {
			str += wit ? wit : '0' ;
			i++ ;
		}
		return str ;
	}

	function getEnoughBefore( str , length , wit ) {
		var i = str.length ;
		while ( i < length ) {
			str = wit ? wit + str : '0' + str ;
			i++ ;
		}
		return str ;
	}

	function getModel (input) {
		var input = input || "" ,
			result = typeof input !== "string" ? Number( eval(input.toString()) ) : Number( eval(input) ) ,
			binary = result.toString(2) ,
			type = TYPE.getType(binary) ,
			exponent , Z , mathHide , significant ,
			mX, mY, mZ , mP , absBinary ;

		// get Z
		if ( result < 0 ) {
			Z = 1;
		} else if ( result > 0 ) {
			Z = 0;
		} else {
			Z = "?" ;
		}

		absBinary = binary.replace(/\-/,"") ;

		switch( type ) {
		case "NotANumber" :
			binary = "not available" ;
			mathHide = "hidden" ;
			exponent = 2047 ;
			significant = getEnoughAfter( "" , 52 , "?" ) ;
			break ;
		case "Infinities" :
			binary = "not available" ;
			mathHide = "hidden" ;
			exponent = 2047 ;
			significant = "0" ;
			break ;
		case "Zero" :
			mathHide = "hidden" ;
			exponent = 0 ;
			significant = "0" ;
			break ;
		case "Normalized" :
			mP = "1." ;
			exponent = absBinary.lastIndexOf(".") > 0    ?
				1022 + absBinary.lastIndexOf(".") :
				1022 + absBinary.length ;
			significant = absBinary.replace(/\./ , "").substr(1,52) ;
			break;
		case...