JSFiddle - React, Tailwind, and code Playground

by rbrousla

HTML

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

<script id='template' type='text/ractive'>
    <p class="temperature-converter" id="tm-vanilla">
        <label class="celsius-wrap"><input type="number" class='celsius' value="{{celsius}}"/>°C</label>
        <span class="arrows">⇄</span>
        <label class="fahrenheit-wrap"><input type="number" class="fahrenheit" value="{{fahrenheit}}"/>°F</label>
    </p>
</script>

CSS

body {
    font-family: 'Helvetica Neue', arial, sans-serif;
}

.temperature-converter,
.temperature-converter input {
	cursor: default;
    font-family: inherit;
}

.temperature-converter input {
	width: 5em;
	text-align: right;
	border: none;
	background: none;
	color: inherit;
	height: 2em;
	vertical-align: baseline;
	padding-right: .4em;
}
.temperature-converter .arrows {
	font-size: 20px;
	vertical-align: middle;
}
.temperature-converter input:focus {
	outline: none;
}
.celsius-wrap,
.fahrenheit-wrap {
	display: inline-block;
	border: 1px solid currentColor;
	outline-color: currentColor;
	padding: 0 4px 0 0;
	border-radius: 4px;
}

.fahrenheit-wrap {border-color: hsl(151, 21%, 77%)}
.celsius-wrap {border-color: hsl(34, 43%, 72%)}

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)
}