Berikut ini adalah contoh kode untuk membuat kalkulator persentase lengkap menggunakan JavaScript, CSS, dan penerapannya dalam form HTML:
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kalkulator Persentase</title>
<style>
/* CSS untuk tampilan kalkulator */
.container {
width: 300px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
.form-group {
margin-bottom: 10px;
}
.form-group label {
display: block;
font-weight: bold;
}
.form-group input {
width: 100%;
padding: 5px;
border: 1px solid #ccc;
border-radius: 3px;
}
.form-group button {
width: 100%;
padding: 8px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 3px;
cursor: pointer;
}
.result {
margin-top: 10px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h2>Kalkulator Persentase</h2>
<div class="form-group">
<label for="number">Angka:</label>
<input type="number" id="number" placeholder="Masukkan angka">
</div>
<div class="form-group">
<label for="percentage">Persentase:</label>
<input type="number" id="percentage" placeholder="Masukkan persentase">
</div>
<div class="form-group">
<button onclick="calculatePercentage()">Hitung</button>
</div>
<div class="result">
Hasil: <span id="result"></span>
</div>
</div>
<script>
function calculatePercentage() {
var number = parseFloat(document.getElementById('number').value);
var percentage = parseFloat(document.getElementById('percentage').value);
var result = (number * percentage) / 100;
document.getElementById('result').textContent = result;
}
</script>
</body>
</html>Output:
Kalkulator Persentase
Hasil:
Silakan salin kode di atas ke dalam file HTML baru dan jalankan di browser untuk melihat kalkulator persentase yang lengkap.
Leave a Reply