Berikut adalah contoh kode untuk membuat kalkulator IPK kuliah menggunakan JavaScript, HTML, dan CSS
HTML
<!DOCTYPE html>
<html>
<head>
<title>Kalkulator IPK Kuliah</title>
<style>
/* CSS untuk tampilan kalkulator */
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
.container {
width: default;
background: white;
margin: 30px auto;
padding: 30px 20px;
}
.form-group {
margin-bottom: 10px;
}
label {
display: block;
font-weight: bold;
}
input[type="number"] {
box-sizing : border-box;
width: 100%;
padding: 10px;
font-size: 11pt;
margin-bottom: 20px;
}
button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
.result {
margin-top: 20px;
text-align: center;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h1>Kalkulator IPK Kuliah</h1>
<div class="form-group">
<label for="total-sks">Total SKS</label>
<input type="number" id="total-sks" min="0" required>
</div>
<div class="form-group">
<label for="total-nilai">Total Nilai</label>
<input type="number" id="total-nilai" min="0" max="4" step="0.01" required>
</div>
<button onclick="hitungIPK()">Hitung IPK</button>
<div class="result">
<p id="ipk"></p>
</div>
</div>
<script>
function hitungIPK() {
var totalSKS = parseFloat(document.getElementById('total-sks').value);
var totalNilai = parseFloat(document.getElementById('total-nilai').value);
var ipk = totalNilai / totalSKS;
document.getElementById('ipk').innerHTML = "IPK Anda: " + ipk.toFixed(2);
}
</script>
</body>
</html>Output:
Kalkulator IPK Kuliah
Silakan gunakan contoh kode di atas untuk membuat kalkulator IPK kuliah yang memungkinkan siswa menginput beberapa nilai dan mengeluarkan hasil dengan menggunakan JavaScript, HTML, dan CSS.
Leave a Reply