index.html

<h1>Loan Interest Tables</h1>
<div class="range-slider">
  <p>
    <label for="amount">Monthly payment range:</label>
    <input type="text" id="range-amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
  </p>

  <div id="slider-range"></div>  
</div>
<div class="color-key">
  <div><h3>Color Key</h3></div>
  <span class="color-key-item verylow">Very Low</span>
  <span class="color-key-item low">Low</span>
  <span class="color-key-item ideal">Ideal</span>
  <span class="color-key-item high">High</span>
  <span class="color-key-item veryhigh">Very High</span>
</div>
<div class="boundaries-slider">
  <p>
    <label for="amount">High to Low Boundaries:</label>
    <input type="text" id="boundaries-amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
  </p>

  <div id="slider-boundaries"></div>  
</div>
<div width="100%" class="matrices"></div>

script.js

var currentMonthlyCost = 280;
var loans = [5500, 6000];
var currentMonthlyPaymentRange = {
  "min": 150,
  "max": 480
};
var idealMonthlyPaymentRange = {
  "min": 150,
  "max": 480
};
var comfortBoundaries = {
  "veryhigh": .1,
  "high": .3,
  "low": .3,
  "verylow": .1
}

/**
 * Range of APR rates (8%, 20%)
 *   8%, 10%, 12%, 15%, 20%
 */
var rates = [null, 0, 0.08,0.10,0.12,0.15,0.20];

/**
 * Range of payment plans in months (12, 48)
 *   12, 24, 36, 48
 */
var durations = [null, 12,24,36,48];


var createMatrix = function(title, sub){
  var min = currentMonthlyPaymentRange["min"],
    max = currentMonthlyPaymentRange["max"];
  var $matrix = $("<div class='matrix'>");
  $matrix.append( $("<h1>").text(title) );
  $matrix.append( $("<div class='matrix-container'>") );
  $matrix.append( $("<div class='matrix-range'>").text(
    "principal: " + sub
    + " | min: " + min
    + " | max: " + max
  ) );
  
  return $matrix;
}
var addMatrix = function($matrix){
  $(".matrices").append( $matrix );
}
var addRow = function($matrix, $row){
	return $matrix.append( $row );
}
var createRow = function(){
  return $("<div class='rate-row'></div>");
}
var addCol = function($row, colText, ideal){
  return $row.append( 
    $("<div class='rate-row-col " + (ideal || "") + "'></div>").text(colText)
  );
}
    
var createLoanMatrices = function(title, costFunction, createIdealTag){
  /** Flags */
  var firstRow = 1, firstCol = 1;
  var loan,duration,rate,cost;
  for (var i in loans){
    loan = loans[i];
    $newMatrix = createMatrix(title, "$" + loan);
    
    firstRow = 1;
    firstCol = 1;
    zeroCol = 1
    
    for (var ii in durations){
      duration = durations[ii];
      $newRow = createRow();

      for (var iii in rates){
        rate = rates[iii];

        if (firstRow && firstCol){
          addCol( $newRow, "");
        } else if (firstRow){
          addCol( $newRow, rate*100+"%");
        } else if (firstCol) {
          addCol( $newRow, duration);
        } else {
          cost = costFunction(loan, duration, rate, i, ii, iii);
          addCol( $newRow, "$" + cost, zeroCol ? "" : createIdealTag(loan, duration, rate, i, ii, iii) );
          zeroCol = 0;
        }
        
        firstCol = 0;
      }
      addRow($newMatrix, $newRow);
      firstRow = 0;
      firstCol = 1;
      zeroCol = 1;
    }
    addMatrix($newMatrix);
  }
}

var costTagFromMinMax = function(loan, duration, rate, currentLoan, curDuration, curRate){
  var cost = ( (loan + (loan * rate)) / duration ).toFixed(2);
  var min = currentMonthlyPaymentRange["min"],
      max = currentMonthlyPaymentRange["max"],
      difference = max-min;
  
  var boundaries = {
    "veryhigh": function(cost){ return (cost > max-(difference*comfortBoundaries["veryhigh"])); },
    "high": function(cost){ return (cost > max-(difference*comfortBoundaries["high"])); },
    "verylow": function(cost){ return (cost < min+(difference*comfortBoundaries["verylow"])); },
    "low": function(cost){ return (cost < min+(difference*comfortBoundaries["low"])); },
    "ideal": function(cost){ return 1; },
  }
  if (cost <= max && cost >= min){
    for (var boundaryID in boundaries){
      if ( boundaries[ boundaryID ](cost) ){
        return boundaryID;
      }
    }
  }
}

