JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-validation/2.0.2/knockout.validation.min.js"></script>
<label>Quantity: <input name="quantity" type="number" data-bind="textInput: quantity"/></label>
<label>Euros: <input name="wholeNumber" type="number" data-bind="textInput: wholeNumber"/></label>
CSS
label {
display: block;
margin: 10px 0;
}
JavaScript
function ViewModel() {
self = this;
cents = ko.observable();
quantity = ko.observable();
wholeNumber = ko.computed({
read: function() {
return (self.cents() / 100).toFixed(2);
},
write: function(value) {
self.cents(Math.round(value * 100));
cons
}
});
}
ko.applyBindings(ViewModel);