<!DOCTYPE html>
<html>
<head>
<title>
Kalkulator Sayur
</title>
<style type="text/css">
.pinggir{
position: relative;
margin-left: 30%;
background-color: #1E90FF;
background-size: 100%;
width: 550px;
height: 400px;
display: block;
margin-top: 100px;
}
</style>
<link rel="stylesheet" href="dist/css/bootstrap.css">
<script type="text/javascript">
function htg_asem(){
var Hrg_syr_asem=0;
var Jmlbungkus=0;
var Banyaknya = document.getElementById('jml_asem');
var Ttlasem = document.getElementById('ttlasem');
Banyaknya.value = Jmlbungkus;
Ttlasem.value = Banyaknya.value*Hrg_syr_asem;
}
function htg_ttl_asem(){
var Hrg_syr_asem = 5000;
var Banyaknya = document.getElementById('jml_asem');
var Ttlasem = document.getElementById('ttlasem');
var AmbilJml = Banyaknya.value;
Ttlasem.value = AmbilJml*Hrg_syr_asem;
}
function htg_kangkung(){
var Hrg_kangkung=0;
var Jmlbungkus=0;
var Banyaknya = document.getElementById('jml_kangkung');
var Ttl_kangkung = document.getElementById('ttlkangkung');
Banyaknya.value = Jmlbungkus;
Ttl_kangkung.value = Banyaknya.value*Hrg_kangkung;
}
function htg_ttl_kangkung(){
var Hrg_kangkung = 3000;
var Banyaknya = document.getElementById('jml_kangkung');
var Ttl_kangkung = document.getElementById('ttlkangkung');
var AmbilJml = Banyaknya.value;
Ttl_kangkung.value = AmbilJml*Hrg_kangkung;
}
function htg_tongkol_potong(){
var Hrg_tongkol=0;
var Jmlikan=0;
var Banyaknya = document.getElementById('jml_tongkol');
var Ttl_tongkol = document.getElementById('ttltongkol');
Banyaknya.value = Jmlikan;
Ttl_tongkol.value = Banyaknya.value*Hrg_tongkol;
}
function htg_ttl_tongkol(){
var Hrg_tongkol = 7000;
var Banyaknya = document.getElementById('jml_tongkol');
var Ttl_tongkol = document.getElementById('ttltongkol');
var AmbilJml = Banyaknya.value;
Ttl_tongkol.value = AmbilJml*Hrg_tongkol;
}
function htg_buncis(){
var Hrg_buncis=0;
var Jmlikan=0;
var Banyaknya = document.getElementById('jml_buncis');
var Ttl_buncis = document.getElementById('ttlbuncis');
Banyaknya.value = Jmlikan;
Ttl_buncis.value = Banyaknya.value*Hrg_buncis;
}
function ttl_buncis(){
var Hrg_buncis = 5000;
var Banyaknya = document.getElementById('jml_buncis');
var Ttl_buncis = document.getElementById('ttlbuncis');
var AmbilJml = Banyaknya.value;
Ttl_buncis.value = AmbilJml*Hrg_buncis;
}
function htg_ikan_mujair(){
var Hrg_mujair=0;
var Jmlikan=0;
var Banyaknya = document.getElementById('jml_mujair');
var Ttl_mujair = document.getElementById('ttlmujair');
Banyaknya.value = Jmlikan;
Ttl_mujair.value = Banyaknya.value*Hrg_mujair;
}
function ttl_ikan_mujair(){
var Hrg_mujair = 15000;
var Banyaknya = document.getElementById('jml_mujair');
var Ttl_mujair = document.getElementById('ttlmujair');
var AmbilJml = Banyaknya.value;
Ttl_mujair.value = AmbilJml*Hrg_mujair;
}
function grand_ttl() {
var asem = document.getElementById('ttlasem').value;
var kangkung = document.getElementById('ttlkangkung').value;
var tongkol = document.getElementById('ttltongkol').value;
var buncis = document.getElementById('ttlbuncis').value;
var mujair = document.getElementById('ttlmujair').value;
var total = document.getElementById('hasil');
total.value = eval(asem)+eval(kangkung)+eval(tongkol)+eval(buncis)+eval(mujair);
}
</script>
</head>
<body>
<div class="pinggir">
<div class="container">
<div class="kalk">
<form name="frm-kalkulator" id="frm-kalkulator">
<div class="form-grup">
<input type="button" name="btn-sayur-asem" class="form-grup" onclick="htg_asem()" value="Sayur Asem" id="btn-sayur-asem">
</div>
<div class="form-grup">
Banyaknya <input type="text" name="jml_asem" class="form-grup" id="jml_asem" onkeyup="htg_ttl_asem(), grand_ttl()">
Paket , Total <input type="text" name="ttlasem" value="0" id="ttlasem">
</div>
<div class="form-grup">
<input type="button" name="btn-sayur-kangkung" class="form-grup" onclick="htg_kangkung()" value="Sayur Kangkung" id="btn-sayur-kangkung">
</div>
<div class="form-grup">
Banyaknya <input type="text" name="jml_kangkung" class="form-grup" id="jml_kangkung" onkeyup="htg_ttl_kangkung(), grand_ttl()">
Ikat , Total <input type="text" name="ttlkangkung" value="0" id="ttlkangkung">
</div>
<div class="form-grup">
<input type="button" name="btn-ikan-tongkol" class="form-grup" onclick="htg_tongkol_potong()" value="Ikan Tongkol Potong" id="btn-ikan-tongkol">
</div>
<div class="form-grup">
Banyaknya <input type="text" name="jml_tongkol" class="form-grup" id="jml_tongkol" onkeyup="htg_ttl_tongkol(), grand_ttl()">
Per Potong , Total <input type="text" name="ttltongkol" value="0" id="ttltongkol">
</div>
<div class="form-grup">
<input type="button" name="btn-Buncis" class="form-grup" onclick="htg_buncis()" value="Buncis" id="btn-buncis">
</div>
<div class="form-grup">
Banyaknya <input type="text" name="jml_buncis" class="form-grup" id="jml_buncis" onkeyup="ttl_buncis(), grand_ttl()">
Ikat , Total <input type="text" name="ttlbuncis" value="0" id="ttlbuncis">
</div>
<div class="form-grup">
<input type="button" name="btn-Ikan Mujair" class="form-grup" onclick="htg_ikan_mujair()" value="Ikan Mujair" id="btn-Ikan Mujair">
</div>
<div class="form-grup">
Banyaknya <input type="text" name="jml_Ikan Mujair" class="form-grup" id="jml_mujair" onkeyup="ttl_ikan_mujair(), grand_ttl()">
Per ekor , Total <input type="text" name="ttl_ikan" value="0" id="ttlmujair">
</div>
<div class="form-group">
<br>
<hr>
<p>Grand Total</p>
<input type="text" onkeyup="grand_ttl()" name="grand_total" id="hasil">
</div>
</form>
</div>
</div>
</div>
<script src="dist/js/bootstrap.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
</body>
</html>
