79 lines
2.3 KiB
JavaScript
79 lines
2.3 KiB
JavaScript
document.addEventListener("DOMContentLoaded", () => {
|
||
const input = document.getElementById("punkte");
|
||
const button = document.getElementById("berechnen");
|
||
const ergebnis = document.getElementById("ergebnis");
|
||
const balken = document.getElementById("balken");
|
||
const darkToggle = document.getElementById("darkmode-toggle");
|
||
|
||
// -----------------------------
|
||
// Dark Mode Toggle
|
||
// -----------------------------
|
||
if (darkToggle) {
|
||
// gespeicherten Modus laden
|
||
if (localStorage.getItem("darkmode") === "on") {
|
||
document.body.classList.add("dark");
|
||
darkToggle.textContent = "☀️ Light Mode";
|
||
} else {
|
||
darkToggle.textContent = "🌙 Dark Mode";
|
||
}
|
||
|
||
darkToggle.addEventListener("click", () => {
|
||
document.body.classList.toggle("dark");
|
||
|
||
if (document.body.classList.contains("dark")) {
|
||
localStorage.setItem("darkmode", "on");
|
||
darkToggle.textContent = "☀️ Light Mode";
|
||
} else {
|
||
localStorage.setItem("darkmode", "off");
|
||
darkToggle.textContent = "🌙 Dark Mode";
|
||
}
|
||
});
|
||
}
|
||
|
||
// -----------------------------
|
||
// Notenrechner Logik
|
||
// -----------------------------
|
||
function berechneNote() {
|
||
const value = input.value.trim();
|
||
const zahl = Number(value);
|
||
|
||
const isValid =
|
||
value !== "" &&
|
||
!Number.isNaN(zahl) &&
|
||
zahl >= 0 &&
|
||
zahl <= 100;
|
||
|
||
// Eingabeprüfung
|
||
input.style.borderColor = isValid ? "" : "red";
|
||
|
||
if (!isValid) {
|
||
ergebnis.textContent =
|
||
"Bitte eine gültige Punktzahl zwischen 0 und 100 eingeben.";
|
||
balken.style.width = "0";
|
||
balken.style.backgroundColor = "transparent";
|
||
return;
|
||
}
|
||
|
||
const prozent = zahl;
|
||
let note;
|
||
|
||
if (prozent >= 90) note = "sehr gut";
|
||
else if (prozent >= 75) note = "gut";
|
||
else if (prozent >= 60) note = "befriedigend";
|
||
else if (prozent >= 50) note = "ausreichend";
|
||
else note = "nicht bestanden";
|
||
|
||
ergebnis.textContent = `Punkte: ${zahl} (${prozent}%) – Note: ${note}`;
|
||
|
||
// Balken aktualisieren
|
||
balken.style.width = prozent + "%";
|
||
|
||
if (prozent >= 75) balken.style.backgroundColor = "green";
|
||
else if (prozent >= 50) balken.style.backgroundColor = "orange";
|
||
else balken.style.backgroundColor = "red";
|
||
}
|
||
|
||
if (button) {
|
||
button.addEventListener("click", berechneNote);
|
||
}
|
||
});
|