69 lines
No EOL
3.2 KiB
JavaScript
69 lines
No EOL
3.2 KiB
JavaScript
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";
|
||
}
|
||
|
||
document.addEventListener("DOMContentLoaded", () => {
|
||
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();
|
||
|
||
const inputPunkte = document.getElementById("punkte");
|
||
const inputMax = document.getElementById("maxPunkte");
|
||
const punkte = Number(inputPunkte.value);
|
||
const maxPunkte = Number(inputMax.value);
|
||
|
||
const isValid = inputPunkte.value !== "" && inputMax.value !== ""
|
||
&& !isNaN(punkte) && !isNaN(maxPunkte)
|
||
&& punkte >= 0 && punkte <= maxPunkte && maxPunkte > 0;
|
||
|
||
inputPunkte.style.borderColor = isValid ? "rgba(255,255,255,0.15)" : "red";
|
||
inputMax.style.borderColor = isValid ? "rgba(255,255,255,0.15)" : "red";
|
||
|
||
if (!isValid) {
|
||
document.getElementById("ergebnis").textContent = "Bitte gültige Werte eingeben.";
|
||
document.getElementById("nr-ergebnis").style.display = "block";
|
||
document.getElementById("balken").style.width = "0%";
|
||
return;
|
||
}
|
||
|
||
const prozent = Math.round((punkte / maxPunkte) * 100);
|
||
const note = berechneNote(prozent);
|
||
|
||
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";
|
||
|
||
const balken = document.getElementById("balken");
|
||
balken.style.width = prozent + "%";
|
||
balken.style.backgroundColor = prozent >= 75 ? "#4ade80" : prozent >= 50 ? "#fb923c" : "#f87171";
|
||
});
|
||
}); |