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

Notenrechner-Seite mit interaktivem JavaScript hinzugefügt

Browse source
This commit is contained in:
David Kertzscher 2026-05-06 14:42:56 +00:00
parent 28e4b87493
commit b31549de65
10 changed files with 980 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

453
css/style.css
View file

@ -718,6 +718,424 @@ textarea {
transform: scale(1.05); 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 Responsive Design
=========================== */ =========================== */
@ -731,6 +1149,41 @@ textarea {
font-size: 1.5rem; 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 { .header-container {
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;

1
eis_projekt.html
View file

@ -24,6 +24,7 @@
<a href="eis_projekt.html" class="active">Projekt</a> <a href="eis_projekt.html" class="active">Projekt</a>
<a href="team.html">Team</a> <a href="team.html">Team</a>
<a href="galerie.html">Galerie</a> <a href="galerie.html">Galerie</a>
<a href="notenrechner.html">Notenrechner</a>
<a href="kontakt.html">Kontakt</a> <a href="kontakt.html">Kontakt</a>
<a href="impressum.html">Impressum</a> <a href="impressum.html">Impressum</a>
</nav> </nav>

1
galerie.html
View file

@ -24,6 +24,7 @@
<a href="eis_projekt.html">Projekt</a> <a href="eis_projekt.html">Projekt</a>
<a href="team.html">Team</a> <a href="team.html">Team</a>
<a href="galerie.html" class="active">Galerie</a> <a href="galerie.html" class="active">Galerie</a>
<a href="notenrechner.html">Notenrechner</a>
<a href="kontakt.html">Kontakt</a> <a href="kontakt.html">Kontakt</a>
<a href="impressum.html">Impressum</a> <a href="impressum.html">Impressum</a>
</nav> </nav>

1
impressum.html
View file

@ -24,6 +24,7 @@
<a href="eis_projekt.html">Projekt</a> <a href="eis_projekt.html">Projekt</a>
<a href="team.html">Team</a> <a href="team.html">Team</a>
<a href="galerie.html">Galerie</a> <a href="galerie.html">Galerie</a>
<a href="notenrechner.html">Notenrechner</a>
<a href="kontakt.html">Kontakt</a> <a href="kontakt.html">Kontakt</a>
<a href="impressum.html" class="active">Impressum</a> <a href="impressum.html" class="active">Impressum</a>
</nav> </nav>

1
index.html
View file

@ -24,6 +24,7 @@
<a href="eis_projekt.html">Projekt</a> <a href="eis_projekt.html">Projekt</a>
<a href="team.html">Team</a> <a href="team.html">Team</a>
<a href="galerie.html">Galerie</a> <a href="galerie.html">Galerie</a>
<a href="notenrechner.html">Notenrechner</a>
<a href="kontakt.html">Kontakt</a> <a href="kontakt.html">Kontakt</a>
<a href="impressum.html">Impressum</a> <a href="impressum.html">Impressum</a>
</nav> </nav>

372
js/notenrechner.js Normal file
View file

@ -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 = `
<div class="grade-input-wrapper">
<input
type="number"
class="grade-points"
placeholder="Punkte"
min="0"
step="0.5"
>
<span class="grade-separator">/</span>
<input
type="number"
class="grade-max"
placeholder="Max"
value="100"
min="1"
step="1"
>
<div class="grade-result">
<span class="grade-note">-</span>
<span class="grade-percent">0%</span>
</div>
<button class="grade-remove-btn" onclick="removeGradeInput('${gradeId}')">✕</button>
</div>
`;
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 = `<p class="error-message">⚠️ Bitte füllen Sie alle Felder korrekt aus!</p>`;
return;
}
// Einzelnote-Ergebnisse anzeigen
let resultHTML = '<div class="result-list"><h4>📊 Einzelne Noten:</h4>';
noten.forEach((note, index) => {
const color = getGradeColor(note.note);
resultHTML += `
<div class="result-item">
<span class="result-number">#${index + 1}</span>
<span class="result-details">${note.punkte} / ${note.maxPunkte} Punkte (${note.prozent}%)</span>
<span class="result-grade" style="color: ${color};">${note.note}</span>
</div>
`;
});
resultHTML += '</div>';
resultDiv.innerHTML = resultHTML;
// Durchschnitt berechnen
if (noten.length > 1) {
const average = berechneDurchschnitt(noten);
if (average.valid) {
const color = getGradeColor(average.durchschnittNote);
let averageHTML = `
<div class="average-box">
<h4>📈 Durchschnitt:</h4>
<div class="average-display">
<div class="average-percent">${average.durchschnittProzent}%</div>
<div class="average-note" style="color: ${color};">${average.durchschnittNote}</div>
</div>
<p class="average-details">Von ${average.gueltig} Note(n) berechnet</p>
</div>
`;
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';
}

1
kontakt.html
View file

@ -24,6 +24,7 @@
<a href="eis_projekt.html">Projekt</a> <a href="eis_projekt.html">Projekt</a>
<a href="team.html">Team</a> <a href="team.html">Team</a>
<a href="galerie.html">Galerie</a> <a href="galerie.html">Galerie</a>
<a href="notenrechner.html">Notenrechner</a>
<a href="kontakt.html" class="active">Kontakt</a> <a href="kontakt.html" class="active">Kontakt</a>
<a href="impressum.html">Impressum</a> <a href="impressum.html">Impressum</a>
</nav> </nav>

148
notenrechner.html Normal file
View file

@ -0,0 +1,148 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Notenrechner - David & Karo - EIS Projekt">
<title>Notenrechner – David & Karo</title>
<link rel="stylesheet" href="css/style.css">
<link rel="icon" href="img/logo.png" type="image/png">
</head>
<body>
<header>
<div class="header-container">
<div class="logo">
<img src="img/logo.png" alt="Logo">
<div class="logo-text">
<span class="institution">David & Karo</span>
<span class="project">EIS Projekt</span>
</div>
</div>
<nav>
<a href="index.html">Start</a>
<a href="ueber_uns.html">Über uns</a>
<a href="eis_projekt.html">Projekt</a>
<a href="team.html">Team</a>
<a href="galerie.html">Galerie</a>
<a href="notenrechner.html" class="active">Notenrechner</a>
<a href="kontakt.html">Kontakt</a>
<a href="impressum.html">Impressum</a>
</nav>
</div>
</header>
<main>
<section class="hero">
<h1>🎓 Notenrechner 📊</h1>
<p>Berechne deine Noten live! Gebe deine Punkte ein und sehe sofort, welche Note du erhältst. 💯✨</p>
</section>
<section>
<h2>📝 Wie funktioniert's?</h2>
<div class="info-cards">
<div class="info-card">
<h4>1️⃣ Punkte eingeben</h4>
<p>Geben Sie Ihre erreichten Punkte und die maximale Punktzahl ein. Der Rechner berechnet automatisch den Prozentsatz.</p>
</div>
<div class="info-card">
<h4>2️⃣ Mehrere Noten</h4>
<p>Fügen Sie mehrere Noten hinzu, um einen Durchschnitt zu berechnen. Perfekt für Prüfungsvorbereitung!</p>
</div>
<div class="info-card">
<h4>3️⃣ Sofort Feedback</h4>
<p>Sehen Sie sofort, welche Note Sie erhalten – mit Prozentanzeige und hilfreichen Farben.</p>
</div>
</div>
</section>
<section>
<h2>📋 Notenmaßstab</h2>
<table class="grade-scale-table">
<thead>
<tr>
<th>Note</th>
<th>Prozentbereich</th>
<th>Beispiel (von 100)</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="grade-badge very-good">sehr gut</span></td>
<td>90–100%</td>
<td>90–100 Punkte</td>
</tr>
<tr>
<td><span class="grade-badge good">gut</span></td>
<td>75–89%</td>
<td>75–89 Punkte</td>
</tr>
<tr>
<td><span class="grade-badge satisfactory">befriedigend</span></td>
<td>60–74%</td>
<td>60–74 Punkte</td>
</tr>
<tr>
<td><span class="grade-badge adequate">ausreichend</span></td>
<td>50–59%</td>
<td>50–59 Punkte</td>
</tr>
<tr>
<td><span class="grade-badge failed">nicht bestanden</span></td>
<td>0–49%</td>
<td>0–49 Punkte</td>
</tr>
</tbody>
</table>
</section>
<section class="calculator-section">
<h2>🧮 Interaktiver Notenrechner</h2>
<div class="calculator-container">
<div class="grades-input-section">
<h3>Gebe deine Noten ein:</h3>
<div id="grades-container" class="grades-container">
<!-- Grades werden hier dynamisch eingefügt -->
</div>
<div class="calculator-buttons">
<button id="add-grade-btn" class="btn btn-add">➕ Weitere Note hinzufügen</button>
<button id="calculate-btn" class="btn btn-calculate">🧮 Berechnen</button>
<button id="reset-btn" class="btn btn-reset">🔄 Zurücksetzen</button>
</div>
</div>
<div class="results-section">
<div id="result" class="result-container">
<!-- Ergebnisse werden hier eingefügt -->
</div>
<div id="average-result" class="average-container">
<!-- Durchschnitt wird hier eingefügt -->
</div>
</div>
</div>
</section>
<section>
<h2>💡 Tipps & Tricks</h2>
<div class="tips-box">
<ul>
<li><strong>Live-Anzeige:</strong> Die Note wird automatisch aktualisiert, während du die Punkte eingibst!</li>
<li><strong>Verschiedene Skalen:</strong> Du kannst auch mit anderen Maximalwerten arbeiten (z.B. 50, 80 Punkte)</li>
<li><strong>Durchschnitt:</strong> Wenn du mehrere Noten eingibst, berechnet der Rechner automatisch den Durchschnitt</li>
<li><strong>Mobile-freundlich:</strong> Der Rechner funktioniert auf deinem Handy genauso gut wie am Computer!</li>
<li><strong>Schnell zurücksetzen:</strong> Mit dem "Zurücksetzen"-Button kannst du schnell von vorne anfangen</li>
</ul>
</div>
</section>
<footer>
<p>&copy; 2026 David & Karo – EIS Projekt. Alle Rechte vorbehalten. 💕</p>
</footer>
</main>
<script src="js/notenrechner.js"></script>
<script src="js/script.js"></script>
</body>
</html>

1
team.html
View file

@ -24,6 +24,7 @@
<a href="eis_projekt.html">Projekt</a> <a href="eis_projekt.html">Projekt</a>
<a href="team.html" class="active">Team</a> <a href="team.html" class="active">Team</a>
<a href="galerie.html">Galerie</a> <a href="galerie.html">Galerie</a>
<a href="notenrechner.html">Notenrechner</a>
<a href="kontakt.html">Kontakt</a> <a href="kontakt.html">Kontakt</a>
<a href="impressum.html">Impressum</a> <a href="impressum.html">Impressum</a>
</nav> </nav>

1
ueber_uns.html
View file

@ -24,6 +24,7 @@
<a href="eis_projekt.html">Projekt</a> <a href="eis_projekt.html">Projekt</a>
<a href="team.html">Team</a> <a href="team.html">Team</a>
<a href="galerie.html">Galerie</a> <a href="galerie.html">Galerie</a>
<a href="notenrechner.html">Notenrechner</a>
<a href="kontakt.html">Kontakt</a> <a href="kontakt.html">Kontakt</a>
<a href="impressum.html">Impressum</a> <a href="impressum.html">Impressum</a>
</nav> </nav>