JSFiddle - React, Tailwind, and code Playground

by mesak

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="col-lg-8 col-lg-offset-2">
<form role="form">
  <div class="form-group">
    <label for="ipt_usd2twd">USD to TWD</label>
    <input type="text" class="form-control" id="ipt_usd2twd" value="" />
  </div>
  <div class="form-group">
    <label for="ipt_usd2jpy">USD to JPY</label>
    <input type="text" class="form-control" id="ipt_usd2jpy" />
  </div>
  <div class="form-group">
    <label for="ipt_jpy2twd">JPY to TWD</label>
    <input type="text" class="form-control" id="ipt_jpy2twd" readonly />
  </div>
  <div class="form-group">
    <label for="ipt_twd2jpy">TWD to JPY</label>
    <input type="text" class="form-control" id="ipt_twd2jpy" readonly />
  </div>
  <!--<button type="button" class="btn btn-default" id="btn_accounting">Accounting</button>-->
</form>
      
  </div>
</div>

JavaScript

var num = {
    usd2twd : 30.29000,
    usd2jpy : 107.39
}
$('#ipt_usd2twd').val(num.usd2twd);
$('#ipt_usd2jpy').val(num.usd2jpy);
$('input[id^="ipt"]').blur(function(){
    $('input[id^="ipt"]').each(function(i,n){
        num[ n.id.replace('ipt_','') ] = parseFloat(n.value)      
    });
    //console.log( num )     
    num.twd2jpy = num.usd2jpy / num.usd2twd;
    num.jpy2twd = num.usd2twd / num.usd2jpy;
    $.each(num , function(k,v){
        $('#ipt_' + k ).val( v )       
    });
})