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