DAFTAR NILAI
Form Pengolahan Nilai Mahasiswa
Harap masukkan angka antara 0 hingga 4 untuk semua kolom!
KODINGNYA:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kalkulator Nilai - Full Screen</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #ffffff; /* Diubah menjadi putih murni */
margin: 0;
padding: 0;
}
.kalkulator-container {
width: 100%;
min-height: 100vh; /* Memastikan tingginya minimal setinggi layar browser */
padding: 50px;
box-sizing: border-box; /* Agar padding tidak merusak ukuran 100% */
display: flex;
flex-direction: column;
justify-content: center; /* Menyusun konten secara vertikal di tengah */
max-width: 800px; /* Batas lebar agar tidak terlalu melebar di monitor besar */
margin: 0 auto; /* Posisi di tengah untuk monitor besar */
}
h2 {
text-align: center;
color: #333;
margin-bottom: 30px;
font-size: 28px;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: bold;
color: #555;
font-size: 16px;
}
input[type="number"] {
width: 100%;
padding: 15px;
border: 1px solid #ccc;
border-radius: 8px;
box-sizing: border-box;
font-size: 18px; /* Huruf diperbesar agar nyaman di full screen */
}
input[type="number"]:focus {
border-color: #007bff;
outline: none;
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}
.btn-hitung {
width: 100%;
padding: 15px;
background-color: #007bff;
color: white;
border: none;
border-radius: 8px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
margin-top: 15px;
transition: background-color 0.3s;
}
.btn-hitung:hover {
background-color: #0056b3;
}
.btn-simpan {
width: 100%;
padding: 15px;
background-color: #28a745;
color: white;
border: none;
border-radius: 8px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
margin-top: 15px;
display: none;
transition: background-color 0.3s;
}
.btn-simpan:hover {
background-color: #218838;
}
.hasil-box {
margin-top: 30px;
padding: 20px;
background-color: #e9ecef;
border-radius: 8px;
text-align: center;
}
.hasil-box p {
margin: 0;
font-size: 18px;
color: #333;
}
.nilai-akhir {
font-size: 42px;
font-weight: bold;
color: #28a745;
margin-top: 10px;
}
.error-msg {
color: #dc3545;
font-size: 16px;
text-align: center;
margin-top: 15px;
display: none;
font-weight: bold;
}
</style>
</head>
<body>
<div class="kalkulator-container">
<h2>Form Pengolahan Nilai Mahasiswa</h2>
<div class="form-group">
<label>Kehadiran (Bobot 1)</label>
<input type="number" id="kehadiran" min="0" max="4" step="0.01" placeholder="Masukkan skala 0 - 4">
</div>
<div class="form-group">
<label>Tugas Mandiri (Bobot 1)</label>
<input type="number" id="tugasMandiri" min="0" max="4" step="0.01" placeholder="Masukkan skala 0 - 4">
</div>
<div class="form-group">
<label>Tugas Terstruktur (Bobot 1)</label>
<input type="number" id="tugasTerstruktur" min="0" max="4" step="0.01" placeholder="Masukkan skala 0 - 4">
</div>
<div class="form-group">
<label>Mid Semester (Bobot 2)</label>
<input type="number" id="midSemester" min="0" max="4" step="0.01" placeholder="Masukkan skala 0 - 4">
</div>
<div class="form-group">
<label>Akhir Semester (Bobot 3)</label>
<input type="number" id="akhirSemester" min="0" max="4" step="0.01" placeholder="Masukkan skala 0 - 4">
</div>
<button class="btn-hitung" onclick="hitungNilai()">Hitung Nilai Akhir</button>
<button class="btn-simpan" id="btnSimpan" onclick="simpanKeFile()">Simpan ke File (nilai.txt)</button>
<div class="error-msg" id="errorMsg">Harap masukkan angka antara 0 hingga 4 untuk semua kolom!</div>
<div class="hasil-box" style="display:none;" id="hasilBox">
<p>Nilai Akhir (IP):</p>
<div class="nilai-akhir" id="nilaiAkhirText">0.00</div>
</div>
</div>
<script>
function hitungNilai() {
let n = {
hadir: parseFloat(document.getElementById('kehadiran').value),
tm: parseFloat(document.getElementById('tugasMandiri').value),
tt: parseFloat(document.getElementById('tugasTerstruktur').value),
mid: parseFloat(document.getElementById('midSemester').value),
uas: parseFloat(document.getElementById('akhirSemester').value)
};
let semuaValid = Object.values(n).every(val => !isNaN(val) && val >= 0 && val <= 4);
if (!semuaValid) {
document.getElementById('errorMsg').style.display = 'block';
return;
}
document.getElementById('errorMsg').style.display = 'none';
let nilaiAkhir = ((n.hadir * 1) + (n.tm * 1) + (n.tt * 1) + (n.mid * 2) + (n.uas * 3)) / 8;
document.getElementById('nilaiAkhirText').innerText = nilaiAkhir.toFixed(2);
document.getElementById('hasilBox').style.display = 'block';
document.getElementById('btnSimpan').style.display = 'block';
}
function simpanKeFile() {
let hadir = document.getElementById('kehadiran').value;
let tm = document.getElementById('tugasMandiri').value;
let tt = document.getElementById('tugasTerstruktur').value;
let mid = document.getElementById('midSemester').value;
let uas = document.getElementById('akhirSemester').value;
let hasil = document.getElementById('nilaiAkhirText').innerText;
let isiFile = `HASIL PERHITUNGAN NILAI MAHASISWA\n` +
`================================\n` +
`Kehadiran : ${hadir}\n` +
`Tugas Mandiri : ${tm}\n` +
`Tugas Terstruktur : ${tt}\n` +
`Mid Semester : ${mid}\n` +
`Akhir Semester : ${uas}\n` +
`--------------------------------\n` +
`NILAI AKHIR (IP) : ${hasil}\n` +
`================================\n` +
`Dicetak pada: ${new Date().toLocaleString('id-ID')}`;
let blob = new Blob([isiFile], { type: "text/plain" });
let link = document.createElement("a");
link.href = URL.createObjectURL(blob);
link.download = "nilai.txt";
link.click();
URL.revokeObjectURL(link.href);
}
</script>
</body>
</html>
Komentar
Posting Komentar