Loan Payments Remaining

by Ryan Allison

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>

<div id="tabs">
  <ul>
    <li><a href="#tab1">F150</a></li>
    <li><a href="#tab2">Odyssey</a></li>
    <li><a href="#tab3">Student Loan</a></li>
  </ul>
  <div id="tab1">
    <div id="spnFordMo"></div>
    <div id="divFordChart"></div>
  </div>
  <div id="tab2">
    <span id="spnHondaMo"></span>
    <div id="divHondaChart"></div>
  </div>
  <div id="tab3">
    <span id="spnWfMo"></span>
    <div id="divWfChart">
    </div>
  </div>

CSS

#tabs { 
    padding: 0px; 
    background: none; 
    border-width: 0px; 
} 
#tabs .ui-tabs-nav { 
    padding-left: 0px; 
    background: transparent; 
    border-width: 0px 0px 1px 0px; 
    -moz-border-radius: 0px; 
    -webkit-border-radius: 0px; 
    border-radius: 0px; 
} 
#tabs .ui-tabs-panel { 
    background: #f5f3e5 url(http://code.jquery.com/ui/1.8.23/themes/south-street/images/ui-bg_highlight-hard_100_f5f3e5_1x100.png) repeat-x scroll 50% top; 
    border-width: 0px 1px 1px 1px; 
}

.circle {
	  border-radius: 50%;
	  height: 15px;
	  width: 15px;
	  border: 1px solid black;
    margin: 0 5px 0 0;
    display: inline-block;
	}

.full {
    background-color: green;
}

JavaScript

$(document).ready(function() {
  $("#tabs").tabs();

	//Loan lengths months
  var ford = 72;
  var honda = 75;
  var wf = 180;

  $("#spnFordMo").text(carMonths(ford) + " of " + ford + " payments remaining.");
  $("#spnHondaMo").text(carMonths(honda) + " of " + honda + " payments remaining.");
  $("#spnWfMo").text(wfMonths(wf) + " of " + wf + " payments remaining.");
});


function carMonths(make) {
  var carstart = new Date(2018, 3, 22);
  var now = new Date();
  var paid = make - monthDiff(carstart, now);
  if (now.getDate() >= 22) {
    paid--;
  }
  if (make == 72) {
    $("#divFordChart").html(dots(make, paid));
  } else {
    $("#divHondaChart").html(dots(make, paid));
  }
  return paid;
}

function dots(make, paid) {
  var counter = 0;
  var sb = "";

  for (x = 0; x < make; x++) {
    if (counter == 0) {
      sb += "<div>";
    }
    var full = x < (make - paid) ? " full" : "";
    sb += "<div class='circle" + full + "'></div>";
    counter++;
    if (counter == 12) {
      sb += "</div>";
      counter = 0;
    }

  }
  return sb;
}

function wfMonths(loan) {
  var wfstart = new Date(2011, 10, 3);
  var now = new Date();
  var paid = loan - monthDiff(wfstart, now);
  if (now.getDate() >= 3) {
    paid--;
  }
  $("#divWfChart").html(dots(loan, paid));
  return paid;
}

function monthDiff(d1, d2) {
  var months;
  months = (d2.getFullYear() - d1.getFullYear()) * 12;
  months -= d1.getMonth();
  months += d2.getMonth();
  return (months - 1) <= 0 ? 0 : months - 1;
}