Berikut ini adalah contoh kode untuk membuat kalkulator (Aritmetika) sederhana yang dapat melakukan penjumlahan, perkalian, pembagian, dan pengurangan menggunakan JavaScript. Kode ini juga akan diterapkan ke dalam elemen form HTML.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Kalkulator</title>
<style>
.container {
width: 300px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
.container input[type="number"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
}
.container button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.container button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="container">
<h2>Kalkulator</h2>
<input type="number" id="num1" placeholder="Angka pertama">
<input type="number" id="num2" placeholder="Angka kedua">
<button onclick="tambah()">+</button>
<button onclick="kurang()">-</button>
<button onclick="kali()">*</button>
<button onclick="bagi()">/</button>
<h3>Hasil: <span id="hasil"></span></h3>
</div>
<script>
function tambah() {
var num1 = parseFloat(document.getElementById("num1").value);
var num2 = parseFloat(document.getElementById("num2").value);
var hasil = num1 + num2;
document.getElementById("hasil").innerHTML = hasil;
}
function kurang() {
var num1 = parseFloat(document.getElementById("num1").value);
var num2 = parseFloat(document.getElementById("num2").value);
var hasil = num1 - num2;
document.getElementById("hasil").innerHTML = hasil;
}
function kali() {
var num1 = parseFloat(document.getElementById("num1").value);
var num2 = parseFloat(document.getElementById("num2").value);
var hasil = num1 * num2;
document.getElementById("hasil").innerHTML = hasil;
}
function bagi() {
var num1 = parseFloat(document.getElementById("num1").value);
var num2 = parseFloat(document.getElementById("num2").value);
var hasil = num1 / num2;
document.getElementById("hasil").innerHTML = hasil;
}
</script>
</body>
</html>Anda dapat menyalin kode di atas dan menjalankannya di browser untuk melihat kalkulator sederhana ini dalam aksi. Anda dapat memasukkan angka pada kedua input, kemudian klik tombol operasi matematika yang diinginkan untuk melihat hasilnya.
Output:
Kalkulator
Hasil:
Semoga contoh kode ini bermanfaat bagi Anda dalam memahami cara membuat kalkulator Aritmetika sederhana menggunakan JavaScript dan mengaplikasikannya ke dalam elemen form HTML.
Leave a Reply