Monkberry Hello Wolrd
HTML
<script src="https://cdn.jsdelivr.net/monkberry-standalone/4.0.2/monkberry.min.js"></script>
<script type="text/monkberry" id="Template">
<label>Celsius</label>
<input type="number" value={{celsius}} />
<label>Fahrenheit</label>
<input type="number" value={{fahrenheit}} />
</script>
CSS
body {
background: #262E3D;
color: #fff;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
JavaScript
var view = Monkberry.render(Template, document.body);
//T(°F) = T(°C) × 1.8 + 32
var data = {
get celsius(){
return (data.fahrenheit - 32) / 1.8
},
get fahrenheit(){
return (data.celsius * 1.8) + 32
}
}
//var data = { celsius: 0, fahrenheit: 0 };
view.update(data);