JSFiddle - React, Tailwind, and code Playground

by NV

HTML

<script src="http://cdn.ractivejs.org/edge/ractive.js"></script>
<main></main>

<script id='template' type='text/ractive'>
        <input type="number" value="{{celsius}}"/>°C
        ⇄
        <input type="number" value="{{fahrenheit}}"/>°F
</script>

CSS

body, input {font-size: 18px;}
input {width: 4em}

JavaScript

var ractive = new Ractive({
    el: 'main',
    template: '#template',
    data: {
        celsius: 0
    },
    computed: {
        fahrenheit: {
            get: function () {
                // this will be re-evaluated whenever `celsius` changes,
                // because `this.get()` creates an implicit dependency
                return c2f( this.get( 'celsius' ) );
            },
            set: function ( val ) {
                this.set( 'celsius', f2c( val ) );
            }
        }
    }
});


function c2f(c) {
	return 9/5 * c + 32
}
function f2c(f) {
	return 5/9 * (f - 32)
}