Halo Guys! Selamat datang di artikel kami kali ini. Pada kesempatan ini, kita akan belajar cara membuat kalkulator sederhana menggunakan HTML, CSS, dan JavaScript. Kalkulator ini akan memiliki fungsi dasar seperti penjumlahan, pengurangan, perkalian, dan pembagian. Mari kita mulai!
Langkah 1: Struktur HTML
Pertama-tama, kita perlu membuat struktur HTML untuk kalkulator kita. Berikut adalah kode HTML yang bisa kamu gunakan:
<!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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Kalkulator Sederhana</h1>
<input type="text" id="result" disabled>
<div class="buttons">
<button onclick="clearResult()">C</button>
<button onclick="appendToResult('7')">7</button>
<button onclick="appendToResult('8')">8</button>
<button onclick="appendToResult('9')">9</button>
<button onclick="appendToResult('/')">/</button>
<button onclick="appendToResult('4')">4</button>
<button onclick="appendToResult('5')">5</button>
<button onclick="appendToResult('6')">6</button>
<button onclick="appendToResult('*')">*</button>
<button onclick="appendToResult('1')">1</button>
<button onclick="appendToResult('2')">2</button>
<button onclick="appendToResult('3')">3</button>
<button onclick="appendToResult('-')">-</button>
<button onclick="appendToResult('0')">0</button>
<button onclick="calculateResult()">=</button>
<button onclick="appendToResult('+')">+</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>Langkah 2: Styling dengan CSS
Setelah kita memiliki struktur HTML, sekarang saatnya untuk menambahkan gaya menggunakan CSS. Berikut adalah contoh kode CSS yang bisa kamu gunakan:
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
}
.container {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
}
#result {
width: 100%;
height: 40px;
text-align: right;
margin-bottom: 10px;
font-size: 24px;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
button {
padding: 20px;
font-size: 18px;
cursor: pointer;
border: none;
border-radius: 5px;
background-color: #007bff;
color: white;
}
button:hover {
background-color: #0056b3;
}Langkah 3: Menambahkan Logika dengan JavaScript
Sekarang, kita akan menambahkan logika kalkulator menggunakan JavaScript. Berikut adalah kode JavaScript yang perlu kamu tambahkan:
function appendToResult(value) {
document.getElementById('result').value += value;
}
function clearResult() {
document.getElementById('result').value = '';
}
function calculateResult() {
const resultField = document.getElementById('result');
try {
resultField.value = eval(resultField.value);
} catch (error) {
resultField.value = 'Error';
}
}Kesimpulan
Selamat! Kamu telah berhasil membuat kalkulator sederhana menggunakan HTML, CSS, dan JavaScript. Sekarang kamu bisa menggunakannya untuk melakukan perhitungan dasar. Jika kamu memiliki pertanyaan atau ingin kami membuat tutorial tentang topik lain, jangan ragu untuk meninggalkan komentar di bawah ini. Kami sangat senang mendengar dari kalian, Guys!
Terima kasih telah membaca, dan sampai jumpa di tutorial berikutnya!
