Berikut adalah contoh kode untuk membuat kalkulator grade nilai menggunakan JavaScript, CSS, dan HTML:
Kalkulator Nilai
HTML
<!DOCTYPE html>
<html>
<head>
<title>Kalkulator Nilai</title>
<style>
/* CSS untuk tampilan kalkulator */
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
.container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}
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: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
.result {
margin-top: 20px;
padding: 10px;
background-color: #f2f2f2;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="container">
<h1>Kalkulator Nilai</h1>
<div class="form-group">
<label for="nilai_tugas">Nilai Tugas:</label>
<input type="number" id="nilai_tugas" min="0" max="100">
</div>
<div class="form-group">
<label for="nilai_uts">Nilai UTS:</label>
<input type="number" id="nilai_uts" min="0" max="100">
</div>
<div class="form-group">
<label for="nilai_uas">Nilai UAS:</label>
<input type="number" id="nilai_uas" min="0" max="100">
</div>
<button onclick="hitungNilai()">Hitung</button>
<div class="result">
<p id="hasil"></p>
</div>
</div>
<script>
function hitungNilai() {
var nilaiTugas = parseFloat(document.getElementById('nilai_tugas').value);
var nilaiUTS = parseFloat(document.getElementById('nilai_uts').value);
var nilaiUAS = parseFloat(document.getElementById('nilai_uas').value);
var nilaiAkhir = (nilaiTugas * 0.3) + (nilaiUTS * 0.3) + (nilaiUAS * 0.4);
var grade;
if (nilaiAkhir >= 80) {
grade = 'A';
} else if (nilaiAkhir >= 70) {
grade = 'B';
} else if (nilaiAkhir >= 60) {
grade = 'C';
} else if (nilaiAkhir >= 50) {
grade = 'D';
} else {
grade = 'E';
}
document.getElementById('hasil').innerHTML = 'Nilai Akhir: ' + nilaiAkhir.toFixed(2) + ' | Grade: ' + grade;
}
</script>
</body>
</html>Anda dapat menyalin kode di atas dan menjalankannya di browser untuk melihat kalkulator nilai dalam aksi.
Leave a Reply