juhariana

 Analisis Design Kalkulator

                sebelum

tugas 1

Kelebihan

1. Mudah dipahami – Tombol angka 0–9 tersusun rapi seperti kalkulator fisik sehingga mudah digunakan.

2. Konsisten untuk angka – Susunan tombol angka mengikuti standar kalkulator umum.

3. Feedback langsung – Hasil operasi langsung muncul di layar.

4. Efektivitas – Hasil perhitungan selalu akurat sesuai input.

5. Estetika cukup nyaman – Font besar dan tata letak rapi, memudahkan pengguna melihat input.

Kekurangan

1. Tidak ada tombol ± – Pengguna tidak bisa langsung mengubah tanda angka.

2. Tidak ada tombol backspace – Jika salah input, harus menghapus seluruh input.

3. Tombol operator tidak jelas berbeda dari angka – Bisa membingungkan pengguna.

4. Konsistensi operator kurang – Posisi operator tidak sesuai standar kalkulator fisik.

       

Setelah 

kode html

<div class="calculator">

  <div class="input" id="input"></div>

  <div class="buttons">

    <div class="operators">

      <div id="backspace" class="operator">⌫</div>

      <div id="plusminus" class="operator">±</div>

      <div id="clear" class="operator">C</div>

      <div class="operator">&divide;</div>

    </div>

    <div class="leftPanel">

      <div class="numbers">

        <div>7</div>

        <div>8</div>

        <div>9</div>

        <div class="operator">&times;</div>

      </div>

      <div class="numbers">

        <div>4</div>

        <div>5</div>

        <div>6</div>

        <div class="operator">+</div>

      </div>

      <div class="numbers">

        <div>1</div>

        <div>2</div>

        <div>3</div>

        <div class="operator">-</div>

      </div>

      <div class="numbers">

        <div>0</div>

        <div>00</div>

        <div>.</div>

        <div id="result" class="operator">=</div>

      </div>

    </div>

  </div>

</div>

kode css

.calculator {

  width: 280px;

  margin: 30px auto;

  padding: 20px;

  border-radius: 15px;

  background: #ffc0cb; /* pink */

  box-shadow: 0 0 15px #aaa;

}

.input {

  background: #ffe4e1; /* pink muda */

  height: 60px;

  margin-bottom: 15px;

  padding: 10px;

  text-align: right;

  font-size: 24px;

  border: 2px solid #ffb6c1;

  border-radius: 10px;

  overflow-x: auto;

}

.buttons {

  display: flex;

  flex-direction: column;

}

.numbers,

.operators {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 8px;

  margin-bottom: 8px;

}

.numbers div,

.operators div {

  background: #ffb6c1;

  padding: 15px 0;

  text-align: center;

  border-radius: 10px;

  font-size: 20px;

  cursor: pointer;

  user-select: none;

  color: white;

  font-weight: bold;

  transition: all 0.2s;

}

.operator,

.numbers div.operator {

  background: #ff69b4; /* pink lebih gelap untuk operator */

}

.numbers div:hover,

.operators div:hover,

.numbers div.operator:hover {

  background: #ff85b3;

}

kode js

"use strict";

var input = document.getElementById('input'),

    number = document.querySelectorAll('.numbers div'),

    operator = document.querySelectorAll('.operators div'),

    result = document.getElementById('result'),

    clear = document.getElementById('clear'),

    backspace = document.getElementById('backspace'),

    plusminus = document.getElementById('plusminus'),

    resultDisplayed = false;

// tombol angka dan "00"

for (var i = 0; i < number.length; i++) {

  number[i].addEventListener("click", function(e) {

    var currentString = input.innerHTML;

    var lastChar = currentString[currentString.length - 1];

    if (e.target.innerHTML === "00") {

      input.innerHTML += "00";

      return;

    }

    if (!resultDisplayed) {

      input.innerHTML += e.target.innerHTML;

    } else if (["+", "-", "×", "÷"].includes(lastChar)) {

      resultDisplayed = false;

      input.innerHTML += e.target.innerHTML;

    } else {

      resultDisplayed = false;

      input.innerHTML = e.target.innerHTML;

    }

  });

}

