52 lines
No EOL
1.6 KiB
JavaScript
52 lines
No EOL
1.6 KiB
JavaScript
function berechneNote(prozent) {
|
|
if (prozent >= 90) return "sehr gut";
|
|
if (prozent >= 75) return "gut";
|
|
if (prozent >= 60) return "befriedigend";
|
|
if (prozent >= 50) return "ausreichend";
|
|
return "nicht bestanden";
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
const btn = document.getElementById("berechnen-btn");
|
|
|
|
btn.addEventListener("click", () => {
|
|
const inputPunkte = document.getElementById("punkte");
|
|
const inputMax = document.getElementById("maxPunkte");
|
|
const ergebnis = document.getElementById("ergebnis");
|
|
const balken = document.getElementById("balken");
|
|
|
|
const punkte = Number(inputPunkte.value);
|
|
const maxPunkte = Number(inputMax.value);
|
|
|
|
// Eingabeprüfung
|
|
const isValid = inputPunkte.value !== "" && inputMax.value !== ""
|
|
&& !isNaN(punkte) && !isNaN(maxPunkte)
|
|
&& punkte <= maxPunkte && maxPunkte > 0;
|
|
|
|
inputPunkte.style.borderColor = isValid ? "" : "red";
|
|
inputMax.style.borderColor = isValid ? "" : "red";
|
|
|
|
if (!isValid) {
|
|
ergebnis.textContent = "Bitte gültige Werte eingeben.";
|
|
balken.style.width = "0%";
|
|
return;
|
|
}
|
|
|
|
// Berechnung
|
|
const prozent = Math.round((punkte / maxPunkte) * 100);
|
|
const note = berechneNote(prozent);
|
|
|
|
// Ausgabe
|
|
ergebnis.textContent = `${punkte} von ${maxPunkte} Punkten (${prozent}%) = ${note}`;
|
|
|
|
// Balken
|
|
balken.style.width = prozent + "%";
|
|
if (prozent >= 75) {
|
|
balken.style.backgroundColor = "green";
|
|
} else if (prozent >= 50) {
|
|
balken.style.backgroundColor = "orange";
|
|
} else {
|
|
balken.style.backgroundColor = "red";
|
|
}
|
|
});
|
|
}); |