A Pen by Riley Shaw.

index.html

<div class="vcent"></div>
<input type="text" id="a" />
<input type="text" id="b" />

Mirror.markdown

Mirror

A little demo of live translation synchronization

A Pen by Riley Shaw on CodePen.

License.

script.js

;(function() {
  var liveUpdates = true;
  var event = liveUpdates ? 'input' : 'change';

  // DOM
  var a = document.getElementById('a');
  var b = document.getElementById('b');
  
  var translate = function(str) {
    return str.split('').reverse().join('');
  };

  var handler = function(e) {
    if(e.srcElement === a)
      b.value = translate(a.value);
    else a.value = translate(b.value);
  };

  a.addEventListener(event, handler);
  b.addEventListener(event, handler);
})();

style.sass

@import "compass/css3"
html, body, .vcent
  height: 100%

body
  margin: 0
  text-align: center
  background: #2980b9
    
.vcent, input
  display: inline-block
  vertical-align: middle
  
input
  width: 3em
  margin: .5em
  border: 0
  outline: 0
  font-size: 36px
  box-shadow: 4px 4px #2c3e50
  color: #2c3e50
  background: #3498db
  
  &:nth-of-type(2)
    text-align: right