Notenrechner hinzugefügt und Navigation zentralisiert
This commit is contained in:
parent
05b833bc9b
commit
8ec1c1137f
13 changed files with 149 additions and 81 deletions
15
.gitignore
vendored
15
.gitignore
vendored
|
|
@ -1,4 +1,11 @@
|
||||||
*.save
|
<!DOCTYPE html>
|
||||||
*.swp
|
<html lang="de">
|
||||||
*~
|
<head>
|
||||||
.DS_Store
|
<meta charset="UTF-8">
|
||||||
|
<title>Notenrechner</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Notenrechner</h1>
|
||||||
|
<script src="js/notenrechener.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -193,3 +193,52 @@ footer {
|
||||||
}
|
}
|
||||||
|
|
||||||
.dot.active { background: #2563eb; }
|
.dot.active { background: #2563eb; }
|
||||||
|
|
||||||
|
|
||||||
|
/* Notenrechner */
|
||||||
|
.rechner-box {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
max-width: 400px;
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rechner-feld {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rechner-feld label {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #003366;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rechner-feld input {
|
||||||
|
padding: 10px 14px;
|
||||||
|
border: 1px solid #e2e8f0;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 1rem;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rechner-feld input:focus {
|
||||||
|
border-color: #2563eb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ergebnis-box {
|
||||||
|
margin-top: 2rem;
|
||||||
|
padding: 1.2rem 1.5rem;
|
||||||
|
background: #f0f4ff;
|
||||||
|
border-left: 4px solid #2563eb;
|
||||||
|
border-radius: 6px;
|
||||||
|
max-width: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ergebnis-box p {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #003366;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
@ -7,20 +7,7 @@
|
||||||
<link rel="stylesheet" href="css/style.css">
|
<link rel="stylesheet" href="css/style.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<script src="js/nav.js"></script>
|
||||||
|
|
||||||
<nav>
|
|
||||||
<a href="index.html" class="nav-logo">
|
|
||||||
<img src="img/Logo2.png" alt="Cyanotypie Logo" class="logo">
|
|
||||||
</a>
|
|
||||||
<a href="index.html">Home</a>
|
|
||||||
<a href="ueber_uns.html">Über uns</a>
|
|
||||||
<a href="eis_projekt.html">Projekt</a>
|
|
||||||
<a href="team.html">Steckbrief</a>
|
|
||||||
<a href="kontakt.html">Kontakt</a>
|
|
||||||
<a href="impressum.html">Impressum</a>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<h1>Das Projekt</h1>
|
<h1>Das Projekt</h1>
|
||||||
|
|
|
||||||
|
|
@ -7,20 +7,7 @@
|
||||||
<link rel="stylesheet" href="css/style.css">
|
<link rel="stylesheet" href="css/style.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<script src="js/nav.js"></script>
|
||||||
|
|
||||||
<nav>
|
|
||||||
<a href="index.html" class="nav-logo">
|
|
||||||
<img src="img/Logo2.png" alt="Cyanotypie Logo" class="logo">
|
|
||||||
</a>
|
|
||||||
<a href="index.html">Home</a>
|
|
||||||
<a href="ueber_uns.html">Über uns</a>
|
|
||||||
<a href="eis_projekt.html">Projekt</a>
|
|
||||||
<a href="team.html">Steckbrief</a>
|
|
||||||
<a href="kontakt.html">Kontakt</a>
|
|
||||||
<a href="impressum.html">Impressum</a>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<h1>Impressum</h1>
|
<h1>Impressum</h1>
|
||||||
|
|
|
||||||
12
index.html
12
index.html
|
|
@ -8,17 +8,7 @@
|
||||||
<link rel="icon" href="img/Favicon.jpg" type="image/jpeg">
|
<link rel="icon" href="img/Favicon.jpg" type="image/jpeg">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<nav>
|
<script src="js/nav.js"></script>
|
||||||
<a href="index.html" class="nav-logo">
|
|
||||||
<img src="img/Logo2.png" alt="Cyanotypie Logo" class="logo">
|
|
||||||
</a>
|
|
||||||
<a href="index.html">Home</a>
|
|
||||||
<a href="ueber_uns.html">Über uns</a>
|
|
||||||
<a href="eis_projekt.html">Projekt</a>
|
|
||||||
<a href="team.html">Steckbrief</a>
|
|
||||||
<a href="kontakt.html">Kontakt</a>
|
|
||||||
<a href="impressum.html">Impressum</a>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<h1>cyan.</h1>
|
<h1>cyan.</h1>
|
||||||
|
|
|
||||||
16
js/nav.js
Normal file
16
js/nav.js
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
const navigation = `
|
||||||
|
<nav>
|
||||||
|
<a href="index.html" class="nav-logo">
|
||||||
|
<img src="img/Logo2.png" alt="Cyanotypie Logo" class="logo">
|
||||||
|
</a>
|
||||||
|
<a href="index.html">Home</a>
|
||||||
|
<a href="ueber_uns.html">Über uns</a>
|
||||||
|
<a href="eis_projekt.html">Projekt</a>
|
||||||
|
<a href="team.html">Steckbrief</a>
|
||||||
|
<a href="notenrechner.html">Notenrechner</a>
|
||||||
|
<a href="kontakt.html">Kontakt</a>
|
||||||
|
<a href="impressum.html">Impressum</a>
|
||||||
|
</nav>
|
||||||
|
`;
|
||||||
|
|
||||||
|
document.body.insertAdjacentHTML('afterbegin', navigation);
|
||||||
27
js/notenrechener.js
Normal file
27
js/notenrechener.js
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
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";
|
||||||
|
}
|
||||||
|
|
||||||
|
function berechnen() {
|
||||||
|
const punkte = Number(document.getElementById("punkte").value);
|
||||||
|
const maxPunkte = Number(document.getElementById("maxPunkte").value);
|
||||||
|
|
||||||
|
if (!punkte || !maxPunkte || maxPunkte <= 0) {
|
||||||
|
alert("Bitte beide Felder ausfüllen!");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const prozent = Math.round((punkte / maxPunkte) * 100);
|
||||||
|
const note = berechneNote(prozent);
|
||||||
|
const ergebnis = `${punkte} von ${maxPunkte} Punkten (${prozent}%) = ${note}`;
|
||||||
|
|
||||||
|
console.log(ergebnis);
|
||||||
|
alert(ergebnis);
|
||||||
|
|
||||||
|
document.getElementById("ergebnisText").textContent = ergebnis;
|
||||||
|
document.getElementById("ergebnis").style.display = "block";
|
||||||
|
}
|
||||||
0
js/textanalyse.js
Normal file
0
js/textanalyse.js
Normal file
15
kontakt.html
15
kontakt.html
|
|
@ -7,20 +7,7 @@
|
||||||
<link rel="stylesheet" href="css/style.css">
|
<link rel="stylesheet" href="css/style.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<script src="js/nav.js"></script>
|
||||||
|
|
||||||
<nav>
|
|
||||||
<a href="index.html" class="nav-logo">
|
|
||||||
<img src="img/Logo2.png" alt="Cyanotypie Logo" class="logo">
|
|
||||||
</a>
|
|
||||||
<a href="index.html">Home</a>
|
|
||||||
<a href="ueber_uns.html">Über uns</a>
|
|
||||||
<a href="eis_projekt.html">Projekt</a>
|
|
||||||
<a href="team.html">Steckbrief</a>
|
|
||||||
<a href="kontakt.html">Kontakt</a>
|
|
||||||
<a href="impressum.html">Impressum</a>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<h1>Kontakt</h1>
|
<h1>Kontakt</h1>
|
||||||
|
|
|
||||||
40
notenrechner.html
Normal file
40
notenrechner.html
Normal file
|
|
@ -0,0 +1,40 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Notenrechner – Cyanotypie</title>
|
||||||
|
<link rel="stylesheet" href="css/style.css">
|
||||||
|
<link rel="icon" href="img/Favicon.jpg" type="image/jpeg">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script src="js/nav.js"></script>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<h1>Notenrechner</h1>
|
||||||
|
<p>Gib deine Punkte ein und berechne deine Note.</p>
|
||||||
|
|
||||||
|
<div class="rechner-box">
|
||||||
|
<div class="rechner-feld">
|
||||||
|
<label for="punkte">Erreichte Punkte</label>
|
||||||
|
<input type="number" id="punkte" placeholder="z. B. 72">
|
||||||
|
</div>
|
||||||
|
<div class="rechner-feld">
|
||||||
|
<label for="maxPunkte">Maximale Punkte</label>
|
||||||
|
<input type="number" id="maxPunkte" placeholder="z. B. 90">
|
||||||
|
</div>
|
||||||
|
<button class="btn" onclick="berechnen()">Note berechnen</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="ergebnis-box" id="ergebnis" style="display:none;">
|
||||||
|
<p id="ergebnisText"></p>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p>© 2026 – Lernprojekt EIS</p>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="js/notenrechener.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
12
team.html
12
team.html
|
|
@ -8,17 +8,7 @@
|
||||||
<link rel="icon" href="img/Favicon.jpg" type="image/jpeg">
|
<link rel="icon" href="img/Favicon.jpg" type="image/jpeg">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<nav>
|
<script src="js/nav.js"></script>
|
||||||
<a href="index.html" class="nav-logo">
|
|
||||||
<img src="img/Logo2.png" alt="Cyanotypie Logo" class="logo">
|
|
||||||
</a>
|
|
||||||
<a href="index.html">Home</a>
|
|
||||||
<a href="ueber_uns.html">Über uns</a>
|
|
||||||
<a href="eis_projekt.html">Projekt</a>
|
|
||||||
<a href="team.html">Steckbrief</a>
|
|
||||||
<a href="kontakt.html">Kontakt</a>
|
|
||||||
<a href="impressum.html">Impressum</a>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<h1>Steckbrief</h1>
|
<h1>Steckbrief</h1>
|
||||||
|
|
|
||||||
0
textanalyse.html
Normal file
0
textanalyse.html
Normal file
|
|
@ -7,19 +7,7 @@
|
||||||
<link rel="stylesheet" href="css/style.css">
|
<link rel="stylesheet" href="css/style.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<script src="js/nav.js"></script>
|
||||||
|
|
||||||
<nav>
|
|
||||||
<a href="index.html" class="nav-logo">
|
|
||||||
<img src="img/Logo2.png" alt="Cyanotypie Logo" class="logo">
|
|
||||||
</a>
|
|
||||||
<a href="index.html">Home</a>
|
|
||||||
<a href="ueber_uns.html">Über uns</a>
|
|
||||||
<a href="eis_projekt.html">Projekt</a>
|
|
||||||
<a href="team.html">Steckbrief</a>
|
|
||||||
<a href="kontakt.html">Kontakt</a>
|
|
||||||
<a href="impressum.html">Impressum</a>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue