Yield Calculator

(Trying to see if it's possible to make this interactive...)

<style> input[type='number']{

   width: 40px;

}

1. foodYieldForm {

   width: 700px;

} </style> <form id="foodYieldForm">

 <input type="number" id="cityProd"> - City Production

 <input type="number" id="regionYield"> - Yield(Apples) of the region

 <input type="number" id="farmCount"> - Amount of Farms in the region

 <input type="number" id="percBonus"> - Total Percentage Bonus (e.g. 50% from a Plow and 150% from an expert adds up to 200%)

 <input type="checkbox" id="verseBonus" onClick="yieldScript()"> - Religious Verse active?

 <input type="submit" value="Calculate" onClick="yieldScript()">  

</form> <script type="text/javascript"> // Prevent Submit button from reloading page foodYieldForm.addEventListener("submit", (event) => {

 event.preventDefault();

});

// Yield Calculator function yieldScript(){

 let A = Number(document.getElementById('cityProd').value); // City Production
 let B = Number(document.getElementById('regionYield').value); // Yield(Apples) of the region
 let C = Number(document.getElementById('farmCount').value); // Amount of Farms in the region
 let E = Number(document.getElementById('percBonus').value); // Total Percentage Bonus (e.g. 50% from a Plow)
 let F = document.getElementById('verseBonus'); // Extra farm adjacency from religious verse

 if (F.checked == true){
   var G = 1;
 } else {
   var G = 0;
 }

 let H = C + G; // Add G to the actual amount of farms in the region
 let Z = Number(Math.floor(A*B+B*5*H+5+(A+5*H)*(E/100)+(H-1)*5+A)); // Resulting production of a single farm
 let Y = Math.round(Z/25); // Resulting food yield of that production of a single farm
 let O = Y*C; // Resulting food yield of that production of the entire region

 document.getElementById('outputvalue').innerText= Y;
 document.getElementById('outputvalueall').innerText= O;

}

</script>