<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="top-bar">OYAK</div>
<div class="container my-4">
<div class="card card-box p-4">
<center>
<h3 style="color:#4F2808;">Aylık Maaş Hesaplama Robotu</h3>
<span class="badge badge-warning">TEFERRUAT</span>
</center>
<hr>
<form>
<div class="form-group">
<label>Rezerviniz (TL)</label>
<input id="RezervAlan" class="form-control form-control-lg">
</div>
<div class="form-group">
<label>Nema Oranı (%)</label>
<input id="NemaOran" class="form-control form-control-lg">
</div>
<div class="table-responsive">
<table class="table table-bordered text-center">
<thead class="bg-light">
<tr>
<th></th>
<th>Nema Oranı</th>
<th>Maaş Oran Tercihi</th>
</tr>
</thead>
<tbody>
<tr class="table-success">
<td id="yilBir"></td>
<td><input id="birInpNema1" class="form-control"></td>
<td><input id="birInpMOT1" type="number" max="50" class="form-control"></td>
</tr>
<tr class="table-info">
<td id="yilIki"></td>
<td><input id="birInpNema2" class="form-control"></td>
<td><input id="birInpMOT2" type="number" max="50" class="form-control"></td>
</tr>
</tbody>
</table>
</div>
<hr>
<div class="row">
<div class="col-md-6 mb-3">
<label id="sol1"></label>
<input id="alan1" class="form-control form-control-lg">
</div>
<div class="col-md-6">
<label id="sol2"></label>
<input id="alan2" class="form-control form-control-lg">
</div>
</div>
<hr>
<div class="row">
<div class="col-md-6">
<div class="p-3 result-left rounded">
<h6>Yeni Aylık Maaşınız</h6>
<h5 id="ucAylik">₺ 0,00</h5>
</div>
</div>
<div class="col-md-6 mt-3 mt-md-0">
<div class="p-3 result-right rounded">
<h6>Yeni Rezerviniz</h6>
<h5 id="rezerv">₺ 0,00</h5>
</div>
</div>
</div>
<hr>
<div class="progress mb-3">
<div class="progress-bar" style="width:1%"></div>
</div>
<center class="range-value">%<span id="valBox">18</span></center>
<label>Maaş Oran Tercihi</label>
<input type="range" id="MaasTercih" min="1" max="50" value="18" class="custom-range">
<div class="d-flex justify-content-between">
<span>%1</span>
<span>%50</span>
</div>
<button type="button" id="ucaylikbuton" class="btn btn-calc btn-block mt-4">
Hesapla
</button>
</form>
</div>
</div>
body{
background:#f5f5f5;
}
.top-bar{
background:#A31B15;
color:#fff;
padding:10px 15px;
font-weight:bold;
}
.card-box{
border-radius:10px;
box-shadow:0 4px 10px rgba(0,0,0,0.08);
}
.result-left{
background:#FAF5E5;
border:1px solid #4F2808;
}
.result-right{
background:#4F2808;
color:#FFF8E0;
}
.progress{
height:20px;
border:1px solid #4F2808;
}
.progress-bar{
background:#FAF5E5;
}
.range-value{
font-size:42px;
font-weight:bold;
}
.btn-calc{
background:#4F2808;
color:#fff;
font-weight:bold;
}
.btn-calc:hover{
background:#331a05;
}
$(document).ready(function(){
$("#RezervAlan, #NemaOran, #birInpNema1, #birInpNema2, #alan1, #alan2")
.autoNumeric('init', { aSep: '.', aDec: ',' });
const formatter = new Intl.NumberFormat('tr-TR', {
style: 'currency',
currency: 'TRY'
});
var Mtoran = 18;
$("#valBox").text(Mtoran);
$("#MaasTercih").on("input", function(){
$("#valBox").text(this.value);
});
$('button#ucaylikbuton').click(function(){
var birSol = Number($("#alan1").autoNumeric('get'));
var birSag = Number($("#alan2").autoNumeric('get'));
var birNema3 = Number($("#NemaOran").autoNumeric('get'));
var MaasTercih = Number($("#MaasTercih").val());
var birRezerv3 = Number($("#RezervAlan").autoNumeric('get'));
var birOrtRez = birRezerv3 + (birSag*12);
var birBrutGelir = birOrtRez*(birNema3/100);
var birAylik = (birBrutGelir*(MaasTercih/100))/12;
var birRezerv = birOrtRez - (birAylik*12);
var gToplam = (birAylik*12)+birRezerv;
var progressSayi = ((birAylik*12)*100)/gToplam;
progressSayi = Math.floor(progressSayi);
$(".progress-bar").css("width", progressSayi + "%");
$("#ucAylik").text(formatter.format(birAylik));
$("#rezerv").text(formatter.format(birRezerv));
});
$('button#ucaylikbuton').trigger('click');
});
