JSFiddle - React, Tailwind, and code Playground

by Castrolol

HTML

<div style="padding-top:10px">
<br/>
<div> Metros Quadrados: <input type="text" style="width:40px" data-bind="value: metros" />m²</div>
<div> <span data-bind="text: latas2" ></span>  Latas de 2 litros (valor: R$ <span data-bind="text: valor2"></span> )</div>
<div> <span data-bind="text: latas5" ></span>  Latas de 5 litros (valor: R$ <span data-bind="text: valor5"></span> )</div>
<div>  <span data-bind="text: ( latas5() * 5 ) + (latas2() * 2) " > </span>  Litros ( Valor Total: R$ <span data-bind="text: Math.round(valor2() + valor5(),2)" ></span> )</div>

</div>

JavaScript

function l(m){
var M = Math;
var is = ["floor","ceil"];
var f = M[is[0]];
var c = M[is[1]];
var r = (m = f(+(m) || 0)) % 5;
return { q5: ( ( f( m / 5 ) - (r % 2))) , q2: ( c( r / 2) ) + ( 2 * (r % 2) ) };
}

var vm = function(){
var self = this;

self.metros = ko.observable();
  self.latas2 = ko.computed(function(){
    return l(self.metros()).q2;
  },self);
  self.latas5 = ko.computed(function(){
    return l(self.metros()).q5;
  },self);
 self.valor2 = ko.computed(function(){
    return l(self.metros()).q2 * 3.5;
  },self);
  self.valor5 = ko.computed(function(){
    return l(self.metros()).q5 * 7.5;
  },self);



}
ko.applyBindings(new vm());