Project JavaScript: Membuat Kalkulator Sederhana dengan Bootstrap 5

Membuat kalkulator menggunakan JavaScript dan Bootstrap 5 adalah project yang sempurna untuk pemula yang ingin mempelajari integrasi antara HTML, CSS, dan JavaScript. Dalam artikel ini, kita akan membangun kalkulator fungsional dengan antarmuka responsif menggunakan Bootstrap 5 dan logika JavaScript. Mari mulai langkah demi langkah!

Mengapa Membuat Kalkulator dengan Bootstrap 5?

Responsive Design: Bootstrap 5 memudahkan pembuatan antarmuka yang menarik dan responsif.
Fleksibilitas JavaScript: JavaScript menangani logika perhitungan dengan efisien.
Proyek Praktis: Kalkulator adalah alat yang berguna untuk dipelajari dan dikembangkan lebih lanjut.

Persiapan

Siapkan Editor Kode: VS Code, Sublime Text, atau sejenisnya.
Unduh Bootstrap 5: Tambahkan Bootstrap 5 via CDN di HTML.
Pemahaman Dasar:
- HTML & CSS
- JavaScript Dasar (Variabel, Fungsi, Event)

Langkah 1: Membuat Struktur HTML dengan Bootstrap 5

1.1. Setup Dasar HTML

Buat file index.html dan tambahkan kode berikut:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kalkulator Bootstrap 5</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- CSS Kustom -->
    <style>
        .calculator {
            max-width: 400px;
            margin: 50px auto;
            padding: 20px;
            background-color: #f8f9fa;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        #display {
            font-size: 24px;
            height: 60px;
            text-align: right;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="calculator">
            <!-- Input Display -->
            <input type="text" id="display" class="form-control mb-3" readonly>
            <!-- Tombol Kalkulator -->
            <div class="row g-2">
                <!-- Tombol akan ditambahkan di sini -->
            </div>
        </div>
    </div>

    <!-- Bootstrap 5 JS + Popper.js -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- JavaScript Kustom -->
    <script src="script.js"></script>
</body>
</html>

Run HTML

1.2. Menambahkan Tombol Kalkulator

Di dalam <div class="row g-2">, tambahkan tombol menggunakan grid Bootstrap:

<div class="col-3">
    <button class="btn btn-secondary w-100" onclick="clearDisplay()">C</button>
</div>
<div class="col-3">
    <button class="btn btn-secondary w-100" onclick="appendToDisplay('%')">%</button>
</div>
<div class="col-3">
    <button class="btn btn-secondary w-100" onclick="appendToDisplay('/')">/</button>
</div>
<div class="col-3">
    <button class="btn btn-warning w-100" onclick="calculate()">=</button>
</div>

<!-- Baris 2 (Angka dan Operator) -->
<div class="col-3"><button class="btn btn-light w-100" onclick="appendToDisplay('7')">7</button></div>
<div class="col-3"><button class="btn btn-light w-100" onclick="appendToDisplay('8')">8</button></div>
<div class="col-3"><button class="btn btn-light w-100" onclick="appendToDisplay('9')">9</button></div>
<div class="col-3"><button class="btn btn-secondary w-100" onclick="appendToDisplay('*')">×</button></div>

<!-- Baris 3 (Angka dan Operator) -->
<div class="col-3"><button class="btn btn-light w-100" onclick="appendToDisplay('4')">4</button></div>
<div class="col-3"><button class="btn btn-light w-100" onclick="appendToDisplay('5')">5</button></div>
<div class="col-3"><button class="btn btn-light w-100" onclick="appendToDisplay('6')">6</button></div>
<div class="col-3"><button class="btn btn-secondary w-100" onclick="appendToDisplay('-')">-</button></div>

<!-- Baris 4 (Angka dan Operator) -->
<div class="col-3"><button class="btn btn-light w-100" onclick="appendToDisplay('1')">1</button></div>
<div class="col-3"><button class="btn btn-light w-100" onclick="appendToDisplay('2')">2</button></div>
<div class="col-3"><button class="btn btn-light w-100" onclick="appendToDisplay('3')">3</button></div>
<div class="col-3"><button class="btn btn-secondary w-100" onclick="appendToDisplay('+')">+</button></div>

<!-- Baris 5 (Angka dan Operator) -->
<div class="col-6"><button class="btn btn-light w-100" onclick="appendToDisplay('0')">0</button></div>
<div class="col-3"><button class="btn btn-light w-100" onclick="appendToDisplay('.')">.</button></div>
<div class="col-3"><button class="btn btn-secondary w-100" onclick="appendToDisplay('(')">(</button></div>

<!-- Baris 6 (Operasi Tambahan) -->
<div class="col-3"><button class="btn btn-secondary w-100" onclick="appendToDisplay(')')">)</button></div>
<div class="col-3"><button class="btn btn-secondary w-100" onclick="appendToDisplay('**2')">x²</button></div>
<div class="col-3"><button class="btn btn-secondary w-100" onclick="appendToDisplay('Math.sqrt(')">√</button></div>
<div class="col-3"><button class="btn btn-secondary w-100" onclick="appendToDisplay('Math.pow(')">xⁿ</button></div>

Run HTML

Langkah 2: Menambahkan Logika JavaScript

Buat file script.js dan tambahkan kode berikut:

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

// Fungsi untuk menambahkan karakter ke display
function appendToDisplay(value) {
    display.value += value;
}

// Fungsi untuk menghapus semua karakter
function clearDisplay() {
    display.value = '';
}


// Fungsi tambahan untuk persentase
function calculatePercentage() {
    try {
        let value = eval(display.value);
        display.value = value / 100;
    } catch (error) {
        display.value = 'Error';
    }
}

function calculate() {
    try {
        // Ganti simbol '×' dan '√' dengan operator yang valid
        let expression = display.value.replace(/×/g, '*').replace(/√/g, 'Math.sqrt');
        let result = eval(expression);
        display.value = result;
    } catch (error) {
        display.value = 'Error';
    }
}

Langkah 3: Penjelasan Kode

3.1. Struktur HTML dengan Bootstrap

Grid System: Menggunakan kelas row dan col-* untuk tata letak responsif.
Tombol: Setiap tombol menggunakan kelas btn Bootstrap dan event onclick.

3.2. Logika JavaScript

appendToDisplay(): Menambahkan angka/operator ke input display.
clearDisplay(): Mengosongkan display.
calculate(): Menggunakan eval() untuk menghitung ekspresi matematika (hati-hati dengan keamanan!).
Error Handling: try...catch untuk menangani input tidak valid.

Kesimpulan

Anda telah berhasil membuat kalkulator responsif dengan Bootstrap 5 dan JavaScript. Project ini melatih kemampuan Anda dalam:

Membuat UI responsif dengan Bootstrap Grid.
Menangani logika kalkulasi dengan JavaScript.
Menggunakan event handling untuk interaktivitas.

Project JavaScript: Membuat Kalkulator Sederhana dengan Bootstrap 5

Project JavaScript: Membuat Kalkulator Sederhana dengan Bootstrap 5

Mengapa Membuat Kalkulator dengan Bootstrap 5?

Persiapan

Langkah 1: Membuat Struktur HTML dengan Bootstrap 5

1.1. Setup Dasar HTML

1.2. Menambahkan Tombol Kalkulator

Langkah 2: Menambahkan Logika JavaScript

Langkah 3: Penjelasan Kode

3.1. Struktur HTML dengan Bootstrap

3.2. Logika JavaScript

Kesimpulan

Related

Comments

Leave a Reply Cancel reply