Membuat Kalkulator Sayur dengan HTML dan Java Script (JS)
Assalamu'alaikum..
Kali ini saya akan membuat kalkulator sayur dengan HTML dan Java Script
Kalkulator Sayur
Berikut adalah script nya silahkan di coba ke Text Editor di Laptop/komputer anda seperti, notepad, sublime dan lainnya
<!DOCTYPE html>
<html>
<head>
<title>Kalkulator Sayur</title>
<style type="text/css">
.kalk {
width:600px;
height:550px;
background: #fff111;
margin:50px auto;
-webkit-animation:bgChange 2s 2s alternate infinite;
transition: all 2s ease;
}
.kalk h2 {
text-align: center;
}
.form-grup {
margin-left: 5px;
margin-top: 3px;
}
@-webkit-keyframes bgChange {
0% {
background:#bbb4de;
}
50% {
background:#17a928;
}
100% {
background:#399cb9;
}
}
</style>
<script type="text/javascript">
function htg_asem(){
var Hrg_syr_asem=5000;
var Jmlbungkus=1;
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=3000;
var Jmlbungkus=1;
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_kacang_panjang(){
var Hrg_kacang_panjang=3500;
var Jmlbungkus=1;
var Banyaknya = document.getElementById('jml_kacang_panjang');
var Ttl_kacangpanjang = document.getElementById('ttlkacangpanjang');
Banyaknya.value = Jmlbungkus;
Ttl_kacangpanjang.value = Banyaknya.value*Hrg_kacang_panjang;
}
function htg_ttl_kcgpanjang(){
var Hrg_kacang_panjang = 3500;
var Banyaknya = document.getElementById('jml_kacang_panjang');
var Ttl_kacangpanjang = document.getElementById('ttlkacangpanjang');
var AmbilJml = Banyaknya.value;
Ttl_kacangpanjang.value = AmbilJml*Hrg_kacang_panjang;
}
function htg_daun_singkong(){
var Hrg_singkong=5000;
var Jmlbungkus=1;
var Banyaknya = document.getElementById('jml_singkong');
var Ttl_singkong = document.getElementById('ttlsingkong');
Banyaknya.value = Jmlbungkus;
Ttl_singkong.value = Banyaknya.value*Hrg_singkong;
}
function htg_ttl_singkong(){
var Hrg_singkong = 5000;
var Banyaknya = document.getElementById('jml_singkong');
var Ttl_singkong = document.getElementById('ttlsingkong');
var AmbilJml = Banyaknya.value;
Ttl_singkong.value = AmbilJml*Hrg_singkong;
}
function htg_sop(){
var Hrg_sop=4000;
var Jmlbungkus=1;
var Banyaknya = document.getElementById('jml_sop');
var Ttl_sop = document.getElementById('ttlsop');
Banyaknya.value = Jmlbungkus;
Ttl_sop.value = Banyaknya.value*Hrg_sop;
}
function htg_ttl_sop(){
var Hrg_sop = 4000;
var Banyaknya = document.getElementById('jml_sop');
var Ttl_sop = document.getElementById('ttlsop');
var AmbilJml = Banyaknya.value;
Ttl_sop.value = AmbilJml*Hrg_sop;
}
function grandttl(){
var asem = document.getElementById('ttlasem').value;
var kangkung= document.getElementById('ttlkangkung').value;
var kacang_panjang = document.getElementById('ttlkacangpanjang').value;
var daun_singkong = document.getElementById('ttlsingkong').value;
var sop = document.getElementById('ttlsop').value;
var total = document.getElementById('sogud');
total.value = eval(asem)+eval(kangkung)+eval(kacang_panjang)+eval(daun_singkong)+eval(sop);
}
</script>
</head>
<body>
<div class="container">
<div class="kalk">
<form name="frm-kalkulator" id="frm-kalkulator">
<h2>Kalkulator Sayur</h2>
<div class="form-grup">
<h3>Sayur Asem</h3>
</div>
<div class="form-grup">
Banyaknya <input type="text" name="jml_asem" class="form-grup" id="jml_asem" onkeyup="htg_ttl_asem(), grandttl()"" value="0">
Paket , Total <input type="text" name="ttlasem" id="ttlasem" value="0">
</div>
<div class="form-grup">
<h3>Sayur Kangkung</h3>
</div>
<div class="form-grup">
Banyaknya <input type="text" name="jml_kangkung" class="form-grup" id="jml_kangkung" onkeyup="htg_ttl_kangkung(), grandttl()"" value="0">
Ikat , Total <input type="text" name="ttlkangkung" id="ttlkangkung" value="0">
</div>
<div class="form-grup">
<h3>Sayur Kacang Panjang</h3>
</div>
<div class="form-grup">
Banyaknya <input type="text" name="jml_kacang_panjang" class="form-grup" id="jml_kacang_panjang" onkeyup="htg_ttl_kcgpanjang(), grandttl()"" value="0">
Ikat , Total <input type="text" name="ttlkacangpanjang" id="ttlkacangpanjang" value="0">
</div>
<div class="form-grup">
<h3>Sayur Daun Singkong</h3>
</div>
<div class="form-grup">
Banyaknya <input type="text" name="jml_singkong" class="form-grup" id="jml_singkong" onkeyup="htg_ttl_singkong(), grandttl()"" value="0">
Ikat , Total <input type="text" name="ttlsingkong" id="ttlsingkong" value="0">
</div>
<div class="form-grup">
<h3>Sayur Sop</h3>
</div>
<div class="form-grup">
Banyaknya <input type="text" name="jml_sop" class="form-grup" id="jml_sop" onkeyup="htg_ttl_sop(), grandttl()" value="0">
Paket , Total <input type="text" name="ttlsop" id="ttlsop" value="0">
</div>
<div class="form-grup">
<br>Grand Total =
<input type="text" onkeyup="grandttl()" name="grand" id="sogud" value="0">
</div>
</form>
</div>
</div>
</body>
</html>
Hasil nya akan seperti di bawah ini.. Bisa di coba kok :)
Mungkin hanya ini saja. Wassalamu'alaikum
Berikut adalah script nya silahkan di coba ke Text Editor di Laptop/komputer anda seperti, notepad, sublime dan lainnya
<!DOCTYPE html>
<html>
<head>
<title>Kalkulator Sayur</title>
<style type="text/css">
.kalk {
width:600px;
height:550px;
background: #fff111;
margin:50px auto;
-webkit-animation:bgChange 2s 2s alternate infinite;
transition: all 2s ease;
}
.kalk h2 {
text-align: center;
}
.form-grup {
margin-left: 5px;
margin-top: 3px;
}
@-webkit-keyframes bgChange {
0% {
background:#bbb4de;
}
50% {
background:#17a928;
}
100% {
background:#399cb9;
}
}
</style>
<script type="text/javascript">
function htg_asem(){
var Hrg_syr_asem=5000;
var Jmlbungkus=1;
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=3000;
var Jmlbungkus=1;
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_kacang_panjang(){
var Hrg_kacang_panjang=3500;
var Jmlbungkus=1;
var Banyaknya = document.getElementById('jml_kacang_panjang');
var Ttl_kacangpanjang = document.getElementById('ttlkacangpanjang');
Banyaknya.value = Jmlbungkus;
Ttl_kacangpanjang.value = Banyaknya.value*Hrg_kacang_panjang;
}
function htg_ttl_kcgpanjang(){
var Hrg_kacang_panjang = 3500;
var Banyaknya = document.getElementById('jml_kacang_panjang');
var Ttl_kacangpanjang = document.getElementById('ttlkacangpanjang');
var AmbilJml = Banyaknya.value;
Ttl_kacangpanjang.value = AmbilJml*Hrg_kacang_panjang;
}
function htg_daun_singkong(){
var Hrg_singkong=5000;
var Jmlbungkus=1;
var Banyaknya = document.getElementById('jml_singkong');
var Ttl_singkong = document.getElementById('ttlsingkong');
Banyaknya.value = Jmlbungkus;
Ttl_singkong.value = Banyaknya.value*Hrg_singkong;
}
function htg_ttl_singkong(){
var Hrg_singkong = 5000;
var Banyaknya = document.getElementById('jml_singkong');
var Ttl_singkong = document.getElementById('ttlsingkong');
var AmbilJml = Banyaknya.value;
Ttl_singkong.value = AmbilJml*Hrg_singkong;
}
function htg_sop(){
var Hrg_sop=4000;
var Jmlbungkus=1;
var Banyaknya = document.getElementById('jml_sop');
var Ttl_sop = document.getElementById('ttlsop');
Banyaknya.value = Jmlbungkus;
Ttl_sop.value = Banyaknya.value*Hrg_sop;
}
function htg_ttl_sop(){
var Hrg_sop = 4000;
var Banyaknya = document.getElementById('jml_sop');
var Ttl_sop = document.getElementById('ttlsop');
var AmbilJml = Banyaknya.value;
Ttl_sop.value = AmbilJml*Hrg_sop;
}
function grandttl(){
var asem = document.getElementById('ttlasem').value;
var kangkung= document.getElementById('ttlkangkung').value;
var kacang_panjang = document.getElementById('ttlkacangpanjang').value;
var daun_singkong = document.getElementById('ttlsingkong').value;
var sop = document.getElementById('ttlsop').value;
var total = document.getElementById('sogud');
total.value = eval(asem)+eval(kangkung)+eval(kacang_panjang)+eval(daun_singkong)+eval(sop);
}
</script>
</head>
<body>
<div class="container">
<div class="kalk">
<form name="frm-kalkulator" id="frm-kalkulator">
<h2>Kalkulator Sayur</h2>
<div class="form-grup">
<h3>Sayur Asem</h3>
</div>
<div class="form-grup">
Banyaknya <input type="text" name="jml_asem" class="form-grup" id="jml_asem" onkeyup="htg_ttl_asem(), grandttl()"" value="0">
Paket , Total <input type="text" name="ttlasem" id="ttlasem" value="0">
</div>
<div class="form-grup">
<h3>Sayur Kangkung</h3>
</div>
<div class="form-grup">
Banyaknya <input type="text" name="jml_kangkung" class="form-grup" id="jml_kangkung" onkeyup="htg_ttl_kangkung(), grandttl()"" value="0">
Ikat , Total <input type="text" name="ttlkangkung" id="ttlkangkung" value="0">
</div>
<div class="form-grup">
<h3>Sayur Kacang Panjang</h3>
</div>
<div class="form-grup">
Banyaknya <input type="text" name="jml_kacang_panjang" class="form-grup" id="jml_kacang_panjang" onkeyup="htg_ttl_kcgpanjang(), grandttl()"" value="0">
Ikat , Total <input type="text" name="ttlkacangpanjang" id="ttlkacangpanjang" value="0">
</div>
<div class="form-grup">
<h3>Sayur Daun Singkong</h3>
</div>
<div class="form-grup">
Banyaknya <input type="text" name="jml_singkong" class="form-grup" id="jml_singkong" onkeyup="htg_ttl_singkong(), grandttl()"" value="0">
Ikat , Total <input type="text" name="ttlsingkong" id="ttlsingkong" value="0">
</div>
<div class="form-grup">
<h3>Sayur Sop</h3>
</div>
<div class="form-grup">
Banyaknya <input type="text" name="jml_sop" class="form-grup" id="jml_sop" onkeyup="htg_ttl_sop(), grandttl()" value="0">
Paket , Total <input type="text" name="ttlsop" id="ttlsop" value="0">
</div>
<div class="form-grup">
<br>Grand Total =
<input type="text" onkeyup="grandttl()" name="grand" id="sogud" value="0">
</div>
</form>
</div>
</div>
</body>
</html>
Hasil nya akan seperti di bawah ini.. Bisa di coba kok :)
Mungkin hanya ini saja. Wassalamu'alaikum
Tidak ada komentar: