Simple Price Calculator dengan Input Range

Ukuran: px

Mulai penontonan dengan halaman:

Download "Simple Price Calculator dengan Input Range"

Yuliani Lie
9 tahun lalu
Tontonan:

2 Simple Price Calculator dengan Input Range Oleh: Septi Wulan 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 k... 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. <input type="range" min="0" max="100" value="0" step="1" oninput="updatetextinput(this.value);" id="input1" /> <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 :

3 input[type='range'] { width: 300px; -webkit-appearance: none; vertical-align: middle; input[type='range']::-moz-range-track { input[type='range']::-webkit-slider-thumb { -webkit-appearance: none!important; input[type='range']::-moz-range-thumb { Setelah selesai membuat input range, sekarang giliran mainan javascript-nya untuk menampilkan nilai dari input dan menampilkan harganya. Fungsi updatetextinput dan updatetot 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;

4 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: <!DOCTYPE html> <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; vertical-align: middle; input[type='range']::-moz-range-track {

5 input[type='range']::-webkit-slider-thumb { -webkit-appearance: none!important; input[type='range']::-moz-range-thumb { </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" />

6 <output id="o1"></output> <label>kg</label> <div id="right"> <h4>rp <input type="text" id="price1" value="0"></h4> <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 id="right"> <h4>rp <input type="text" id="price2" value="0"></h4> <br/> <div id="left"> <br/><br/><h4>harga Total Belanja :</h4> <div id="right"> <h4>rp <input type="text" id="pricetot" value="0"></h4> </form> </body> </html> Selamat mencoba :) Tentang Penulis Septi Wulan

dokumen-dokumen yang mirip

LEMBAR KERJA PRAKTIKUM. - JavaScript Alert yang ditampilkan browser saat membuka halaman home/index.html :

LEMBAR KERJA PRAKTIKUM. - JavaScript Alert yang ditampilkan browser saat membuka halaman home/index.html : LEMBAR KERJA PRAKTIKUM Nim : 13-1401-164 Hari / Tgl TTD Asisten Nama Kelas : Muh. Idrus : DK-13 Mata kuliah : Pemrograman Web I Materi : JavaScript - JavaScript Alert yang ditampilkan browser saat membuka