Cara Membuat Program Kalkulator Sederhana dengan JavaScript

Mempelajari cara membuat program kalkulator sederhana dengan JavaScript adalah langkah awal yang ideal bagi pemula untuk memahami dasar-dasar pengembangan aplikasi berbasis web. Kalkulator adalah aplikasi sederhana yang menggabungkan penggunaan HTML, CSS, dan JavaScript untuk menangani input pengguna, melakukan operasi matematika, dan menampilkan hasilnya.

Artikel ini akan menjelaskan proses pembuatan kalkulator sederhana secara bertahap, menggunakan bahasa yang mudah dipahami masyarakat awam.

Mengapa Menggunakan JavaScript untuk Membuat Kalkulator?

This is custom heading element

JavaScript adalah bahasa pemrograman yang berjalan di browser dan dirancang untuk menambahkan interaktivitas pada halaman web. Dalam proyek kalkulator sederhana, JavaScript digunakan untuk:

- Menangani klik tombol (event handling).
- Melakukan operasi matematika seperti penjumlahan, pengurangan, perkalian, dan pembagian.
- Menampilkan hasil operasi pada layar kalkulator.

Persiapan Proyek

Siapkan Editor Teks dan Browser
Anda memerlukan editor teks seperti Visual Studio Code atau Notepad++ untuk menulis kode, serta browser seperti Chrome untuk menjalankan program.
Buat Struktur Proyek
Buat folder baru untuk proyek Anda, lalu tambahkan tiga file:
- index.html untuk struktur halaman.
- style.css untuk tampilan.
- script.js untuk logika program.

Langkah 1: Membuat Struktur HTML

Struktur HTML adalah kerangka utama kalkulator Anda. Berikut adalah contoh kode HTML dasar:

<!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=”display” id=”display”>0</div>
<div class=”buttons”>
<button class=”btn” data-value=”7″>7</button>
<button class=”btn” data-value=”8″>8</button>
<button class=”btn” data-value=”9″>9</button>
<button class=”btn” data-value=”/”>÷</button>
<button class=”btn” data-value=”4″>4</button>
<button class=”btn” data-value=”5″>5</button>
<button class=”btn” data-value=”6″>6</button>
<button class=”btn” data-value=”*”>×</button>
<button class=”btn” data-value=”1″>1</button>
<button class=”btn” data-value=”2″>2</button>
<button class=”btn” data-value=”3″>3</button>
<button class=”btn” data-value=”-“>-</button>
<button class=”btn” data-value=”0″>0</button>
<button class=”btn” data-value=”.”>.</button>
<button class=”btn” data-value=”=”>=</button>
<button class=”btn” data-value=”+”>+</button>
</div>
</div>
<script src=”script.js”></script>
</body>
</html>

Langkah 2: Menambahkan Gaya dengan CSS

Gunakan CSS untuk membuat kalkulator terlihat lebih menarik. Berikut adalah contoh sederhana:

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

.calculator {
width: 300px;
background: #fff;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
}

.display {
background: #333;
color: #fff;
font-size: 2em;
text-align: right;
padding: 20px;
box-sizing: border-box;
}

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

.btn {
border: 1px solid #ddd;
padding: 20px;
font-size: 1.2em;
text-align: center;
cursor: pointer;
background: #f9f9f9;
transition: background 0.2s;
}

.btn:hover {
background: #eaeaea;
}

Langkah 3: Menambahkan Logika dengan JavaScript

JavaScript digunakan untuk menangani logika kalkulator, seperti membaca input pengguna dan melakukan perhitungan. Tambahkan kode berikut ke file script.js:

const display = document.getElementById(‘display’);
let currentInput = ”;
let operator = ”;
let operand1 = null;

const buttons = document.querySelectorAll(‘.btn’);
buttons.forEach(button => {
button.addEventListener(‘click’, () => {
const value = button.getAttribute(‘data-value’);

if (value === ‘=’) {
if (operand1 !== null && operator !== ” && currentInput !== ”) {
const operand2 = parseFloat(currentInput);
let result = 0;

switch (operator) {
case ‘+’: result = operand1 + operand2; break;
case ‘-‘: result = operand1 – operand2; break;
case ‘*’: result = operand1 * operand2; break;
case ‘/’: result = operand1 / operand2; break;
}

display.textContent = result;
currentInput = result.toString();
operator = ”;
operand1 = null;
}
} else if ([‘+’, ‘-‘, ‘*’, ‘/’].includes(value)) {
operand1 = parseFloat(currentInput);
operator = value;
currentInput = ”;
} else {
currentInput += value;
display.textContent = currentInput;
}
});
});

Kode ini membaca nilai tombol yang ditekan, mengidentifikasi apakah itu angka, operator, atau perintah untuk menghitung (=), dan kemudian melakukan operasi yang sesuai.

Kalkulator sederhana dengan JavaScript adalah proyek pemula yang ideal untuk memahami bagaimana HTML, CSS, dan JavaScript bekerja bersama. Dengan menggunakan elemen dasar seperti tombol dan layar, Anda dapat mengembangkan pemahaman yang lebih baik tentang pengelolaan input pengguna, event handling, dan manipulasi DOM.

Proyek ini juga membuka peluang untuk belajar lebih banyak tentang fitur lanjutan seperti validasi input, animasi CSS, dan integrasi dengan teknologi lainnya. Mulailah sekarang dan eksplorasi kreativitas Anda!

Baca Selengkapnya: Panduan Dasar Pemrograman Berbasis Objek (OOP) untuk Pemula

Baca Selengkapnya: Tutorial Program Menghitung Rata-Rata dengan Python