JSFiddle - React, Tailwind, and code Playground

by Eric Abutaliev

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div id="start-form">
  Сумма займа: <input type="number" id="start-summ" />
  <hr/>
  Дата займа: <br/>
  <input type="number" placeholder="День" id="start-date-day" class='date'>
  <input type="number" placeholder="Месяц" id="start-date-mon" class='date'>
  <input type="number" placeholder="Год" id="start-date-year" class='date'>
  <hr/>
  Сумма платежей, предшествующих дате перечисления денежных средств заемщику (страхование и т.п.):
  <input type="number" id="start-firstPay"/>
  <hr/>
  Количество платежей в счет погашения займа:
  <input type="number" id="start-pays" />
  <hr/>
  <button id="start-but">
    Далее
  </button>
</div>
<table id="pays">
  <thead>
    <td>#</td>
    <td>Дата</td>
    <td>Сумма</td>
  </thead>
  <tbody>
    
  </tbody>
</table>
<div id="fin">
  <span></span>
  <hr/>
  <button>
    Еще раз
  </button>
</div>
<script type="template" id="tr">
		</td>
    <td>
      <input type="number" placeholder="День" class='date' >
      <input type="number" placeholder="Месяц" class='date' >
      <input type="number" placeholder="Год" class='date'>
    </td>
    <td>
    	<input type="number" />
    </td>
  </tr>
</script>

CSS

#pays, #fin{ 
  display: none; 
}
button{
  padding: 5px;
  background: orange;
}
input{
  padding: 5px;
  width: 100px;
  display: block;
}
input.date{
  width: 50px;
  display: inline;
}
hr{
  margin: 15px 0;
}
table thead tr td{
  padding: 5px;
  text-align: center;
  font-size: 1.25em;
  border-bottom: 1px dotted black;
}
table tbody tr td{
  padding: 5px;
  text-align: center;
  border-bottom: 1px solid grey;
}

JavaScript

var summArr = [];
var datesArr = [];
$("#start-but").click(function(){
	var summ = - (+$("#start-summ").val() - (+$("#start-firstPay").val()));
  summArr = [summ];
  datesArr = [new Date(+$("#start-date-year").val(), (+$("#start-date-mon").val()-1), +$("#start-date-day").val())];
  makeTable(+$("#start-pays").val());
});
$("#fin").find("button").click(function(){
	$("#fin").hide();
  $("#start-form").show().find("input").val("");
});
var makeTable = function(c){
	$("#start-form").hide();
	var table = $("#pays").show().find("tbody").html("");
  for (var i=0; i<c; i++){
  	addTr(table, i+1);
  }
  table.append("<tr><td colspan=3><button>Узнать ПСК</button></td></tr>");
  table.find("button").click(countPsk);
}
var addTr = function(table, count){
	table.append("<tr class='tr'><td>"+count+$("#tr").html());
}
var countPsk = function(){
	var rows = $("#pays").find(".tr");
  rows.each(function(){
  	summArr.push(+$(this).find("input").eq(3).val());
    datesArr.push(getDateFromTr($(this)));
  });
  var psk = getPsk(summArr, datesArr);
  $("#fin").show().find("span").html("ПСК = "+psk+" %");
  $("#pays").hide();
}
var getDateFromTr = function(tr){
	var y = +tr.find("input").eq(2).val();
  var m = +tr.find("input").eq(1).val()-1;
  var d = +tr.find("input").eq(0).val();
  return new Date (y, m ,d);
}

/*model psk*/
var getCpb = function (bp){
	return 365/bp;
}
var equation = function(summs, dates, bp, j){
	var res = 0;
  for (var i=0; i<summs.length; i++){
  	var datesDif = (dates[i]-dates[0])/(24*60*60*1000);
  	var q = Math.floor(datesDif/bp);
    var e = ( (datesDif) % bp ) / bp;
  	res = res + summs[i] / ( (1 + e*j) * Math.pow(1+j, q) );
  }
  return Math.abs(res);
}
var getModa = function(arr){
	var res = false, resCount = 0;
	for (var i=0; i<arr.length; i++){
  	var checkItem = arr[i];
    var checkItemCount = 0;
    for (var j=0; j<arr.length; j++){
    	if (arr[j]==checkItem){
      	checkItemCount++;
      }
    }
    if (checkItemCount>resCount){
    	res =...