Membuat kalkulator dengan HTML dan JavaScript
Ini adalah script membuat Kalkulator dengan menggunakan bahasa pemprograman javascript dan html serta css
Salin saja kode script ini kedalam teks kode coding Anda lalu simpan dengan ekstensi html
Kemudian buka menggunakan browser maka akan muncul aplikasi Kalkulator seperti di atas
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kalkulator Sederhana</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f4f4;
}
.calculator {
width: 250px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
background-color: #fff;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}
.display {
width: 100%;
height: 40px;
font-size: 18px;
text-align: right;
padding: 10px;
border: 1px solid #ddd;
margin-bottom: 10px;
border-radius: 5px;
box-sizing: border-box;
}
.button {
width: 50px;
height: 50px;
font-size: 18px;
margin: 5px;
cursor: pointer;
}
.buttons-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5px;
}
</style>
</head>
<body>
<div class="calculator">
<input type="text" id="display" class="display" disabled />
<div class="buttons-container">
<button class="button" onclick="appendValue('7')">7</button>
<button class="button" onclick="appendValue('8')">8</button>
<button class="button" onclick="appendValue('9')">9</button>
<button class="button" onclick="appendOperator('/')">/</button>
<button class="button" onclick="appendValue('4')">4</button>
<button class="button" onclick="appendValue('5')">5</button>
<button class="button" onclick="appendValue('6')">6</button>
<button class="button" onclick="appendOperator('*')">*</button>
<button class="button" onclick="appendValue('1')">1</button>
<button class="button" onclick="appendValue('2')">2</button>
<button class="button" onclick="appendValue('3')">3</button>
<button class="button" onclick="appendOperator('-')">-</button>
<button class="button" onclick="appendValue('0')">0</button>
<button class="button" onclick="appendValue('.')">.</button>
<button class="button" onclick="clearDisplay()">C</button>
<button class="button" onclick="appendOperator('+')">+</button>
<button class="button" onclick="calculate()" style="grid-column: span 4; background-color: #4CAF50; color: white;">=</button>
</div>
</div>
<script>
let display = document.getElementById('display');
function appendValue(value) {
display.value += value;
}
function appendOperator(operator) {
display.value += " " + operator + " ";
}
function clearDisplay() {
display.value = '';
}
function calculate() {
try {
display.value = eval(display.value);
} catch (error) {
display.value = "Error";
}
}
</script>
</body>
/html
Posting Komentar untuk "Membuat kalkulator dengan HTML dan JavaScript "