JSFiddle - React, Tailwind, and code Playground

by Marco Iamonte

HTML

<label for="qtyRiso">Quantità riso:</label>
<input id="qtyRiso" type="number" onchange="onRisoQuantityChanged(event)">
<div id="result">
  
</div>

JavaScript

var baseQtys = {
	riso: {
  	um: 'gr',
    amount: 250
  },
  zucca: {
  	um: 'gr',
    amount: 500
  },
  cipolla: {
  	um: 'pz',
    amount: 1
  },
  brodo: {
  	um: 'ml',
    amount: 1000
  },
  burro: {
  	um: 'gr',
    amount: 40
  },
  asiago: {
  	um: 'gr',
    amount: 100
  },
  parmigiano: {
  	um: 'gr',
    amount: 30
  }
};

(function(){
	window.onRisoQuantityChanged = function(evt) {
  	console.log('riso new qty = ', +evt.target.value);
    var resultDiv = document.getElementById('result');
    var updatedQuanties = Object.keys(JSON.parse(JSON.stringify(baseQtys))).filter(i => i !== 'riso').map(i => {
    	var target = JSON.parse(JSON.stringify(baseQtys[i]));
      if (target.um === 'pz') {
      	target.amount = ((+evt.target.value / baseQtys.riso.amount) * target.amount);
      }
      else {
      	target.amount = (target.amount * (+evt.target.value) / baseQtys.riso.amount);
      }
      return {
      	key: i,
        values: target
      };
    });
    var res = updatedQuanties.map(i => {
    	return `<li>${i.key}: ${i.values.amount}${i.values.um}</li>`;
    })
    resultDiv.innerHTML = `<ul>${res.join('')}</ul>`;
    console.log('updatedQuantities is', updatedQuanties);
  }
})();