From b31549de65f9cc183500effc087d679c6ad66105 Mon Sep 17 00:00:00 2001 From: David Kertzscher Date: Wed, 6 May 2026 14:42:56 +0000 Subject: [PATCH] =?UTF-8?q?Notenrechner-Seite=20mit=20interaktivem=20JavaS?= =?UTF-8?q?cript=20hinzugef=C3=BCgt?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 453 +++++++++++++++++++++++++++++++++++++++++++++ eis_projekt.html | 1 + galerie.html | 1 + impressum.html | 1 + index.html | 1 + js/notenrechner.js | 372 +++++++++++++++++++++++++++++++++++++ kontakt.html | 1 + notenrechner.html | 148 +++++++++++++++ team.html | 1 + ueber_uns.html | 1 + 10 files changed, 980 insertions(+) create mode 100644 js/notenrechner.js create mode 100644 notenrechner.html diff --git a/css/style.css b/css/style.css index e0fabec..6fdfbe8 100644 --- a/css/style.css +++ b/css/style.css @@ -718,6 +718,424 @@ textarea { transform: scale(1.05); } +/* =========================== + Notenrechner Styles + =========================== */ + +.calculator-section { + animation: slideUp 0.6s ease-out; +} + +.info-cards { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 1.5rem; + margin: 1.5rem 0; +} + +.info-card { + background: rgba(255, 192, 203, 0.2); + border: 2px solid rgba(255, 105, 180, 0.2); + border-radius: 15px; + padding: 1.5rem; + text-align: center; + transition: all 0.3s ease; +} + +.info-card:hover { + transform: translateY(-5px); + border-color: rgba(255, 105, 180, 0.4); + background: rgba(255, 192, 203, 0.3); +} + +.info-card h4 { + font-size: 1.2rem; + margin-bottom: 0.8rem; + color: #ff1493; +} + +/* Grade Scale Table */ +.grade-scale-table { + width: 100%; + border-collapse: collapse; + margin: 1.5rem 0; + background: rgba(255, 255, 255, 0.85); + border-radius: 15px; + overflow: hidden; + box-shadow: 0 4px 15px rgba(255, 20, 147, 0.1); +} + +.grade-scale-table thead { + background: linear-gradient(135deg, #ff1493 0%, #ff69b4 100%); + color: white; +} + +.grade-scale-table th, +.grade-scale-table td { + padding: 1rem; + text-align: center; + border-bottom: 1px solid rgba(255, 105, 180, 0.15); +} + +.grade-scale-table th { + font-weight: 600; + font-size: 1.05rem; +} + +.grade-scale-table tbody tr:hover { + background: rgba(255, 192, 203, 0.2); +} + +.grade-badge { + display: inline-block; + padding: 0.5rem 1rem; + border-radius: 20px; + font-weight: 600; + color: white; + font-size: 0.95rem; +} + +.grade-badge.very-good { + background: #ff1493; +} + +.grade-badge.good { + background: #ff69b4; +} + +.grade-badge.satisfactory { + background: #ffa500; +} + +.grade-badge.adequate { + background: #ff8c00; +} + +.grade-badge.failed { + background: #dc143c; +} + +/* Calculator Container */ +.calculator-container { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 2rem; + margin-top: 2rem; +} + +.grades-input-section, +.results-section { + background: rgba(255, 255, 255, 0.85); + border: 2px solid rgba(255, 105, 180, 0.2); + border-radius: 20px; + padding: 2rem; + box-shadow: 0 8px 32px rgba(255, 20, 147, 0.15); +} + +.grades-input-section h3 { + margin-bottom: 1.5rem; + color: #ff1493; +} + +.grades-container { + display: flex; + flex-direction: column; + gap: 1rem; + margin-bottom: 1.5rem; +} + +.grade-input-group { + animation: slideUp 0.4s ease-out; +} + +.grade-input-wrapper { + display: flex; + align-items: center; + gap: 0.8rem; + background: rgba(255, 192, 203, 0.1); + padding: 1rem; + border-radius: 12px; + border: 2px solid rgba(255, 105, 180, 0.15); + transition: all 0.3s ease; +} + +.grade-input-wrapper:focus-within { + border-color: rgba(255, 105, 180, 0.4); + background: rgba(255, 192, 203, 0.2); +} + +.grade-points, +.grade-max { + flex: 1; + padding: 0.8rem; + border: 1px solid rgba(255, 105, 180, 0.2); + border-radius: 8px; + font-size: 1rem; + font-family: inherit; + color: #6b3a5f; + background: white; + transition: all 0.3s ease; +} + +.grade-points::placeholder, +.grade-max::placeholder { + color: #b8659c; +} + +.grade-points:focus, +.grade-max:focus { + outline: none; + border-color: #ff1493; + box-shadow: 0 0 8px rgba(255, 20, 147, 0.2); +} + +.grade-separator { + font-weight: 600; + color: #ff69b4; + font-size: 1.2rem; +} + +.grade-result { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.3rem; + min-width: 80px; +} + +.grade-note { + font-weight: 700; + font-size: 1.1rem; + color: #6b3a5f; +} + +.grade-percent { + font-weight: 600; + font-size: 0.9rem; + color: #b8659c; + background: rgba(255, 192, 203, 0.3); + padding: 0.3rem 0.6rem; + border-radius: 6px; +} + +.grade-remove-btn { + background: none; + border: none; + font-size: 1.3rem; + cursor: pointer; + color: #ff69b4; + padding: 0.5rem; + transition: all 0.3s ease; + border-radius: 50%; +} + +.grade-remove-btn:hover { + background: rgba(255, 20, 147, 0.1); + color: #ff1493; + transform: scale(1.2); +} + +/* Calculator Buttons */ +.calculator-buttons { + display: flex; + flex-direction: column; + gap: 0.8rem; + margin-top: 1.5rem; +} + +.btn-add, +.btn-calculate, +.btn-reset { + padding: 1rem 1.5rem; + border: none; + border-radius: 12px; + font-size: 1rem; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; + text-transform: uppercase; + letter-spacing: 1px; +} + +.btn-add { + background: rgba(255, 105, 180, 0.2); + color: #ff1493; + border: 2px solid rgba(255, 105, 180, 0.3); +} + +.btn-add:hover { + background: rgba(255, 105, 180, 0.3); + border-color: #ff1493; + transform: translateY(-2px); +} + +.btn-calculate { + background: linear-gradient(135deg, #ff1493 0%, #ff69b4 100%); + color: white; + box-shadow: 0 4px 15px rgba(255, 20, 147, 0.3); +} + +.btn-calculate:hover { + transform: translateY(-3px); + box-shadow: 0 6px 20px rgba(255, 20, 147, 0.4); +} + +.btn-reset { + background: rgba(200, 100, 150, 0.15); + color: #b8659c; + border: 2px solid rgba(200, 100, 150, 0.3); +} + +.btn-reset:hover { + background: rgba(200, 100, 150, 0.25); + border-color: #b8659c; + transform: translateY(-2px); +} + +/* Results Section */ +.result-container, +.average-container { + min-height: 100px; +} + +.result-list { + display: flex; + flex-direction: column; + gap: 0.8rem; +} + +.result-list h4 { + margin-bottom: 0.5rem; + color: #ff1493; +} + +.result-item { + display: flex; + align-items: center; + gap: 1rem; + padding: 1rem; + background: rgba(255, 192, 203, 0.15); + border-radius: 10px; + border-left: 4px solid rgba(255, 105, 180, 0.3); + transition: all 0.3s ease; + animation: slideUp 0.5s ease-out; +} + +.result-item:hover { + background: rgba(255, 192, 203, 0.25); + border-left-color: #ff1493; + transform: translateX(5px); +} + +.result-number { + font-weight: 700; + color: #ff1493; + min-width: 40px; +} + +.result-details { + flex: 1; + color: #6b3a5f; + font-weight: 500; +} + +.result-grade { + font-weight: 700; + font-size: 1.1rem; + padding: 0.5rem 1rem; + background: rgba(255, 255, 255, 0.5); + border-radius: 8px; + min-width: 120px; + text-align: center; +} + +.average-box { + background: linear-gradient(135deg, rgba(255, 192, 203, 0.2) 0%, rgba(255, 160, 180, 0.1) 100%); + border: 2px solid rgba(255, 105, 180, 0.3); + border-radius: 15px; + padding: 1.5rem; + text-align: center; + animation: slideUp 0.6s ease-out; + box-shadow: 0 4px 15px rgba(255, 20, 147, 0.1); +} + +.average-box h4 { + margin-bottom: 1rem; + color: #ff1493; +} + +.average-display { + display: flex; + align-items: center; + justify-content: center; + gap: 1.5rem; + margin: 1rem 0; +} + +.average-percent { + font-size: 2.5rem; + font-weight: 800; + color: #ff1493; + background: rgba(255, 192, 203, 0.2); + width: 100px; + height: 100px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; +} + +.average-note { + font-size: 1.8rem; + font-weight: 700; +} + +.average-details { + margin-top: 1rem; + color: #b8659c; + font-weight: 500; + font-size: 0.95rem; +} + +.error-message { + color: #dc143c; + background: rgba(220, 20, 60, 0.1); + border: 2px solid rgba(220, 20, 60, 0.3); + padding: 1rem; + border-radius: 10px; + font-weight: 600; + text-align: center; +} + +/* Tips Box */ +.tips-box { + background: rgba(255, 192, 203, 0.15); + border: 2px solid rgba(255, 105, 180, 0.2); + border-radius: 15px; + padding: 2rem; + margin-top: 1.5rem; +} + +.tips-box ul { + list-style: none; + padding: 0; +} + +.tips-box li { + padding: 0.8rem 0; + padding-left: 2rem; + position: relative; + color: #6b3a5f; + line-height: 1.6; +} + +.tips-box li::before { + content: '✨'; + position: absolute; + left: 0; + font-size: 1.2rem; +} + /* =========================== Responsive Design =========================== */ @@ -731,6 +1149,41 @@ textarea { font-size: 1.5rem; } + .calculator-container { + grid-template-columns: 1fr; + gap: 1.5rem; + } + + .grade-input-wrapper { + flex-wrap: wrap; + } + + .grade-points, + .grade-max { + flex: 1; + min-width: 100px; + } + + .grade-result { + order: 3; + flex-basis: 100%; + flex-direction: row; + justify-content: space-around; + } + + .grade-remove-btn { + order: 2; + } + + .grade-separator { + display: none; + } + + .average-display { + flex-direction: column; + gap: 1rem; + } + .header-container { flex-direction: column; align-items: flex-start; diff --git a/eis_projekt.html b/eis_projekt.html index 68328b3..247e5ea 100644 --- a/eis_projekt.html +++ b/eis_projekt.html @@ -24,6 +24,7 @@ Projekt Team Galerie + Notenrechner Kontakt Impressum diff --git a/galerie.html b/galerie.html index 8dd1cf4..aa95622 100644 --- a/galerie.html +++ b/galerie.html @@ -24,6 +24,7 @@ Projekt Team Galerie + Notenrechner Kontakt Impressum diff --git a/impressum.html b/impressum.html index 7c1d5d1..13e1aa8 100644 --- a/impressum.html +++ b/impressum.html @@ -24,6 +24,7 @@ Projekt Team Galerie + Notenrechner Kontakt Impressum diff --git a/index.html b/index.html index abbed5c..bf9fcf4 100644 --- a/index.html +++ b/index.html @@ -24,6 +24,7 @@ Projekt Team Galerie + Notenrechner Kontakt Impressum diff --git a/js/notenrechner.js b/js/notenrechner.js new file mode 100644 index 0000000..18aee94 --- /dev/null +++ b/js/notenrechner.js @@ -0,0 +1,372 @@ +/** + * Notenrechner - Berechnet Noten aus Punktzahlen + * David & Karo - EIS Projekt + */ + +// Notenmaßstab definieren +const NOTENMASSTAB = { + 'sehr gut': { min: 90, max: 100 }, + 'gut': { min: 75, max: 89 }, + 'befriedigend': { min: 60, max: 74 }, + 'ausreichend': { min: 50, max: 59 }, + 'nicht bestanden': { min: 0, max: 49 } +}; + +/** + * Berechnet die Note basierend auf der Punktzahl + * @param {number} punkte - Erreichte Punktzahl + * @param {number} maxPunkte - Maximale Punktzahl (default: 100) + * @returns {object} - Enthält Note, Prozentage und Details + */ +function berechneNote(punkte, maxPunkte = 100) { + // Eingabe validieren + punkte = parseFloat(punkte); + maxPunkte = parseFloat(maxPunkte); + + if (isNaN(punkte) || isNaN(maxPunkte)) { + return { + note: 'Fehler', + prozent: 0, + valid: false, + nachricht: 'Bitte geben Sie Zahlen ein!' + }; + } + + if (maxPunkte <= 0) { + return { + note: 'Fehler', + prozent: 0, + valid: false, + nachricht: 'Maximale Punktzahl muss größer als 0 sein!' + }; + } + + if (punkte < 0 || punkte > maxPunkte) { + return { + note: 'Fehler', + prozent: 0, + valid: false, + nachricht: `Punkte müssen zwischen 0 und ${maxPunkte} liegen!` + }; + } + + // Prozentage berechnen + const prozent = Math.round((punkte / maxPunkte) * 100); + + // Note basierend auf Prozentage bestimmen + let note = 'nicht bestanden'; + + for (const [noteText, range] of Object.entries(NOTENMASSTAB)) { + if (prozent >= range.min && prozent <= range.max) { + note = noteText; + break; + } + } + + return { + note: note, + prozent: prozent, + punkte: punkte, + maxPunkte: maxPunkte, + valid: true, + nachricht: `${punkte} von ${maxPunkte} Punkten (${prozent}%) = ${note}` + }; +} + +/** + * Berechnet den Durchschnitt mehrerer Noten + * @param {array} noten - Array von Objekten mit Note-Informationen + * @returns {object} - Durchschnitt und Gesamtnote + */ +function berechneDurchschnitt(noten) { + if (!noten || noten.length === 0) { + return { + valid: false, + nachricht: 'Keine Noten zum Berechnen vorhanden!' + }; + } + + // Alle gültigen Prozentagen sammeln + const prozente = noten + .filter(n => n.valid) + .map(n => n.prozent); + + if (prozente.length === 0) { + return { + valid: false, + nachricht: 'Keine gültigen Noten zum Berechnen vorhanden!' + }; + } + + // Durchschnitt berechnen + const durchschnittProzent = Math.round( + prozente.reduce((sum, p) => sum + p, 0) / prozente.length + ); + + // Note für Durchschnitt bestimmen + let durchschnittNote = 'nicht bestanden'; + for (const [noteText, range] of Object.entries(NOTENMASSTAB)) { + if (durchschnittProzent >= range.min && durchschnittProzent <= range.max) { + durchschnittNote = noteText; + break; + } + } + + return { + anzahl: noten.length, + gueltig: prozente.length, + durchschnittProzent: durchschnittProzent, + durchschnittNote: durchschnittNote, + valid: true, + nachricht: `Durchschnitt: ${durchschnittProzent}% = ${durchschnittNote}` + }; +} + +/** + * Live-Konvertierung von Note zu Punkten + * @param {string} noteText - Die Note als Text + * @param {number} maxPunkte - Maximale Punktzahl + * @returns {object} - Min und Max Punkte für diese Note + */ +function noteZuPunkte(noteText, maxPunkte = 100) { + const range = NOTENMASSTAB[noteText.toLowerCase()]; + + if (!range) { + return { + valid: false, + nachricht: 'Unbekannte Note!' + }; + } + + const minPunkte = Math.round((range.min / 100) * maxPunkte); + const maxPunkteNote = Math.round((range.max / 100) * maxPunkte); + + return { + note: noteText, + minPunkte: minPunkte, + maxPunkte: maxPunkteNote, + valid: true, + nachricht: `Note "${noteText}": ${minPunkte}-${maxPunkteNote} Punkte von ${maxPunkte}` + }; +} + +// DOM-Manipulation und Event-Listener +document.addEventListener('DOMContentLoaded', function() { + const addBtn = document.getElementById('add-grade-btn'); + const calculateBtn = document.getElementById('calculate-btn'); + const resetBtn = document.getElementById('reset-btn'); + const gradesContainer = document.getElementById('grades-container'); + const resultDiv = document.getElementById('result'); + const averageDiv = document.getElementById('average-result'); + + // Neue Note hinzufügen + if (addBtn) { + addBtn.addEventListener('click', function() { + addGradeInput(); + }); + } + + // Berechnen-Button + if (calculateBtn) { + calculateBtn.addEventListener('click', function() { + calculateAllGrades(); + }); + } + + // Zurücksetzen-Button + if (resetBtn) { + resetBtn.addEventListener('click', function() { + resetCalculator(); + }); + } + + // Initiale Note hinzufügen + if (gradesContainer) { + addGradeInput(); + } +}); + +/** + * Neue Note-Input-Zeile hinzufügen + */ +function addGradeInput() { + const container = document.getElementById('grades-container'); + if (!container) return; + + const gradeId = Date.now(); + const gradeDiv = document.createElement('div'); + gradeDiv.className = 'grade-input-group'; + gradeDiv.id = `grade-${gradeId}`; + + gradeDiv.innerHTML = ` +
+ + / + +
+ - + 0% +
+ +
+ `; + + container.appendChild(gradeDiv); + + // Live-Berechnung hinzufügen + const pointsInput = gradeDiv.querySelector('.grade-points'); + const maxInput = gradeDiv.querySelector('.grade-max'); + const noteSpan = gradeDiv.querySelector('.grade-note'); + const percentSpan = gradeDiv.querySelector('.grade-percent'); + + function updateGrade() { + const points = parseFloat(pointsInput.value) || 0; + const max = parseFloat(maxInput.value) || 100; + + if (max > 0 && points >= 0 && points <= max) { + const result = berechneNote(points, max); + if (result.valid) { + noteSpan.textContent = result.note; + percentSpan.textContent = result.prozent + '%'; + noteSpan.style.color = getGradeColor(result.note); + } + } else { + noteSpan.textContent = '-'; + percentSpan.textContent = '0%'; + } + } + + pointsInput.addEventListener('input', updateGrade); + maxInput.addEventListener('input', updateGrade); + pointsInput.focus(); +} + +/** + * Note-Input-Zeile entfernen + */ +function removeGradeInput(gradeId) { + const element = document.getElementById(`grade-${gradeId}`); + if (element) { + element.remove(); + } +} + +/** + * Alle Noten berechnen + */ +function calculateAllGrades() { + const container = document.getElementById('grades-container'); + const resultDiv = document.getElementById('result'); + const averageDiv = document.getElementById('average-result'); + + if (!container) return; + + const gradeInputs = container.querySelectorAll('.grade-input-group'); + const noten = []; + let hasErrors = false; + + // Alle Noten sammeln + gradeInputs.forEach(input => { + const points = parseFloat(input.querySelector('.grade-points').value); + const max = parseFloat(input.querySelector('.grade-max').value); + + if (isNaN(points) || isNaN(max)) { + hasErrors = true; + return; + } + + const result = berechneNote(points, max); + if (result.valid) { + noten.push(result); + } else { + hasErrors = true; + } + }); + + if (hasErrors || noten.length === 0) { + resultDiv.innerHTML = `

⚠️ Bitte füllen Sie alle Felder korrekt aus!

`; + return; + } + + // Einzelnote-Ergebnisse anzeigen + let resultHTML = '

📊 Einzelne Noten:

'; + noten.forEach((note, index) => { + const color = getGradeColor(note.note); + resultHTML += ` +
+ #${index + 1} + ${note.punkte} / ${note.maxPunkte} Punkte (${note.prozent}%) + ${note.note} +
+ `; + }); + resultHTML += '
'; + resultDiv.innerHTML = resultHTML; + + // Durchschnitt berechnen + if (noten.length > 1) { + const average = berechneDurchschnitt(noten); + if (average.valid) { + const color = getGradeColor(average.durchschnittNote); + let averageHTML = ` +
+

📈 Durchschnitt:

+
+
${average.durchschnittProzent}%
+
${average.durchschnittNote}
+
+

Von ${average.gueltig} Note(n) berechnet

+
+ `; + averageDiv.innerHTML = averageHTML; + + // Console und Alert + console.log(average.nachricht); + console.log(`Details: ${average.gueltig} von ${average.anzahl} Noten`); + } + } else { + averageDiv.innerHTML = ''; + } +} + +/** + * Notenrechner zurücksetzen + */ +function resetCalculator() { + const container = document.getElementById('grades-container'); + const resultDiv = document.getElementById('result'); + const averageDiv = document.getElementById('average-result'); + + container.innerHTML = ''; + resultDiv.innerHTML = ''; + averageDiv.innerHTML = ''; + + addGradeInput(); +} + +/** + * Farbe basierend auf Note auswählen + */ +function getGradeColor(note) { + const colors = { + 'sehr gut': '#ff1493', + 'gut': '#ff69b4', + 'befriedigend': '#ffa500', + 'ausreichend': '#ff8c00', + 'nicht bestanden': '#dc143c' + }; + return colors[note.toLowerCase()] || '#6b3a5f'; +} diff --git a/kontakt.html b/kontakt.html index 93cc384..018781a 100644 --- a/kontakt.html +++ b/kontakt.html @@ -24,6 +24,7 @@ Projekt Team Galerie + Notenrechner Kontakt Impressum diff --git a/notenrechner.html b/notenrechner.html new file mode 100644 index 0000000..7344c8e --- /dev/null +++ b/notenrechner.html @@ -0,0 +1,148 @@ + + + + + + + Notenrechner – David & Karo + + + + +
+
+ + +
+
+ +
+
+

🎓 Notenrechner 📊

+

Berechne deine Noten live! Gebe deine Punkte ein und sehe sofort, welche Note du erhältst. 💯✨

+
+ +
+

📝 Wie funktioniert's?

+
+
+

1️⃣ Punkte eingeben

+

Geben Sie Ihre erreichten Punkte und die maximale Punktzahl ein. Der Rechner berechnet automatisch den Prozentsatz.

+
+
+

2️⃣ Mehrere Noten

+

Fügen Sie mehrere Noten hinzu, um einen Durchschnitt zu berechnen. Perfekt für Prüfungsvorbereitung!

+
+
+

3️⃣ Sofort Feedback

+

Sehen Sie sofort, welche Note Sie erhalten – mit Prozentanzeige und hilfreichen Farben.

+
+
+
+ +
+

📋 Notenmaßstab

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NoteProzentbereichBeispiel (von 100)
sehr gut90–100%90–100 Punkte
gut75–89%75–89 Punkte
befriedigend60–74%60–74 Punkte
ausreichend50–59%50–59 Punkte
nicht bestanden0–49%0–49 Punkte
+
+ +
+

🧮 Interaktiver Notenrechner

+ +
+
+

Gebe deine Noten ein:

+ +
+ +
+ +
+ + + +
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+

💡 Tipps & Tricks

+
+
    +
  • Live-Anzeige: Die Note wird automatisch aktualisiert, während du die Punkte eingibst!
    • +
  • Verschiedene Skalen: Du kannst auch mit anderen Maximalwerten arbeiten (z.B. 50, 80 Punkte)
    • +
  • Durchschnitt: Wenn du mehrere Noten eingibst, berechnet der Rechner automatisch den Durchschnitt
    • +
  • Mobile-freundlich: Der Rechner funktioniert auf deinem Handy genauso gut wie am Computer!
    • +
  • Schnell zurücksetzen: Mit dem "Zurücksetzen"-Button kannst du schnell von vorne anfangen
    • +
+
+
+ +
+

© 2026 David & Karo – EIS Projekt. Alle Rechte vorbehalten. 💕

+
+
+ + + + + diff --git a/team.html b/team.html index b1b25af..b365d33 100644 --- a/team.html +++ b/team.html @@ -24,6 +24,7 @@ Projekt Team Galerie + Notenrechner Kontakt Impressum diff --git a/ueber_uns.html b/ueber_uns.html index 3cbf2e4..c38970f 100644 --- a/ueber_uns.html +++ b/ueber_uns.html @@ -24,6 +24,7 @@ Projekt Team Galerie + Notenrechner Kontakt Impressum