Cara Membuat Kalkulator Sederhana dengan HTML, CSS, dan JavaScript
Kalkulator adalah salah satu proyek sederhana yang sering digunakan untuk belajar pemrograman web. Dalam artikel ini, kita akan membuat kalkulator dengan desain klasik berwarna kuning menggunakan HTML, CSS, dan JavaScript. Berikut adalah langkah-langkahnya.
1. Struktur HTML
Kita mulai dengan membuat struktur dasar HTML untuk kalkulator.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kalkulator Sederhana</title>
</head>
<body>
<div class="calculator">
<input type="text" class="display" id="display" disabled>
<div class="buttons">
<button class="wide" onclick="clearDisplay()">Clear</button>
<button onclick="backspace()">←</button>
<button class="operator" onclick="appendValue('*')">×</button>
<button onclick="appendValue('1')">1</button>
<button onclick="appendValue('2')">2</button>
<button onclick="appendValue('3')">3</button>
<button class="operator" onclick="appendValue('/')">÷</button>
<button onclick="appendValue('4')">4</button>
<button onclick="appendValue('5')">5</button>
<button onclick="appendValue('6')">6</button>
<button class="operator" onclick="appendValue('-')">−</button>
<button onclick="appendValue('7')">7</button>
<button onclick="appendValue('8')">8</button>
<button onclick="appendValue('9')">9</button>
<button class="operator" onclick="appendValue('+')">+</button>
<button onclick="appendValue('.')">.</button>
<button onclick="appendValue('0')">0</button>
<button class="equal operator" onclick="calculate()">=</button>
<button class="operator" onclick="appendValue('%')">%</button>
</div>
</div>
</body>
</html>
2. Desain dengan CSS
Agar tampilan lebih menarik, kita tambahkan CSS dengan warna kuning klasik.
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #fff;
color: #000;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.calculator {
background: #ffcc00;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}
.display {
width: 100%;
height: 50px;
font-size: 1.8em;
text-align: right;
margin-bottom: 15px;
border: 2px solid #000;
background: #fff;
padding: 10px;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
button {
padding: 15px;
font-size: 1.5em;
border: none;
background: #ffeb3b;
cursor: pointer;
border-radius: 5px;
font-weight: bold;
}
button:active {
background: #ffd700;
}
.operator {
background: #ff9800;
color: white;
}
.operator:active {
background: #e68900;
}
.wide {
grid-column: span 2;
}
</style>
3. Fungsi JavaScript
Tambahkan JavaScript agar kalkulator bisa berfungsi.
<script>
function appendValue(value) {
document.getElementById("display").value += value;
}
function clearDisplay() {
document.getElementById("display").value = "";
}
function backspace() {
let display = document.getElementById("display");
display.value = display.value.slice(0, -1);
}
function calculate() {
try {
document.getElementById("display").value = eval(document.getElementById("display").value);
} catch {
alert("Input tidak valid!");
}
}
</script>
Kesimpulan
Dengan menggunakan HTML, CSS, dan JavaScript, kita bisa membuat kalkulator sederhana yang berfungsi dengan tampilan klasik berwarna kuning. Kalkulator ini dapat dikembangkan lebih lanjut dengan fitur tambahan seperti mode gelap atau suara saat tombol ditekan. Semoga bermanfaat!
Posting Komentar untuk "Cara Membuat Kalkulator Sederhana dengan HTML, CSS, dan JavaScript"