<table style="width: 100%; font-family: sans-serif !important;"><!-- [et_pb_line_break_holder] --><tr><!-- [et_pb_line_break_holder] --> <td style="font-size: 1.7em;" colspan="2"><!-- [et_pb_line_break_holder] --> Entrer les données d'emprunt<!-- [et_pb_line_break_holder] --> </td><!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --></tr><!-- [et_pb_line_break_holder] --><tr><!-- [et_pb_line_break_holder] --> <td width="90%"><!-- [et_pb_line_break_holder] --> <input id="typeMachine" onchange="calculate('typeMachine');" class="myField" placeholder="Indiquer la machine à financer"><!-- [et_pb_line_break_holder] --> </td><!-- [et_pb_line_break_holder] --> <td><!-- [et_pb_line_break_holder] --> <img src="http://cipac-industrie.nc/wp-content/uploads/2017/09/help.png" style="width: 20px;" onmouseover="helpInfoBulle('typeMachine', 'Indiqueer le type de machine a financer.');" onmouseout="helpClose('typeMachine')"><!-- [et_pb_line_break_holder] --> <span id="help_typeMachine" style="display: none;" class="bulleInfoHelp"></span><!-- [et_pb_line_break_holder] --> </td><!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --></tr><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><tr><!-- [et_pb_line_break_holder] --> <td><!-- [et_pb_line_break_holder] --> <input id="amount" onchange="calculate('amount');" class="myField" placeholder="Montant du projet (Xpf)" maxlength="10" max="1000000000"><!-- [et_pb_line_break_holder] --> <span id="info_amount" style="display: none;" class="bulleInfo"></span><!-- [et_pb_line_break_holder] --> </td><!-- [et_pb_line_break_holder] --> <td><!-- [et_pb_line_break_holder] --> <img src="http://cipac-industrie.nc/wp-content/uploads/2017/09/help.png" style="width: 20px;" onmouseover="helpInfoBulle('amount', 'Montant total du projet ne peut pas être supperieur à 1 millard de francs.');" onmouseout="helpClose('amount')"><!-- [et_pb_line_break_holder] --> <span id="help_amount" style="display: none;" class="bulleInfoHelp"></span><!-- [et_pb_line_break_holder] --> </td><!-- [et_pb_line_break_holder] --></tr><!-- [et_pb_line_break_holder] --><tr><!-- [et_pb_line_break_holder] --> <td><!-- [et_pb_line_break_holder] --> <input id="sub" onchange="calculate('sub');" class="myField" placeholder="Subvention" maxlength="10" max="1000000000"><!-- [et_pb_line_break_holder] --> <span id="info_sub" style="display: none;" class="bulleInfo"></span><!-- [et_pb_line_break_holder] --> </td><!-- [et_pb_line_break_holder] --> <td><!-- [et_pb_line_break_holder] --> <img src="http://cipac-industrie.nc/wp-content/uploads/2017/09/help.png" style="width: 20px;" onmouseover="helpInfoBulle('sub', 'Montant total des subventions ne peut pas être supperieur à 1 millard de francs.');" onmouseout="helpClose('sub')"><!-- [et_pb_line_break_holder] --> <span id="help_sub" style="display: none;" class="bulleInfoHelp"></span><!-- [et_pb_line_break_holder] --> </td><!-- [et_pb_line_break_holder] --></tr><!-- [et_pb_line_break_holder] --><tr><!-- [et_pb_line_break_holder] --> <td><!-- [et_pb_line_break_holder] --> <input id="apport" onchange="calculate('apport');" class="myField" placeholder="Apport" maxlength="10" max="1000000000"><!-- [et_pb_line_break_holder] --> <span id="info_apport" style="display: none;" class="bulleInfo"></span><!-- [et_pb_line_break_holder] --> </td><!-- [et_pb_line_break_holder] --> <td><!-- [et_pb_line_break_holder] --> <img src="http://cipac-industrie.nc/wp-content/uploads/2017/09/help.png" style="width: 20px;" onmouseover="helpInfoBulle('apport', 'Montant total de l\'apport ne peut pas être supperieur à 1 millard de francs.');" onmouseout="helpClose('apport')"><!-- [et_pb_line_break_holder] --> <span id="help_apport" style="display: none;" class="bulleInfoHelp"></span><!-- [et_pb_line_break_holder] --> </td><!-- [et_pb_line_break_holder] --></tr><!-- [et_pb_line_break_holder] --><tr><!-- [et_pb_line_break_holder] --> <td><!-- [et_pb_line_break_holder] --> <input type="number" id="defisc" onchange="calculate('defisc');" class="myField" placeholder="Defisc (%)"><!-- [et_pb_line_break_holder] --> <span id="info_defisc" style="display: none;" class="bulleInfo"></span><!-- [et_pb_line_break_holder] --> </td><!-- [et_pb_line_break_holder] --> <td><!-- [et_pb_line_break_holder] --> <img src="http://cipac-industrie.nc/wp-content/uploads/2017/09/help.png" style="width: 20px;" onmouseover="helpInfoBulle('defisc', 'Le pourcentage de défiscalisation doit être à 0% soit compris en 24.71% et 32%.');" onmouseout="helpClose('defisc')"><!-- [et_pb_line_break_holder] --> <span id="help_defisc" style="display: none;" class="bulleInfoHelp"></span><!-- [et_pb_line_break_holder] --> </td><!-- [et_pb_line_break_holder] --></tr><!-- [et_pb_line_break_holder] --><tr><!-- [et_pb_line_break_holder] --> <td><!-- [et_pb_line_break_holder] --> <input type="number" id="apr" onchange="calculate('apr');" class="myField" placeholder="Taux intérêt annuel (%)"><!-- [et_pb_line_break_holder] --> <span id="info_apr" style="display: none;" class="bulleInfo"></span><!-- [et_pb_line_break_holder] --> </td><!-- [et_pb_line_break_holder] --> <td><!-- [et_pb_line_break_holder] --> <img src="http://cipac-industrie.nc/wp-content/uploads/2017/09/help.png" style="width: 20px;" onmouseover="helpInfoBulle('apr', 'Le taux d\'emprunt doit être compris en 3% et 25%.');" onmouseout="helpClose('apr')"><!-- [et_pb_line_break_holder] --> <span id="help_apr" style="display: none;" class="bulleInfoHelp"></span><!-- [et_pb_line_break_holder] --> </td><!-- [et_pb_line_break_holder] --><tr><!-- [et_pb_line_break_holder] --> <td><!-- [et_pb_line_break_holder] --> <input type="number" id="years" onchange="calculate('years');" class="myField" placeholder="Période (en mois)"><!-- [et_pb_line_break_holder] --> <span id="info_years" style="display: none;" class="bulleInfo"></span><!-- [et_pb_line_break_holder] --> </td><!-- [et_pb_line_break_holder] --> <td><!-- [et_pb_line_break_holder] --> <img src="http://cipac-industrie.nc/wp-content/uploads/2017/09/help.png" style="width: 20px;" onmouseover="helpInfoBulle('years', 'La période d\'emprunt avec une défiscalisation ne peut être suppérieure à 60 mois (5 ans).<br>Dans le cas ou il n\'y a pas de défiscalisation la durée d\'emprunt est de 120 mois (10).');" onmouseout="helpClose('years')"><!-- [et_pb_line_break_holder] --> <span id="help_years" style="display: none;" class="bulleInfoHelp"></span><!-- [et_pb_line_break_holder] --> </td><!-- [et_pb_line_break_holder] --></tr><!-- [et_pb_line_break_holder] --><tr><!-- [et_pb_line_break_holder] --> <td><!-- [et_pb_line_break_holder] --> <input type="number" id="assurance" onchange="calculate('assurance');" class="myField" placeholder="Assurance (%)"><!-- [et_pb_line_break_holder] --> <span id="info_assurance" style="display: none;" class="bulleInfo"></span><!-- [et_pb_line_break_holder] --> </td><!-- [et_pb_line_break_holder] --> <td><!-- [et_pb_line_break_holder] --> <img src="http://cipac-industrie.nc/wp-content/uploads/2017/09/help.png" style="width: 20px;" onmouseover="helpInfoBulle('assurance', 'Le taux d\'assurance doit être compris en 1% et 20% !.');" onmouseout="helpClose('assurance')"><!-- [et_pb_line_break_holder] --> <span id="help_assurance" style="display: none;" class="bulleInfoHelp"></span><!-- [et_pb_line_break_holder] --> </td><!-- [et_pb_line_break_holder] --></tr><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><tr><!-- [et_pb_line_break_holder] --> <td colspan="2"><!-- [et_pb_line_break_holder] --> <button onclick="calculate();" class="myBtnCalculate">Calculer</button><!-- [et_pb_line_break_holder] --> </td><!-- [et_pb_line_break_holder] --></tr><!-- [et_pb_line_break_holder] --><tr><!-- [et_pb_line_break_holder] --> <td colspan="2" width="50%" align="left" style="font-weight: 800;">Montant du projet :<!-- [et_pb_line_break_holder] --> <span id="montant_projet" style="font-weight: 800;"></span> Xpf<!-- [et_pb_line_break_holder] --> </td><!-- [et_pb_line_break_holder] --></tr><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><tr><!-- [et_pb_line_break_holder] --> <td colspan="2" width="50%" align="left" style="font-weight: 800;">Montant emprunté :<!-- [et_pb_line_break_holder] --> <span id="montant_emprunt" style="font-weight: 800;"></span> Xpf<!-- [et_pb_line_break_holder] --> <input type="hidden" id="zipcode" onchange="calculate();"><!-- [et_pb_line_break_holder] --> </td><!-- [et_pb_line_break_holder] --></tr><!-- [et_pb_line_break_holder] --><tr><!-- [et_pb_line_break_holder] --> <td colspan="2" width="50%" align="left" style="font-weight: 800;">Mensualités :<!-- [et_pb_line_break_holder] --> <span class="output" id="payment" style="font-weight: 800;"></span> Xpf<!-- [et_pb_line_break_holder] --> </td><!-- [et_pb_line_break_holder] --></tr><!-- [et_pb_line_break_holder] --><tr><!-- [et_pb_line_break_holder] --> <td colspan="2" width="50%" align="left" style="font-weight: 800;">Cout du crédit :<!-- [et_pb_line_break_holder] --> <span class="output" id="total" style="font-weight: 800;"></span> Xpf<!-- [et_pb_line_break_holder] --> </td><!-- [et_pb_line_break_holder] --></tr><!-- [et_pb_line_break_holder] --><tr><!-- [et_pb_line_break_holder] --> <td colspan="2" width="50%" align="left">Total des intérêts :<!-- [et_pb_line_break_holder] --> <span class="output" id="totalinterest"></span> Xpf<!-- [et_pb_line_break_holder] --> </td><!-- [et_pb_line_break_holder] --></tr><!-- [et_pb_line_break_holder] --><tr><!-- [et_pb_line_break_holder] --> <td colspan="2"><!-- [et_pb_line_break_holder] --> <div id="lenders"></div><!-- [et_pb_line_break_holder] --> </td><!-- [et_pb_line_break_holder] --></tr><!-- [et_pb_line_break_holder] --><tr><!-- [et_pb_line_break_holder] --> <td colspan="2"><!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> </td><!-- [et_pb_line_break_holder] --></tr><!-- [et_pb_line_break_holder] --><tr><!-- [et_pb_line_break_holder] --> <td colspan="2" align="center"><!-- [et_pb_line_break_holder] --> <canvas id="graph" width="600" height="300" style="background-color: #f1f1f1; display: none;"></canvas><!-- [et_pb_line_break_holder] --> </td><!-- [et_pb_line_break_holder] --></tr><!-- [et_pb_line_break_holder] --></table><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><script type="text/javascript"><!-- [et_pb_line_break_holder] --> function helpInfoBulle(myHelp, myMessage) {<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> var x = event.clientX - 200;<!-- [et_pb_line_break_holder] --> var y = event.clientY;<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> ib = document.getElementById('help_'+myHelp);<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> ib.innerHTML = myMessage;<!-- [et_pb_line_break_holder] --> ib.style.display = "block";<!-- [et_pb_line_break_holder] --> ib.style.left = x + "px";<!-- [et_pb_line_break_holder] --> ib.style.top = y + "px";<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> function helpClose(myHelpClose)<!-- [et_pb_line_break_holder] --> {<!-- [et_pb_line_break_holder] --> document.getElementById('help_'+myHelpClose).style.display = "none";<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> function splitString(myString) {<!-- [et_pb_line_break_holder] --> var lengMyString = myString.length;<!-- [et_pb_line_break_holder] --> var outputString;<!-- [et_pb_line_break_holder] --> if(lengMyString == 1 || lengMyString == 2 || lengMyString == 3)<!-- [et_pb_line_break_holder] --> {<!-- [et_pb_line_break_holder] --> var outputString = myString;<!-- [et_pb_line_break_holder] --> } else if(lengMyString == 4 || lengMyString == 5 || lengMyString == 6)<!-- [et_pb_line_break_holder] --> {<!-- [et_pb_line_break_holder] --> var init1 = myString.substr(-3);<!-- [et_pb_line_break_holder] --> var init2 = myString.substr(-lengMyString, lengMyString-3);<!-- [et_pb_line_break_holder] --> var outputString = init2 + " " + init1;<!-- [et_pb_line_break_holder] --> } else if(lengMyString == 7 || lengMyString == 8 || lengMyString == 9)<!-- [et_pb_line_break_holder] --> {<!-- [et_pb_line_break_holder] --> var init1 = myString.substr(-3);<!-- [et_pb_line_break_holder] --> if(lengMyString == 7) { var a = 1; }<!-- [et_pb_line_break_holder] --> else if (lengMyString == 8) { var a = 2; }<!-- [et_pb_line_break_holder] --> else if (lengMyString == 9) { var a = 3; }<!-- [et_pb_line_break_holder] --> var init2 = myString.substr(-lengMyString+a, 3);<!-- [et_pb_line_break_holder] --> var init3 = myString.substr(-lengMyString, lengMyString-6);<!-- [et_pb_line_break_holder] --> var outputString = init3 + " " + init2 + " " + init1;<!-- [et_pb_line_break_holder] --> } else if(lengMyString == 10)<!-- [et_pb_line_break_holder] --> {<!-- [et_pb_line_break_holder] --> var init1 = myString.substr(-3);<!-- [et_pb_line_break_holder] --> var init2 = myString.substr(4, 3);<!-- [et_pb_line_break_holder] --> var init3 = myString.substr(1, 3);<!-- [et_pb_line_break_holder] --> var init4 = myString.substr(0, 1);<!-- [et_pb_line_break_holder] --> var outputString = init4 + " " + init3 + " " + init2 + " " + init1;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> return outputString;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] -->function checkFieldInt(myVal) {<!-- [et_pb_line_break_holder] --> if(myVal == 'amount' || myVal == 'sub' || myVal == 'apport')<!-- [et_pb_line_break_holder] --> {<!-- [et_pb_line_break_holder] --> if(document.getElementById(myVal).value > 1999999999) {<!-- [et_pb_line_break_holder] --> document.getElementById(myVal).style.backgroundColor = "#ff9999";<!-- [et_pb_line_break_holder] --> document.getElementById('info_'+myVal).innerHTML = '^ 1 000 000 000 Maximum !';<!-- [et_pb_line_break_holder] --> document.getElementById('info_'+myVal).style.display = "block";<!-- [et_pb_line_break_holder] --> } else {<!-- [et_pb_line_break_holder] --> document.getElementById(myVal).style.backgroundColor = "#f5f5f5";<!-- [et_pb_line_break_holder] --> document.getElementById('info_'+myVal).style.display = "none";<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> if(myVal == 'defisc')<!-- [et_pb_line_break_holder] --> {<!-- [et_pb_line_break_holder] --> var miniDefisc = 24.71;<!-- [et_pb_line_break_holder] --> var maxiDefisc = 32;<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> if(document.getElementById(myVal).value > 0)<!-- [et_pb_line_break_holder] --> {<!-- [et_pb_line_break_holder] --> if(document.getElementById(myVal).value < miniDefisc || document.getElementById(myVal).value > maxiDefisc)<!-- [et_pb_line_break_holder] --> {<!-- [et_pb_line_break_holder] --> document.getElementById(myVal).style.backgroundColor = "#ff9999";<!-- [et_pb_line_break_holder] --> document.getElementById('info_'+myVal).innerHTML = '^ Le pourcentage de défiscalisation doit être à 0 soit compris en '+miniDefisc+' et '+maxiDefisc+' !';<!-- [et_pb_line_break_holder] --> document.getElementById('info_'+myVal).style.display = "block";<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> } else {<!-- [et_pb_line_break_holder] --> document.getElementById(myVal).style.backgroundColor = "#f5f5f5";<!-- [et_pb_line_break_holder] --> document.getElementById('info_'+myVal).style.display = "none";<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> } else {<!-- [et_pb_line_break_holder] --> document.getElementById(myVal).style.backgroundColor = "#f5f5f5";<!-- [et_pb_line_break_holder] --> document.getElementById('info_'+myVal).style.display = "none";<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> } <!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> if(myVal == 'apr')<!-- [et_pb_line_break_holder] --> {<!-- [et_pb_line_break_holder] --> var miniDefisc = 3;<!-- [et_pb_line_break_holder] --> var maxiDefisc = 25;<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> if(document.getElementById(myVal).value < miniDefisc || document.getElementById(myVal).value > maxiDefisc)<!-- [et_pb_line_break_holder] --> {<!-- [et_pb_line_break_holder] --> document.getElementById(myVal).style.backgroundColor = "#ff9999";<!-- [et_pb_line_break_holder] --> document.getElementById('info_'+myVal).innerHTML = '^ Le taux d\'emprunt doit être compris en '+miniDefisc+' et '+maxiDefisc+' !';<!-- [et_pb_line_break_holder] --> document.getElementById('info_'+myVal).style.display = "block";<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> } else {<!-- [et_pb_line_break_holder] --> document.getElementById(myVal).style.backgroundColor = "#f5f5f5";<!-- [et_pb_line_break_holder] --> document.getElementById('info_'+myVal).style.display = "none";<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> if(myVal == 'years')<!-- [et_pb_line_break_holder] --> {<!-- [et_pb_line_break_holder] --> var miniDefisc = 24.70;<!-- [et_pb_line_break_holder] --> var maxiDefisc = 32.01;<!-- [et_pb_line_break_holder] --> var yearDefisc = 60;<!-- [et_pb_line_break_holder] --> var yearNoDefisc = 120;<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> if(document.getElementById('defisc').value > miniDefisc && document.getElementById('defisc').value < maxiDefisc && document.getElementById(myVal).value > yearDefisc)<!-- [et_pb_line_break_holder] --> {<!-- [et_pb_line_break_holder] --> document.getElementById(myVal).style.backgroundColor = "#ff9999";<!-- [et_pb_line_break_holder] --> document.getElementById('info_'+myVal).innerHTML = '^ ' + yearDefisc + ' mois est le maximum dans le cadre d\'une déficalisation !';<!-- [et_pb_line_break_holder] --> document.getElementById('info_'+myVal).style.display = "block";<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> } else if (document.getElementById('defisc').value == 0 && document.getElementById(myVal).value > yearNoDefisc) {<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> document.getElementById(myVal).style.backgroundColor = "#ff9999";<!-- [et_pb_line_break_holder] --> document.getElementById('info_'+myVal).innerHTML = '^ ' + yearNoDefisc + ' mois est la durée maximum d\'emprunt pour ce type de projet !';<!-- [et_pb_line_break_holder] --> document.getElementById('info_'+myVal).style.display = "block";<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> } else {<!-- [et_pb_line_break_holder] --> document.getElementById(myVal).style.backgroundColor = "#f5f5f5";<!-- [et_pb_line_break_holder] --> document.getElementById('info_'+myVal).style.display = "none";<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> if(myVal == 'assurance')<!-- [et_pb_line_break_holder] --> {<!-- [et_pb_line_break_holder] --> var miniDefisc = 1;<!-- [et_pb_line_break_holder] --> var maxiDefisc = 20;<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> if(document.getElementById(myVal).value < miniDefisc || document.getElementById(myVal).value > maxiDefisc)<!-- [et_pb_line_break_holder] --> {<!-- [et_pb_line_break_holder] --> document.getElementById(myVal).style.backgroundColor = "#ff9999";<!-- [et_pb_line_break_holder] --> document.getElementById('info_'+myVal).innerHTML = '^ Le taux d\'assurance doit être compris en '+miniDefisc+' et '+maxiDefisc+' !';<!-- [et_pb_line_break_holder] --> document.getElementById('info_'+myVal).style.display = "block";<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> } else {<!-- [et_pb_line_break_holder] --> document.getElementById(myVal).style.backgroundColor = "#f5f5f5";<!-- [et_pb_line_break_holder] --> document.getElementById('info_'+myVal).style.display = "none";<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] -->function calculate(myVal) {<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> checkFieldInt(myVal);<!-- [et_pb_line_break_holder] --> //Look up the input and output elements in the document<!-- [et_pb_line_break_holder] --> init_amount = document.getElementById("amount");<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> var apr = document.getElementById("apr");<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> var init_years = document.getElementById("years");<!-- [et_pb_line_break_holder] --> var years = init_years.value / 12;<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> var zipcode = document.getElementById("zipcode");<!-- [et_pb_line_break_holder] --> var payment = document.getElementById("payment");<!-- [et_pb_line_break_holder] --> var total = document.getElementById("total");<!-- [et_pb_line_break_holder] --> var totalinterest = document.getElementById("totalinterest");<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> //document.getElementById("amount").value = splitString(init_amount.value);<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> var montant_emprunt = document.getElementById('montant_emprunt');<!-- [et_pb_line_break_holder] --> montant_projet = document.getElementById('montant_projet');<!-- [et_pb_line_break_holder] --> sub = document.getElementById('sub').value;<!-- [et_pb_line_break_holder] --> apport = document.getElementById('apport').value;<!-- [et_pb_line_break_holder] --> defisc = document.getElementById('defisc').value;<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> a = defisc / 100;<!-- [et_pb_line_break_holder] --> init_defisc = init_amount.value * a;<!-- [et_pb_line_break_holder] --> amount = (init_amount.value - sub - apport - init_defisc).toFixed(0);<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> assurance = document.getElementById('assurance').value;<!-- [et_pb_line_break_holder] --> assurance = assurance.replace(",", ".");<!-- [et_pb_line_break_holder] --> init_cal_assurance = assurance / 100;<!-- [et_pb_line_break_holder] --> cal_assurance = (init_amount.value * init_cal_assurance);<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> montant_emprunt.innerHTML = splitString(amount);<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> montant_projet.innerHTML = splitString(init_amount.value);<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] -->// Get the user's input from the input elements.<!-- [et_pb_line_break_holder] -->// Convert interest from a percentage to a decimal, and convert from<!-- [et_pb_line_break_holder] -->// an annual rate to a monthly rate. Convert payment period in years<!-- [et_pb_line_break_holder] -->// to the number of monthly payments.<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->//var principal = parseFloat(amount.value);<!-- [et_pb_line_break_holder] -->var principal = parseFloat(amount);<!-- [et_pb_line_break_holder] -->var interest = parseFloat(apr.value) / 100 / 12;<!-- [et_pb_line_break_holder] -->var payments = parseFloat(years) * 12;<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] -->// compute the monthly payment figure<!-- [et_pb_line_break_holder] -->var x = Math.pow(1 + interest, payments); //Math.pow computes powers<!-- [et_pb_line_break_holder] -->var monthly = (principal*x*interest)/(x-1);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->// If the result is a finite number, the user's input was good and<!-- [et_pb_line_break_holder] -->// we have meaningful results to display<!-- [et_pb_line_break_holder] -->if (isFinite(monthly)){<!-- [et_pb_line_break_holder] --> // Fill in the output fields, rounding to 2 decimal places<!-- [et_pb_line_break_holder] --> var final_monthly = monthly + cal_assurance;<!-- [et_pb_line_break_holder] --> initPayment = final_monthly.toFixed(0);<!-- [et_pb_line_break_holder] --> payment.innerHTML = splitString(initPayment);<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> cout_assurance = init_years.value * cal_assurance;<!-- [et_pb_line_break_holder] --> initTotal = monthly * payments;<!-- [et_pb_line_break_holder] --> finalTotal = (initTotal + cout_assurance).toFixed(0);<!-- [et_pb_line_break_holder] --> //total.innerHTML = splitString(initTotal);<!-- [et_pb_line_break_holder] --> total.innerHTML = splitString(finalTotal);<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> initTotalinterest = (finalTotal-amount).toFixed(0);<!-- [et_pb_line_break_holder] --> //initTotalinterest = ((monthly*payments)-amount).toFixed(0);<!-- [et_pb_line_break_holder] --> totalinterest.innerHTML = splitString(initTotalinterest);<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] -->// Save the user's input so we can restore it the next time they visit<!-- [et_pb_line_break_holder] --> //save(amount.value, apr.value, years.value, zipcode.value);<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> // Advertise: find and display local lenders, but ignore network errors<!-- [et_pb_line_break_holder] --> try { // Catch any errors that occur within these curly braces<!-- [et_pb_line_break_holder] -->// getLenders(amount.value, apr.value, years.value, zipcode.value);<!-- [et_pb_line_break_holder] --> getLenders(amount, apr.value, years, zipcode.value);<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> catch(e) { /* And ignore those errors */ }<!-- [et_pb_line_break_holder] --> // Finally, chart loan balance, and interest and equity payments<!-- [et_pb_line_break_holder] --> chart(principal, interest, monthly, payments);<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> else {<!-- [et_pb_line_break_holder] --> // Result was Not-a-Number or infinite, which means the input was<!-- [et_pb_line_break_holder] --> // incomplete or invalid. Clear any previously displayed output.<!-- [et_pb_line_break_holder] --> payment.innerHTML = ""; // Erase the content of these elements<!-- [et_pb_line_break_holder] --> total.innerHTML = ""<!-- [et_pb_line_break_holder] --> totalinterest.innerHTML = "";<!-- [et_pb_line_break_holder] --> chart(); // With no arguments, clears the chart<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->// Save the user's input as properties of the localStorage object. Those<!-- [et_pb_line_break_holder] -->// properties will still be there when the user visits in the future<!-- [et_pb_line_break_holder] -->// This storage feature will not work in some browsers (Firefox, e.g.) if you<!-- [et_pb_line_break_holder] -->// run the example from a local file:// URL. It does work over HTTP, however.<!-- [et_pb_line_break_holder] -->function save(amount, apr, years, zipcode) {<!-- [et_pb_line_break_holder] --> if (window.localStorage) { // Only do this if the browser supports it<!-- [et_pb_line_break_holder] --> localStorage.loan_amount = amount;<!-- [et_pb_line_break_holder] --> localStorage.loan_apr = apr;<!-- [et_pb_line_break_holder] --> localStorage.loan_years = years;<!-- [et_pb_line_break_holder] --> localStorage.loan_zipcode = zipcode;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->/////*/<!-- [et_pb_line_break_holder] -->// Automatically attempt to restore input fields when the document first loads.<!-- [et_pb_line_break_holder] -->window.onload = function() {<!-- [et_pb_line_break_holder] --> // If the browser supports localStorage and we have some stored data<!-- [et_pb_line_break_holder] --> if (window.localStorage && localStorage.loan_amount) {<!-- [et_pb_line_break_holder] --> document.getElementById("amount").value = localStorage.loan_amount;<!-- [et_pb_line_break_holder] --> document.getElementById("apr").value = localStorage.loan_apr;<!-- [et_pb_line_break_holder] --> document.getElementById("years").value = localStorage.loan_years;<!-- [et_pb_line_break_holder] --> document.getElementById("zipcode").value = localStorage.loan_zipcode;<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] -->};<!-- [et_pb_line_break_holder] -->//////*/<!-- [et_pb_line_break_holder] -->// Pass the user's input to a server-side script which can (in theory) return<!-- [et_pb_line_break_holder] -->// a list of links to local lenders interested in making loans. This example<!-- [et_pb_line_break_holder] -->// does not actually include a working implementation of such a lender-finding<!-- [et_pb_line_break_holder] -->// service. But if the service existed, this function would work with it.<!-- [et_pb_line_break_holder] -->function getLenders(amount, apr, years, zipcode) {<!-- [et_pb_line_break_holder] --> // If the browser does not support the XMLHttpRequest object, do nothing<!-- [et_pb_line_break_holder] --> if (!window.XMLHttpRequest) return;<!-- [et_pb_line_break_holder] --> // Find the element to display the list of lenders in<!-- [et_pb_line_break_holder] --> var ad = document.getElementById("lenders");<!-- [et_pb_line_break_holder] --> if (!ad) return; // Quit if no spot for output <!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> // Encode the user's input as query parameters in a URL<!-- [et_pb_line_break_holder] --> var url = "getLenders.php" + // Service url plus<!-- [et_pb_line_break_holder] --> "?amt=" + encodeURIComponent(amount) + // user data in query string<!-- [et_pb_line_break_holder] --> "&apr=" + encodeURIComponent(apr) +<!-- [et_pb_line_break_holder] --> "&yrs=" + encodeURIComponent(years) +<!-- [et_pb_line_break_holder] --> "&zip=" + encodeURIComponent(zipcode);<!-- [et_pb_line_break_holder] --> // Fetch the contents of that URL using the XMLHttpRequest object<!-- [et_pb_line_break_holder] --> var req = new XMLHttpRequest(); // Begin a new request<!-- [et_pb_line_break_holder] --> req.open("GET", url); // An HTTP GET request for the url<!-- [et_pb_line_break_holder] --> req.send(null); // Send the request with no body<!-- [et_pb_line_break_holder] --> // Before returning, register an event handler function that will be called<!-- [et_pb_line_break_holder] --> // at some later time when the HTTP server's response arrives. This kind of<!-- [et_pb_line_break_holder] --> // asynchronous programming is very common in client-side JavaScript.<!-- [et_pb_line_break_holder] --> req.onreadystatechange = function() {<!-- [et_pb_line_break_holder] --> if (req.readyState == 4 && req.status == 200) {<!-- [et_pb_line_break_holder] --> // If we get here, we got a complete valid HTTP response<!-- [et_pb_line_break_holder] --> var response = req.responseText; // HTTP response as a string<!-- [et_pb_line_break_holder] --> var lenders = JSON.parse(response); // Parse it to a JS array<!-- [et_pb_line_break_holder] --> // Convert the array of lender objects to a string of HTML<!-- [et_pb_line_break_holder] --> var list = "";<!-- [et_pb_line_break_holder] --> for(var i = 0; i < lenders.length; i++) {<!-- [et_pb_line_break_holder] --> list += "<li><a href='" + lenders[i].url + "'>" +<!-- [et_pb_line_break_holder] --> lenders[i].name + "</a>";<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> // Display the HTML in the element from above.<!-- [et_pb_line_break_holder] --> ad.innerHTML = "<ul>" + list + "</ul>";<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->// Chart monthly loan balance, interest and equity in an HTML <canvas> element.<!-- [et_pb_line_break_holder] -->// If called with no arguments then just erase any previously drawn chart.<!-- [et_pb_line_break_holder] -->function chart(principal, interest, monthly, payments) {<!-- [et_pb_line_break_holder] --> var graph = document.getElementById("graph"); // Get the <canvas> tag<!-- [et_pb_line_break_holder] --> graph.width = graph.width; // Magic to clear and reset the canvas element<!-- [et_pb_line_break_holder] --> // If we're called with no arguments, or if this browser does not support<!-- [et_pb_line_break_holder] --> // graphics in a <canvas> element, then just return now.<!-- [et_pb_line_break_holder] --> if (arguments.length == 0 || !graph.getContext) return;<!-- [et_pb_line_break_holder] --> // Get the "context" object for the <canvas> that defines the drawing API<!-- [et_pb_line_break_holder] --> var g = graph.getContext("2d"); // All drawing is done with this object<!-- [et_pb_line_break_holder] --> var width = graph.width - 20, height = graph.height; // Get canvas size<!-- [et_pb_line_break_holder] --> // These functions convert payment numbers and dollar amounts to pixels<!-- [et_pb_line_break_holder] --> function paymentToX(n) { return n * width/payments; }<!-- [et_pb_line_break_holder] --> function amountToY(a) { return height-(a * height/(monthly*payments*1.05));}<!-- [et_pb_line_break_holder] --> // Payments are a straight line from (0,0) to (payments, monthly*payments)<!-- [et_pb_line_break_holder] --> g.moveTo(paymentToX(0), amountToY(0)); // Start at lower left<!-- [et_pb_line_break_holder] --> g.lineTo(paymentToX(payments), // Draw to upper right<!-- [et_pb_line_break_holder] --> amountToY(monthly*payments));<!-- [et_pb_line_break_holder] --> <!-- [et_pb_line_break_holder] --> g.lineTo(paymentToX(payments), amountToY(0)); // Down to lower right<!-- [et_pb_line_break_holder] --> g.closePath(); // And back to start<!-- [et_pb_line_break_holder] --> g.fillStyle = "#97bf0d"; // Light red<!-- [et_pb_line_break_holder] --> g.fill(); // Fill the triangle<!-- [et_pb_line_break_holder] --> g.font = "bold 12px sans-serif"; // Define a font<!-- [et_pb_line_break_holder] --> g.fillText("Cout total du prêt avec intérêts", 20,20); // Draw text in legend<!-- [et_pb_line_break_holder] --> // Cumulative equity is non-linear and trickier to chart<!-- [et_pb_line_break_holder] --> var equity = 0;<!-- [et_pb_line_break_holder] --> g.beginPath(); // Begin a new shape<!-- [et_pb_line_break_holder] --> g.moveTo(paymentToX(0), amountToY(0)); // starting at lower-left<!-- [et_pb_line_break_holder] --> for(var p = 1; p <= payments; p++) {<!-- [et_pb_line_break_holder] --> // For each payment, figure out how much is interest<!-- [et_pb_line_break_holder] --> var thisMonthsInterest = (principal-equity)*interest;<!-- [et_pb_line_break_holder] --> equity += (monthly - thisMonthsInterest); // The rest goes to equity<!-- [et_pb_line_break_holder] --> g.lineTo(paymentToX(p),amountToY(equity)); // Line to this point<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> g.lineTo(paymentToX(payments), amountToY(0)); // Line back to X axis<!-- [et_pb_line_break_holder] --> g.closePath(); // And back to start point<!-- [et_pb_line_break_holder] --> g.fillStyle = "#466cb7"; // Now use green paint<!-- [et_pb_line_break_holder] --> g.fill(); // And fill area under curve<!-- [et_pb_line_break_holder] --> g.fillText("Total capitaux", 20,35); // Label it in green<!-- [et_pb_line_break_holder] --> // Loop again, as above, but chart loan balance as a thick black line<!-- [et_pb_line_break_holder] --> var bal = principal;<!-- [et_pb_line_break_holder] --> g.beginPath();<!-- [et_pb_line_break_holder] --> g.moveTo(paymentToX(0),amountToY(bal));<!-- [et_pb_line_break_holder] --> for(var p = 1; p <= payments; p++) {<!-- [et_pb_line_break_holder] --> var thisMonthsInterest = bal*interest;<!-- [et_pb_line_break_holder] --> bal -= (monthly - thisMonthsInterest); // The rest goes to equity<!-- [et_pb_line_break_holder] --> g.lineTo(paymentToX(p),amountToY(bal)); // Draw line to this point<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> g.lineWidth = 3; // Use a thick line<!-- [et_pb_line_break_holder] --> g.stroke(); // Draw the balance curve<!-- [et_pb_line_break_holder] --> g.fillStyle = "#000000"; // Switch to black text<!-- [et_pb_line_break_holder] --> g.fillText("Solde du prêt", 20,50); // Legend entry<!-- [et_pb_line_break_holder] --> // Now make yearly tick marks and year numbers on X axis<!-- [et_pb_line_break_holder] --> g.textAlign="center"; // Center text over ticks<!-- [et_pb_line_break_holder] --> var y = amountToY(0); // Y coordinate of X axis<!-- [et_pb_line_break_holder] --> for(var year=1; year*12 <= payments; year++) { // For each year<!-- [et_pb_line_break_holder] --> var x = paymentToX(year*12); // Compute tick position<!-- [et_pb_line_break_holder] --> g.fillRect(x-0.5,y-13,1,13); // Draw the tick<!-- [et_pb_line_break_holder] --> //if (year == 1) g.fillText("Année"+year, x, y-13); // Label the axis<!-- [et_pb_line_break_holder] --> if (year > 0) g.fillText("Année "+year, x-20, y-15); // Label the axis<!-- [et_pb_line_break_holder] --> if (year % 5 == 0 && year*12 !== payments) // Number every 5 years<!-- [et_pb_line_break_holder] --> g.fillText(String(year), x, y-6);<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] --> // Mark payment amounts along the right edge<!-- [et_pb_line_break_holder] --> g.textAlign = "right"; // Right-justify text<!-- [et_pb_line_break_holder] --> g.textBaseline = "middle"; // Center it vertically<!-- [et_pb_line_break_holder] --> var ticks = [monthly*payments, principal]; // The two points we'll mark<!-- [et_pb_line_break_holder] --> var rightEdge = paymentToX(payments); // X coordinate of Y axis<!-- [et_pb_line_break_holder] --> for(var i = 0; i < ticks.length; i++) { // For each of the 2 points<!-- [et_pb_line_break_holder] --> var y = amountToY(ticks[i]); // Compute Y position of tick<!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --> g.fillRect(rightEdge-3, y-0.5, 3,1); // Draw the tick mark<!-- [et_pb_line_break_holder] --> g.fillText(String(ticks[i].toFixed(0)), // And label it.<!-- [et_pb_line_break_holder] --> rightEdge-5, y);<!-- [et_pb_line_break_holder] --> }<!-- [et_pb_line_break_holder] -->} <!-- [et_pb_line_break_holder] --></script><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] -->