JavaScript

Gass Poll! Bongkar Cara Bikin Kalkulator Sederhana Pakai JavaScript
JavaScript

Tutorial JavaScript: Buat Kalkulator Sederhana Praktis & Cepat

PPLG

PPLG

Penulis
17 Jun 2026
4 x dilihat

Hai gaes! Pernah kepikiran gak sih, gimana caranya aplikasi atau website bisa punya 'otak' buat ngitung-ngitung kayak kalkulator? Nah, kali ini kita bakal spill tuntas rahasianya! Vibes-nya kita bakal bikin kalkulator sederhana banget pake JavaScript. Ini project wajib sih buat kamu yang pengen ngerti gimana interaktivitas di web itu bekerja. Dijamin seru dan gak bikin pusing! Skuy, kita mulai!

Ngapain Sih Bikin Kalkulator?

Bikin kalkulator itu ibaratnya kayak "Hello World" versi interaktif di JavaScript. Dari project ini, kita bisa belajar banyak konsep penting, mulai dari manipulasi DOM, event handling, manajemen state, sampai logika dasar yang bakal kepake di banyak project JS lainnya. Jadi, jangan underestimate ya, ngab!

Pondasi Awal: HTML & CSS (Sentuhan Tipis)

Sebelum JS bisa beraksi, kita perlu nyiapin kerangka alias bangunannya dulu pakai HTML, terus dandanin dikit pakai CSS biar gak polos-polos amat.

1. Struktur HTML (Si Kerangka)

Kita bakal bikin div utama buat nampung kalkulator, div buat layar display, dan div lagi buat tombol-tombol. Jangan lupa kasih class atau id yang jelas ya, biar gampang dipegang sama JavaScript nanti.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kalkulator Sederhana</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="calculator">
        <div class="calculator-display">0</div>

        <div class="calculator-keys">
            <!-- Tombol Operator -->
            <button class="key-operator" data-action="add">+</button>
            <button class="key-operator" data-action="subtract">-</button>
            <button class="key-operator" data-action="multiply">×</button>
            <button class="key-operator" data-action="divide">÷</button>

            <!-- Tombol Angka -->
            <button>7</button>
            <button>8</button>
            <button>9</button>
            <button>4</button>
            <button>5</button>
            <button>6</button>
            <button>1</button>
            <button>2</button>
            <button>3</button>
            <button>0</button>

            <!-- Tombol Lainnya -->
            <button class="key-decimal" data-action="decimal">.</button>
            <button class="key-clear" data-action="clear">AC</button>
            <button class="key-equal" data-action="calculate">=</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

2. Styling CSS (Biar Makin Kece)

Ini CSS dasar aja ya, gaes. Tujuannya biar kalkulatornya keliatan kayak kalkulator beneran dan tombol-tombolnya rapi. Kamu bisa eksplorasi lagi buat dandanin sesuai selera kamu.

/* style.css */
body {
    margin: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f0f2f5;
}

.calculator {
    border: 1px solid #ccc;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    width: 300px;
    background-color: #fff;
    overflow: hidden; /* Penting biar border-radius keliatan */
}

