maraz/Glueck-Auf
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

anpassung style notenrechner

Browse source
This commit is contained in:
Mara Zöllner 2026-05-20 21:28:43 +02:00
parent 4696cb0080
commit dc16f9479e
2 changed files with 45 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
js/notenrechner.js
View file

@ -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 = `
<div style="display:flex;gap:1rem;margin-bottom:1rem;flex-wrap:wrap;">
<input type="number" id="punkte" placeholder="Deine Punkte" style="flex:1;min-width:140px;padding:0.8rem 1rem;font-family:'Barlow',sans-serif;font-size:1rem;background:rgba(255,255,255,0.05);color:inherit;border:1px solid rgba(255,255,255,0.15);">
<input type="number" id="maxPunkte" placeholder="Maximale Punkte" style="flex:1;min-width:140px;padding:0.8rem 1rem;font-family:'Barlow',sans-serif;font-size:1rem;background:rgba(255,255,255,0.05);color:inherit;border:1px solid rgba(255,255,255,0.15);">
</div>
<a class="btn" id="berechnen-btn" href="#">Berechnen</a>
<div id="nr-ergebnis" style="margin-top:2rem;display:none;">
<hr>
<div class="cards" style="margin-top:1.5rem;">
<div class="card"><div class="num" id="r-prozent">0%</div><h3>Prozent</h3></div>
<div class="card"><div class="num" id="r-note">–</div><h3>Note</h3></div>
</div>
<div id="balken-wrap" style="margin-top:1.5rem;background:rgba(255,255,255,0.06);height:12px;">
<div id="balken" style="height:100%;width:0%;transition:width 0.5s ease;"></div>
</div>
<p id="ergebnis" style="margin-top:1rem;font-size:0.88rem;color:rgba(255,255,255,0.5);"></p>
</div>
`;
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;
&& 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";
});
});

15
uebungen/notenrechner.html
View file

@ -16,11 +16,11 @@
<li><a href="../ueber_mich.html">Über mich</a></li>
<li><a href="../eis_projekt.html">Projekt</a></li>
<li class="dropdown">
<a href="#">Übungen ▾</a>
<ul class="dropdown-menu">
<li><a href="notenrechner.html" class="active">Notenrechner</a></li>
<li><a href="textanalyse.html">Textanalyse</a></li>
</ul>
<a href="#">Übungen ▾</a>
<ul class="dropdown-menu">
<li><a href="notenrechner.html" class="active">Notenrechner</a></li>
<li><a href="textanalyse.html">Textanalyse</a></li>
</ul>
</li>
<li><a href="../kontakt.html">Kontakt</a></li>
<li><a href="../impressum.html">Impressum</a></li>
@ -31,11 +31,6 @@
<p class="hero-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>
<footer>
<a href="../impressum.html">Impressum</a> · <a href="../kontakt.html">Kontakt</a>