JSFiddle - React, Tailwind, and code Playground
by Wahyu Raja Butar-Butar
HTML
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div id="wrapper" class="container well">
<div class="rows">
<div class="col-md-12">
<h1 class="text-center">Simulasi Prediksi Penduduk Indonesia menurut Provinsi 1980, 1990, 2000 dan 2010</h1>
</div>
</div>
<div class="content col-md-12">
<div class="rows">
<div class="form-group col-md-6">
<label for="p80">Jumlah Penduduk Tahun 1980 :</label>
<input class="form-control number" type="text" name="p80" id="p80" value="147.490.298" placeholder="Jumlah Penduduk Tahun 1980">
</div>
<div class="form-group col-md-6">
<label for="laju80">Laju Pertumbuhan Penduduk (1980-1990) :</label>
<input class="form-control" type="text" name="laju80" id="laju80" value="1.98" placeholder="Laju Pertumbuhan Penduduk (1980-1990)">
</div>
</div>
<div class="rows">
<div class="form-group col-md-6">
<label for="p90">Jumlah Penduduk Tahun 1990 :</label>
<input class="form-control number" type="text" name="p90" id="p90" value="179.378.946" placeholder="Jumlah Penduduk Tahun 1990">
</div>
<div class="form-group col-md-6">
<label for="laju90">Laju Pertumbuhan Penduduk (1990-2000) :</label>
<input class="form-control" type="text" name="laju90" id="laju90" value="1.49" placeholder="Laju Pertumbuhan Penduduk (1990-2000)">
</div>
</div>
<div class="rows">
<div class="form-group col-md-6">
<label for="p20">Jumlah Penduduk Tahun 2000 :</label>
<input class="form-control number" type="text" name="p20" id="p20" value="206.264.595" placeholder="Jumlah Penduduk Tahun 2000">
...
CSS
* {
margin: 0;
padding: 0;
}
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 40px;
background-color: #efeddf;
}
.content {
padding: 10px;
}
.panel {
background-color: #ffffcc;
}
#wrapper {
margin: 0 auto;
width: 960px;
}
#footer {
position: absolute;
left: 0;
bottom: 0;
min-height: 40px;
width: 100%;
background-color: #222222;
border-top: 1px solid #000000;
color: #f5f5f5;
padding-top: 10px;
text-align: center;
}
.form-group {
display: inline-block;
}
.table > thead > tr > th {
vertical-align: middle;
text-align: center;
}
.table > tbody > tr > td {
vertical-align: middle;
text-align: center;
}
.rarrow {
position: relative;
top: -0.5ex;
margin: 0px 2px;
}
.larrow {
position: absolute;
left: 0px;
top: 0.8ex;
}
JavaScript
$(function () {
$('input.number').keyup(function (event) {
/*
if (event.which >= 37 && event.which <= 40) {
event.preventDefault();
}
*/
var $this = $(this);
console.log('start');
var num = $this.val().replace(/\W/, '');
console.log(num);
num = num.replace(/ /g, '');
num = num.split('.').join('');
//num = num.replace(" ", "");
console.log(num);
num = parseInt(num);
if (isNaN(num)) num = 0;
console.log(num);
num = num.toString();
var value = num.replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1 ");
console.log(value);
value = value.replace(/ /g, '.');
$this.val(value);
});
$('.table').hide();
$('#hitung').on('click', function () {
$('.table').fadeIn("slow");
// $('.table').show();
$(".table>tbody").html("");
var p80 = parseInt($('#p80').val().replace(/[\s.]+/g, ''));
var p90 = parseInt($('#p90').val().replace(/[\s.]+/g, ''));
var p20 = parseInt($('#p20').val().replace(/[\s.]+/g, ''));
var p2010 = parseInt($('#p2010').val().replace(/[\s.]+/g, ''));
var laju80 = parseFloat($('#laju80').val());
var laju90 = parseFloat($('#laju90').val());
var laju20 = parseFloat($('#laju20').val());
var t = parseInt($('#t').val());
var dt = parseInt($('#dt').val());
var p = new Array();
p[0] = p80;
jlh = "";
laju = 0;
for (i = 1; i <= dt + 1; i += t) {
if (i > 0 && i < 10) {
p[i] = p[i - 1] + ((laju80 / 100) * p[i - 1]) * t;
laju = laju80;
} else if (i == 10) {
p[i] = p90;
laju = laju80;
} else if (i > 10 && i < 20) {
p[i] = p[i - 1] + ((laju90 / 100) * p[i - 1]) * t;
laju = laju90;
} else if (i == 20) {
p[i] = p20;
...