View difference between Paste ID: bdUzjF7G and DSkNBTQS

 <!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
 	<title>Simplificadora</title>
 	<style>
 		body {
 			font-size: 1em;
 		}
 		.col {
 			display: inline-block;
 			vertical-align: middle; }
 
 		#equal {
 			font-size: 1.8em;
-			width: 32px;
+
 
 		input {
 			border: 2px solid #cccccc;
 			border-radius: 0.1em;
 			display: block;
 			font-size: 2.5em;
 			height: 92px;
 			resize: none;
 			text-align: center;
 			width: 92px; }
 
 		#less, #lesses {
-		#less {
+
 			visibility: hidden;
 			font-size: 2.5em;
 			width: 32px; }
 
 		.up {
 			border-bottom: 1px solid #000; }
 
 		.down{
 			border-top: 1px solid #000; }
 
 
 	</style>
 	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 </head>
 <body>
 	<div id="container">
 		<div class="col">
 			<input type="number" pattern="\d*" class="up" name="num" id="num" maxlength="4" onkeypress="return event.charCode >= 48 && event.charCode <= 57 || event.charCode == 45">
-			<input type="text" class="up" name="num" id="num" maxlength="4" onkeypress="return event.charCode >= 48 && event.charCode <= 57 || event.charCode == 45">
+			<input type="number" pattern="\d*" class="down" name="den" id="den" maxlength="4" onkeypress="return event.charCode >= 48 && event.charCode <= 57 || event.charCode == 45">
-			<input type="text" class="down" name="den" id="den" maxlength="4" onkeypress="return event.charCode >= 48 && event.charCode <= 57 || event.charCode == 45">
+
 
 		<div class="col">
 			<input type="text" class="up" id="lesses" readonly="true" value="&ndash;">
 		</div>
 
 		<div class="col">
 			<button id="equal" name="equal">=</button>
 		</div>
 
 		<div class="col">
 			<input type="text" class="up" id="less" readonly="true" value="&ndash;">
 		</div>
 
 		<div class="col">
 			<input type="text" class="up res" id="rnum" readonly="true">
 			<input type="text" class="down res" id="rden" readonly="true">
 		</div>
 	</div>
 
 	<script>
 		$( "document" ).ready(function() {
 
 			$( "button" ).click( function() {
 			//re-setting default css properties
 			$( "#rnum" ).css({ "border-bottom" : "1px solid #000" });
 			$( "#rden" ).css({ "border" : "2px solid #cccccc", "border-top": "1px solid #000"});
 			$( "#less" ).css({ "visibility" : "hidden" });
 			$( ".res").css("width","92px");
 
 			var An, Ad;
 
 			var n = $( "#num" ).val();
 			var d = $( "#den" ).val();
 
 			if ( d == 0 ) {
 				$( "#rnum" ).val( "\xA1NO ES UN" );
 				$( "#rden" ).val( "N\xDAMERO!" );
 				$( ".res").css("width","215px");
 
 			return;
 			}
 
 			if ( n % d == 0 ) {
 				$( "#rden" ).css( {"border" : "none"});
 				$( "#rnum" ).css({ "border-bottom" : "1px solid #e0e0e0" });
 				$( "#rnum" ).val( n / d );
 				$( "#rden" ).val("");
 			return;
 			}
 
 			var hcf = 1;  //highest common factor
 			var nisneg = false;  //if numerator (n) is negative
 			var disneg = false;  //if denominator (d) is negative
 
 			if ( n < 0 ) {
 				nisneg = true;
 			}
 
 			if ( d < 0 ) {
 				disneg = true;
 			}
 
 			An = Math.abs( n )
 			Ad = Math.abs( d )
 
 			for ( var i = 2; i <= Math.min( An, Ad ); i++ ) {
 				if ( An % i == 0 ) {
 					if ( Ad % i == 0 ) {
 						hcf = i;
 					}
 				}
 			}
 
 			Ad = Ad / hcf;
 
 			if ( nisneg != disneg ) {
 				$( "#less" ).css({ "visibility" : "visible" });
 			}
 
 			An = An / hcf;
 
 			$( "#rnum" ).val( An );
 			$( "#rden" ).val( Ad );
 
 			});
 		});
 	</script>
 
 </body>
 </html>