54 lines
No EOL
1.3 KiB
JavaScript
54 lines
No EOL
1.3 KiB
JavaScript
function berechneNote(p) {
|
||
if (p >= 90) return "sehr gut";
|
||
if (p >= 75) return "gut";
|
||
if (p >= 60) return "befriedigend";
|
||
if (p >= 50) return "ausreichend";
|
||
return "nicht bestanden";
|
||
}
|
||
|
||
function getFarbe(note) {
|
||
switch (note) {
|
||
case "sehr gut":
|
||
case "gut":
|
||
return "green";
|
||
case "befriedigend":
|
||
return "orange";
|
||
case "ausreichend":
|
||
return "orangered";
|
||
default:
|
||
return "red";
|
||
}
|
||
}
|
||
|
||
document.addEventListener("DOMContentLoaded", () => {
|
||
const input = document.getElementById("punkteInput");
|
||
const btn = document.getElementById("berechnenBtn");
|
||
const output = document.getElementById("ergebnis");
|
||
const bar = document.getElementById("progressBar");
|
||
|
||
btn.addEventListener("click", () => {
|
||
const wert = parseFloat(input.value);
|
||
|
||
// VALIDIERUNG
|
||
const isValid =
|
||
!isNaN(wert) && wert >= 0 && wert <= 100;
|
||
|
||
input.style.borderColor = isValid ? "" : "red";
|
||
|
||
if (!isValid) {
|
||
output.textContent = "Bitte gültige Punkte (0–100) eingeben!";
|
||
output.style.color = "red";
|
||
bar.style.width = "0%";
|
||
return;
|
||
}
|
||
|
||
const note = berechneNote(wert);
|
||
const farbe = getFarbe(note);
|
||
|
||
output.textContent = `${wert}% = ${note}`;
|
||
output.style.color = farbe;
|
||
|
||
bar.style.width = wert + "%";
|
||
bar.style.background = farbe;
|
||
});
|
||
}); |