PCM

Testing PCM excel formula

HTML

<div class="calc_container">
		<div class="calc_row_1">
			
		</div>
		<div class="calc_row_2">
			<div class="calc_col_1">
				<div class="calc_inside_row_result">
					<p>Całkowita&nbsp;kwota,<br>którą&nbsp;zapłacisz</p>
					<p><span id="total">10 308</span><span>&nbsp;zł</span></p>
				</div>
			</div>
			<div class="calc_col_2">
				<div class="calc_inside_row">
					<p>Nasza prowizja</p>
					<p><span id="prowizja">308</span><span>&nbsp;zł</span></p>
				</div>
				<div class="calc_divider_short"></div>
				<div class="calc_inside_row">
					<p>co&nbsp;stanowi</p>
					<p><span id="koszt">1,54</span><span>&nbsp;%</span></p>
					<p>za&nbsp;każde 30&nbsp;dni finansowania</p>
				</div>
			</div>
		</div>
	</div>

CSS

* {
		font-family: 'Roboto', sans-serif;
	}
	
	body {
		background-color: #F5F5F5;
		position: relative;
		width: 100%;
		height: 900px;
	}
	
	.calc_container {
		display: inline-block;
		position: absolute;
		width: 100%;
		max-width: 800px;
		height: auto;
  		top: 50%; 
		left: 50%;
  		transform: translate(-50%,-50%);
		background-color: #fff;
	}
	
	.calc_row_1 {
		display: inline-block;
		margin: 0 50px;
		padding: 0;
		width: calc(100% - 100px);
		height: 200px;
		border-bottom: 2px solid #D2D4D4;
	}
	
	.calc_row_2 {
		display: inline-block;
		margin: 0 50px;
		padding: 30px 0;
		width: calc(100% - 100px);
		height: auto;
	}
	
	.calc_col_1 {
		display: inline-block;
		position: relative;
		margin: 0;
		padding: 0;
		width: 50%;
		min-height: 250px;
		height: 100%;
		float: left;
		box-sizing: border-box;
	}
	
	.calc_col_2 {
		display: inline-block;
		position: relative;
		margin: 0;
		padding: 0 50px;
		width: 50%;
		height: auto;
		float: left;
		box-sizing: border-box;
		border-left: 2px solid #D2D4D4;
	}
	
	.calc_divider_short {
		margin: 30px 0;
		padding: 0;
		width: 40%;
		background-color: #7d73ff;
		height: 2px;
	}
	
	.calc_inside_row_result {
		display: inline-block;
		position: absolute;
		width: 100%;
		height: auto;
  		top: 50%; 
		left: 50%;
  		transform: translate(-50%,-50%);
	}
	
	.calc_inside_row_result p {
		display: inline-block;
		width: 100%;
		font-size: 22px;
		line-height: 32px;
		color: #858585;
		font-weight: 300;
		margin: 0;
		padding: 0;
		text-align: center;
	}
	
	.calc_inside_row_result p span {
		display: inline-block;
		width: auto;
		font-size: 50px;
		line-height: 50px;
		color: #000;
		font-weight: 300;
		margin: 0;
		padding: 30px 0;
	}
	
	.calc_inside_row p {
		display: inline-block;
		width: 100%;
		font-size: 22px;
		line-height: 32px;
		color: #858585;
		font-weight: 300;
		margin: 0;
		padding: 0;
	}
	
	.calc_inside_row p span {
		display: inline-block;
		width: auto;
		font-size: 22px;
		line-height:...

JavaScript

function PMT(ir, np, pv, fv, type) {

    var pmt, pvif;

    fv || (fv = 0);
    type || (type = 0);

    if (ir === 0)
        return -(pv + fv)/np;

    pvif = Math.pow(1 + ir, np);
    pmt = - ir * pv * (pvif + fv) / (pvif - 1);

    if (type === 1)
        pmt /= (1 + ir);

    return Math.abs(pmt);
}

function currencyFormatDE (num) {
    return num
       .replace(".", ",") // replace decimal point character with ,
       .replace(/(d)(?=(d{3})+(?!d))/g, "$1 ")
}

var oprocentowanie = 0.001,
    okres = 60,
    wartosc = 20000,
    instalment = PMT(oprocentowanie, okres, wartosc),
    total = (instalment * okres),
    prowizja = (total - wartosc),
    koszt = ((prowizja / okres * 30 / wartosc) * 100),
    totalSpaces = total.toFixed(0),
    prowizjaSpaces = prowizja.toFixed(0),
    kosztSpaces = koszt.toFixed(2);

document.getElementById("total").innerHTML = currencyFormatDE(totalSpaces);
document.getElementById("prowizja").innerHTML = currencyFormatDE(prowizjaSpaces);
document.getElementById("koszt").innerHTML = currencyFormatDE(kosztSpaces);