Kembali lagi dengan saya temen-temen. Pada artikel kali ini saya akan membagikan kode lengkap dan sederhana bagaimana cara membuat kalkulator menggunakan HTML, CSS, dan Javascript.

Kode ini sangat sederhana sekali namun sudah memiliki fitur kalkulator yang sangat memadai. Di sini untuk text editornya saya menggunakan Visual Studio Code serta Firefox sebagai browsernya.

Tampilan Kalkulator

Berikut untuk script lengkapnya dan jika ada yang belum jelas bisa menonton videonya di atas.

<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Kalkulator</title>

    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .btn {
        width: 6em;
        height: 6em;
        margin: 0.2em;
        border: none;
        cursor: pointer;
      }
      #viewer {
        width: 25.7em;
        height: 4em;
        margin: 0.3em;
        padding: 0.1em 0.8em;
      }
      #main {
        background: linear-gradient(to right, rgb(90, 20, 20), rgb(10, 8, 110));
        height: 100%;
      }
      form {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
      }
    </style>
  </head>
  <body>
    <div id="main">
      <form>
        <input type="text" id="viewer" />

        <table>
          <tr>
            <td>
              <input type="button" value="C" class="btn" onclick="clean()" />
            </td>
            <td>
              <input
                type="button"
                value="DEL"
                class="btn"
                onclick="backspace()"
              />
            </td>
            <td>
              <input type="button" value="/" class="btn" onclick="view('/')" />
            </td>
            <td>
              <input type="button" value="X" class="btn" onclick="view('*')" />
            </td>
          </tr>
          <tr>
            <td>
              <input type="button" value="7" class="btn" onclick="view(7)" />
            </td>
            <td>
              <input type="button" value="8" class="btn" onclick="view(8)" />
            </td>
            <td>
              <input type="button" value="9" class="btn" onclick="view(9)" />
            </td>
            <td>
              <input type="button" value="-" class="btn" onclick="view('-')" />
            </td>
          </tr>
          <tr>
            <td>
              <input type="button" value="4" class="btn" onclick="view(4)" />
            </td>
            <td>
              <input type="button" value="5" class="btn" onclick="view(5)" />
            </td>
            <td>
              <input type="button" value="6" class="btn" onclick="view(6)" />
            </td>
            <td>
              <input type="button" value="+" class="btn" onclick="view('+')" />
            </td>
          </tr>
          <tr>
            <td>
              <input type="button" value="1" class="btn" onclick="view(1)" />
            </td>
            <td>
              <input type="button" value="2" class="btn" onclick="view(2)" />
            </td>
            <td>
              <input type="button" value="3" class="btn" onclick="view(3)" />
            </td>
            <td rowspan="2">
              <input
                type="button"
                value="="
                class="btn"
                onclick="equal()"
                style="height: 12.4em;"
              />
            </td>
          </tr>
          <tr>
            <td>
              <input type="button" value="0" class="btn" onclick="view('0')" />
            </td>
            <td>
              <input
                type="button"
                value="000"
                class="btn"
                onclick="view('000')"
              />
            </td>
            <td>
              <input type="button" value="." class="btn" onclick="view('.')" />
            </td>
          </tr>
        </table>
      </form>
    </div>

    <script>
      function view(val) {
        document.getElementById("viewer").value += val;
      }

      function clean() {
        document.getElementById("viewer").value = "";
      }

      function backspace() {
        var val = document.getElementById("viewer").value;
        document.getElementById("viewer").value = val.substring(
          0,
          val.length - 1
        );
      }

      function equal() {
        var val = document.getElementById("viewer").value;
        if (val) {
          document.getElementById("viewer").value = eval(val);
        }
      }
    </script>
  </body>
</html>

Semoga Bermanfaat …