Carina_Hirschle/eis-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Notenrechner DOM-Version überarbeitet

Browse source
This commit is contained in:
Carina_Hirschle 2026-05-29 17:32:55 +02:00
parent 7e38d4a872
commit 05be46e75b
3 changed files with 64 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
css/style.css
View file

@ -257,3 +257,21 @@ footer {
.rechner-feld textarea:focus {
border-color: #2563eb;
}
/* Balken */
.balken-hintergrund {
margin-top: 1rem;
background: #e2e8f0;
border-radius: 6px;
height: 16px;
max-width: 400px;
overflow: hidden;
}
.balken {
height: 100%;
width: 0%;
border-radius: 6px;
transition: width 0.5s ease, background-color 0.5s ease;
}

56
js/notenrechener.js
View file

@ -6,22 +6,48 @@ function berechneNote(prozent) {
return "nicht bestanden";
}
function berechnen() {
const punkte = Number(document.getElementById("punkte").value);
const maxPunkte = Number(document.getElementById("maxPunkte").value);
document.addEventListener("DOMContentLoaded", () => {
const btn = document.getElementById("berechnenBtn");
if (!punkte || !maxPunkte || maxPunkte <= 0) {
alert("Bitte beide Felder ausfüllen!");
return;
}
btn.addEventListener("click", () => {
const punkteInput = document.getElementById("punkte");
const maxPunkteInput = document.getElementById("maxPunkte");
const punkte = Number(punkteInput.value);
const maxPunkte = Number(maxPunkteInput.value);
const prozent = Math.round((punkte / maxPunkte) * 100);
const note = berechneNote(prozent);
const ergebnis = `${punkte} von ${maxPunkte} Punkten (${prozent}%) = ${note}`;
// Eingabeprüfung
const punkteValid = punkteInput.value !== "" && punkte >= 0 && punkte <= maxPunkte;
const maxValid = maxPunkteInput.value !== "" && maxPunkte > 0;
console.log(ergebnis);
alert(ergebnis);
punkteInput.style.borderColor = punkteValid ? "" : "red";
maxPunkteInput.style.borderColor = maxValid ? "" : "red";
document.getElementById("ergebnisText").textContent = ergebnis;
document.getElementById("ergebnis").style.display = "block";
}
if (!punkteValid || !maxValid) {
document.getElementById("ergebnisText").textContent = "Bitte gültige Werte eingeben!";
document.getElementById("ergebnis").style.display = "block";
document.getElementById("balken").style.width = "0%";
return;
}
const prozent = Math.round((punkte / maxPunkte) * 100);
const note = berechneNote(prozent);
const ergebnisText = `${punkte} von ${maxPunkte} Punkten (${prozent}%) = ${note}`;
console.log(ergebnisText);
// Ergebnis anzeigen
document.getElementById("ergebnisText").textContent = ergebnisText;
document.getElementById("ergebnis").style.display = "block";
// Balken
const balken = document.getElementById("balken");
balken.style.width = prozent + "%";
if (prozent >= 75) {
balken.style.backgroundColor = "#22c55e"; // grün
} else if (prozent >= 50) {
balken.style.backgroundColor = "#f59e0b"; // orange
} else {
balken.style.backgroundColor = "#ef4444"; // rot
}
});
});

7
notenrechner.html
View file

@ -9,7 +9,7 @@
</head>
<body>
<script src="js/nav.js"></script>
<main>
<h1>Notenrechner</h1>
<p>Gib deine Punkte ein und berechne deine Note.</p>
@ -23,11 +23,14 @@
<label for="maxPunkte">Maximale Punkte</label>
<input type="number" id="maxPunkte" placeholder="z. B. 90">
</div>
<button class="btn" onclick="berechnen()">Note berechnen</button>
<button class="btn" id="berechnenBtn">Note berechnen</button>
</div>
<div class="ergebnis-box" id="ergebnis" style="display:none;">
<p id="ergebnisText"></p>
<div class="balken-hintergrund">
<div class="balken" id="balken"></div>
</div>
</div>
</main>