Berikut adalah contoh kode JavaScript, CSS, dan HTML untuk membuat kalkulator pengurangan lengkap dengan tampilan yang menarik:
Kalkulator Pengurangan
Hasil:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Kalkulator Pengurangan</title>
<style>
/* CSS untuk tampilan kalkulator */
.calculator {
width: default;
background: white;
margin: 30px auto;
padding: 30px 20px;
}
.calculator input[type="number"] {
box-sizing : border-box;
width: 100%;
padding: 10px;
font-size: 11pt;
margin-bottom: 20px;
}
.calculator button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.calculator button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="calculator">
<h2>Kalkulator Pengurangan</h2>
<input type="number" id="num1" placeholder="Angka pertama">
<input type="number" id="num2" placeholder="Angka kedua">
<button onclick="subtract()">Kurangi</button>
<p>Hasil: <span id="result"></span></p>
</div>
<script>
// JavaScript untuk melakukan pengurangan
function subtract() {
var num1 = parseInt(document.getElementById("num1").value);
var num2 = parseInt(document.getElementById("num2").value);
var result = num1 - num2;
document.getElementById("result").innerHTML = result;
}
</script>
</body>
</html>Anda dapat menyalin kode di atas dan menjalankannya di browser untuk melihat kalkulator pengurangan dalam aksi.
Leave a Reply