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
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
Pengurangan
Perkalian
Pembagian
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>
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>
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>
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>
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>
Semoga berguna
Tidak ada komentar:
Posting Komentar