53 lines
No EOL
1.9 KiB
JavaScript
53 lines
No EOL
1.9 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("berechnenBtn");
|
|
|
|
btn.addEventListener("click", () => {
|
|
const punkteInput = document.getElementById("punkte");
|
|
const maxPunkteInput = document.getElementById("maxPunkte");
|
|
const punkte = Number(punkteInput.value);
|
|
const maxPunkte = Number(maxPunkteInput.value);
|
|
|
|
// Eingabeprüfung
|
|
const punkteValid = punkteInput.value !== "" && punkte >= 0 && punkte <= maxPunkte;
|
|
const maxValid = maxPunkteInput.value !== "" && maxPunkte > 0;
|
|
|
|
punkteInput.style.borderColor = punkteValid ? "" : "red";
|
|
maxPunkteInput.style.borderColor = maxValid ? "" : "red";
|
|
|
|
if (!punkteValid || !maxValid) {
|
|
document.getElementById("ergebnisText").textContent = "Bitte gültige Werte eingeben!";
|
|
document.getElementById("ergebnis").style.display = "block";
|
|
document.getElementById("balken").style.width = "0%";
|
|
return;
|
|
}
|
|
|
|
const prozent = Math.round((punkte / maxPunkte) * 100);
|
|
const note = berechneNote(prozent);
|
|
const ergebnisText = `${punkte} von ${maxPunkte} Punkten (${prozent}%) = ${note}`;
|
|
|
|
console.log(ergebnisText);
|
|
|
|
// Ergebnis anzeigen
|
|
document.getElementById("ergebnisText").textContent = ergebnisText;
|
|
document.getElementById("ergebnis").style.display = "block";
|
|
|
|
// Balken
|
|
const balken = document.getElementById("balken");
|
|
balken.style.width = prozent + "%";
|
|
if (prozent >= 75) {
|
|
balken.style.backgroundColor = "#22c55e"; // grün
|
|
} else if (prozent >= 50) {
|
|
balken.style.backgroundColor = "#f59e0b"; // orange
|
|
} else {
|
|
balken.style.backgroundColor = "#ef4444"; // rot
|
|
}
|
|
});
|
|
}); |