CARA MEMBUAT KALKULATOR DI JAVASCRIPT

Kalkulator adalah alat yang sering kita gunakan dalam kehidupan sehari-hari - dari melakukan perhitungan rumah tangga sederhana hingga menghitung anggaran bisnis yang rumit. Tapi, bagaimana jika kamu bisa membuat kalkulator kamu sendiri menggunakan bahasa pemrograman JavaScript?

Artikel ini akan membantu kamu membangun kalkulator dasar di JavaScript dalam waktu singkat. Jadi, ayuh mulai!

Perangkat yang dibutuhkan

Sebelum kita mulai, pastikan kamu memiliki perangkat yang diperlukan:

1. Sebuah text editor seperti Visual Studio Code atau Sublime Text
2. Browser web seperti Google Chrome atau Firefox

Setelah kamu siap dengan semua perangkat yang diperlukan, kami bisa mulai belajar.

Langkah Pertama: Membuat Layout Kalkulator

Untuk membuat layout kalkulator, kita akan menggunakan HTML dan CSS. Buat file baru dengan nama index.html dan styles.css.

Berikut adalah kode HTML untuk membuat layout kalkulator:

<div class="calculator">
    <input type="text" class="display" disabled>
    <div class="keys">
        <button class="key-operand" value="7">7</button>
        <!-- Tambahkan sisanya -->
    </div>
</div>

Langkah Kedua: Membuat Fungsi Kalkulator

Sekarang, mari kita fokus pada JavaScript. Buat file baru dengan nama calculator.js.

Berikut adalah fungsi dasar untuk kalkulator:

function calculate(operation, number1, number2) {
    if (operation == '+') {
        return number1 + number2;
    } else if (operation == '-') {
        return number1 - number2;
    } else if (operation == '*') {
        return number1 * number2;
    } else if (operation == '/') {
        return number1 / number2;
    }
}

Langkah Ketiga: Menggabungkan Semuanya

Dengan layout dan fungsi kalkulator sudah siap, mari kita menggabungkan semuanya.

Kita akan menggunakan Event Listener pada JavaScript untuk mendeteksi klik tombol, dan kemudian melakukan operasi kalkulasi yang sesuai.

document.querySelector('.keys').addEventListener('click', function(event) {
    var key = event.target;
    var operation = key.textContent;
    var number1 = parseFloat(input.value);
    var number2 = parseFloat(display.value);
    
    var result = calculate(operation, number1, number2);
    display.value = result;
});

Itu dia! Kamu baru saja membuat kalkulator dasar kamu sendiri menggunakan JavaScript. Kamu bisa memodifikasi kode ini sesuai keinginanmu, misalnya menambahkan lebih banyak fungsi atau mengubah tampilan.

Ingat, pemrograman adalah tentang praktek. Jadi, tetap praktek dan jangan takut untuk melakukan kesalahan. Selamat coding!