Jumat, 10 November 2017

membuat kalkulator sayur menggunakan html dan javascript

Tugas membuat kalkulator sayur menggunakan html dan javascript kalkulator sayur
Banyaknya Paket , Total
Banyaknya Paket , Total
Banyaknya Paket , Total
Banyaknya Paket , Total
Banyaknya Paket , Total



berikut adalah codingan dan hasilnya

<html>
<head>
<title>kalkulator sayur</title>
<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('ttl_asem');

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('ttl_asem');
var AmbilJml = Banyaknya.value;
Ttlasem.value = AmbilJml*Hrg_syr_asem;
}
function htg_bayam () {
var Hrg_syr_bayam = 3000;
var Jmlbungkus = 1;

var Banyaknya = document.getElementById('jml_bayam');
var Ttlbayam = document.getElementById('ttl_bayam');

Banyaknya.value = Jmlbungkus;
Ttlbayam.value = Banyaknya.value*Hrg_syr_bayam;
}
function htg_ttl_bayam(){
var Hrg_syr_bayam = 3000;
var Banyaknya = document.getElementById('jml_bayam');
var Ttlbayam = document.getElementById('ttl_bayam');
var AmbilJml = Banyaknya.value;
Ttlbayam.value = AmbilJml*Hrg_syr_bayam;
}
function htg_lodeh () {
var Hrg_syr_lodeh = 4000;
var Jmlbungkus = 1;

var Banyaknya = document.getElementById('jml_lodeh');
var Ttllodeh = document.getElementById('ttl_lodeh');

Banyaknya.value = Jmlbungkus;
Ttllodeh.value = Banyaknya.value*Hrg_syr_lodeh;
}
function htg_ttl_lodeh(){
var Hrg_syr_lodeh = 4000;
var Banyaknya = document.getElementById('jml_lodeh');
var Ttllodeh = document.getElementById('ttl_lodeh');
var AmbilJml = Banyaknya.value;
Ttllodeh.value = AmbilJml*Hrg_syr_lodeh;
}
function htg_nangka () {
var Hrg_syr_nangka = 2000;
var Jmlbungkus = 1;

var Banyaknya = document.getElementById('jml_nangka');
var Ttlnangka = document.getElementById('ttl_nangka');

Banyaknya.value = Jmlbungkus;
Ttlnangka.value = Banyaknya.value*Hrg_syr_nangka;
}
function htg_ttl_nangka(){
var Hrg_syr_nangka = 2000;
var Banyaknya = document.getElementById('jml_nangka');
var Ttlnangka = document.getElementById('ttl_nangka');
var AmbilJml = Banyaknya.value;
Ttlnangka.value = AmbilJml*Hrg_syr_nangka;
}
function htg_sop () {
var Hrg_syr_sop = 2500;
var Jmlbungkus = 1;

var Banyaknya = document.getElementById('jml_sop');
var Ttlsop = document.getElementById('ttl_sop');

Banyaknya.value = Jmlbungkus;
Ttlsop.value = Banyaknya.value*Hrg_syr_sop;
}
function htg_ttl_sop(){
var Hrg_syr_sop = 2500;
var Banyaknya = document.getElementById('jml_sop');
var Ttlsop = document.getElementById('ttl_sop');
var AmbilJml = Banyaknya.value;
Ttlsop.value = AmbilJml*Hrg_syr_sop;
}
function grndttl(){
var Asem = document.getElementById('ttl_asem').value;
var Bayam = document.getElementById('ttl_bayam').value;
var lodeh = document.getElementById('ttl_lodeh').value;
var nangka = document.getElementById('ttl_nangka').value;
var sop = document.getElementById('ttl_sop').value;
var grand = document.getElementById('grand');
grand.value = eval(Asem)+eval(Bayam)+eval(lodeh)+eval(nangka)+eval(sop);
}
</script>
</head>
<body>
<div class="container">
<div class="kalk">
<form name="frm_kalkulator" id="frm_kalkulator">
<div class="form-group">
<input class="form-group" type="button" onclick="htg_asem()" value="Sayur Asem" name="btn-sayur-asem" id="btn-sayur-asem"></input>
</div>
<div class="form-group">
Banyaknya <input  type="text" name="jml_asem" class="form-group" id="jml_asem" onkeyup="htg_ttl_asem()" onchange="htg_ttl_asem()">Paket , Total
<input type="text" id="ttl_asem" name="ttl_asem">
</div>
<div class="form-group">
<input class="form-group" type="button" onclick="htg_bayam()" value="Sayur Bayam" name="btn-sayur-bayam" id="btn-sayur-bayam"></input>
</div>
<div class="form-group">
Banyaknya <input  type="text" name="jml_bayam" class="form-group" id="jml_bayam" onkeyup="htg_ttl_bayam()" onchange="htg_ttl_bayam()">Paket , Total
<input type="text" id="ttl_bayam" name="ttl_bayam">
</div>
<div class="form-group">
<input class="form-group" type="button" onclick="htg_lodeh()" value="Sayur lodeh" name="btn-sayur-lodeh" id="btn-sayur-lodeh"></input>
</div>
<div class="form-group">
Banyaknya <input  type="text" name="jml_lodeh" class="form-group" id="jml_lodeh" onkeyup="htg_ttl_lodeh()" onchange="htg_ttl_lodeh()">Paket , Total
<input type="text" id="ttl_lodeh" name="ttl_lodeh">
</div>
<div class="form-group">
<input class="form-group" type="button" onclick="htg_nangka()" value="Sayur nangka" name="btn-sayur-nangka" id="btn-sayur-nangka"></input>
</div>
<div class="form-group">
Banyaknya <input  type="text" name="jml_nangka" class="form-group" id="jml_nangka" onkeyup="htg_ttl_nangka()" onchange="htg_ttl_nangka()">Paket , Total
<input type="text" id="ttl_nangka" name="ttl_nangka">
</div>
<div class="form-group">
<input class="form-group" type="button" onclick="htg_sop()" value="Sayur sop" name="btn-sayur-sop" id="btn-sayur-sop"></input>
</div>
<div class="form-group">
Banyaknya <input  type="text" name="jml_sop" class="form-group" id="jml_sop" onkeyup="htg_ttl_sop()" onchange="htg_ttl_sop()">Paket , Total
<input type="text" id="ttl_sop" name="ttl_sop">
</div>
<div>
<input type="button" value="Jumlah semua" name="" id="grandttl" onclick="grndttl()">
<input type="text" name="" id="grand">
</div>
</form>
</div>
</div>

</body>
</html>

Tidak ada komentar:

Posting Komentar