28 Juni 2012

MEMBUAT KALKULATOR DI BLOG/WEB DENGAN KODE HTML

Sekarang saya akan memberikan tutorial untuk membuat kalkulator di web atau blog dengan kode HTML.
Kalkulator yang saya buat hanya mendukung Penjumlahan (+), Pengurangan (-), Perkalian (x), Pembagian (÷).
Interfacenya simple, dan hanya tinggal memasukkan angka dan hasilnya akan keluar. Tidak seperti software kalkulator.

Demo:
Silakan isi dengan angka apa saja.
Jangan terlalu banyak mengisi angkanya, karena kalau kebanyakan bisa error...
Jangan terlalu banyak mikir juga, nanti error :P wkwkwkwk
Menggunakan koma juga bisa, komanya dengan tanda titik (.) misal 0,6

Penjumlahan
 +  = 13

Pengurangan
 -  = 13

Perkalian
 x  = 13

Pembagian
 ÷  = 13

SOURCE CODE

Kode HTML buat penjumlahan
<form id="penjumlahan_fzb"
onsubmit="return false"
oninput="document.getElementById('hasil_penjumlahan').innerHTML = parseFloat(document.getElementById('bilangan_penjumlahan1').value) + parseFloat(document.getElementById('bilangan_penjumlahan2').value)">
<input name="bilangan_penjumlahan1" id="bilangan_penjumlahan1" type="number" value="10">
+
<input name="bilangan_penjumlahan2" id="bilangan_penjumlahan2" type="number" value="3">
=
<output name="hasil_penjumlahan" id="hasil_penjumlahan">13</output>
</form>

Kode HTML buat pengurangan
<form id="pengurangan_fzb"
onsubmit="return false"
oninput="document.getElementById('hasil_pengurangan').innerHTML = parseFloat(document.getElementById('bilangan_pengurangan1').value) - parseFloat(document.getElementById('bilangan_pengurangan2').value)">
<input name="bilangan_pengurangan1" id="bilangan_pengurangan1" type="number" value="23">
-
<input name="bilangan_pengurangan2" id="bilangan_pengurangan2" type="number" value="10">
=
<output name="hasil_pengurangan" id="hasil_pengurangan">13</output>
</form>

Kode HTML buat perkalian
<form id="perkalian_fzb"
onsubmit="return false"
oninput="document.getElementById('hasil_perkalian').innerHTML = parseFloat(document.getElementById('bilangan_perkalian1').value) * parseFloat(document.getElementById('bilangan_perkalian2').value)">
<input name="bilangan_perkalian1" id="bilangan_perkalian1" type="number" value="13">
x
<input name="bilangan_perkalian2" id="bilangan_perkalian2" type="number" value="1">
=
<output name="hasil_perkalian" id="hasil_perkalian">13</output>
</form>

Kode HTML buat pembagian
<form id="pembagian_fzb"
onsubmit="return false"
oninput="document.getElementById('hasil_pembagian').innerHTML = parseFloat(document.getElementById('bilangan_pembagian1').value) / parseFloat(document.getElementById('bilangan_pembagian2').value)">
<input name="bilangan_pembagian1" id="bilangan_pembagian1" type="number" value="26">
÷
<input name="bilangan_pembagian2" id="bilangan_pembagian2" type="number" value="2">
=
<output name="hasil_pembagian" id="hasil_pembagian">13</output>
</form>
SOME RIGHTS RESERVED

Semoga berguna

Tidak ada komentar:

Posting Komentar

 

analytics

Pengikut

Follow By Email

Enter your email address:

Delivered by FeedBurner


Copyright © 2012 | Blue→ PlatinumTheme Converted into Blogger Template by Shand 's Blog