<div class="col-8 df aic jcsa fdc sb bgw">

  <div class="col-12 df aic jcsa sb bgw">
    Trash or Cash
  </div>

  <div class="col-12 df aic fdc jcsa sb bgw">

    <div class="col-12 df aic jcsa bgw">
      <div class="col-4 df aic jcsa sb bgw">
        Desirability:
      </div>
      <div class="col-4 sb bgw">
        <meter type="progress" max="1" value="0" disabled style="width:100%; height: 20px;" id="desirability" color="red"></meter>
      </div>

      <button class="col-4 df aic jcsa sb cp reset" onclick="reset()">RESET</button>

    </div>

    <div class="col-12 df aic fdc jcsa sb bgw">
      <div class="col-12 df aic jcsa bgw">
        <div class="col-4 df aic jcsa sb bgw">
          Total Points:
        </div>
        <div class="col-8 df aic jcsa sb bgw">
          <span id="totalpoints">0</span>
        </div>
      </div>
      <div class="col-12 df aic jcsa bgw">
        <div class="col-4 df aic jcsa sb bgw">
          Verdict:
        </div>
        <div class="col-8 df aic jcsa sb bgw">
          <span id="verdict">Unknown</span>
        </div>
      </div>
    </div>

    <div class="col-12 df aic jcsa sb bgw">
      <div class="col-6 df aic jcsa bgw">
        FCR:
      </div>
      <div class="col-6 df aic jcsa bgw">
        <select type="search" id="pFCR"></select>
      </div>
    </div>

    <div class="col-12 df aic jcsa sb bgw">
      <div class="col-6 df aic jcsa bgw">
        Strength:
      </div>
      <div class="col-6 df aic jcsa bgw">
        <select type="search" id="pSTR"></select>
      </div>
    </div>

    <div class="col-12 df aic jcsa sb bgw">
      <div class="col-6 df aic jcsa bgw">
        Life:
      </div>
      <div class="col-6 df aic jcsa bgw">
        <select type="search" id="pLIFE"></select>
      </div>
    </div>

    <div class="col-12 df aic jcsa sb bgw">
      <div class="col-6 df aic jcsa bgw">
        Dexterity:
      </div>
      <div class="col-6 df aic jcsa bgw">
        <select type="search" id="pDEX"></select>
      </div>
    </div>

    <div class="col-12 df aic jcsa sb bgw">
      <div class="col-6 df aic jcsa bgw">
        Replenish Life:
      </div>
      <div class="col-6 df aic jcsa bgw">
        <select type="search" id="pREPLIFE"></select>
      </div>
    </div>

    <div class="col-12 df aic jcsa sb bgw">
      <div class="col-6 df aic jcsa bgw">
        Minimum Damage:
      </div>
      <div class="col-6 df aic jcsa bgw">
        <select type="search" id="pMINDMG"></select>
      </div>
    </div>

    <div class="col-12 df aic jcsa sb bgw">
      <div class="col-6 df aic jcsa bgw">
        Mana:
      </div>
      <div class="col-6 df aic jcsa bgw">
        <select type="search" id="pMANA"></select>
      </div>
    </div>

    <div class="col-12 df aic jcsa sb bgw">
      <div class="col-6 df aic jcsa bgw">
        All Resist:
      </div>
      <div class="col-6 df aic jcsa bgw">
        <select type="search" id="pALLRES"></select>
      </div>
    </div>

    <div class="col-12 df aic jcsa sb bgw">
      <div class="col-6 df aic jcsa bgw">
        Single Resist:
      </div>
      <div class="col-6 df aic jcsa bgw">
        <select type="search" id="pONERES"></select>
      </div>
    </div>

    <div class="col-12 df aic jcsa sb bgw">
      <div class="col-6 df aic jcsa bgw">
        Attack Rating:
      </div>
      <div class="col-6 df aic jcsa bgw">
        <select type="search" id="pAR"></select>
      </div>
    </div>

  </div>
  <div class="col-12 df aic jcsa sb bgw">
    **Remember: <br />Bad combinations such as FCR & Min Damage are not always a great combo. Your item needs to be desireable as well.
  </div>
</div>
/*blue: #4793FF;*/
/*green: #29C672;*/
/*orange: #FFAE47;*/
/*red: #FF4747;*/