.calculator-display {
    background-color: #222;
    color: #fff;
    font-size: 2.5em;
    padding: 20px;
    text-align: right;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.calculator-keys {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px; /* Jarak antar tombol */
    background-color: #e0e0e0; /* Warna latar belakang antar tombol */
}

.calculator-keys button {
    padding: 20px;
    font-size: 1.5em;
    border: none;
    background-color: #f9f9f9;
    cursor: pointer;
    transition: background-color 0.2s;
}

.calculator-keys button:hover {
    background-color: #e9e9e9;
}

.key-operator {
    background-color: #f79d1c;
    color: white;
}

.key-operator:hover {
    background-color: #e68a0a;
}

.key-equal {
    background-color: #4CAF50;
    color: white;
    grid-column: span 2; /* Agar tombol = melebar */
}

.key-equal:hover {
    background-color: #45a049;
}

.key-clear {
    background-color: #d32f2f;
    color: white;
}

.key-clear:hover {
    background-color: #c62828;
}

Otak Kalkulator: JavaScript Full Power!

Nah, ini dia bagian yang paling seru! Kita bakal bikin kalkulator ini bisa 'hidup' dan ngitung pakai JavaScript. Kodenya bakal ada di file script.js.

Konsep Utama Logika JavaScript

Untuk bikin kalkulator ini cerdas, kita perlu ngatur beberapa hal penting alias state kalkulator:

  • displayValue: Angka yang lagi ditampilin di layar (tipe string).
  • firstOperand: Angka pertama dalam operasi (tipe number).
  • waitingForSecondOperand: true kalau kita lagi nunggu angka kedua atau operator baru.
  • operator: Operator yang dipilih (+, -, ×, ÷).

Oke, yuk kita bedah kodenya!

// script.js

// Ambil elemen display dan tombol-tombol dari HTML
const calculator = {
    displayValue: '0', // Nilai yang ditampilkan di layar kalkulator
    firstOperand: null, // Angka pertama untuk perhitungan
    waitingForSecondOperand: false, // Menandakan apakah kita sedang menunggu angka kedua
    operator: null, // Operator yang dipilih (+, -, *, /)
};

// Fungsi untuk update tampilan display kalkulator
function updateDisplay() {
    const display = document.querySelector('.calculator-display');
    display.textContent = calculator.displayValue;
}

// Fungsi untuk menangani input angka
function inputDigit(digit) {
    const { displayValue, waitingForSecondOperand } = calculator;

    if (waitingForSecondOperand === true) {
        // Kalau lagi nunggu angka kedua, ganti displayValue dengan angka baru
        calculator.displayValue = digit;
        calculator.waitingForSecondOperand = false; // Udah nggak nunggu lagi
    } else {
        // Kalau belum, tambahin angka ke displayValue yang sudah ada
        // Kalau displayValue masih '0', langsung ganti aja
        calculator.displayValue = displayValue === '0' ? digit : displayValue + digit;
    }
}

// Fungsi untuk menangani input desimal (titik)
function inputDecimal(dot) {
    // Kalau lagi nunggu angka kedua, langsung mulai dengan '0.'
    if (calculator.waitingForSecondOperand === true) {
        calculator.displayValue = "0.";
        calculator.waitingForSecondOperand = false;
        return;
    }

    // Pastikan titik hanya ada satu di displayValue
    if (!calculator.displayValue.includes(dot)) {
        calculator.displayValue += dot;
    }
}

// Fungsi untuk menangani operator (+, -, *, /, =)
function handleOperator(nextOperator) {
    const { firstOperand, displayValue, operator } = calculator;
    const inputValue = parseFloat(displayValue); // Ubah string display jadi angka

    // Kalau operator sudah ada dan kita lagi nunggu angka kedua,
    // cukup ganti operatornya aja (misal: dari '+' ke '-')
    if (operator && calculator.waitingForSecondOperand) {
        calculator.operator = nextOperator;
        return;
    }

    // Kalau ini input angka pertama (firstOperand masih null)
    if (firstOperand === null && !isNaN(inputValue)) {
        calculator.firstOperand = inputValue;
    } else if (operator) {
        // Kalau firstOperand sudah ada dan operator sudah dipilih,
        // berarti waktunya melakukan perhitungan!
        const result = performCalculation[operator](firstOperand, inputValue);

        // Update displayValue dengan hasil perhitungan.
        // `toFixed(7)` untuk mengatasi isu floating point di JavaScript
        calculator.displayValue = `${parseFloat(result.toFixed(7))}`;
        calculator.firstOperand = result; // Hasil jadi firstOperand untuk operasi selanjutnya
    }

    // Setelah operator ditekan, kita siap nunggu angka kedua
    calculator.waitingForSecondOperand = true;
    calculator.operator = nextOperator; // Simpan operator yang baru dipilih
}

// Objek yang berisi fungsi-fungsi perhitungan
const performCalculation = {
    '/': (firstOperand, secondOperand) => firstOperand / secondOperand,
    '*': (firstOperand, secondOperand) => firstOperand * secondOperand,
    '+': (firstOperand, secondOperand) => firstOperand + secondOperand,
    '-': (firstOperand, secondOperand) => firstOperand - secondOperand,
    '=': (firstOperand, secondOperand) => secondOperand, // '=' hanya untuk trigger perhitungan terakhir
};

// Fungsi untuk reset kalkulator (tombol AC)
function resetCalculator() {
    calculator.displayValue = '0';
    calculator.firstOperand = null;
    calculator.waitingForSecondOperand = false;
    calculator.operator = null;
}

// --- Event Listener untuk Semua Tombol ---
const keys = document.querySelector('.calculator-keys'); // Ambil container tombol

// Pakai event delegation biar lebih efisien.
// Cukup pasang 1 event listener di parent div,
// lalu tentukan tombol mana yang ditekan
keys.addEventListener('click', (event) => {
    // Pastikan yang diklik itu tombol, bukan area kosong
    const { target } = event;
    if (!target.matches('button')) {
        return;
    }

    // Cek jenis tombol yang diklik
    if (target.classList.contains('key-operator')) {
        handleOperator(target.dataset.action); // Panggil fungsi handleOperator
        updateDisplay();
        return;
    }

    if (target.classList.contains('key-decimal')) {
        inputDecimal(target.textContent); // Panggil fungsi inputDecimal
        updateDisplay();
        return;
    }

    if (target.classList.contains('key-clear')) {
        resetCalculator(); // Panggil fungsi resetCalculator
        updateDisplay();
        return;
    }
    
    // Kalau bukan operator, desimal, atau clear, berarti tombol angka
    inputDigit(target.textContent); // Panggil fungsi inputDigit
    updateDisplay(); // Selalu update display setelah setiap aksi
});

// Panggil updateDisplay untuk pertama kali saat halaman dimuat
updateDisplay();

Penjelasan Kode JavaScript (Penting Banget!)

  1. calculator Object: Ini adalah "state manager" kita. Semua variabel yang menyimpan status kalkulator ada di sini. Penting banget buat ngelola data biar gak berantakan.
  2. updateDisplay(): Fungsi sederhana buat nampilin nilai dari calculator.displayValue ke layar HTML. Kita panggil ini setiap kali ada perubahan di displayValue.
  3. inputDigit(digit): Kalau user klik angka, fungsi ini yang jalan. Dia ngecek waitingForSecondOperand. Kalau true, berarti kita baru mulai masukin angka kedua. Kalau false, angka baru akan digabung sama yang udah ada di layar.
  4. inputDecimal(dot): Logika buat titik desimal. Dipastikan cuma ada satu titik aja di satu angka, dan kalau lagi nunggu angka kedua, diawali dengan "0.".
  5. handleOperator(nextOperator): Ini inti logikanya, ngab.
    • Dia ambil nilai yang ada di display, terus diubah ke float (angka desimal).
    • Kalau user udah masukkin firstOperand dan operator, fungsi ini bakal langsung performCalculation pakai operator yang aktif.
    • Hasilnya akan jadi firstOperand baru buat operasi berantai (misal: 2 + 2 = 4 + 3 = 7).
    • waitingForSecondOperand di-set jadi true karena kita siap nunggu angka selanjutnya.
    • calculator.operator di-update dengan operator yang baru diklik.
    • Penting: Penggunaan parseFloat(result.toFixed(7)) itu buat ngatasin isu floating point di JavaScript. Angka di JS kadang kurang presisi, toFixed() bantu nanganin itu.
  6. performCalculation Object: Ini semacam kamus yang isinya fungsi-fungsi perhitungan. Jadi, tinggal panggil performCalculation[operator](operand1, operand2) aja. Keren kan!
  7. resetCalculator(): Jelas banget, ini buat balikin semua state kalkulator ke posisi awal (tombol AC).
  8. Event Listener (keys.addEventListener): Ini bagian vital buat nangkap klik dari user.
    • Kita pakai teknik event delegation. Daripada pasang listener di tiap-tiap tombol (ada 19 tombol, gaes!), lebih baik pasang satu aja di parent div.calculator-keys.
    • event.target itu elemen yang diklik. Kita cek classList atau dataset.action dari target buat nentuin tombol mana yang ditekan, terus panggil fungsi yang sesuai.
    • updateDisplay() selalu dipanggil di akhir setiap aksi biar layar kalkulatornya selalu up-to-date.

Tips & Trik Tambahan (Biar Makin Jago!)

  • Responsivitas: Coba tambahin CSS media queries biar kalkulatornya tetep cakep di layar kecil (HP) atau layar gede (laptop).
  • Keyboard Support: Gimana kalau user pengen pakai keyboard buat input angka? Kamu bisa tambahin addEventListener('keydown', ...) di document buat nanganin input dari keyboard. Seru nih!
  • Error Handling: Gimana kalau user coba bagi angka dengan nol? Kasih pesan error yang jelas di display! (e.g., "Error", "Tidak bisa bagi nol").
  • Fitur Lebih: Berani coba tambahin fitur-fitur kalkulator scientific? Kayak tombol persen (%), akar kuadrat, atau tombol memori (M+, M-, MR, MC)? Ini bakal bikin skill JS kamu naik level!
  • Refactoring: Setelah kode jadi, coba deh pikirin lagi, ada gak cara lain yang lebih bersih atau efisien? Ini skill penting buat jadi developer pro.

Kesimpulan

Gimana, gaes? Seru kan bikin kalkulator sendiri dari nol? Dari project sederhana ini, kalian udah punya bekal buat ngembangin kalkulator ini jadi lebih kompleks atau bahkan aplikasi web interaktif lainnya. Intinya, project ini ngasih gambaran nyata gimana JavaScript bisa bikin interaksi di website jadi hidup dan fungsional.

Jangan males eksperimen ya, ngab! Cobain fitur-fitur yang aku saranin di atas atau bikin ide gila sendiri. Semangat terus ngulik JavaScript-nya! Skuy, lanjut ngoding!

0.0

Berikan Rating

Komentar (0)

Silakan login untuk memberikan komentar.

Login Sekarang

Belum ada komentar. Jadilah yang pertama!

Kata Kunci

#javascript #kalkulator #web development #html #css #tutorial #proyek js #belajar javascript #front-end #pemrograman

Menyukai Artikel (0)

Belum ada siswa yang menyukai artikel ini.

Pembaca (0)

Belum ada user yang membaca artikel ini.

Rekomendasi Untukmu

Dasar-Dasar Git & GitHub untuk Developer JavaScript

04 May 2026

Pengenalan React, Vue, Angular: Melangkah ke Frontend Modern

03 Jun 2026

Kuasai Array JavaScript: Panduan Lengkap Pembuatan & Manipulasi

04 May 2026