View difference between Paste ID: <a href="/bdUzjF7G">bdUzjF7G</a> and <a href="/DSkNBTQS">DSkNBTQS</a>

<!DOCTYPE html>
1		<!DOCTYPE html>
2		<html lang="en">
3		<head>
4		<meta charset="UTF-8">
5		<title>Simplificadora</title>
6		<style>
7		body {
8		font-size: 1em;
9		}
10		.col {
11		display: inline-block;
12		vertical-align: middle; }
13
14		#equal {
15		font-size: 1.8em;
16	-	width: 32px;
16	+
17
18		input {
19		border: 2px solid #cccccc;
20		border-radius: 0.1em;
21		display: block;
22		font-size: 2.5em;
23		height: 92px;
24		resize: none;
25		text-align: center;
26		width: 92px; }
27
28		#less, #lesses {
29	-	#less {
29	+
30		visibility: hidden;
31		font-size: 2.5em;
32		width: 32px; }
33
34		.up {
35		border-bottom: 1px solid #000; }
36
37		.down{
38		border-top: 1px solid #000; }
39
40
41		</style>
42		<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
43		</head>
44		<body>
45		<div id="container">
46		<div class="col">
47		<input type="number" pattern="\d*" class="up" name="num" id="num" maxlength="4" onkeypress="return event.charCode >= 48 && event.charCode <= 57 \|\| event.charCode == 45">
48	-	<input type="text" class="up" name="num" id="num" maxlength="4" onkeypress="return event.charCode >= 48 && event.charCode <= 57 \|\| event.charCode == 45">
48	+	<input type="number" pattern="\d*" class="down" name="den" id="den" maxlength="4" onkeypress="return event.charCode >= 48 && event.charCode <= 57 \|\| event.charCode == 45">
49	-	<input type="text" class="down" name="den" id="den" maxlength="4" onkeypress="return event.charCode >= 48 && event.charCode <= 57 \|\| event.charCode == 45">
49	+
50
51		<div class="col">
52		<input type="text" class="up" id="lesses" readonly="true" value="–">
53		</div>
54
55		<div class="col">
56		<button id="equal" name="equal">=</button>
57		</div>
58
59		<div class="col">
60		<input type="text" class="up" id="less" readonly="true" value="–">
61		</div>
62
63		<div class="col">
64		<input type="text" class="up res" id="rnum" readonly="true">
65		<input type="text" class="down res" id="rden" readonly="true">
66		</div>
67		</div>
68
69		<script>
70		$( "document" ).ready(function() {
71
72		$( "button" ).click( function() {
73		//re-setting default css properties
74		$( "#rnum" ).css({ "border-bottom" : "1px solid #000" });
75		$( "#rden" ).css({ "border" : "2px solid #cccccc", "border-top": "1px solid #000"});
76		$( "#less" ).css({ "visibility" : "hidden" });
77		$( ".res").css("width","92px");
78
79		var An, Ad;
80
81		var n = $( "#num" ).val();
82		var d = $( "#den" ).val();
83
84		if ( d == 0 ) {
85		$( "#rnum" ).val( "\xA1NO ES UN" );
86		$( "#rden" ).val( "N\xDAMERO!" );
87		$( ".res").css("width","215px");
88
89		return;
90		}
91
92		if ( n % d == 0 ) {
93		$( "#rden" ).css( {"border" : "none"});
94		$( "#rnum" ).css({ "border-bottom" : "1px solid #e0e0e0" });
95		$( "#rnum" ).val( n / d );
96		$( "#rden" ).val("");
97		return;
98		}
99
100		var hcf = 1; //highest common factor
101		var nisneg = false; //if numerator (n) is negative
102		var disneg = false; //if denominator (d) is negative
103
104		if ( n < 0 ) {
105		nisneg = true;
106		}
107
108		if ( d < 0 ) {
109		disneg = true;
110		}
111
112		An = Math.abs( n )
113		Ad = Math.abs( d )
114
115		for ( var i = 2; i <= Math.min( An, Ad ); i++ ) {
116		if ( An % i == 0 ) {
117		if ( Ad % i == 0 ) {
118		hcf = i;
119		}
120		}
121		}
122
123		Ad = Ad / hcf;
124
125		if ( nisneg != disneg ) {
126		$( "#less" ).css({ "visibility" : "visible" });
127		}
128
129		An = An / hcf;
130
131		$( "#rnum" ).val( An );
132		$( "#rden" ).val( Ad );
133
134		});
135		});
136		</script>
137
138		</body>
139		</html>