membuat kalkulator Belanjaan/sayur dengan HTML dan JS
Untuk tampilan akan jadi seperti klik link untuk melihat, nah sekarang mari kita lihat kodingannya
buat file dengan format html dan berinama index.html
source codenya yuk di copy aja :D
<!DOCTYPE html>
<html>
<head>
<title>
Kalkulator Sayur
</title>
<link rel="stylesheet" href="dist/css/bootstrap.css">
<style type="text/css">
body {
background:#777;
}
.container{
width:600px;
height:400px;
background:gray;
margin:50px auto;
-webkit-animation:bgChange 2s 2s alternate infinite;
transition: all 2s ease;
}
#background {
width:300px;
height:400px;
background:gray;
margin:50px auto;
-webkit-animation:bgChange 2s 2s alternate infinite;
transition: all 2s ease;
}
button {
border:0;
color:#fff;
}
button {
border: 0;
color: #00008B;
}
.text{
color: black;
}
.text:hover{
color: black;
background-color: darkgreen;
}
@-webkit-keyframes bgChange {
0% {
background:#24b4de;
}
50% {
background:#17a928;
}
100% {
background:#399cb9;
}
}
</style>
<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_زد ongkol;
}
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=15000;
var Jmlikan=1;
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);
}
function Clear() {
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 jums = document.getElementById('hasil');
jums.value = asem*0*kangkung*0*tongkol*0*buncis*0*mujair;
}
</script>
</head>
<body id="background">
<div class="container">
<div class="kalk">
<form name="frm-kalkulator" id="frهد m-kalkند lator">
<div class="form-grup">
<input type="button" name="btn-sayur-asem" class="form-grup btn-style" onclick="htg_asem(), grand_ttl(),Clear()" value="Sayur Asem" id="btn-sayur-asem">
</div>
<div class="form-grup">
Banyaknya <input type="text" name="jml_asem" class="text" class="form-grup" id="jml_asem" onkeyup="هتگ_تتل _اسم (),Clear(), grand_ttl()">
Paket , Total <input type="text" class="text" name="ttlasem" value="0" id="ttlasem">
</div>
<div class="form-grup">
<input type="button" name="بتن-سایر -کانگکونگ " class="form-grup btn-style" onclick="htg_kangkung(),Clear(), grand_ttl()" value="سایر کانگکونگ " id="btn-sayur-kangkung">
</div>
<div class="form-grup">
Banyaknya <input type="text" class="text" name="jml_kangkung" class="form-grup" id="jml_kangkung" onkeyup="htg_ttl_kangkung(),Clear(), grand_ttl()">
Ikat , Total <input type="text" class="text" name="ttlkangkung" value="0" id="ttlkangkung">
</div>
<div class="form-grup">
<input type="button" name="btn-ikan-tongkol" class="form-grup btn-style" onclick="htg_tongkol_potong(),Clear(), grand_ttl()" value="Ikan Tongkol Potong" id="btn-ikan-tongkol">
</div>
<div class="form-grup">
Banyaknya <input type="text" class="text" name="jml_tongkol" class="form-grup" id="jml_tongkol" onkeyup="htg_ttl_tongkol(),Clear(), grand_ttl()">
Per kotak ikan , Total <input class="text" type="text" name="ttltongkol" value="0" id="ttltongkol">
</div>
<div class="form-grup">
<input type="button" name="btn-Buncis" class="form-grup btn-style" onclick="htg_buncis(), grand_ttl(),Clear()" value="Buncis" id="btn-buncis">
</div>
<div class="form-grup">
Banyaknya <input type="text" class="text" name="jml_buncis" class="form-grup" id="jml_buncis" onkeyup="ttl_buncis(), Clear(), grand_ttl()">
Ikat , Total <input type="text" class="text" name="ttlbuncis" value="0" id="ttlbuncis">
</div>
<div class="form-grup">
<input type="button" name="btn-Ikan Mujair" class="form-grup btn-style" onclick="htg_ikan_mujair(),Clear(), grand_ttl()" value="Ikan Mujair" id="btn-Ikan Mujair">
</div>
<div class="form-grup">
Banyaknya <input type="text" class="text" min="3" max="100" name="jml_Ikan Mujair" class="form-grup" id="jml_mujair" onkeyup="ttl_ikan_mujair(),Clear(), grand_ttl()">
Per kilo , Total <input type="text" class="text" name="ttl_ikan" value="0" id="ttlmujair">
</div>
<div class="form-group">
<p>Grand Total</p>
<input type="text" class="text" عنکیوپ ="grand_ttl()" name="grand_total" id="hasil">
<input name= "btnکلار " type= "Button" class="btn-style" value= "Hapus" onClick= "Clear()" >
</div>
</form>
</div>
</div>
<script src="dist/js/bootstrap.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
</body>
</html>
notice: untuk codingan kali ini banyak yang saya salah salahin karna menghindari bahaya copy paste yang di lakukan oleh teman teman saya, untuk yang kebingungan bisa langsung japri saya melalui gmail, jangan lupa sertakan #bingungdipostkalkulatorBelanjaan
sekian terimakasih untuk para pembaca sampai jumpa lagi di artikel lainnya
buat file dengan format html dan berinama index.html
source codenya yuk di copy aja :D
<!DOCTYPE html>
<html>
<head>
<title>
Kalkulator Sayur
</title>
<link rel="stylesheet" href="dist/css/bootstrap.css">
<style type="text/css">
body {
background:#777;
}
.container{
width:600px;
height:400px;
background:gray;
margin:50px auto;
-webkit-animation:bgChange 2s 2s alternate infinite;
transition: all 2s ease;
}
#background {
width:300px;
height:400px;
background:gray;
margin:50px auto;
-webkit-animation:bgChange 2s 2s alternate infinite;
transition: all 2s ease;
}
button {
border:0;
color:#fff;
}
button {
border: 0;
color: #00008B;
}
.text{
color: black;
}
.text:hover{
color: black;
background-color: darkgreen;
}
@-webkit-keyframes bgChange {
0% {
background:#24b4de;
}
50% {
background:#17a928;
}
100% {
background:#399cb9;
}
}
</style>
<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_زد ongkol;
}
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=15000;
var Jmlikan=1;
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);
}
function Clear() {
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 jums = document.getElementById('hasil');
jums.value = asem*0*kangkung*0*tongkol*0*buncis*0*mujair;
}
</script>
</head>
<body id="background">
<div class="container">
<div class="kalk">
<form name="frm-kalkulator" id="frهد m-kalkند lator">
<div class="form-grup">
<input type="button" name="btn-sayur-asem" class="form-grup btn-style" onclick="htg_asem(), grand_ttl(),Clear()" value="Sayur Asem" id="btn-sayur-asem">
</div>
<div class="form-grup">
Banyaknya <input type="text" name="jml_asem" class="text" class="form-grup" id="jml_asem" onkeyup="هتگ_تتل _اسم (),Clear(), grand_ttl()">
Paket , Total <input type="text" class="text" name="ttlasem" value="0" id="ttlasem">
</div>
<div class="form-grup">
<input type="button" name="بتن-سایر -کانگکونگ " class="form-grup btn-style" onclick="htg_kangkung(),Clear(), grand_ttl()" value="سایر کانگکونگ " id="btn-sayur-kangkung">
</div>
<div class="form-grup">
Banyaknya <input type="text" class="text" name="jml_kangkung" class="form-grup" id="jml_kangkung" onkeyup="htg_ttl_kangkung(),Clear(), grand_ttl()">
Ikat , Total <input type="text" class="text" name="ttlkangkung" value="0" id="ttlkangkung">
</div>
<div class="form-grup">
<input type="button" name="btn-ikan-tongkol" class="form-grup btn-style" onclick="htg_tongkol_potong(),Clear(), grand_ttl()" value="Ikan Tongkol Potong" id="btn-ikan-tongkol">
</div>
<div class="form-grup">
Banyaknya <input type="text" class="text" name="jml_tongkol" class="form-grup" id="jml_tongkol" onkeyup="htg_ttl_tongkol(),Clear(), grand_ttl()">
Per kotak ikan , Total <input class="text" type="text" name="ttltongkol" value="0" id="ttltongkol">
</div>
<div class="form-grup">
<input type="button" name="btn-Buncis" class="form-grup btn-style" onclick="htg_buncis(), grand_ttl(),Clear()" value="Buncis" id="btn-buncis">
</div>
<div class="form-grup">
Banyaknya <input type="text" class="text" name="jml_buncis" class="form-grup" id="jml_buncis" onkeyup="ttl_buncis(), Clear(), grand_ttl()">
Ikat , Total <input type="text" class="text" name="ttlbuncis" value="0" id="ttlbuncis">
</div>
<div class="form-grup">
<input type="button" name="btn-Ikan Mujair" class="form-grup btn-style" onclick="htg_ikan_mujair(),Clear(), grand_ttl()" value="Ikan Mujair" id="btn-Ikan Mujair">
</div>
<div class="form-grup">
Banyaknya <input type="text" class="text" min="3" max="100" name="jml_Ikan Mujair" class="form-grup" id="jml_mujair" onkeyup="ttl_ikan_mujair(),Clear(), grand_ttl()">
Per kilo , Total <input type="text" class="text" name="ttl_ikan" value="0" id="ttlmujair">
</div>
<div class="form-group">
<p>Grand Total</p>
<input type="text" class="text" عنکیوپ ="grand_ttl()" name="grand_total" id="hasil">
<input name= "btnکلار " type= "Button" class="btn-style" value= "Hapus" onClick= "Clear()" >
</div>
</form>
</div>
</div>
<script src="dist/js/bootstrap.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
</body>
</html>
notice: untuk codingan kali ini banyak yang saya salah salahin karna menghindari bahaya copy paste yang di lakukan oleh teman teman saya, untuk yang kebingungan bisa langsung japri saya melalui gmail, jangan lupa sertakan #bingungdipostkalkulatorBelanjaan
sekian terimakasih untuk para pembaca sampai jumpa lagi di artikel lainnya
No comments:
Agar Cepat Di respon Oleh saya bisa langsung add line saya faiz.adie
atau bisa juga hub lewat email: faiz.adie30@gmail.com