$(function() {
  $( "#slider-range" ).slider({
    range: true,
    min: 0,
    max: 500,
    values: [ idealMonthlyPaymentRange["min"], idealMonthlyPaymentRange["max"] ],
    slide: function( event, ui ) {
      $( "#range-amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
      currentMonthlyPaymentRange["min"] = ui.values[ 0 ];
      currentMonthlyPaymentRange["max"] = ui.values[ 1 ];
      buildAll();
    }
  });
  $( "#range-amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
    " - $" + $( "#slider-range" ).slider( "values", 1 ) );
  
  $( "#slider-boundaries" ).slider({
    min: 0,
    max: 100,
    values: [ 10, 30, 70, 90 ],
    slide: function( event, ui ) {
      var veryhigh = ui.values[ 3 ],
          high = ui.values[ 2 ],
          low = ui.values[ 1 ],
          verylow = ui.values[ 0 ];
      
      var $colorKeyItems = $(".color-key .color-key-item");

      var percents = {
        "veryhigh": parseInt(100-veryhigh),
        "high": parseInt(100-high - (100 - veryhigh)),
        "low": parseInt(low - verylow),
        "verylow": parseInt(verylow)
      };

      percents["ideal"] = 100-percents["veryhigh"]-percents["high"]-percents["low"]-percents["verylow"];

      $colorKeyItems.filter(".veryhigh").css("width", percents["veryhigh"] + "%").text(percents["veryhigh"] + "%");
      $colorKeyItems.filter(".high").css("width", percents["high"] + "%").text(percents["high"] + "%");
      $colorKeyItems.filter(".low").css("width", percents["low"] + "%").text(percents["low"] + "%");
      $colorKeyItems.filter(".verylow").css("width", percents["verylow"] + "%").text(percents["verylow"] + "%");
      $colorKeyItems.filter(".ideal").css("width", percents["ideal"] + "%").text(percents["ideal"] + "%");
      
      comfortBoundaries["veryhigh"] = (percents["veryhigh"] * .01).toFixed(2);
      comfortBoundaries["high"] = ((percents["high"] + percents["veryhigh"]) * .01).toFixed(2);
      comfortBoundaries["low"] = ((percents["low"] + percents["verylow"]) * .01).toFixed(2);
      comfortBoundaries["verylow"] = (percents["verylow"] * .01).toFixed(2);
      console.log(comfortBoundaries)
      buildAll();
    }
  });

  var veryhigh = $( "#slider-boundaries" ).slider( "values", 3 ),
      high = $( "#slider-boundaries" ).slider( "values", 2 ),
      low = $( "#slider-boundaries" ).slider( "values", 1 ),
      verylow = $( "#slider-boundaries" ).slider( "values", 0 );

  var $colorKeyItems = $(".color-key .color-key-item");
  
  var percents = {
    "veryhigh": parseInt(100-veryhigh),
    "high": parseInt(100-high - (100 - veryhigh)),
    "low": parseInt(low - verylow),
    "verylow": parseInt(verylow)
  };
  
  percents["ideal"] = 100-percents["veryhigh"]-percents["high"]-percents["low"]-percents["verylow"];
  
  $colorKeyItems.filter(".veryhigh").css("width", percents["veryhigh"] + "%");
  $colorKeyItems.filter(".high").css("width", percents["high"] + "%");
  $colorKeyItems.filter(".low").css("width", percents["low"] + "%");
  $colorKeyItems.filter(".verylow").css("width", percents["verylow"] + "%");
  $colorKeyItems.filter(".ideal").css("width", percents["ideal"] + "%");

});

var buildAll = function(){
  $(".matrices").children().remove();
  createLoanMatrices("Monthly Payment", function(loan, duration, rate, currentLoan, curDuration, curRate){
    var curYear = curDuration;
    return ( (loan + (loan * rate)) / duration ).toFixed(2);
  }, costTagFromMinMax);

  createLoanMatrices("Yearly Sum Loss", function(loan, duration, rate, currentLoan, curDuration, curRate){
    var curYear = curDuration;
    return loan*rate*curYear;
  }, costTagFromMinMax);
}

buildAll();

style.css

.range-slider, .boundaries-slider, .color-key{
  width: 50%;
  padding: 10px;
}

.color-key{
  margin-bottom: 40px;
}

.color-key-item{
  box-sizing: border-box;
  float: left;
  padding: 5px 10px;
  width: 10%;
  text-align: center;
}

.matrix{
  width: 50%;
  padding: 10px 20px 80px 20px;
}
.rate-row{
  padding: 10px 5px;
  width: 100%;
}

.rate-row-col{
  padding: 5px 15px;
  text-align: left;
  width: 10%;
  float: left;
}

.right{
  float:right;
}

.veryhigh {
  background-color: rgba(255,0,0,0.7);
}
.high {
  background-color: rgba(255,0,0,0.5);
}
.verylow {
  background-color: rgba(0,0,255,0.7);
}
.low {
  background-color: rgba(0,0,255,0.3);
}
.ideal {
  background-color: rgba(0,255,0,0.5);
}

wBYGJb.markdown

wBYGJb

A Pen by Captain Anonymous on CodePen.

License.