JSFiddle - React, Tailwind, and code Playground

by Naning

HTML

<label>HP of your Character at Max Level</label></br>
<input id="startHP" type="number" placeholder="Start HP"></input></br>
<label>The amount of card points you want to distribute</label></br>
<input id="cardPoints" type="number" placeholder="Card Points"></input></br>
<label>The percentage of armor you want in your main armor stat (ie Physical Armor). If you want 50%, enter 0.5</label></br>
<input id="percentageMain" type="number" placeholder="Physical Armor(ie 0.6)"></input></br>
<label>The amount of penetration your enemy likely has to your main armor stat (ie Physical Penetration)</label></br>
<input id="enemyPen" type="number" placeholder="Enemy Penetration"></input></br>
<button id="submitButton">Calculate
</button>
<br/>
<div id="resultDiv">
</div>

JavaScript

$('#submitButton').click(function()
{
	var BestAmountOfArmorCardPoints = 0;
	var HighestEffectiveHP = 0;
	for (i = 0; i <= $('#cardPoints').val(); i++)
	{
		var EffectiveHP = CalculateEffectiveHP($('#startHP').val(),$('#cardPoints').val(),$('#percentageMain').val(),$('#enemyPen').val(),i);
		if(EffectiveHP > HighestEffectiveHP)
		{
			HighestEffectiveHP = EffectiveHP;
			BestAmountOfArmorCardPoints = i;
		}
	}
	$('#resultDiv').html("----------- Result -----------</br>The highest amount of Effective HP you can achieve is " + parseFloat(HighestEffectiveHP) + ". </br> You achieve this by spending " + BestAmountOfArmorCardPoints +" points on armor");
});
function CalculateEffectiveHP( startHP,  cardPoints,  percentMain,  enemyPen,  cardPointsSpentOnArmor)
{
	var amountOfArmorPerPoint = parseFloat(percentMain)*22;
	var FRR = parseFloat(cardPointsSpentOnArmor)*parseFloat(amountOfArmorPerPoint) - enemyPen;
	var reduction = parseFloat(FRR)/(parseFloat(FRR)+240);
	var bonusHP = 100 * (parseFloat(cardPoints) - parseFloat(cardPointsSpentOnArmor));
	var EffectiveHP = (parseFloat(startHP) + parseFloat(bonusHP))/(1-parseFloat(reduction));
	return EffectiveHP;
}