Калькулятор ипотеки

На базовом курсе JavaScript рассматриваем формулу вычисления ипотечного аннуитетного платежа, но полноценного калькулятора ипотеки  нужно создать HTML форму и подружить ее с кодом JS. Расчет ипотеки требует знания размера кредита S, процентной ставки p и времени кредитования в платежных периодах n (т.е. в месяцах). Если в нашем кредитном калькуляторе нужно учитывать первоначальный платеж,, то можно ввести дополнительную переменную и рассматривать целую стоимость недвижимости, а не тело кредита (в заметке это не делается).

Для начала надо инициализировать переменные калькулятора. Обратите внимание, также создается переменная A, которую в текущем скрипте использовать не буду, но для дальнейших работ может пригодится.

var S = 1e6, //тело кредита
p = 14, //процентная ставка в годовых
n = 10, //количество лет
A = 0; //ежемесячный платёж

Примечание: задача решается наименее простым способом для начинающих разработчиков. Можно создать калькулятор, используя объектный подход.

Формула ипотеки

Формула ипотеки записывается как A = S * p / (1 - Math.pow(1 + p, -n), где p — процентная ставка, выраженная в долях за месяц. (Примечание: вопрос перевода долей в проценты и обратно рассматривается в 6-7 классах средней школы), n — количество платежных периодов (т.е. месяцев, а при определении переменной мы указали годы).

p = p / 1200; //переводим в доли за месяц
n = n * 12; //переводим в месяцы. Можно и так: n *= 12;

Форма калькулятора

<div id="ipoteka">
 <div class="row"><input type="text" name="S" id="S" placeholder="Тело кредита" >руб.</div>
 <div class="row"><input type="text" name="p" id="p" placeholder="Процентная ставка" >%</div>
 <div class="row"><input type="text" name="n" id="n" placeholder="Период кредитования">г.</div>
 <div class="row"><a href="javascript:calc()">Найти</a></div>
 <div class="row">Платеж за месяц:
 <div id="result"></div> 
 </div> 
</div>

Дизайн калькулятора

 #ipoteka{
 font: 1em Arial,sans-serif;
 float: left;
 border: 2px dashed #B0FFB6
}

#ipoteka a {
 text-decoration: none;
 color: #369;
 border-radius: 4px;
 border: 1px solid #69e; 
 padding: 3px 6px;
 display: inline-block;
}

#ipoteka .row{
 margin: 12px;
}
#ipoteka .row input{
 padding: 5px;
 border-radius: 4px;
 border: 1px solid #69e;
 outline: 0;
}
#ipoteka .row input:focus{
 box-shadow: 0 0 4px #369
}
#ipoteka #result{
 font: 3em Arial,sans-serif;
}

Скрипт JS-калькулятора

function calc(){
 var S = document.getElementById("S").value - 0;
 var p = document.getElementById("p").value - 0;
 var n = document.getElementById("n").value - 0;
 
 if(
  typeof S != "number" ||
  typeof p != "number" ||
  typeof n != "number" 
 ) return false;
 
 p = p / 1200; 
 n = n * 12; 
 
 document.getElementById("result").innerHTML =  (S * p / (1 - Math.pow(1 + p, -n))).toFixed(2); 
}