Calculator Tools Calculator Tools
Create

Kalkulator Sederhana yang Menarik

Feb 9, 2026

About this app

Kalkulator sederhana dengan antarmuka interaktif dan fungsionalitas lengkap. Hitung dengan mudah dan cepat.

Kalkulator Sederhana yang Menarik Kalkulator Sederhana 7 8 9 ÷ 4 5 6 * 1 2 3 - 0 = C +

Related apps

Put this on your site

Source

                    <html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">

<title>Kalkulator Sederhana yang Menarik</title>
<meta name="description" content="Kalkulator sederhana dengan antarmuka interaktif dan fungsionalitas lengkap. Hitung dengan mudah dan cepat.">
<meta name="keywords" content="kalkulator, kalkulator online, perhitungan, matematika, aplikasi kalkulator, sederhana, interaktif">

<!-- Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/css/fontawesome.min.css" crossorigin="anonymous">

<script type="text/javascript">
try {
document.addEventListener("DOMContentLoaded", function() {
let currentInput = "";
let currentResult = "";

function updateDisplay() {
$("#display").val(currentInput || currentResult || "0");
}

$(".btn-number").click(function() {
currentInput += $(this).val();
updateDisplay();
});

$(".btn-operator").click(function() {
if (currentInput) {
currentResult = eval(currentInput);
currentInput = "";
}
updateDisplay();
});

$("#btn-equals").click(function() {
if (currentInput) {
currentResult = eval(currentInput);
currentInput = "";
}
updateDisplay();
});

$("#btn-clear").click(function() {
currentInput = "";
currentResult = "";
updateDisplay();
});
});
} catch (error) {
throw error;
}
</script>

<style>
body {
background: linear-gradient(135deg, #a8e0ff, #b2f1a9);
color: #282c34;
}
#main-container {
margin-top: 50px;
}
#display {
height: 60px;
font-size: 24px;
text-align: right;
margin-bottom: 20px;
}
.btn-number, .btn-operator {
font-size: 20px;
padding: 20px;
margin: 5px;
border-radius: 10px;
transition: background-color 0.3s;
}
.btn-number {
background-color: #6c757d;
color: white;
}
.btn-operator {
background-color: #17a2b8;
color: white;
}
.btn-number:hover, .btn-operator:hover {
background-color: #0056b3;
cursor: pointer;
}
</style>
</head>
<body>
<div id="main-container" class="container text-center">
<h1>Kalkulator Sederhana</h1>
<input type="text" id="display" class="form-control" readonly>
<div class="row">
<div class="col">
<button class="btn btn-number" value="7">7</button>
</div>
<div class="col">
<button class="btn btn-number" value="8">8</button>
</div>
<div class="col">
<button class="btn btn-number" value="9">9</button>
</div>
<div class="col">
<button class="btn btn-operator" value="/">&#247;</button>
</div>
</div>
<div class="row">
<div class="col">
<button class="btn btn-number" value="4">4</button>
</div>
<div class="col">
<button class="btn btn-number" value="5">5</button>
</div>
<div class="col">
<button class="btn btn-number" value="6">6</button>
</div>
<div class="col">
<button class="btn btn-operator" value="*">*</button>
</div>
</div>
<div class="row">
<div class="col">
<button class="btn btn-number" value="1">1</button>
</div>
<div class="col">
<button class="btn btn-number" value="2">2</button>
</div>
<div class="col">
<button class="btn btn-number" value="3">3</button>
</div>
<div class="col">
<button class="btn btn-operator" value="-">-</button>
</div>
</div>
<div class="row">
<div class="col">
<button class="btn btn-number" value="0">0</button>
</div>
<div class="col">
<button class="btn btn-operator" id="btn-equals" value="=">=</button>
</div>
<div class="col">
<button class="btn btn-operator" id="btn-clear" value="C">C</button>
</div>
<div class="col">
<button class="btn btn-operator" value="+">+</button>
</div>
</div>
</div>
</body>
</html>