JSFiddle - React, Tailwind, and code Playground

by Sergio Kagiema

HTML

<body> 
    <div id="wrapper">
      <div id="container">
        <form>
            <label>Insert Greeklish:</label>
            <input id="fname" type="text" onkeyup="toGreek()">
            <input type="submit">
        </form> 
       </div>  
    </div>    
    
</body>

CSS

#container{
               
               width:960px;
               margin:0 auto;
               background: #f5f5f5;
           }
           
           form {
               
               padding: 15px;    
               margin-top:100px;           
           }

JavaScript

var ch = document.getElementById("fname");
var chVal = ch.value;

function toGreek(chVal,myObject){
  var greekVal=[];
  for(var i=0;i<chVal.length;i++){
    greekVal[i]=myObject[chVal[i]]||chVal[i];
  }
  return greekVal.join('');
    console.log(greekVal);
}