* {
  transition: 0.3s ease all;
  box-sizing: border-box;
  /*cubic-bezier(0.5,-1.5,0.5,2.5)*/
  color: orange; 
  letter-spacing: 0.5px; 
 text-shadow: 0.5px 0.5px 1px #500000;
  font-weight: bold;
  font-family: arial; 
  font-size: 1.75vw; 
}
html,
body {
  margin: 0;
  height: 100%;
}
body {
  background: linear-gradient(#333745, rgba(55, 55, 69, 0.7));
  /*overflow: hidden;*/
  justify-content: center;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}
[class*="col-"] {
  float: left;
  padding: 0.5px;
}
.col-1 {
  width: 8.33%;
}
.col-2 {
  width: 16.66%;
}
.col-3 {
  width: 25%;
}
.col-4 {
  width: 33.33%;
}
.col-5 {
  width: 41.66%;
}
.col-6 {
  width: 50%;
}
.col-7 {
  width: 58.33%;
}
.col-8 {
  width: 66.66%;
}
.col-9 {
  width: 75%;
}
.col-10 {
  width: 83.33%;
}
.col-11 {
  width: 91.66%;
}
.col-12 {
  width: 100%;
}
.df {
  display: flex;
}
.aic {
  align-items: center;
}
.aifs {
  align-items: flex-start;
}
.aife {
  align-items: flex-end;
}
.asc {
  align-self: center;
}
.asfs {
  align-self: flex-start;
}
.asfe {
  align-self: flex-end;
}
.jcc {
  justify-content: center;
}
.jcsa {
  justify-content: space-around;
}
.jcsb {
  justify-content: space-between;
}
.jcfs {
  justify-content: flex-start;
}
.jcsfe {
  justify-content: flex-end;
}
.fdr {
  flex-direction: row;
}
.fdrr {
  flex-direction: row-reverse;
}
.fdc {
  flex-direction: column;
}
.fdcr {
  flex-direction: column-reverse;
}
.ctr {
  position: relative;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}

.cta {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}

.sb {
  border: 2px solid #d3d3d3;
}
.smbr {
  border-radius: 6.25px;
}
.mbr {
  border-radius: 12.5px;
}
.lgbr {
  border-radius: 25px;
}
.xlbr {
  border-radius: 100%;
}
.cp {
  cursor: pointer;
}
.atc {
  align-text: center;
}
.bgw {
  background: #333745;
}
.reset{
  background: #111523;
  letter-spacing: 4px; 
}
.reset:hover{
  background: #a01; 
  color: white; 
}
.reset:active{
  background: #802020; 
  color: #333745; 
}
var b = $("<body")[0];
var bs = $s(b);
b.className = "df  aic fdc";

/*Start Calc Guide*/
/*
Mod Value >= 66% of Max Value = 1 Full Pt;
Mod Value >= 33% && < 66% = 1/2 Pt; 
Bad/Undesireable Mods don't count (e.g. Stamina);
*/
/*End   Calc Guide*/

/*start points system*/
var iq0 = "99% = Charsi (Unless Start of Ladder)";
var iq1 = "Usable (PVP) & Sellable";
var iq2 = "Good Ring";
var iq3 = "Great Ring, PVP Gold";
var iq4 = "Amazing Ring";
var iq5 = "Top Ring on Ladder";
var iqs = [iq0, iq1, iq2, iq3, iq4, iq5];
/*end   points system*/

/*start perfect ring mods*/
//suffixes
var pFCR = { max: 10, suffix: true, best: true };
var pSTR = { max: 20, suffix: true, best: true };
var pLIFE = { max: 40, suffix: true, best: true };
var pDEX = { max: 15, suffix: true, best: false };
var pREPLIFE = { max: 9, suffix: true, best: false };
var pMINDMG = { max: 9, suffix: true, best: false };

//prefixes
var pMANA = { max: 90, suffix: false, best: true };
var pALLRES = { max: 11, suffix: false, best: true };
var pONERES = { max: 30, suffix: false, best: false };
var pAR = { max: 120, suffix: false, best: false };

/*end   perfect ring mods*/

/*start contingencies*/
/*
FCR & MIN DMG = < Great Combo
*/
/*end   contingencies*/
var desirability = $("#desirability");
var totalpoints = $("#totalpoints");
var verdict = $("#verdict");

var pFCRval = $("#pFCR");
var pSTRval = $("#pSTR");
var pLIFEval = $("#pLIFE");
var pDEXval = $("#pDEX");
var pREPLIFEval = $("#pREPLIFE");
var pMINDMGval = $("#pMINDMG");
var pMANAval = $("#pMANA");
var pALLRESval = $("#pALLRES");
var pONERESval = $("#pONERES");
var pARval = $("#pAR");

var eleArray = [
  pFCRval,
  pSTRval,
  pLIFEval,
  pDEXval,
  pREPLIFEval,
  pMINDMGval,
  pMANAval,
  pALLRESval,
  pONERESval,
  pARval
];

function createOptions(selectEle,min,max){
  for(var i = max; i >= min; i--){
    var option = $("^option"); 
    option.innerText = i; 
    option.value = i; 
    if(i == min){
      option.selected = true; 
    }
    selectEle.className = "col-12 df aic jcsa"; 
    selectEle.appendChild(option); 
  }
}

createOptions(pFCRval, 0, pFCR.max); 
createOptions(pSTRval, 0, pSTR.max); 
createOptions(pLIFEval, 0, pLIFE.max); 
createOptions(pDEXval, 0, pDEX.max); 
createOptions(pREPLIFEval, 0, pREPLIFE.max); 
createOptions(pMINDMGval, 0, pMINDMG.max); 
createOptions(pMANAval, 0, pMANA.max); 
createOptions(pALLRESval, 0, pALLRES.max); 
createOptions(pONERESval, 0, pONERES.max); 
createOptions(pARval, 0, pAR.max); 

for (var e = 0; e < eleArray.length; e++) {
  eleArray[e].onchange = function() {
    calculate();
  };
}

function cv(val1, val2) {
  return val1 / val2.max >= 0.66 ? 1 : val1 / val2.max >= 0.33 ? 0.5 : 0;
}

function calculate() {
  var ps0 = pFCRval.value;
  var ps1 = pSTRval.value;
  var ps2 = pLIFEval.value;
  var ps3 = pDEXval.value;
  var ps4 = pREPLIFEval.value;
  var ps5 = pMINDMGval.value;
  var ps6 = pMANAval.value;
  var ps7 = pALLRESval.value;
  var ps8 = pONERESval.value;
  var ps9 = pARval.value;

  var pps0 = cv(ps0, pFCR);
  var pps1 = cv(ps1, pSTR);
  var pps2 = cv(ps2, pLIFE);
  var pps3 = cv(ps3, pDEX);
  var pps4 = cv(ps4, pREPLIFE);
  var pps5 = cv(ps5, pMINDMG);
  var pps6 = cv(ps6, pMANA);
  var pps7 = cv(ps7, pALLRES);
  var pps8 = cv(ps8, pONERES);
  var pps9 = cv(ps9, pAR);

  var tp = Number(
    pps0 + pps1 + pps2 + pps3 + pps4 + pps5 + pps6 + pps7 + pps8 + pps9
  );

  var theVerdict;
  if (tp >= 6.0) {
    theVerdict = iqs[5];
  }
  if (tp <= 5.5) {
    theVerdict = iqs[4];
  }
  if (tp <= 5.0) {
    theVerdict = iqs[3];
  }
  if (tp <= 4.5) {
    theVerdict = iqs[2];
  }
  if (tp <= 4.0) {
    theVerdict = iqs[1];
  }
  if (tp <= 3.5) {
    theVerdict = iqs[0];
  }

  totalpoints.innerText = tp;
  verdict.innerText = theVerdict;
  /*Start Desireables*/
  /*
  pps0, pps1, pps2, ps6, ps7
  */
  /*End   Desireables*/
  var Desirability = 0;
  Desirability = pps0 > 0 ? (Desirability += 0.2) : Desirability;
  Desirability = pps1 > 0 ? (Desirability += 0.2) : Desirability;
  Desirability = pps2 > 0 ? (Desirability += 0.2) : Desirability;
  Desirability = pps6 > 0 ? (Desirability += 0.2) : Desirability;
  Desirability = pps7 > 0 ? (Desirability += 0.2) : Desirability;

  desirability.value = Desirability;
}

function reset(){
  pFCRval.value = ""; 
  pSTRval.value = ""; 
  pLIFEval.value = ""; 
  pDEXval.value = ""; 
  pREPLIFEval.value = ""; 
  pMINDMGval.value = ""; 
  pMANAval.value = ""; 
  pALLRESval.value = ""; 
  pONERESval.value = ""; 
  pARval.value   = ""; 
  calculate(); 
}

calculate(); 

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://codepen.io/MColvin3/pen/XRMJqK.js