// tombol operator

for (var i = 0; i < operator.length; i++) {

  operator[i].addEventListener("click", function(e) {

    var op = e.target.innerHTML;

    if (!["+", "-", "×", "÷"].includes(op)) return;

    var currentString = input.innerHTML;

    var lastChar = currentString[currentString.length - 1];

    if (["+", "-", "×", "÷"].includes(lastChar)) {

      input.innerHTML = currentString.slice(0, -1) + op;

    } else if (currentString.length != 0) {

      input.innerHTML += op;

    }

  });

}

// tombol sama dengan

result.addEventListener("click", function() {

  var inputString = input.innerHTML;

  if (!inputString) return;

  var numbers = inputString.match(/-?\d+(\.\d+)?/g) || [];

  var operators = inputString.replace(/-?\d+(\.\d+)?/g, "").split("").filter(op => op);

  // operasi ÷ × - +

  var divide = operators.indexOf("÷");

  while (divide != -1) {

    if (parseFloat(numbers[divide + 1]) === 0) {

      input.innerHTML = "Tidak Valid";

      resultDisplayed = true;

      return;

    }

    numbers.splice(divide, 2, parseFloat(numbers[divide]) / parseFloat(numbers[divide + 1]));

    operators.splice(divide, 1);

    divide = operators.indexOf("÷");

  }

  var multiply = operators.indexOf("×");

  while (multiply != -1) {

    numbers.splice(multiply, 2, parseFloat(numbers[multiply]) * parseFloat(numbers[multiply + 1]));

    operators.splice(multiply, 1);

    multiply = operators.indexOf("×");

  }

  var subtract = operators.indexOf("-");

  while (subtract != -1) {

    numbers.splice(subtract, 2, parseFloat(numbers[subtract]) - parseFloat(numbers[subtract + 1]));

    operators.splice(subtract, 1);

    subtract = operators.indexOf("-");

  }

  var add = operators.indexOf("+");

  while (add != -1) {

    numbers.splice(add, 2, parseFloat(numbers[add]) + parseFloat(numbers[add + 1]));

    operators.splice(add, 1);

    add = operators.indexOf("+");

  }

  input.innerHTML = numbers[0] ?? "";

  resultDisplayed = true;

});

// tombol clear

clear.addEventListener("click", function() {

  input.innerHTML = "";

});

// tombol backspace

backspace.addEventListener("click", function() {

  input.innerHTML = input.innerHTML.slice(0, -1);

});

// tombol plus/minus

plusminus.addEventListener("click", function() {

  if (!input.innerHTML) return;

  var current = input.innerHTML;

  var match = current.match(/(\d+(\.\d+)?)$/);

  if (match) {

    var lastNum = match[0];

    var toggled = -parseFloat(lastNum);

    input.innerHTML = current.slice(0, -lastNum.length) + toggled;

  }

});

Tugas

Redesign dilakukan dengan membuat warna tema kalkulator menjadi pink, tombol operator diberi warna lebih gelap, tombol angka warna pink muda, dan tombol backspace serta ± ditambahkan untuk memudahkan pengguna. Tombol 00 ditambahkan untuk memasukkan angka besar lebih cepat. Hasil pengujian menunjukkan kenyamanan meningkat, karena pengguna bisa langsung membedakan tombol angka dan operator, serta melakukan koreksi input tanpa harus menghapus semua angka. Tampilan lebih manis dan rapi, dan ukuran tombol cukup besar untuk penggunaan di laptop maupun layar sentuh.

Tugas 3 

Kalkulator diuji dengan input abnormal, misalnya 10 ÷ 0. Sebelumnya hasilnya adalah Infinity, yang bisa membingungkan pengguna. Sekarang, ketika terjadi pembagian dengan nol, output menampilkan pesan "Tidak Valid", sehingga pengguna langsung memahami ada kesalahan. Selain itu, jika pengguna menekan operator berulang kali, operator sebelumnya otomatis diganti dengan operator terakhir yang ditekan, mencegah munculnya NaN. Fitur ini membuat kalkulator lebih aman dan jelas dalam menangani kesalahan input.

                                                                  

Subscribe to receive free email updates: