Notenrechner DOM

js/notenrechner.js

@@ -1,28 +1,52 @@
-function berechneNote(punkte) {
-  if (punkte >= 90) {
-    return "sehr gut";
-  } else if (punkte >= 75) {
-    return "gut";
-  } else if (punkte >= 60) {
-    return "befriedigend";
-  } else if (punkte >= 50) {
-    return "ausreichend";
-  } else {
-    return "nicht bestanden";
-  }
+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";
 }
 
-// Punktzahl abfragen und in eine Zahl umwandeln
-let punkte = Number(prompt("Wie viele Punkte hast du erreicht?"));
-let maxPunkte = Number(prompt("Wie viele Punkte waren maximal möglich?"));
+document.addEventListener("DOMContentLoaded", () => {
+  const btn = document.getElementById("berechnen-btn");
 
-// Prozentsatz berechnen und auf ganze Zahl runden
-let prozent = Math.round((punkte / maxPunkte) * 100);
+  btn.addEventListener("click", () => {
+    const inputPunkte = document.getElementById("punkte");
+    const inputMax = document.getElementById("maxPunkte");
+    const ergebnis = document.getElementById("ergebnis");
+    const balken = document.getElementById("balken");
 
-// Note über die Funktion ermitteln
-let note = berechneNote(prozent);
+    const punkte = Number(inputPunkte.value);
+    const maxPunkte = Number(inputMax.value);
 
-// Ausgabe in Konsole und als Alert
-let ausgabe = punkte + " von " + maxPunkte + " Punkten (" + prozent + "%) = " + note;
-console.log(ausgabe);
-alert(ausgabe);
+    // 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";
+    }
+  });
+});

notenrechner.html

@@ -22,10 +22,17 @@
   </nav>
 
   <div class="page">
-    <p class="tag">Übung</p>
-    <h1>Notenrechner</h1>
-    <p class="sub">Gib deine Punktzahl ein und erhalte deine Note.</p>
-  </div>
+  <p class="tag">Übung</p>
+  <h1>Notenrechner</h1>
+  <p class="sub">Gib deine Punktzahl ein und erhalte deine Note.</p>
+
+  <input type="number" id="punkte" placeholder="Deine Punkte (0–100)">
+  <input type="number" id="maxPunkte" placeholder="Maximale Punkte">
+  <button id="berechnen-btn">Berechnen</button>
+
+  <p id="ergebnis"></p>
+  <div id="balken" style="height: 18px; width: 0%; border-radius: 4px; margin-top: 1rem; transition: width 0.4s;"></div>
+</div>
 
   <script src="js/notenrechner.js"></script>
 </body>