Disusun oleh : Suhendi,S.Kom
Tampilkan alur berpikir
Untuk membuat kalkulator menggunakan HTML, CSS, dan JavaScript, Anda perlu menggabungkan ketiga bahasa ini untuk tujuan yang berbeda:
HTML (HyperText Markup Language):
Bertanggung jawab untuk struktur dasar kalkulator. Anda akan menggunakan HTML untuk membuat elemen-elemen seperti tombol angka (0-9), tombol operator (+, -, *, /), tombol "sama dengan" (=), dan area tampilan untuk menampilkan hasil. Elemen-elemen ini biasanya disusun dalam sebuah <div> atau <table>.
CSS (Cascading Style Sheets):
Digunakan untuk mendesain dan menata tampilan kalkulator. Dengan CSS, Anda dapat mengatur warna tombol, ukuran font, tata letak, bayangan, dan animasi. Tujuannya adalah membuat kalkulator terlihat rapi dan menarik secara visual.
JavaScript:
Inilah bagian yang paling penting, karena JavaScript menambahkan fungsionalitas. Skrip JavaScript akan "mendengarkan" klik pada tombol. Saat pengguna mengklik tombol angka atau operator, JavaScript akan mengambil nilai tombol tersebut dan menambahkannya ke area tampilan. Ketika tombol "sama dengan" diklik, JavaScript akan mengevaluasi ekspresi matematika yang ada di tampilan dan menampilkan hasilnya. Fungsi-fungsi umum yang digunakan adalah document.getElementById() untuk mengakses elemen HTML, dan eval() untuk mengevaluasi string matematika, meskipun eval() tidak disarankan untuk aplikasi produksi karena risiko keamanan.
Script Aplikasi
<!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>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
.kalkulator {
background-color: #333;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
width: 300px;
}
.layar {
width: 100%;
height: 60px;
border: none;
background-color: #444;
color: #fff;
text-align: right;
font-size: 2em;
padding: 10px;
box-sizing: border-box;
border-radius: 5px;
margin-bottom: 10px;
}
.tombol {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
button {
height: 60px;
border: none;
border-radius: 5px;
background-color: #666;
color: #fff;
font-size: 1.5em;
cursor: pointer;
transition: background-color 0.2s;
}
button:hover {
background-color: #888;
}
.operator {
background-color: #ff9500;
}
.operator:hover {
background-color: #ffb74d;
}
.sama-dengan {
grid-column: span 2;
background-color: #5cb85c;
}
.sama-dengan:hover {
background-color: #81c784;
}
</style>
</head>
<body>
<div class="kalkulator">
<input type="text" class="layar" disabled>
<div class="tombol">
<button class="operator" value="AC">AC</button>
<button class="operator" value="DEL">DEL</button>
<button class="operator" value="%">%</button>
<button class="operator" value="/">/</button>
<button value="7">7</button>
<button value="8">8</button>
<button value="9">9</button>
<button class="operator" value="*">*</button>
<button value="4">4</button>
<button value="5">5</button>
<button value="6">6</button>
<button class="operator" value="-">-</button>
<button value="1">1</button>
<button value="2">2</button>
<button value="3">3</button>
<button class="operator" value="+">+</button>
<button value="0">0</button>
<button value=".">.</button>
<button class="sama-dengan" value="=">=</button>
</div>
</div>
<script>
const layar = document.querySelector('.layar');
const tombol = document.querySelector('.tombol');
let ekspresi = '';
tombol.addEventListener('click', (e) => {
const nilaiTombol = e.target.value;
if (!nilaiTombol) return;
if (nilaiTombol === 'AC') {
ekspresi = '';
} else if (nilaiTombol === 'DEL') {
ekspresi = ekspresi.slice(0, -1);
} else if (nilaiTombol === '=') {
try {
ekspresi = eval(ekspresi).toString();
} catch (error) {
ekspresi = 'Error';
}
} else {
ekspresi += nilaiTombol;
}
layar.value = ekspresi;
});
</script>
</body>
</html>
Setelah Semua sudah tidak ada kesalahan maka hasilnya sebagai berikut
Contoh Aplikasi Yang sudah Jadi klik disini
😟
0 Komentar
Silahkan Isi Komentar dibawah ini