FORMAT PENILAIAN
KODINGNYA:
Kalkulator Nilai Mahasiswa - Full Screen
Form Pengolahan Nilai Mahasiswa
Identitas Mahasiswa
Komponen Nilai
Harap masukkan angka antara 0 hingga 4 untuk semua komponen nilai!
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kalkulator Nilai Mahasiswa - Full Screen</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #ffffff;
margin: 0;
padding: 0;
}
.kalkulator-container {
width: 100%;
min-height: 100vh;
padding: 50px 20px;
box-sizing: border-box;
display: flex;
flex-direction: column;
max-width: 800px;
margin: 0 auto;
}
h2 {
text-align: center;
color: #333;
margin-bottom: 30px;
font-size: 28px;
}
.section-title {
font-size: 18px;
color: #007bff;
border-bottom: 2px solid #007bff;
padding-bottom: 5px;
margin-top: 20px;
margin-bottom: 20px;
font-weight: bold;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: bold;
color: #555;
font-size: 16px;
}
input[type="text"], input[type="number"] {
width: 100%;
padding: 15px;
border: 1px solid #ccc;
border-radius: 8px;
box-sizing: border-box;
font-size: 18px;
}
input: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: 25px;
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="section-title">Identitas Mahasiswa</div>
<div class="form-group">
<label for="namaMhs">Nama Mahasiswa</label>
<input type="text" id="namaMhs" placeholder="Masukkan nama lengkap">
</div>
<div class="form-group">
<label for="nimMhs">NIM</label>
<input type="text" id="nimMhs" placeholder="Masukkan Nomor Induk Mahasiswa">
</div>
<div class="form-group">
<label for="prodiMhs">Program Studi</label>
<input type="text" id="prodiMhs" placeholder="Masukkan nama program studi">
</div>
<div class="section-title">Komponen Nilai</div>
<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 komponen nilai!</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)
};
// Validasi angka komponen nilai
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';
// Hitung nilai akhir berbobot (Total bobot = 8)
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() {
// Ambil data identitas (jika kosong diberi tanda "-")
let nama = document.getElementById('namaMhs').value || "-";
let nim = document.getElementById('nimMhs').value || "-";
let prodi = document.getElementById('prodiMhs').value || "-";
// Ambil data nilai
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;
// Format teks file hasil cetak
let isiFile = `HASIL PERHITUNGAN NILAI MAHASISWA\n` +
`========================================\n` +
`IDENTITAS MAHASISWA:\n` +
`Nama : ${nama}\n` +
`NIM : ${nim}\n` +
`Program Studi : ${prodi}\n` +
`========================================\n` +
`RINCIAN KOMPONEN NILAI:\n` +
`Kehadiran (1) : ${hadir}\n` +
`Tugas Mandiri (1) : ${tm}\n` +
`Tugas Terstruktur (1) : ${tt}\n` +
`Mid Semester (2) : ${mid}\n` +
`Akhir Semester (3) : ${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_${nim}.txt`; // Nama file otomatis menyertakan NIM siswa
link.click();
URL.revokeObjectURL(link.href);
}
</script>
</body>
</html>
Komentar
Posting Komentar