JSFiddle - React, Tailwind, and code Playground

by Humphry Huang

HTML

<h1>Expression -> Result(Number) -> Memory Model</h1>
<p>I'll try to convert it to Number, and to display the memory model.</p>
<input type="text" id="text"/>
<h2>Results</h2>
<div id="result">
</div>
<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">
    <div class="equals"><label>RESULT</label>$result$</div>
    <div class="type"><label>TYPE</label>$type$</div>
    <div class="math"><label>MATH EXPRESSION</label></div>
    <div class="memory"><label>BINARY</label>$memory$</div>
</script>

CSS

* { font-family: Consolas,Monaco,'Andale Mono',monospace; -moz-box-sizing: border-box; box-sizing: border-box; word-break:break-all; }
body { width: 54em; margin: 4em auto; }
input {
  display: block;
  width: 100%;
  height: 43px;
  padding: 10px 18px;
  font-size: 15px;
  line-height: 1.428571429;
  color: #333333;
  vertical-align: middle;
  background-color: #ffffff;
  background-image: none;
  border: 1px solid #cccccc;
  border-radius: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
          transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

input:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

#result { background: rgba(212,221,228,0.5); padding: .5em; }
label { display:inline-block; width: 10em; }

JavaScript

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]*$/ ,
		Denomalized : /^0.[01]*1$/ ,
		NotANumber : /^NaN$/ ,
		TheInfinity :/^-?Infinity$/ ,
		Zero : /^0$/ ,
	} ,
	getType : function (str) {
		for ( var i in this.regs ) {
			if ( this.regs[i].test(str) ) {
				return i ;
			}
		}
		return "Unexpected Value" ;
	}
} ;

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) ,
		memory = binary ;

	return {
		result : result ,
		type : type ,
		memory : memory
	}
}

var $text = $("#text") ,
    $result = $("#result") ,
    template = $("#template").text();

$text.on("input",function(){
    try {
        $result.html(template.regRep( getModel(this.value) )) ;
    } catch(e){
        $result.html(e) ;
    }
    
}) ;