JSFiddle - React, Tailwind, and code Playground
HTML
<br>
<h1 style="color: green">
Standard Item Find Calculator
</h1>
<p><label for="runesBonus">Runes: </label>
<select id="selectLeftRune">
<optgroup label="Left Minor Rune">
<option value="0">Not Item Find</option>
<option value="7.5">Common(Green)</option>
<option value="15">Rare (Blue)</option>
<option value="22.5">Epic (Red)</option>
<option value="30">Legendary (Gold)</option>
<option value="37.5">Mythic (DeepRed)</option>
</optgroup>
</select>
<select id="selectRightRune">
<optgroup label="Right Minor Rune">
<option value="0">Not Item Find</option>
<option value="7.5">Common(Green)</option>
<option value="15">Rare (Blue)</option>
<option value="22.5">Epic (Red)</option>
<option value="30">Legendary (Gold)</option>
<option value="37.5">Mythic (DeepRed)</option>
</optgroup>
</select>
<br>
<p><label for="guildBonus">Guild Bonus: </label>
<select id="guildBonus">
<optgroup label="Guild IF Rank">
<option value="0">No Bonus - Rank 0</option>
<option value="3">3% - Rank 1</option>
<option value="5">5% - Rank 2</option>
<option value="8">8% - Rank 3</option>
<option value="10">10% - Rank 4</option>
<option value="13">13% - Rank 5</option>
</optgroup>
</select>
<p><label for="consumableBonus">Consumable: </label>
<select id="consumableBonus">
<optgroup label="Named">
<option value="0">No Bonus</option>
<option value="350">Annigor</option>
<option value="50">Average Scroll (Blue)</option>
<option value="500">Bitgor</option>
<option value="200">Bubgor</option>
<option value="600">Bugcor</option>
<option value="200">Bytegor</option>
<option value="75">Broccoli</option>
<option value="75">Coco</option>
<option value="800">Colgor</option>
<option value="75">Delicious Feast</option>
<option value="75">Glorious Feast</option>
<option value="200">Item Find Tome (Gold)</option>
...
JavaScript
function calculateTinfoilIF() {
var eventBonusString = document.querySelector('#select1').value;
var eventbonus = Number.parseFloat(eventBonusString,10);
var baseIF = Number.parseFloat(document.querySelector('#currentIF').value,10);
var output = (baseIF+100) * (eventbonus);
document.querySelector('.simpleOutput').textContent = output + "% Out of a maximum of 3500%";
}
function calculateCapture() {
var eventBonusString = document.querySelector('#select2').value;
var eventbonus = Number.parseFloat(eventBonusString,10);
var baseIF = Number.parseFloat(document.querySelector('#currentCap').value,10);
var output = (baseIF+100) * (eventbonus);
var RaidFamPercentage = .1;
var Common = 4;
var Rare = 2.5;
var Epic = 1.5
var Leg = 1;
var CapturePercentCommon = 0.4;
var CapturePercentRare = 0.2;
var CapturePrecentEpic = 0.15;
var CapturePrecentLeg = 0.1;
var percentage = .01;
var everythingElseRaid = output * RaidFamPercentage * percentage;
var BaseChancePerRunCommonDUngeon = output * Common * percentage;
var BaseChancePerRunRareDungeon = output * Rare * percentage;
var BaseChancePerRunRareRaid = output * Rare * RaidFamPercentage * percentage;
var BaseChancePerRunEpicDungeon = output *Epic * percentage;
var BaseChancePerRunEpicRaid = output * Epic * RaidFamPercentage* percentage;
var BaseChancePerRunLegRaid = output * Leg * RaidFamPercentage* percentage;
var BaseChancePerRunCommonDUngeonPercentage = output * Common * percentage * CapturePercentCommon;
var BaseChancePerRunRareDungeonPercentage = output * Rare * percentage * CapturePercentRare;
var BaseChancePerRunRareRaidPercentage = output * Rare * RaidFamPercentage * percentage * CapturePercentRare;
var BaseChancePerRunEpicDungeonPercentage = output *Epic * percentage * CapturePrecentEpic;
var BaseChancePerRunEpicRaidPercentage = output * Epic * RaidFamPercentage* percentage * CapturePrecentEpic;
var...