Web App - Coloring V2

<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)" onfocus="this.value=''" value="Enter color name . . ." onBlur="getTip(this)"/></td></tr>
<tr><td>Background</td></tr>
<tr><td><input type="text" id="back" size="30px" onkeyup="backing(this.value)" onfocus="this.value=''" value="Enter color name . . ." onblur="getTip(this)" /></td></tr>
</table>
<p>Tips:
<br/>
> Use Tab for moving the cursor to the next box.<br/>
> Use Shift+Tab for moving the cursor to the previus box.<br/>
> Enter color name like blue or enter hex color rgb code like #f0f, #ff00ff
</p>
</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; }
p { font: 12px sans-serif; color: #444; background: ivory;  -moz-border-radius: 4px; padding: 10px; -moz-box-shadow: 0 0 4px #aaa; }

</style>

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

function backing(color){
  document.getElementById('satu').style.backgroundColor = color;

}

function getTip(id){
 if(id.value.length==0){
  id.value = 'Enter color name . . .';
 }
}
</script>

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>

Finding Words In Text Using JS RegExp

/**

 * Web application to search sentences that contain a word

 * supplied. 

 *

 * @author  : irfanudin ridho

 * @email   : irfan.ub@gmail.com

 * @date    : December 27, 2010

 * @version : 1.0

 */

<div id="satu">
    This is a text. So you can do more with this one.
    Then make sure you type the word, not just a char
</div>
<input type="text" id="input"/>
<input type="button" value="Search"
     onclick="lol(document.getElementById('input').value)"/>
<div id="dua"></div>

<script>

function FindingWord(word){

    var doc = document.getElementById('satu');
    var text = doc.innerHTML;
    var desp = text.split(/[.]/g);

    var dua = document.getElementById('dua');
    var ol = document.createElement('ol');

    var pattern = new RegExp(word,"g");

    for(i=0;i&lt;desp.length;i++){
        code = desp[i].search(pattern);
        if(code!=-1){
            var li  = document.createElement('li');
            li.innerHTML = desp[i];
            dua.innerHTML = '';      
            ol.appendChild(li);
            dua.appendChild(ol);
        }
    }

}


</script>