2-way-binding

Vanilla.js two-way binding

by DiegoPacheco

HTML

<div class="temperature-converter">
	<label>
		<input type="number" id="celsius" value="0">°C
	</label>
	⇄
	<label>
		<input type="number" id="fahrenheit">°F
	</label>
</div>

<button onclick='celsius.value++'>
bt
</button>

CSS

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

JavaScript

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

var celsius = document.getElementById('celsius')
var fahrenheit = document.getElementById('fahrenheit')
fahrenheit.value = c2f(celsius.value)

celsius.oninput = function(e) {
	fahrenheit.value = c2f(e.target.value)
};

fahrenheit.oninput = function(e) {
	celsius.value = f2c(e.target.value)
};