From 61c8a3b94cfbb58e365f2b3ae714b136f3f91e61 Mon Sep 17 00:00:00 2001
From: annika koenig <annika.koenig@stud.ph-weingarten.de>
Date: Thu, 11 Jun 2026 16:02:08 +0200
Subject: [PATCH] notenrechnerdom

---
 css/style.css      | 32 ++++++++++++++++++
 js/notenrechner.js | 83 ++++++++++++++++++++++++++--------------------
 notenrechner.html  | 20 ++++++-----
 3 files changed, 91 insertions(+), 44 deletions(-)

diff --git a/css/style.css b/css/style.css
index 09143d8..c5a8594 100644
--- a/css/style.css
+++ b/css/style.css
@@ -296,6 +296,38 @@ footer {
   }
 }
 
+input#punkteInput {
+  padding: 12px 16px;
+  border-radius: 12px;
+  border: 2px solid rgba(0,0,0,0.1);
+  margin: 15px 0;
+  width: 220px;
+  font-size: 1rem;
+}
+
+#ergebnis {
+  margin-top: 15px;
+  font-weight: 600;
+}
+
+.progress-container {
+  width: 100%;
+  max-width: 300px;
+  height: 14px;
+  background: #eee;
+  border-radius: 20px;
+  overflow: hidden;
+  margin-top: 15px;
+}
+
+#progressBar {
+  height: 100%;
+  width: 0%;
+  transition: width 0.4s ease;
+  background: green;
+  border-radius: 20px;
+}
+
 /* ================================
    DARK MODE (WICHTIG: AUSSERHALB MEDIA QUERY)
 ================================ */
diff --git a/js/notenrechner.js b/js/notenrechner.js
index 8f45e2c..e45abed 100644
--- a/js/notenrechner.js
+++ b/js/notenrechner.js
@@ -1,43 +1,54 @@
-// ===============================
-// NOTENRECHNER
-// ===============================
-
-window.berechneNote = function (punkte) {
-  if (punkte >= 90) return "sehr gut";
-  if (punkte >= 75) return "gut";
-  if (punkte >= 60) return "befriedigend";
-  if (punkte >= 50) return "ausreichend";
+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 leseZahl(text) {
-  const eingabe = prompt(text);
-
-  if (eingabe === null || eingabe.trim() === "") return NaN;
-
-  return Number(eingabe.trim().replace(",", "."));
 }
 
-window.startNotenrechner = function () {
-  const punkte = leseZahl("Wie viele Punkte hast du erreicht?");
-  const max = leseZahl("Maximale Punktzahl?");
-
-  if (
-    Number.isNaN(punkte) ||
-    Number.isNaN(max) ||
-    max <= 0 ||
-    punkte < 0 ||
-    punkte > max
-  ) {
-    alert("Bitte gültige Werte eingeben!");
-    return;
+function getFarbe(note) {
+  switch (note) {
+    case "sehr gut":
+    case "gut":
+      return "green";
+    case "befriedigend":
+      return "orange";
+    case "ausreichend":
+      return "orangered";
+    default:
+      return "red";
   }
+}
 
-  const prozent = (punkte / max) * 100;
-  const note = window.berechneNote(prozent);
+document.addEventListener("DOMContentLoaded", () => {
+  const input = document.getElementById("punkteInput");
+  const btn = document.getElementById("berechnenBtn");
+  const output = document.getElementById("ergebnis");
+  const bar = document.getElementById("progressBar");
 
-  const text = `${punkte} von ${max} Punkten (${prozent.toFixed(1)}%) = ${note}`;
+  btn.addEventListener("click", () => {
+    const wert = parseFloat(input.value);
 
-  console.log(text);
-  alert(text);
-};
+    // 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;
+  });
+});
\ No newline at end of file
diff --git a/notenrechner.html b/notenrechner.html
index 3975c88..883770b 100644
--- a/notenrechner.html
+++ b/notenrechner.html
@@ -33,18 +33,22 @@
 
 <section class="hero">
   <div class="hero-content">
-    <div class="hero-tag">📊 JavaScript Aufgabe</div>
+    <div class="hero-tag">📊 DOM Notenrechner</div>
 
     <h1>Noten<span>rechner</span></h1>
 
-    <p>
-      Hier kannst du Punkte eingeben und erhältst automatisch deine Note.
-    </p>
+    <p>Punkte eingeben und Note direkt auf der Seite erhalten.</p>
 
-    <div class="btn-group">
-      <button class="btn-primary" onclick="startNotenrechner()">
-        ▶ Rechner starten
-      </button>
+    <input type="number" id="punkteInput" placeholder="Punkte (0–100)" />
+
+    <button class="btn-primary" id="berechnenBtn">
+      Berechnen
+    </button>
+
+    <p id="ergebnis"></p>
+
+    <div class="progress-container">
+      <div id="progressBar"></div>
     </div>
   </div>
 </section>