Tugas 2 IMK

Analisis dan Iterasi Desain Kalkulator

Desain Awal Kalkulator

Prototipe awal dikembangkan dengan fungsionalitas dasar untuk memenuhi kebutuhan kalkulasi standar. Desainnya dibuat minimalis dan fungsional.

CODE HTML

<div class="calculator">
    <div class="input" id="input"></div>
    <div class="buttons">
        <div class="operators">
            <div>+</div>
            <div>-</div>
            <div>×</div>
            <div>÷</div>
        </div>
        <div class="leftPanel">
            <div class="numbers">
                <div>7</div>
                <div>8</div>
                <div>9</div>
            </div>
            <div class="numbers">
                <div>4</div>
                <div>5</div>
                <div>6</div>
            </div>
            <div class="numbers">
                <div>1</div>
                <div>2</div>
                <div>3</div>
            </div>
            <div class="numbers">
                <div>0</div>
                <div>.</div>
                <div id="clear">C</div>
            </div>
        </div>
        <div class="equal" id="result">=</div>
    </div>
</div>

CODE CSS

body {
    width: 500px;
    margin: 4% auto;
    font-family: 'Source Sans Pro', sans-serif;
    letter-spacing: 5px;
    font-size: 1.8rem;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.calculator {
    padding: 20px;
    -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
    border-radius: 1px;
}

/* ... dan seterusnya ... */

CODE JS

"use strict";

var input = document.getElementById('input'), // input/output button
    number = document.querySelectorAll('.numbers div'), // number buttons
    operator = document.querySelectorAll('.operators div'), // operator buttons
    result = document.getElementById('result'), // equal button
    clear = document.getElementById('clear'), // clear button
    resultDisplayed = false; // flag to keep an eye on what output is displayed

// adding click handlers to number buttons
for (var i = 0; i < number.length; i++) {
    number[i].addEventListener("click", function(e) {
        // ... dan seterusnya ...
    });
}

---

Analisis Usability

Kelebihan

1. Mudah Dipelajari: Tata letaknya sama persis seperti kalkulator pada umumnya, jadi siapa saja bisa langsung memakainya tanpa perlu belajar lagi.
2. Konsisten: Tombol angka 0-9 dan operatornya (+, -, ×, ÷) punya desain dan ukuran yang seragam, mirip seperti yang ada di kalkulator fisik.
3. Umpan Balik: Cukup jelas. Setiap tombol yang ditekan akan langsung muncul angkanya di layar, jadi kita tahu apa yang sedang diketik.
4. Estetika: Desainnya bersih dan minimalis. Tidak banyak hiasan yang mengganggu, sehingga nyaman dilihat dan fokus pada fungsi.

Kekurangan dari Kalkulator Ini

1. Tidak ada tombol backspace untuk memperbaiki kesalahan ketik.
2. Fungsi sangat terbatas (hanya tambah, kurang, kali, bagi).
3. Pesan kesalahan tidak jelas (misalnya saat dibagi dengan nol).
4. Tidak ada riwayat untuk melihat perhitungan sebelumnya.

---

Iterasi Desain

Setelah menganalisis permasalahan yang ada, maka saya membuat desain baru ini agar permasalahan di atas dapat diatasi. Perbaikan mencakup penambahan tombol backspace, fungsi akar (√) dan plus-minus (±), serta peningkatan estetika secara keseluruhan.

CODE HTML

<div class="calculator">
    <div class="input" id="input"></div>
    <div class="buttons">
        <div class="row">
            <div class="button function" id="clear">C</div>
            <div class="button function" id="plus-minus">±</div>
            <div class="button function" id="sqrt">√</div>
            <div class="button operator" id="backspace">⌫</div>
        </div>
        <div class="row">
            <div class="button number">7</div>
            <div class="button number">8</div>
            <div class="button number">9</div>
            <div class="button operator">÷</div>
        </div>
        <!-- ... dan seterusnya ... -->
    </div>
</div>

CODE CSS

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: 'Roboto', sans-serif;
    background: linear-gradient(to bottom right, #fdfbfb, #ebedee);
}

.calculator {
    width: 320px;
    padding: 20px;
    border-radius: 20px;
    /* ... dan seterusnya ... */
}

CODE JS

"use strict";

const input = document.getElementById('input');
const numberButtons = document.querySelectorAll('.number');
const operatorButtons = document.querySelectorAll('.operator');
const resultButton = document.getElementById('result');
// ... dan seterusnya ...

numberButtons.forEach(button => {
    button.addEventListener("click", (e) => {
        // ... dan seterusnya ...
    });
});

---

Hasil Akhir (Kalkulator Interaktif)

Setiap proyek pengembangan sering kali dimulai dari sebuah prototipe dasar. Dalam kasus ini, titik awalnya adalah kalkulator digital sederhana. Langkah terpenting selanjutnya bukanlah menganggapnya selesai, melainkan melakukan analisis dan iterasi. Proses ini melibatkan pengujian untuk menemukan kelemahan pada versi pertama. Berdasarkan temuan tersebut, kami melakukan siklus perbaikan (iterasi) yang melahirkan versi kedua yang jauh lebih matang. Hasilnya adalah sebuah kalkulator yang tidak hanya tampil dengan desain modern, tetapi juga dilengkapi fitur esensial dan logika cerdas yang mampu memberikan pesan error spesifik. Transformasi ini adalah contoh nyata bagaimana analisis kritis terhadap versi awal menjadi fondasi untuk menciptakan produk akhir yang lebih baik.

C

±

√

⌫

7

8

9

÷

4

5

6

×

1

2

3

-

0

.

+

=