Sebelumnya saya juga pernah membuat aplikasi kalkulator ya tetapi dengan sebuah jquery dan sekaang kita akan mencoba cara membuat kalkulator javascript dengan operator button, sebelumnya teman-teman tau ya apa yang di maksud dengan operator, ya benar operator dalam kalkulator itu biasanya angka itu ingin kita jumlahkan, kali, bagi, atau minus seperti itu ya. oke bagaimana cara membuatnya simak terus ya teman-teman.
Oke jika kemarin saya membuat kalkulator dengan jquery dimana kalkulator itu operatornya kita pilih dengan tag HTML yaitu tag select dan option tetapi disini kita akan mencobanya dengan cara membuat kalkulator javascript dengan operator button, dimana kesulitan kita saat menggunakan operator button, karena button sendiri biasanya di gunakan untuk menghasilkan action, dan karena sama dengannya (=) juga berupa button, dimana kita mau hasil itu keluar saat kita mengklik button sama dengan, jadi saat kita mengklik button operator tidak keluar hasilnya dulu ya.
Jika kita mengklik langsung operatornya dan menghasilkan hasilnya itu mungkin simple ya teman-teman, sudah terlihat ya kasus kalkulator untuk kali ini, ya benar, input kita masukan terlebih dahulu, baru kita pilih operatornya, lalu hasil muncul ketika saya mengklik sama denganya, jadi sama dengan supaya tau orang tersebut memilih operator apa, oke langsung saja kita lihat caranya:
<!DOCTYPE html>
<html lang="en" ng-app="calculatorApp">
<head>
<meta charset="UTF-8">
<title>Calculator.</title>
<style>
body {margin: 10%}
input {padding: 3px; border: 1px solid #bbb}
button {border: 0; padding: 4px; width: 20px; cursor: pointer}
</style>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8 text-center m-5">
<h3 class="mb-3">Calculator App.</h3>
<input type="text">
<span id="operation">- + * /</span>
<input type="text">
<button class="btn btn-primary">=</button>
<span id="result"></span>
<p class="mt-4">Choose Operation:
<button class="btn btn-default">+</button>
<button class="btn btn-default">-</button>
<button class="btn btn-default">*</button>
<button class="btn btn-default">/</button>
</p>
</div>
<div class="col-md-2"></div>
</div>
</div>
<script>
var span = document.querySelector("#result")
var input = document.querySelectorAll("input")
var btn = document.querySelectorAll("button")
var pertama = input[0]
var kedua = input[1]
var samadengan = btn[0]
var tambah = btn[1]
var ambil = btn[2]
var kali = btn[3]
var bagi = btn[4]
for(var i = 0; i<btn.length; i++){
btn[i].addEventListener("click", function(){
var teks1 = parseInt(pertama.value)
var teks2 = parseInt(kedua.value)
if(this.innerText == "+"){
if(this.classList.contains("active")){
this.classList.remove("active")
btn[2].disabled = ""
btn[3].disabled = ""
btn[4].disabled = ""
}else{
this.classList.add("active")
btn[2].disabled = "disabled"
btn[3].disabled = "disabled"
btn[4].disabled = "disabled"
}
hasil = (teks1 + teks2)
// span.innerText = " <- silahkan pilih tekan samadengan"
}else if(this.innerText == "-"){
if(this.classList.contains("active")){
this.classList.remove("active")
btn[1].disabled = ""
btn[3].disabled = ""
btn[4].disabled = ""
}else{
this.classList.add("active")
btn[1].disabled = "disabled"
btn[3].disabled = "disabled"
btn[4].disabled = "disabled"
}
hasil = (teks1 - teks2)
// span.innerText = " <- silahkan pilih tekan samadengan"
}else if(this.innerText == "*"){
if(this.classList.contains("active")){
this.classList.remove("active")
btn[1].disabled = ""
btn[2].disabled = ""
btn[4].disabled = ""
}else{
this.classList.add("active")
btn[1].disabled = "disabled"
btn[2].disabled = "disabled"
btn[4].disabled = "disabled"
}
hasil = (teks1 * teks2)
// span.innerText = " <- silahkan pilih tekan samadengan"
}else if(this.innerText == "/"){
if(this.classList.contains("active")){
this.classList.remove("active")
btn[1].disabled = ""
btn[3].disabled = ""
btn[4].disabled = ""
}else{
this.classList.add("active")
btn[1].disabled = "disabled"
btn[3].disabled = "disabled"
btn[4].disabled = "disabled"
}
hasil = (teks1 / teks2)
// span.innerText = " <- silahkan pilih tekan samadengan"
}else if(this.innerText == "="){
// var hasil = (teks1 / teks2)
span.innerText = hasil
}
})
}
</script>
</body>
</html>
Sepert biasa silahkan teman-teman ketika seperti di atas dan silahkan coba sendiri hasilnya, dan kode di atas saya buat ada tambahan khusus ya, dimana ketika kita memilih sebuah operatornya, maka operator yang lain tidak bisa di click, operator lainya akan menghasil kan disabled, dan disabled itu akan hilang ketika kita menekan kembali operator yang tadi kita pilih, penasaran coba saja sendiri hehe, oke dan hasil yang saya dapatkan seperi ini ya:
bisa di lihat ya operator yang lain akan ke disabled, dan untuk melihat live hasilnya silahkan teman-teman liha di sini:
See the Pen OBoxaX by bento (@masbeni) on CodePen.
Bagaimana cukup menarik ya untuk di coba dan saya rasa cukup sampai disini dulu belajar kita tentang cara membuat kalkulator javascript dengan operator button semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.