Cara Membuat Kalkulator Sederhana Menggunakan Javascript Part1

Javascript adalah bahasa pemprograman yang mudah kita pelajari. Alasan kenapa mudah dipelajari adalah karena bahasa ini bahasa tingkat tinggi, dimana bahasanya seperti bahasa manusia sehingga mudah di pahami. Untuk mempelajari javascript tentu mudah dipelajari tapi sangat sulit jika menjadi master. Dan pada artikel kali ini saya akan membahas tentang Cara Membuat Kalkulator Sederhana Menggunakan Javascript Part1.

Langkah pertama untuk Cara Membuat Kalkulator Sederhana Menggunakan Javascript Part1 kita siapkan terlebih dahulu struktur htmlnya. Dan kebetulan disini saya menggunakan bootstrap untuk membuat tampilan kalkulatornya. Berikut ini adalah scriptnya.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <title>Kalkulator Sederhana</title>
  </head>
  <body>
  <div class="container">
    <div class="row">
      <div class="col">
        <h1>Membuat Kalkulator Sederhana Menggunakan Javascript</h1>
        <table>
          <tr>
            <td>Bil 1 :</td>
            <td colspan="4"><input type="text" class="form-control border border-secondary" id="bil1"></td>
          </tr>
          <tr>
            <td>Bil 2 :</td>
            <td colspan="4"><input type="text" class="form-control border border-secondary" id="bil2"></td>
          </tr>
          <tr>
            <td>Hasil :</td>
            <td colspan="4"><input type="text" class="form-control border border-secondary" id="hasil" disabled="disabled"></td>
          </tr>
          <tr>
            <td></td>
            <td>
              <div class="custom-control custom-radio custom-control-inline">
                <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input operator" data="tambah">
                <label class="custom-control-label" for="customRadioInline1">+</label>
              </div>
            </td>
            <td>
              <div class="custom-control custom-radio custom-control-inline">
                <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input operator" data="kurang">
                <label class="custom-control-label" for="customRadioInline2">-</label>
              </div>
            </td>
            <td>
              <div class="custom-control custom-radio custom-control-inline">
                <input type="radio" id="customRadioInline3" name="customRadioInline1" class="custom-control-input operator" data="kali">
                <label class="custom-control-label" for="customRadioInline3">x</label>
              </div>
            </td>
            <td>
              <div class="custom-control custom-radio custom-control-inline">
                <input type="radio" id="customRadioInline4" name="customRadioInline1" class="custom-control-input operator" data="bagi">
                <label class="custom-control-label" for="customRadioInline4">/</label>
              </div>
            </td>
          </tr>
          <tr>
            <td></td>
            <td colspan="4"><button type="button" class="btn btn-danger form-control" id="hitung">=</button></td>
          </tr>
        </table>
      </div>
    </div>
  </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>

Jika sudah maka tampilannya akan tampak seperti pada gambar di bawah ini.

Langkah selanjutnya kita akan membuat function yang berfungsi untuk melakukan operasi perhitungan matematika sepeti tambah, kurang, kali dan bagi di bagian selanjutnya atau part2.

Sampai disini dulu pembahasan tentang Cara Membuat Kalkulator Sederhana Menggunakan Javascript Part1. Kita ketemu lagi di pembahasan selanjutnya, sampai jumpa.