Hai, sobat koding! Kali ini kita akan bersenang-senang dengan JavaScript dengan membuat kalkulator sederhana. Nggak perlu jadi jenius pemrograman, cukup ikuti langkah-langkah ini dan kamu bisa punya kalkulator canggih buatan sendiri.

Baca juga :

Tahap 1: Persiapkan HTML

Pertama, buatlah file HTML baru dengan teks editor favoritmu (misalnya, Notepad atau Visual Studio Code). Kami akan memulai dengan dasar HTML yang mencakup layar kalkulator dan tombol-tombolnya.


html
<!DOCTYPE html>
<html>
<head>
<title>Kalkulator Keren</title>
</head>
<body>
<h1>Kalkulator Sederhana</h1>
<input type="text" id="display" disabled>
<!-- Tombol-tombol kalkulator -->
<!-- Lanjutkan ke tahap selanjutnya! -->
</body>
</html>



2. Tambahkan Tombol-tombol

Kalkulator kita butuh tombol-tombol, bukan? Di bawah `<input>` tadi, tambahkan tombol-tombol untuk angka, operasi matematika, dan fungsi kalkulator.


html
<!-- Lanjutkan dari kode sebelumnya -->
<!-- Tambahkan tombol-tombol ini -->
<button onclick="appendToDisplay('1')">1</button>
<button onclick="appendToDisplay('2')">2</button>
<button onclick="appendToDisplay('3')">3</button>
<button onclick="appendToDisplay('+')">+</button>
<!-- Dan seterusnya... -->



3. Script JavaScript

Sekarang saatnya menghubungkan JavaScript ke kalkulator kita. Buat file JavaScript terpisah atau tambahkan kode JavaScript di bawahnya.


javascript
let displayValue = '';


function appendToDisplay(value) {
displayValue += value;
document.getElementById('display').value = displayValue;
}


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


function calculateResult() {
try {
displayValue = eval(displayValue);
document.getElementById('display').value = displayValue;
} catch (error) {
document.getElementById('display').value = 'Error';
}
}



4. Keseruan Berhitung

Kalkulator kita siap digunakan! Ketuk tombol angka, tambahkan operasi matematika, dan tekan "=" untuk mendapatkan hasilnya. Kalkulator sederhana ini akan menampilkan hasil hitungan di layar.


Kesimpulan

Itu dia cara mudah membuat kalkulator sederhana dengan JavaScript. Kamu bisa menambahkan lebih banyak fungsi dan perbaikan tampilan sesuai keinginanmu. Jangan lupa untuk selalu mencoba dan eksperimen dengan kode-kode baru. Semoga keseruan ini membantu kamu memahami dasar-dasar pemrograman JavaScript!