From dc16f9479e322edd0cb16ad395aaa835c64f2afb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mara=20Z=C3=B6llner?= Date: Wed, 20 May 2026 21:28:43 +0200 Subject: [PATCH] anpassung style notenrechner --- js/notenrechner.js | 63 ++++++++++++++++++++++++-------------- uebungen/notenrechner.html | 15 +++------ 2 files changed, 45 insertions(+), 33 deletions(-) diff --git a/js/notenrechner.js b/js/notenrechner.js index b504177..fdee195 100644 --- a/js/notenrechner.js +++ b/js/notenrechner.js @@ -7,46 +7,63 @@ function berechneNote(prozent) { } document.addEventListener("DOMContentLoaded", () => { - const btn = document.getElementById("berechnen-btn"); + const hero = document.querySelector(".page-hero"); + + const ui = document.createElement("div"); + ui.className = "page"; + ui.innerHTML = ` +
+ + +
+ Berechnen + + `; + + hero.insertAdjacentElement("afterend", ui); + + document.getElementById("berechnen-btn").addEventListener("click", (e) => { + e.preventDefault(); - 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; + && !isNaN(punkte) && !isNaN(maxPunkte) + && punkte >= 0 && punkte <= maxPunkte && maxPunkte > 0; - inputPunkte.style.borderColor = isValid ? "" : "red"; - inputMax.style.borderColor = isValid ? "" : "red"; + inputPunkte.style.borderColor = isValid ? "rgba(255,255,255,0.15)" : "red"; + inputMax.style.borderColor = isValid ? "rgba(255,255,255,0.15)" : "red"; if (!isValid) { - ergebnis.textContent = "Bitte gültige Werte eingeben."; - balken.style.width = "0%"; + document.getElementById("ergebnis").textContent = "Bitte gültige Werte eingeben."; + document.getElementById("nr-ergebnis").style.display = "block"; + document.getElementById("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}`; + document.getElementById("r-prozent").textContent = prozent + "%"; + document.getElementById("r-note").textContent = note; + document.getElementById("ergebnis").textContent = `${punkte} von ${maxPunkte} Punkten`; + document.getElementById("nr-ergebnis").style.display = "block"; - // Balken + const balken = document.getElementById("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"; - } + balken.style.backgroundColor = prozent >= 75 ? "#4ade80" : prozent >= 50 ? "#fb923c" : "#f87171"; }); }); \ No newline at end of file diff --git a/uebungen/notenrechner.html b/uebungen/notenrechner.html index adfde96..c8ce968 100644 --- a/uebungen/notenrechner.html +++ b/uebungen/notenrechner.html @@ -16,11 +16,11 @@
  • Über mich
  • Projekt
  • - Übungen ▾ - +Übungen ▾ +
  • Kontakt
  • Impressum
    • @@ -31,11 +31,6 @@

    Übung

    Notenrechner

    Gib deine Punktzahl ein und erhalte deine Note.

    - - - -

    -