Mortgage Calc

looking good to go (minus CSS)

by Henry Stupp

HTML

<body>
		
		<div id="inputs">
			<div>
				<label>Choose Purchase Price</label>	
				<div class="currencyinput">$<input id="price" type="text" value="250,000"></div>
			</div>
			<div>
				<label>Choose Down Payment</label>	
				<div class="currencyinput">$<input id="downpay" type="text" value="20,000" ></div>
				<div class="currencyinput percent"><input id="downpercent" type="text" value="20.00" width="3rem">%</div>
			</div>
			<div>
				<label>Mortgage Term</label>	
				<input id="termyears" type="text" value="20" >
				<label>Years</label>
				<input id="termmonths" type="text" value="240" >
				<label>Months</label>
			</div>
			<div>
				<label>Annual Interest</label>	
				<div class="currencyinput percent"><input id="interest" type="text" value="4.00">%</div>
			</div>
		</div>
		<div id="output">
			<div>
				<label>Monthly Payment</label>
			</div>
			<div>
				<label id="payment">$484.78</label>
			</div>
			<div>
				<button id="btnCalculate" style="height:50px;">Calculate</button>
			</div>
		</div>

	</body>

CSS

span.currencyinput {
    
    font: -webkit-small-control;
    margin-top: 5px;
    padding: 2px 3px;
    width: 398px;    
    -webkit-appearance: textarea;
    height: 28px;
    overflow: auto;
    padding: 2px;
    resize: both;
    width: 400px;
}
div.currencyinput.percent input {
    width: 2.5rem;
    margin-left: 1.5rem;
}
span.currencyinput.money {
	margin-left: 1.5rem;
}

span.currencyinput input {
    border: 0;
    overflow: hidden;
}		
/*
div.tarea {
    border: 1px inset #ccc;
    background-color: white;
    font: small courier, monospace black;
    width: 500px;
    overflow: auto; /* in most browsers, this will results in a scrollbar when there's more content than can fit in the dimensions defined above 
}
*/

JavaScript

String.prototype.escape = function() {
    var tagsToReplace = {
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot',
        "'": '&#x27',
        "/\//": '&#x2F',
        '/': '&#x2F',
        "/\//g": " ",
        ' ': "",
        '$': ""
                };
    return this.replace(/[&<>]/g, function(tag) {
        return tagsToReplace[tag] || tag;
    });
};
String.prototype.sanitize = function() {
  var result = this.replace(/\//g,"").escape();
  result = result.replace(/<|>|&|%|;|'|"| /g,"").toUpperCase();
  return result;
}

var formatMoney = function (num) {
      var str = num.toString().replace("$", "");
      var parts = false,
          output = [],
          i = 1,
          formatted = null;
          str = str.replace(" ", "");
          str = str.replace(/NaN/g, "0");
      if (str.indexOf(".") > 0) {
          parts = str.split(".");
          str = parts[0];
      }
      str = str.split("").reverse();
      for (var j = 0, len = str.length; j < len; j++) {
          if (str[j] != ",") {
              output.push(str[j]);
              if (i % 3 == 0 && j < (len - 1)) {
                  output.push(",");
              }
              i++;
          }
      }
      formatted = output.reverse().join("");
      return ("$" + formatted + ((parts) ? "." + parts[1].substr(0, 2) : ""));
  };
      
      var formatPercentage = function(toFormat, multiplyWithHundred){
          	if(isNaN(toFormat)) //called in wrong fashion
             	return toFormat;
          var numberString = toFormat.toString().replace(" ", "");
          numberString = numberString.replace("NaN", "0");
      		return parseFloat(numberString) * (multiplyWithHundred ? 100 : 1) + '%';
      };
      
      var unformatMoney = function(formatted){
        var unformatted =  formatted.replace(/,/g, '');
        unformatted = unformatted.replace(/$/g, '');
        if(isNaN(unformatted))
      		return unformatted;
          
        return...