Tutorial Programming

Tutorial Simple Price Calculator Dengan Input Range

Haloo, pada tutorial pertama saya ini, saya ingin membagikan cara membuat simple price calculator dengan input range (yang inputnya bisa digeser-geser itu lhooo :D ). Ceritanya ini mau buat grosir gula & beras online yang harganya ditampilkan pada web. Pembeli bisa melihat berapa biaya yang harus dia keluarkan untuk membeli gula dan/atau beras sekian Kg.
Seperti ini nih tampilannya :

Oke, pertama-tama kita buat input HTML-nya dulu.
1 <input type="range" min="0" max="100" value="0" step="1" oninput="updateTextInput(this.value);" id="input1" /><br><output id="o1"></output>

Berhubung inputnya berbentuk bar (range) maka input type="range". Nilai minimal dari range ini adalah 0 dan maksimalnya 100. Lalu untuk setiap pergeseran ball-nya saya set 1 ( step="1" ). updateTextInput(this.value) adalah fungsi yang digunakan meng-update nilai input setiap terjadi perubahan input. Output berfungsi untuk mencantumkan nilai dari input.
Nah, untuk styling bar-nya seperti ini :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
input[type='range'] {
  width: 300px;
    -webkit-appearance: none;
    border-radius: 5px;
    box-shadow: inset 0 0 5px #333;
    background-color: #1c5de0;
    height: 10px;
    vertical-align: middle;
}
input[type='range']::-moz-range-track {
     -moz-appearance: none;
     border-radius: 5px;
     box-shadow: inset 0 0 5px #333;
     background-color: #1c5de0;
     height: 10px;
}
input[type='range']::-webkit-slider-thumb {
     -webkit-appearance: none !important;
     border-radius: 20px;
     background-color: #FFF;
     box-shadow:inset 0 0 10px rgba(000,000,000,0.5);
     border: 1px solid #999;
     height: 20px;
     width: 20px;
}
input[type='range']::-moz-range-thumb {
     -moz-appearance: none;
     border-radius: 20px;
     background-color: #FFF;
     box-shadow:inset 0 0 10px rgba(000,000,000,0.5);
     border: 1px solid #999;
     height: 20px;
     width: 20px;
}
Setelah selesai membuat input range, sekarang giliran mainan javascript-nya untuk menampilkan nilai dari input dan menampilkan harganya.
Fungsi updateTextInput dan updateTot 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function updateTextInput(val) {
  harga = val * 8000;
  document.getElementById('o1').value=val;
  document.getElementById('price1').value=harga;
  updateTot();
}
function updateTextInput2(val) {
  harga = val * 9000;
  document.getElementById('o2').value=val;
  document.getElementById('price2').value=harga;
  updateTot();
}
function updateTot(){
  var h1 =parseFloat( document.getElementById("price1").value);
  var h2 =parseFloat( document.getElementById("price2").value);
  var Tot = h1 + h2;
  document.getElementById("priceTot").value = Tot;
}
Fungsi updateTot() digunakan untuk menjumlahkan harga dari input1 dan input2. Harga total dari kedua input tersebut ikut berubah jika nilai input1 atau input2 berubah.
Untuk kode secara keseluruhannya seperti ini:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Price Calculator</title>
<style>
#content{
    max-width:900px;
    width:100%;
}
#left{
  margin: 20px 15px 10px 10px;
  float:left;
  width:45%;
}
#right{
  margin: 10px 15px 10px 10px;
  float:right;
  width:35%;
}
input[type='range'] {
  width: 300px;
    -webkit-appearance: none;
    border-radius: 5px;
    box-shadow: inset 0 0 5px #333;
    background-color: #1c5de0;
    height: 10px;
    vertical-align: middle;
}
input[type='range']::-moz-range-track {
     -moz-appearance: none;
     border-radius: 5px;
     box-shadow: inset 0 0 5px #333;
     background-color: #1c5de0;
     height: 10px;
}
input[type='range']::-webkit-slider-thumb {
     -webkit-appearance: none !important;
     border-radius: 20px;
     background-color: #FFF;
     box-shadow:inset 0 0 10px rgba(000,000,000,0.5);
     border: 1px solid #999;
     height: 20px;
     width: 20px;
}
input[type='range']::-moz-range-thumb {
     -moz-appearance: none;
     border-radius: 20px;
     background-color: #FFF;
     box-shadow:inset 0 0 10px rgba(000,000,000,0.5);
     border: 1px solid #999;
     height: 20px;
     width: 20px;
}
</style>
<script>
function updateTextInput(val) {
  harga = val * 8000;
  document.getElementById('o1').value=val;
  document.getElementById('price1').value=harga;
  updateTot();
}
function updateTextInput2(val) {
  harga = val * 9000;
  document.getElementById('o2').value=val;
  document.getElementById('price2').value=harga;
  updateTot();
}
function updateTot(){
  var h1 =parseFloat( document.getElementById("price1").value);
  var h2 =parseFloat( document.getElementById("price2").value);
  var Tot = h1 + h2;
  document.getElementById("priceTot").value = Tot;
}
</script>
</head>
<body>
   <div id="content">
   <h3><center>Grosir Gula & Beras Online</center></h3>
     <form>
        <div id="left">
            <b>Gula</b><br/>
            <input type="range" min="0" max="100" value="0" step="1" oninput="updateTextInput(this.value);" id="input1" />
            <output id="o1"></output>
            <label>Kg</label>          
        </div>
        <div id="right">
            <h4>Rp <input type="text" id="price1" value="0"></h4>
        </div>
        <br/>
        <div id="left">
            <b>Beras</b><br/>
            <input type="range" min="0" max="100" value="0" step="1" oninput="updateTextInput2(this.value);" id="input2" />
            <output id="o2"></output>
            <label>Kg</label>          
        </div>
        <div id="right">
            <h4>Rp <input type="text" id="price2" value="0"></h4>
        </div>
        <br/>
        <div id="left">
            <br/><br/><h4>Harga Total Belanja :</h4>           
        </div>
        <div id="right">
            <h4>Rp  <input type="text" id="priceTot" value="0"></h4>
        </div>
      </form
   </div>
</body>
</html>

Selamat mencoba

No comments:

Post a Comment

Tutorial Programming Designed by Templateism | Ary EJFA Copyright © 2015

Theme images by richcano. Powered by Blogger.