<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Penilaian Nilai Siswa</title>
<style>
body {
font-family: Arial, sans-serif;
background: #f2f2f2;
padding: 30px;
}
.box {
background: white;
padding: 20px;
max-width: 350px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
input, button {
width: 100%;
padding: 10px;
margin-top: 10px;
}
#hasil {
margin-top: 15px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="box">
<h2>Input Nilai Siswa</h2>
<input type="number" id="nilai" placeholder="Masukkan nilai (0 - 100)">
<button onclick="cekNilai()">Cek Nilai</button>
<div id="hasil"></div>
</div>
<script>
function cekNilai() {
let nilai = document.getElementById("nilai").value;
let hasil = "";
if (nilai < 60) {
hasil = "Nilai Anda: " + nilai + " → KURANG";
}
else if (nilai >= 60 && nilai <= 70) {
hasil = "Nilai Anda: " + nilai + " → BAIK";
}
else if (nilai >= 90) {
hasil = "Nilai Anda: " + nilai + " → LULUS";
}
else {
hasil = "Nilai Anda: " + nilai + " → CUKUP";
}
document.getElementById("hasil").innerHTML = hasil;
}
</script>
</body>
</html>
WARNA
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Penilaian Nilai Siswa</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, sans-serif;
background: linear-gradient(135deg, #667eea, #764ba2);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.box {
background: white;
padding: 25px;
width: 350px;
border-radius: 15px;
box-shadow: 0 15px 30px rgba(0,0,0,0.25);
text-align: center;
}
h2 {
color: #764ba2;
margin-bottom: 20px;
}
input {
width: 100%;
padding: 12px;
font-size: 16px;
border-radius: 10px;
border: 2px solid #ccc;
outline: none;
}
input:focus {
border-color: #667eea;
}
button {
margin-top: 15px;
width: 100%;
padding: 12px;
font-size: 16px;
border: none;
border-radius: 10px;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
cursor: pointer;
transition: 0.3s;
}
button:hover {
transform: scale(1.05);
opacity: 0.9;
}
#hasil {
margin-top: 20px;
padding: 12px;
border-radius: 10px;
font-size: 18px;
font-weight: bold;
}
.kurang {
background: #ff4d4d;
color: white;
}
.baik {
background: #feca57;
color: #333;
}
.cukup {
background: #48dbfb;
color: white;
}
.lulus {
background: #1dd1a1;
color: white;
}
</style>
</head>
<body>
<div class="box">
<h2>Input Nilai Siswa</h2>
<input type="number" id="nilai" placeholder="Masukkan nilai (0 - 100)">
<button onclick="cekNilai()">Cek Nilai</button>
<div id="hasil"></div>
</div>
<script>
function cekNilai() {
let nilai = document.getElementById("nilai").value;
let hasil = document.getElementById("hasil");
hasil.className = ""; // reset warna
if (nilai < 60) {
hasil.innerHTML = "Nilai: " + nilai + " → KURANG ❌";
hasil.classList.add("kurang");
}
else if (nilai >= 60 && nilai <= 70) {
hasil.innerHTML = "Nilai: " + nilai + " → BAIK 👍";
hasil.classList.add("baik");
}
else if (nilai >= 90) {
hasil.innerHTML = "Nilai: " + nilai + " → LULUS 🎉";
hasil.classList.add("lulus");
}
else {
hasil.innerHTML = "Nilai: " + nilai + " → CUKUP 🙂";
hasil.classList.add("cukup");
}
}
</script>
</body>
</html>
Comments
Post a Comment