La computadora responde!

by aprudencio

HTML

<div>Para que la computadora pueda responderte, debes escribir la petición:
    <br />
    <br />"<span id="modelo"></span>"</div>
<br />
<div>
    <label>Petición:</label>
    <input class="" id="mask1" type="text" />
    <input class="hidden c" id="mask" type="text" />
</div>
<div id="pregunta">
    <label>Pregunta:</label>
    <input type="text" id="p1" />
    <input type="text" class="hidden c" id="p2" />
</div>
<div class="center">
    <input type="button" id="responde" value="Responde" />
    <input type="button" id="nuevo" value="Nueva pregunta" />
</div>
<br />
<div id="respuestac">Respuesta:
    <div id="respuesta"></div>
</div>
<div id="c"></div>

CSS

* {
    font-family:arial;
    font-size: 16px;
}
.hidden {
    /*display:none;*/
    color:white;
}
label{
    width: 200px;
}
#modelo {
    font-style: italic;
}
#mask1 {
    width: 300px;
}
.center {
    text-align:center;
}
input[type='button'] {
    padding: 5px;
    background-color: blue;
    color: white;
}
#respuestac {
    padding: 5px;
    border: 1px solid black;
}
.focus {
    /*border: 1px solid red;*/
}
.c {
    border:none;
    height:1px;
}
input[type='text'] {
    width: 200px;
    padding: 5px;
    outline: 0;
}

JavaScript

var pr = {
    mask: "Por favor, responder la siguiente pregunta:",
    respuesta: "",
    pre: "",
    copy: function (s1, s2) {

        $(s1).focus(function () {
            $(s2).focus();
        });

        $(s2).keyup(function () {
            $(s1).val($(this).val()).blur(function () {
                $(s2).removeClass("focus");
            });
            $(s2).addClass("focus");
        });

    },
    confg: function () {

        $("#modelo").html(this.mask);

        this.copy("#p1", "#p2");

        $("#mask1").focus(function () {
            $("#mask").focus();
            $("#mask1").addClass("focus");
        });

        $("#nuevo").hide().click(function () {
            pr.respuesta = pr.pre = "";
            $("input[type='text']").val("");
            $("#responde").show();
            $(this).hide();
        });

        $("#mask").keyup(function () {

            var val = $(this).val();

            var r = val.split(".");
            pr.respuesta = r[1];
            //            $("#c").html(r[1]);
            $("#mask1").val(pr.mask.substr(0, val.length));
            //$(this).val(r[1]);
            return false;

        });

        $("#responde").click(function () {

            if ($("#p1").val().length == 0) {
                alert("Debes escribir tu pregunta");
                return false;
            }

            if ($("#p1").val().length < 10) {
                alert("Tu pregunta es muy corta");
                return false;
            }

            if (pr.respuesta.length ==0) {
                alert("¡Tu no puedes preguntarme!");
                $("body").html("Adios");
                return false;
            }
           
            $(this).hide();
            $("#nuevo").show();
            $("#respuesta").html(pr.respuesta);
        });

    }

};

$(function () {

    pr.confg();

});