JAVASCRIPT

Membuat Program Kalkulator Sederhana Dengan Javascript


Pada artikel ini saya akan membuat sebuah program kalkulator sederhana dengan bahasa pemrograman javascript. pada artikel sebelumnya saya telah membuat program copy text dengan bahasa pemrograman javascript kamu bisa di lihat di sini. program yang saya buat nanti bisa di modifikasi lagi oleh kamu yah dan sebagai referensi juga dalam belajar bahasa pemrograman javascript.


Kamu buat dengan file HTML nya dengan nama index.html

<!doctype html>
   <html lang="en">
  <head>
    <title>Kalkulator Sederhana Javascript</title>
  </head>   
    
  <body>         
      <br>
      <br>
      <br>
      <!--Buat sebuah tombol -->
      <center>
          <form method="post" action="">
<!--              Buat label nilai 1-->
              <label for="nilai1">Nilai 1</label>
<!--              Buat kolom masukkan -->
              <input type="text" id="nilai1" autocomplete="off">
<!--              Buat label nilai 2-->
               <label for="nilai2">Nilai 2</label>
<!--              Buat kolom masukkan-->
               <input type="text" id="nilai2" autocomplete="off">
<!--              Buat spasi-->
              <br>
              <br>
              <br>
<!--              Buat label hasil-->
              <label for="hasil">Hasil</label>
<!--              Buat kolom masukkan untuk hasil-->
              <input type="text" id="hasil">
<!--              Buat spasi-->
              <br>
              <br>
              <br>
<!--              Buat tombol-->
          <button type="button" id="tambah">+</button>
          <button type="button" id="kurang">-</button>
          <button type="button" id="kali">x</button>
          <button type="button" id="bagi">/</button>
          <button type="button" id="reset">reset</button>
      
      </form>
      </center>
          
      <script src="script.js"></script>
  </body>
</html>

Setelah itu buat file javascript nya dengan nama script.js

//buat variabel
let nilai1 = document.getElementById('nilai1');
let nilai2 = document.getElementById('nilai2');
let tambah = document.getElementById('tambah');
let kurang = document.getElementById('kurang');
let kali = document.getElementById('kali');
let bagi = document.getElementById('bagi');
let hasil = document.getElementById('hasil');
let reset = document.getElementById('reset');

//ketika tombol tambah di klik
tambah.addEventListener('click', function(){
    //jalankan program untuk tambah
	tambah = parseInt(nilai1.value) + parseInt(nilai2.value);
	hasil.value = tambah;
});

//ketika tombol kurang di klik
kurang.addEventListener('click', function(){
    //jalankan program untuk kurang
    kurang = parseInt(nilai1.value) - parseInt(nilai2.value);
	hasil.value = kurang;    
});

//ketika tombol kali di klik
kali.addEventListener('click', function(){
    //jalankan program untuk kali
    kali = parseInt(nilai1.value) * parseInt(nilai2.value);
	hasil.value = kali;
});

//ketika tombol bagi di klik
bagi.addEventListener('click', function(){
    //jalankan program untuk bagi
    bagi = parseInt(nilai1.value) / parseInt(nilai2.value);
	hasil.value = bagi;
});

//ketika tombol reset di klik
reset.addEventListener('click', function(){
    //jalankan program untuk reset
        hasil.value = "";
	nilai1.value = "";
	nilai2.value = "";   
});

Nah program yang saya buat di atas bisa di lihat di sini. semoga bermanfaat :D