Simply v1.0b

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Simplificadora</title>
    <style>
        .col {
            display: inline-block;
            vertical-align: middle; }

        input {
            border: 1px solid #e0e0e0;
            border-radius: 0.1em;
            display: block;
            resize: none;
            text-align: center;
            width: 40px; }

        #less {
            border: none;
            visibility: hidden;
            font-size: 0.8em;
            width: 7px; }

        .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="text" class="up" name="num" id="num" 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>

        <div class="col">
            <button 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" : "1px solid #e0e0e0", "border-top": "1px solid #000"});
            $( "#less" ).css({ "visibility" : "hidden" });
            $( ".res").css("width","40px");

            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","80px");

            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>