JSFiddle - React, Tailwind, and code Playground

by Margus Martsepp

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="form-group ">
  <label class="control-label">
    <span>Your Name</span>
    <abbr title="required">*</abbr>
  </label>
  <div class="input-group">
    <span class="input-group-addon"> <i class="glyphicon glyphicon-user"></i> </span>
    <input id="textbox" type="text" placeholder="My Name" class="form-control">
  </div>
  <br>
  <div class="panel panel-default">
    <div class="panel-heading">Your Japanese name<span>Tip: You can use the link and click listen.<span></div>
    <div class="panel-body">
      <a id="label" target="_blank"></a>
    </div>
  </div>

	<hr>
  <div id="info">
    <img src="http://img-9gag-fun.9cache.com/photo/a4YRzPv_700b_v2.jpg" width="200px">
  </div>
	
</div>

CSS

body {
  margin: 6px;
}
#info{
	top: 170px; 
	display: block;
	text-align: center; 
}
#info img{
	width: 200px 
}
.panel-heading span{
	display: block;
	font-size:80%;
	color:gray;
}

JavaScript

$(function() {
  var uri = "https://translate.google.com/#ja/en/";
  var dict = {
    "a": "ka", "b": "zu",	"c": "mi",	"d": "te", 	
    "e": "ku", "f": "lu", "g": "ji", 	"h": "ri", 	
    "i": "ki", "j": "zus", "k": "me", "l": "ta", 	
    "m": "rin", "n": "to", "o": "mo", "p": "no", 	
    "q": "ke", 	"r": "shi", "s": "ari", "t": "chi",
    "u": "do", 	"v": "ru", 	"w": "mei", "x": "na", 
    "y": "fu", 	"z": "zi"
  };
  $("#textbox").bind("propertychange change click keyup input paste", 
		function() { 
			var result = $(this)
				.val()
				.toLowerCase()
				.split('')
				.map(
					function(key) { 
						return (key in dict) ? dict[key] : key; 
					})
				.join("");
			 $("#label").attr("href", uri + encodeURIComponent(result));
			 $("#label").text(result);
		})
});