Web App - Coloring V1

/**

 * This program will check in real time what looks like the color

 * you enter to affect foreground and background. Just copy this

 * code in http://htmledit.squarefree.com

 *

 * @name    : real time checker for color

 * @author  : irfanudin ridho

 * @email   : irfan.ub@gmail.com

 * @version : 1.0

 * @date    : March 1, 2011

 */

<div id="page">
    <div id="satu">For the last moment we get from here</div>
    <table>
        <tr>

            <td>Foreground</td>

        </tr>
        <tr>

            <td><input type="text" id="fore" size="30px"

                onkeyup="foring(this.value)"/></td>

        </tr>
        <tr>

            <td>Background</td>

        </tr>
        <tr>

            <td><input type="text" id="back" size="30px"

                onkeyup="backing(this.value)"/></td>

        </tr>
    </table>
</div>

<style>
#page { -moz-box-shadow: 0 0 4px #aaa; padding: 10px; -moz-border-radius: 4px; }
#satu { -moz-border-radius: 4px; -moz-box-shadow: 0 0 4px #aaa; padding: 10px; width: 500px; height: 30px; margin: 0 auto; text-align: center; font: 12px sans-serif; background: pearl; font-weight: bold;  }
table td { font: 12px arial; }
input { -moz-box-shadow: 0 0 4px #ccc; -moz-border-radius: 4px; border: 1px solid #ccc; padding: 2px; font: 12px arial; }
input:hover { -moz-box-shadow: 0 0 4px orange; }
input:focus { -moz-box-shadow: 0 0 4px #ccc; }
</style>

<script>
function foring(color){
    document.getElementById('satu').style.color = color;
}

function backing(color){
    document.getElementById('satu').style.backgroundColor = color;
}
</script>