JSFiddle - React, Tailwind, and code Playground

by dusset

HTML

<p id="roll"></p>
<p id="rolla"></p>
<p id="win"></p>
<button id="button">Use Shard of Pristine Waters!</button>

<h1>Log</h1>
<p id="tries"></p>
<p id="DHC"></p>
<p id="LEV"></p>
<p id="uncommon"></p>
<p id="rare"></p>

<hr>

<p id="ESOEroll"></p>
<button id="button1">Use Eternal Shard of Elements!</button>
<p id="effect"></p>
<h1>Logs</h1>
<p id="ESOEtries"></p>
<p id="SOPW"></p>
<p id="SOEF"></p>
<p id="SONW"></p>
<p id="days"></p>

<hr>

CSS

body {font-size:22px;}
button {font-size:30px;}

JavaScript

//Logs
    var DHC = 0;
    var LEV = 0;
    var uncommon = 0;
    var rare = 0;
    var tries = 0;

function rollFunction() {
                       
    var maxDamagedHathriansCube = 3 -1;
    var maxLesserMagicVial = 2 -1;

    rollNumber = Math.round(Math.random()*99+1);
        document.getElementById("roll").innerHTML = rollNumber;
    
    if (rollNumber >= 33) {
        rollCommon = Math.round(Math.random()+1);
        if (rollCommon == 1) {            
            rollAmountDHC = Math.round(Math.random()*maxDamagedHathriansCube+1);
            document.getElementById("win").innerHTML = "Common - " + rollAmountDHC + " Damaged Hathrian's Cube";
            //LOGS
            DHC += rollAmountDHC; //Logs
            document.getElementById("DHC").innerHTML = "DHC " + DHC; //Logs
        } else {
            rollAmountLEV = Math.round(Math.random()*maxLesserMagicVial+1);
            document.getElementById("win").innerHTML = "Common - " + rollAmountLEV + " Lesser Empty Vial";
            //LOGS
            LEV += rollAmountLEV; //Logs
            document.getElementById("LEV").innerHTML = "LEV " + LEV; //Logs
        };
    } else if (rollNumber >= 5) {
        document.getElementById("win").innerHTML = "Uncommon";
        //LOGS
        uncommon += 1; //Logs
        document.getElementById("uncommon").innerHTML = "Uncommon " + uncommon; //Logs
    } else {
        document.getElementById("win").innerHTML = "Rare";
        //LOGS
        rare += 1; //Logs
        document.getElementById("rare").innerHTML = "Rare " + rare;
    };

    tries +=1; //Logs
    document.getElementById("tries").innerHTML = "Tries: " + tries; //Logs

};
document.getElementById("button").onclick = rollFunction;


document.getElementById("button1").onclick = useESOE;

//LOGS ESOE
var ESOEtries = 0;
var SOPW = 0;
var SOEF = 0;
var SONW = 0;

function useESOE() {
    rollNumberESOE = Math.round(Math.random()*99+1);
    
    document.getElementById("ESOEroll").innerHTML =...