Cara Membuat Kalkulator Sederhana dengan JavaScript

Cara Membuat Kalkulator Sederhana dengan JavaScript – Banyak yang menanyakan, Apakah Bisa Membuat Kalkulator Menggunakan JavaScript? Jawabannya Tentu saja bisa! Kalkulator sederhana JavaScript adalah salah satu proyek awal yang mudah untuk mempelajari dasar-dasar bahasa pemrograman JavaScript. Dengan membuat kalkulator, Anda akan dapat memahami konsep dasar pemrograman seperti variabel, operasi matematika, dan event handling.

Nah pada artikel kali ini, kelasjava akan membuat tutorial untuk membuat kalkulator sederhana menggunakan JavaScript. Namun sebelum itu penting bagi Anda untuk mengetahui lebih dalam tentang komponen kalkulator sederhana JavaScript, berikut simak terus ulasannya.

Komponen Utama dalam Kalkulator JavaScript

Sebelum kita mulai membuat kalkulator, mari kita kenali komponen utamanya terlebih dahulu dibawah ini:

Tombol Angka: Digunakan untuk memasukkan operand-operand ke dalam kalkulator.
Tombol Operasi: Digunakan untuk melakukan operasi matematika seperti penambahan, pengurangan, perkalian, dan pembagian.
Layar Tampilan: Area di mana hasil perhitungan ditampilkan kepada pengguna.
Fungsi Kalkulasi: Fungsi-fungsi JavaScript untuk menangani logika perhitungan matematika.
Event Handler: Pengaturan event handler yang mengaitkan fungsi-fungsi perhitungan dengan tombol-tombol di kalkulator.

Dengan memahami komponen-komponen ini, Anda nantinya dapat merancang dan mengimplementasikan kalkulator sederhana yang responsif dan mudah digunakan.

Cara Mudah Membuat Kalkulator Sederhana dengan JavaScript

1 Persiapan Folder dan File

Untuk memulai, buka Sublime Text atau editor teks lainnya, lalu buat folder baru untuk proyek kalkulator Anda. Misalnya nama foldernya adalah “KalkulatorJava” di dalam folder proyek tersebut, buat tiga file yakni: index.html, style.css, dan script.js.

2 Buat File HTML Utama (index.html)

Buka Sublime Text dan buat file baru dengan nama index.html, apabila sudah isi file tersebut dengan mengetik atau salin kode HTML dibawah ini untuk membuat tampilan kalkulator sederhana.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>KelasJava.Com</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="calculator">
        <h1>Kalkulator Sederhana</h1>
        <input type="text" id="display" disabled>
        <div class="keys">
            <button onclick="clearDisplay()">Hapus</button>
            <button onclick="appendToDisplay('7')">7</button>
            <button onclick="appendToDisplay('8')">8</button>
            <button onclick="appendToDisplay('9')">9</button>
            <button onclick="appendToDisplay('+')">+</button>
            <button onclick="appendToDisplay('4')">4</button>
            <button onclick="appendToDisplay('5')">5</button>
            <button onclick="appendToDisplay('6')">6</button>
            <button onclick="appendToDisplay('-')">-</button>
            <button onclick="appendToDisplay('1')">1</button>
            <button onclick="appendToDisplay('2')">2</button>
            <button onclick="appendToDisplay('3')">3</button>
            <button onclick="appendToDisplay('*')">*</button>
            <button onclick="appendToDisplay('0')">0</button>
            <button onclick="appendToDisplay('.')">.</button>
            <button onclick="calculate()">=</button>
            <button onclick="appendToDisplay('/')">/</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

3. Buat File CSS (style.css)

Di dalam Sublime Text, buat file baru untuk stylesheet CSS Anda, kemudian isi file style.css tersebut menggunakan kode dibawah ini agar tampilan web kalkulatoe sederhana menjadi lebih menarik.

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

h1 {
    text-align: center;
}

.calculator {
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 20px;
    width: 300px;
}

#display {
    width: calc(100% - 40px);
    margin-bottom: 10px;
    padding: 10px;
    font-size: 20px;
}

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

button {
    padding: 10px;
    font-size: 18px;
    border: none;
    border-radius: 5px;
    background-color: #e0e0e0;
    cursor: pointer;
}

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

4. Buat File JavaScript (script.js)

Buat file JavaScript untuk menambahkan fungsi kalkulator ke halaman Anda, di file ini Anda akan menuliskan logika perhitungan matematika dan event handling untuk kalkulator Anda dengan kode dibawah.

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

function appendToDisplay(value) {
    display.value += value;
}

function clearDisplay() {
    display.value = '';
}

function calculate() {
    try {
        display.value = eval(display.value);
    } catch(error) {
        display.value = 'Error';
    }
}

5. Simpan Perubahan dan Jalankan Kode

Simpan semua file Anda, lalu buka file index.html menggunakan browser default Anda untuk melihat tampilan kalkulator Anda atau bisa juga dengan klik kanan mouse pada file index.html di Sublime Text lalu Open in Browser.

6. Tampilkan Kalkulator Sederhana

Selamat! Anda telah berhasil membuat kalkulator sederhana dengan JavaScript dan memperindah tampilannya menggunakan CSS. Sekarang Anda dapat melakukan perhitungan matematika dengan mudah menggunakan kalkulator JavaScript yang Anda buat.

Kesimpulan

Demikianlah ulasan mengenai cara membuat kalkulator sederhana dengan JavaScript dengan mudah. Dengan membuat proyek seperti kalkulator, Anda akan dapat memperdalam pemahaman Anda tentang bahasa pemrograman JavaScript dan meningkatkan keterampilan pemrograman Anda secara keseluruhan. Selamat mencoba Sobat Java dan teruslah belajar!