Advertisement

contoh program kalkulator dengan javascript

Admin January 20, 2025

 JavaScript - Wikipédia

Berikut adalah contoh program kalkulator lengkap menggunakan HTML, CSS, dan JavaScript. Program ini mendukung operasi dasar seperti penjumlahan, pengurangan, perkalian, dan pembagian, serta penanganan kesalahan jika ada input yang tidak valid.

1. HTML (Struktur tampilan)

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="calculator">
        <input type="text" id="display" disabled />
        <div class="buttons">
            <button class="btn" onclick="appendToDisplay('1')">1</button>
            <button class="btn" onclick="appendToDisplay('2')">2</button>
            <button class="btn" onclick="appendToDisplay('3')">3</button>
            <button class="btn" onclick="appendToDisplay('+')">+</button>

            <button class="btn" onclick="appendToDisplay('4')">4</button>
            <button class="btn" onclick="appendToDisplay('5')">5</button>
            <button class="btn" onclick="appendToDisplay('6')">6</button>
            <button class="btn" onclick="appendToDisplay('-')">-</button>

            <button class="btn" onclick="appendToDisplay('7')">7</button>
            <button class="btn" onclick="appendToDisplay('8')">8</button>
            <button class="btn" onclick="appendToDisplay('9')">9</button>
            <button class="btn" onclick="appendToDisplay('*')">*</button>

            <button class="btn" onclick="appendToDisplay('0')">0</button>
            <button class="btn" onclick="clearDisplay()">C</button>
            <button class="btn" onclick="calculate()">=</button>
            <button class="btn" onclick="appendToDisplay('/')">/</button>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

 2. CSS (Untuk styling tampilan)

 body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f4f4f4;
}

.calculator {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

input {
    width: 100%;
    height: 40px;
    font-size: 20px;
    text-align: right;
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f5f5f5;
}

.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

button {
    font-size: 20px;
    padding: 20px;
    background-color: #f0f0f0;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

button:hover {
    background-color: #e0e0e0;
}

button:active {
    background-color: #d0d0d0;
}

 3. JavaScript (Logika kalkulator)

 let display = document.getElementById('display');

// Menambahkan angka atau operator ke tampilan
function appendToDisplay(value) {
    display.value += value;
}

// Menghapus semua isi tampilan
function clearDisplay() {
    display.value = '';
}

// Menghitung hasil dari ekspresi matematika
function calculate() {
    try {
        // Memastikan ekspresi yang valid
        display.value = eval(display.value);
    } catch (e) {
        // Jika terjadi kesalahan (misalnya pembagian dengan 0), tampilkan "Error"
        display.value = 'Error';
    }
}

Penjelasan Kode:

  1. HTML:

    • Struktur kalkulator terdiri dari tampilan input dan tombol-tombol yang mewakili angka dan operator matematika.
    • Tombol-tombol tersebut memanggil fungsi JavaScript appendToDisplay(), clearDisplay(), atau calculate() saat diklik.

  2. CSS:

    • Menata tampilan kalkulator agar terlihat lebih rapi dan responsif.
    • Menggunakan grid layout untuk tombol kalkulator dan memberikan efek hover pada tombol.

  3. JavaScript:

    • appendToDisplay(value): Menambahkan angka atau operator ke dalam layar kalkulator.
    • clearDisplay(): Menghapus isi tampilan kalkulator.
    • calculate(): Menghitung ekspresi matematika menggunakan fungsi eval(), yang mengeksekusi string yang berisi ekspresi JavaScript. Jika ada kesalahan (misalnya pembagian dengan nol), program akan menangani kesalahan tersebut dengan menampilkan "Error".

Cara Menggunakannya:

  1. Masukkan angka atau operator dengan menekan tombol yang sesuai.
  2. Tekan "C" untuk menghapus tampilan.
  3. Tekan "=" untuk mendapatkan hasil perhitungan.

 Dengan menggunakan kode ini, Anda sudah memiliki kalkulator fungsional untuk operasi matematika dasar! Anda dapat mengembangkannya lebih lanjut dengan menambahkan fitur-fitur seperti persen, akar kuadrat, dan sebagainya.

 


Tags
Admin

Posted by Admin

Post a Comment

0 Comments