anan computer Informasi review laptop dan komputer
Membuat aplikasi kalkulator berbasis web adalah proyek yang menyenangkan dan mendidik. Di artikel ini, kita akan membuat kalkulator sederhana menggunakan HTML untuk struktur, CSS untuk styling, dan JavaScript untuk logika. Mari kita mulai!
Langkah 1: Siapkan Struktur HTML
Pertama, kita perlu membuat file HTML yang akan berfungsi sebagai kerangka dasar kalkulator kita. Buatlah file baru dengan nama calculator.html dan tambahkan kode berikut:
Penjelasan:
- Struktur HTML ini menciptakan area untuk tampilan kalkulator dan tempat untuk tombol-tombol kalkulator.
Langkah 2: Tambahkan CSS untuk Desain
Selanjutnya, kita perlu memberi gaya pada kalkulator kita agar terlihat lebih menarik. Buat file CSS baru dengan nama styles.css dan tambahkan kode berikut:
Penjelasan:
- CSS ini mengatur tampilan kalkulator, termasuk warna latar belakang, warna tombol, dan efek hover pada tombol.
Langkah 3: Tambahkan Tombol-Tombol Kalkulator
Setelah kita memiliki struktur dan gaya, kita sekarang perlu menambahkan tombol untuk kalkulator. Kembali ke file calculator.html dan tambahkan tombol-tombol berikut di dalam div dengan kelas buttons:
Penjelasan:
- Tombol-tombol ini mencakup angka 0-9, operator dasar, dan tombol untuk menghapus tampilan (C) serta menghitung hasil (=).
Langkah 4: Tambahkan Logika dengan JavaScript
Terakhir, kita perlu menambahkan logika untuk kalkulator agar berfungsi. Buat file JavaScript baru dengan nama script.js dan tambahkan kode berikut:
Penjelasan:
appendDisplay(value): Menambahkan angka atau operator ke tampilan. Jika tampilan saat ini adalah “0”, maka nilai baru akan menggantikan “0”.clearDisplay(): Mengatur ulang tampilan ke “0”.calculateResult(): Menggunakaneval()untuk menghitung hasil dari ekspresi yang ditampilkan. Jika terjadi kesalahan, akan menampilkan “Error”.
Langkah 5: Uji Aplikasi Kalkulator
Setelah semua file disiapkan, buka calculator.html di browser Anda. Anda akan melihat kalkulator yang dapat digunakan untuk melakukan operasi dasar seperti penjumlahan, pengurangan, perkalian, dan pembagian.
Kesimpulan
Dengan mengikuti langkah-langkah di atas, Anda telah berhasil membuat aplikasi kalkulator berbasis web yang sederhana namun fungsional. Anda dapat mengembangkan dan menambahkan fitur tambahan sesuai kebutuhan, seperti tombol persen atau fungsi trigonometri, untuk meningkatkan kemampuan kalkulator ini. Selamat berkoding!
Atau tinggal copy semua script di bawah ini
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Kalkulator Android</title>
<style>
/* Style dasar untuk kalkulator */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
.calculator {
width: 300px;
background-color: #333;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
padding: 20px;
}
.display {
width: 100%;
height: 60px;
background-color: #222;
color: #fff;
font-size: 2em;
text-align: right;
padding: 10px;
border-radius: 4px;
margin-bottom: 10px;
box-sizing: border-box;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.button {
width: 100%;
padding: 20px;
font-size: 1.2em;
background-color: #444;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.2s;
}
.button.operator {
background-color: #ff9500;
}
.button.clear {
background-color: #e74c3c;
}
.button:hover {
background-color: #555;
}
.button.operator:hover {
background-color: #e67e22;
}
</style>
</head>
<body>
<div class=”calculator”>
<div id=”display” class=”display”>0</div>
<div class=”buttons”>
<!– Baris pertama –>
<button class=”button clear” onclick=”clearDisplay()”>C</button>
<button class=”button” onclick=”appendDisplay(”)”></button>
<button class=”button” onclick=”appendDisplay(‘%’)”>%</button>
<button class=”button operator” onclick=”appendDisplay(‘/’)”>÷</button>
<!– Baris kedua –>
<button class=”button” onclick=”appendDisplay(‘7’)”>7</button>
<button class=”button” onclick=”appendDisplay(‘8’)”>8</button>
<button class=”button” onclick=”appendDisplay(‘9’)”>9</button>
<button class=”button operator” onclick=”appendDisplay(‘*’)”>×</button>
<!– Baris ketiga –>
<button class=”button” onclick=”appendDisplay(‘4’)”>4</button>
<button class=”button” onclick=”appendDisplay(‘5’)”>5</button>
<button class=”button” onclick=”appendDisplay(‘6’)”>6</button>
<button class=”button operator” onclick=”appendDisplay(‘-‘)”>−</button>
<!– Baris keempat –>
<button class=”button” onclick=”appendDisplay(‘1’)”>1</button>
<button class=”button” onclick=”appendDisplay(‘2’)”>2</button>
<button class=”button” onclick=”appendDisplay(‘3’)”>3</button>
<button class=”button operator” onclick=”appendDisplay(‘+’)”>+</button>
<!– Baris kelima –>
<button class=”button” onclick=”appendDisplay(‘0’)”>0</button>
<button class=”button” onclick=”appendDisplay(‘.’)”>.</button>
<button class=”button” onclick=”calculateResult()”>=</button>
</div>
</div>
<script>
let displayElement = document.getElementById(‘display’);
function appendDisplay(value) {
// Menambahkan nilai ke display, kecuali jika display hanya berisi ‘0’
if (displayElement.innerText === “0”) {
displayElement.innerText = value;
} else {
displayElement.innerText += value;
}
}
function clearDisplay() {
// Menghapus isi display
displayElement.innerText = “0”;
}
function calculateResult() {
try {
// Menghitung hasil dari ekspresi matematika di display
displayElement.innerText = eval(displayElement.innerText);
} catch (error) {
displayElement.innerText = “Error”;
}
}
</script>
</body>
</html>
