Membuat Kalkulator Sederhana Javascript

0
83

Buat terlebih dahulu file kalkulator.html, kalkulator.css, kalkulator.js. Setelah itu ketikan kode pada kalkulator.html :

kalkulator.html

<html>
  <head>
    <title>Kalkulator Sederhana</title>
    <link rel="stylesheet" href="kalkulator.css">
  </head>
  <body>
    <div class="bg"></div>
    <div class="utama">
      <h1>Kalkulator Sederhana</h1>
      <form name="form">
        <input class="hasil" name="hasil">
      </form>
      <table>
        <tr>
          <td><input class="button" type="button" value="C" onclick="c()"></td>
          <td><input class="button" type="button" value="Del" onclick="back()"></td>
          <td><input class="button" type="button" value="/" onclick="insert('/')"></td>
          <td><input class="button" type="button" value="x" onclick="insert('*')"></td>
        </tr>
        <tr>
          <td><input class="button" type="button" value="7" onclick="insert(7)"></td>
          <td><input class="button" type="button" value="8" onclick="insert(8)"></td>
          <td><input class="button" type="button" value="9" onclick="insert(9)"></td>
          <td><input class="button" type="button" value="-" onclick="insert('-')"></td>
        </tr>
        <tr>
          <td><input class="button" type="button" value="4" onclick="insert(4)"></td>
          <td><input class="button" type="button" value="5" onclick="insert(5)"></td>
          <td><input class="button" type="button" value="6" onclick="insert(6)"></td>
          <td><input class="button" type="button" value="+" onclick="insert('+')"></td>
        </tr>
        <tr>
          <td><input class="button" type="button" value="1" onclick="insert(1)"></td>
          <td><input class="button" type="button" value="2" onclick="insert(2)"></td>
          <td><input class="button" type="button" value="3" onclick="insert(3)"></td>
          <td rowspan="2"><input style="height: 107px;" class="button" type="button" value="=" onclick="equal()"></td>
        </tr>
        <tr>
          <td colspan="2" ><input style="width: 110px;" class="button" type="button" value="0" onclick="insert(0)"></td>
          <td><input class="button" type="button" value="." onclick="insert('.')"></td>
        </tr>
      </table>
    </div>
    <script src="kalkulator.js"></script>
  </body>
</html>

Lalu cek dibrowser, setelah itu desain web kita menggunakan kalkulator.css. Ketikan seperti ini:

kalkulator.css

*{
  margin: 0;
  padding: 0;
}
.button {
  width: 50px;
  height: 50px;
  font-size: 25px;
  margin: 2px;
  cursor: pointer;
  background: darkgray;
  color: black;
  border: solid 1px white;
}
h1 {
  text-align: center;
  position: relative;
  right: 38px;
  color: white;
  text-shadow: 1px 2px 3px black;
}
.button:hover {
  box-shadow: 1px 1px 4px black;
}
.hasil {
  width: 220px;
  margin: 5px;
  height: auto;
  font-size: 25px;
  padding: 5px;
  color: black;
  background: whitesmoke;
  border: solid 1px black;
}
.utama {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%)translateY(-50%);
}
.bg {
  background: linear-gradient(180deg, red, #ffb300);
  height: 100%
}

Jika sudah cek di web browser. Maka maka muncul tampilan sperti gambar dibawah:

Setelah itu kita akan memberikan fungsi agar kalkulator dapat dioperasikan. Ketik kode berikut pada kalkulator.js:

kalkulator.js

function insert(num){
  document.form.hasil.value = document.form.hasil.value+num
}
function equal() {
  var exp = document.form.hasil.value;
if(exp){
  document.form.hasil.value = eval(exp);
}
}
function c(){
  document.form.hasil.value = '';
}
function back(){
  var exp = document.form.hasil.value;
  document.form.hasil.value = exp.substring(0,exp.length-1);
}

Sekian tutorial dari saya bila ada kesalahan mohon maaf yang sebesar-besarnya, semoga bisa bermanfaat bagi kita semua. Terima kasih.

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here