First changes with VS
This commit is contained in:
Tahar Lamred & Theresa Nerz
parent
c0544aae3d
commit
bc084a5b8a
9 changed files with 309 additions and 223 deletions
|
|
@ -53,14 +53,7 @@
|
|||
|
||||
---
|
||||
|
||||
### 💡 Hinweis
|
||||
Diese README.md erfüllt alle Punkte der Aufgabe:
|
||||
- Pfad angegeben
|
||||
- Struktur dokumentiert
|
||||
- Funktionen der Dateien beschrieben
|
||||
- Verlinkungen erklärt
|
||||
- Commit-Nachricht kann z. B. lauten:
|
||||
**„Dokumentation der Website-Struktur hinzugefügt“**
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -1,28 +1,55 @@
|
|||
GNU nano 7.2 about_us.html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>About Us</title>
|
||||
|
||||
<link rel="icon" href="img/favicon.png" type="image/png">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<header>
|
||||
|
||||
<!-- In the <head> of every page -->
|
||||
<link rel="icon" href="img/favicon.png" type="image/png">
|
||||
<!-- Centered Logo -->
|
||||
<div class="logo-container">
|
||||
<img src="./img/Logo.png" alt="Logo">
|
||||
</div>
|
||||
|
||||
<!-- Logo in header -->
|
||||
<img src="./img/Logo.png" alt="Logo" style="height: 100px;">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<script src="js/script.js" defer></script>
|
||||
<!-- Navigation Bar -->
|
||||
<nav>
|
||||
<a href="index.html">Home</a>
|
||||
<a href="about_us.html">About Us</a>
|
||||
<a href="eis_project.html">Project</a>
|
||||
<a href="contact.html">Contact</a>
|
||||
<a href="imprint.html">Imprint</a>
|
||||
<li><a href="notenrechner.html">Notenrechner</a></li>
|
||||
<div class="nav-links">
|
||||
<a href="index.html">Home</a>
|
||||
<a href="about_us.html">About Us</a>
|
||||
<a href="eis_project.html">Project</a>
|
||||
<a href="contact.html">Contact</a>
|
||||
<a href="imprint.html">Imprint</a>
|
||||
<a href="notenrechner.html">Notenrechner</a>
|
||||
</div>
|
||||
|
||||
<button id="dark-mode-toggle">Dark Mode</button>
|
||||
</nav>
|
||||
<button id="dark-mode-toggle">Dark Mode</button>
|
||||
|
||||
</header>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!-- Page content here -->
|
||||
<p> Student: Tahar und Thereza</p>
|
||||
<p>Student: Tahar und Thereza</p>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>© 2025 – EIS Learning Project</p>
|
||||
<p>© 2026 – EIS Learning Project</p>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
const toggle = document.getElementById('dark-mode-toggle');
|
||||
toggle.addEventListener('click', () => {
|
||||
document.body.classList.toggle('dark');
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
61
contact.html
61
contact.html
|
|
@ -1,31 +1,38 @@
|
|||
<header>
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Kontakt – EIS Learning Project</title>
|
||||
<link rel="icon" href="img/favicon.png" type="image/png">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<script src="js/script.js" defer></script>
|
||||
</head>
|
||||
|
||||
<!-- In the <head> of every page -->
|
||||
<link rel="icon" href="img/favicon.png" type="image/png">
|
||||
<body>
|
||||
<header>
|
||||
<div class="logo-container">
|
||||
<img src="img/Logo.png" alt="Logo" class="logo">
|
||||
</div>
|
||||
|
||||
<!-- Logo in header -->
|
||||
<img src="./img/Logo.png" alt="Logo" style="height: 100px;">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<script src="js/script.js" defer></script>
|
||||
<nav>
|
||||
<a href="index.html">Home</a>
|
||||
<a href="about_us.html">About Us</a>
|
||||
<a href="eis_project.html">Project</a>
|
||||
<a href="contact.html">Contact</a>
|
||||
<a href="imprint.html">Imprint</a>
|
||||
<li><a href="notenrechner.html">Notenrechner</a></li>
|
||||
<nav>
|
||||
<a href="index.html">Home</a>
|
||||
<a href="about_us.html">About Us</a>
|
||||
<a href="eis_project.html">Project</a>
|
||||
<a href="contact.html">Contact</a>
|
||||
<a href="imprint.html">Imprint</a>
|
||||
<a href="notenrechner.html">Notenrechner</a>
|
||||
<button id="dark-mode-toggle">Dark Mode</button>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
</nav>
|
||||
<button id="dark-mode-toggle">Dark Mode</button>
|
||||
</header>
|
||||
<main>
|
||||
<h2>Kontakt</h2>
|
||||
<p>Wir sind erreichbar unter: <strong>0176 8263 8021</strong> und <strong>0160 9236 0333</strong></p>
|
||||
</main>
|
||||
|
||||
<main>
|
||||
|
||||
<!-- Page content here -->
|
||||
<p> Wir sind erreichbar unter: 017682638021 und 016092360333</p>
|
||||
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>© 2025 – EIS Learning Project</p>
|
||||
</footer>
|
||||
<footer>
|
||||
<p>© 2025 – EIS Learning Project</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,29 +1,58 @@
|
|||
{
|
||||
/* Reset */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Base styles */
|
||||
body {
|
||||
font-family: Andalus;
|
||||
font-family: 'Andalus', serif;
|
||||
color: #000000;
|
||||
line-height: 1.6;
|
||||
background-color:#FFFFFF;
|
||||
background-color: #FFFFFF;
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
|
||||
/* Centered Logo */
|
||||
.logo-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.logo-container img {
|
||||
height: 100px;
|
||||
}
|
||||
/* Navigation Bar */
|
||||
nav {
|
||||
display: flex;
|
||||
justify-content: space-between; /* links left, button right */
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
padding: 1rem 2rem;
|
||||
background: #ffff00;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
flex-wrap: wrap;
|
||||
|
||||
background: #90EE90; /* light green */
|
||||
padding: 1rem 2rem;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
|
||||
/* Sticky */
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
/* Navigation Links Group */
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
/* Individual Links */
|
||||
nav a {
|
||||
text-decoration: none;
|
||||
color: #2563eb;
|
||||
color: #000000; /* black text */
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
|
@ -31,9 +60,21 @@ nav a:hover {
|
|||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 40px;
|
||||
/* Dark Mode Button */
|
||||
#dark-mode-toggle {
|
||||
background-color: #2563eb;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
}
|
||||
#dark-mode-toggle:hover {
|
||||
background-color: #1e40af;
|
||||
}
|
||||
|
||||
/* Gallery */
|
||||
.galerie {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
|
|
@ -53,6 +94,7 @@ nav a:hover {
|
|||
.galerie img:hover {
|
||||
transform: scale(1.03);
|
||||
}
|
||||
/* Progress Bar */
|
||||
#balken-container {
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
|
|
@ -64,21 +106,12 @@ nav a:hover {
|
|||
height: 100%;
|
||||
width: 0;
|
||||
background-color: green;
|
||||
border-radius: 5px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
/* Dark Mode Button */
|
||||
.darkmode-button {
|
||||
margin: 10px;
|
||||
padding: 8px 16px;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background: #333;
|
||||
color: white;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/* Dark Mode Styles */
|
||||
.body.dark {
|
||||
/* Dark Mode */
|
||||
body.dark {
|
||||
background-color: #121212;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
|
@ -87,7 +120,6 @@ body.dark header,
|
|||
body.dark nav {
|
||||
background-color: #1e1e1e;
|
||||
}
|
||||
|
||||
body.dark input,
|
||||
body.dark button {
|
||||
background-color: #333;
|
||||
|
|
@ -98,4 +130,3 @@ body.dark button {
|
|||
body.dark #balken-container {
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,34 +1,44 @@
|
|||
<header>
|
||||
<!-- In the <head> of every page -->
|
||||
<link rel="icon" href="img/favicon.png" type="image/png">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<script src="js/script.js" defer></script>
|
||||
<!-- Logo in header -->
|
||||
<img src="./img/Logo.png" alt="Logo" style="height: 100px;">
|
||||
<nav>
|
||||
<a href="index.html">Home</a>
|
||||
<a href="about_us.html">About Us</a>
|
||||
<a href="eis_project.html">Project</a>
|
||||
<a href="contact.html">Contact</a>
|
||||
<a href="imprint.html">Imprint</a>
|
||||
<li><a href="notenrechner.html">Notenrechner</a></li>
|
||||
</nav>
|
||||
<button id="dark-mode-toggle">Dark Mode</button>
|
||||
</header>
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>EIS Project – SoSe 2026</title>
|
||||
<link rel="icon" href="img/favicon.png" type="image/png">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<script src="js/script.js" defer></script>
|
||||
</head>
|
||||
|
||||
<main>
|
||||
<body>
|
||||
<header>
|
||||
<div class="logo-container">
|
||||
<img src="img/Logo.png" alt="Logo" class="logo">
|
||||
</div>
|
||||
|
||||
c <!-- Page content here --><P> Unser Project SoSe 2026
|
||||
<h2>Fotogalerie</h2>
|
||||
<nav>
|
||||
<a href="index.html">Home</a>
|
||||
<a href="about_us.html">About Us</a>
|
||||
<a href="eis_project.html">Project</a>
|
||||
<a href="contact.html">Contact</a>
|
||||
<a href="imprint.html">Imprint</a>
|
||||
<a href="notenrechner.html">Notenrechner</a>
|
||||
<button id="dark-mode-toggle">Dark Mode</button>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="galerie">
|
||||
<main>
|
||||
<p>Unser Project SoSe 2026</p>
|
||||
<h2>Fotogalerie</h2>
|
||||
|
||||
<img src="img/bild1.jpg" alt="Mein Bild">
|
||||
<img src="img/bild2.jpg" alt="Beschreibung Bild 2">
|
||||
<img src="img/bild3.jpg" alt="Beschreibung Bild 3">
|
||||
</div>
|
||||
</main>
|
||||
<div class="galerie">
|
||||
<img src="img/bild1.jpg" alt="Mein Bild">
|
||||
<img src="img/bild2.jpg" alt="Beschreibung Bild 2">
|
||||
<img src="img/bild3.jpg" alt="Beschreibung Bild 3">
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>© 2026 – EIS Learning Project</p>
|
||||
</footer>
|
||||
<footer>
|
||||
<p>© 2026 – EIS Learning Project</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
70
imprint.html
70
imprint.html
|
|
@ -1,35 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Imprint – EIS Learning Project</title>
|
||||
<link rel="icon" href="img/favicon.png" type="image/png">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<script src="js/script.js" defer></script>
|
||||
</head>
|
||||
|
||||
<header>
|
||||
<link rel="icon" href="img/favicon.png" type="image/png">
|
||||
<body>
|
||||
<header>
|
||||
<div class="logo-container">
|
||||
<img src="img/Logo.png" alt="Logo" class="logo">
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<a href="index.html">Home</a>
|
||||
<a href="about_us.html">About Us</a>
|
||||
<a href="eis_project.html">Project</a>
|
||||
<a href="contact.html">Contact</a>
|
||||
<a href="imprint.html">Imprint</a>
|
||||
<a href="notenrechner.html">Notenrechner</a>
|
||||
<button id="dark-mode-toggle">Dark Mode</button>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<img src="./img/Logo.png" alt="Logo" style="height: 100px;">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<script src="js/script.js" defer></script>
|
||||
<nav>
|
||||
<a href="index.html">Home</a>
|
||||
<a href="about_us.html">About Us</a>
|
||||
<a href="eis_project.html">Project</a>
|
||||
<a href="contact.html">Contact</a>
|
||||
<a href="imprint.html">Imprint</a>
|
||||
<li><a href="notenrechner.html">Notenrechner</a></li>
|
||||
</nav>
|
||||
<button id="dark-mode-toggle">Dark Mode</button>
|
||||
</header>
|
||||
<main>
|
||||
<h1>Imprint</h1>
|
||||
<p><strong>Responsible:</strong> Theresa und Tahar</p>
|
||||
<p><strong>Email:</strong> theresa.nerz@stud.ph-weingarten.de & tahar.lamred01@stud.ph-weingartenh.de</p>
|
||||
<p>This website is a learning project as part of the course
|
||||
<em>"Development of Interactive Software Applications"</em> at PH Weingarten.
|
||||
</p>
|
||||
<a href="assets/project_info.pdf" download>Download Project Info (PDF)</a>
|
||||
</main>
|
||||
|
||||
<main>
|
||||
|
||||
<h1>Imprint</h1>
|
||||
<p>Responsible: Theresa und Tahar</p>
|
||||
<p>Email: theresa.nerz@stud.ph-weingarten.de & tahar.lamred01@stud.ph-weingartenh.de</p>
|
||||
<p>This website is a learning project as part of the course
|
||||
"Development of Interactive Software Applications" at PH Weingarten.</p>
|
||||
<a href="assets/project_info.pdf" download>Download Project Info (PDF)</a>
|
||||
|
||||
|
||||
</main>
|
||||
|
||||
|
||||
<footer>
|
||||
<p>© 2026 EIS Learning Project</p>
|
||||
</footer>
|
||||
<footer>
|
||||
<p>© 2026 – EIS Learning Project</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
66
index.html
66
index.html
|
|
@ -1,54 +1,54 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>JavaScript verwenden</title>
|
||||
|
||||
<!-- JavaScript im Header (Aufgabe vom Lehrer) -->
|
||||
<script>
|
||||
alert("JavaScript im Header!");
|
||||
</script>
|
||||
<title>Your Page Title</title>
|
||||
|
||||
<link rel="icon" href="img/favicon.png" type="image/png">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<script src="js/script.js" defer></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<nav>
|
||||
<a href="index.html">Home</a>
|
||||
<a href="about_us.html">About Us</a>
|
||||
<a href="eis_project.html">Project</a>
|
||||
<a href="contact.html">Contact</a>
|
||||
<a href="imprint.html">Imprint</a>
|
||||
<li><a href="notenrechner.html">Notenrechner</a></li>
|
||||
</nav>
|
||||
<button id="dark-mode-toggle">Dark Mode</button>
|
||||
<header>
|
||||
<img src="./img/Logo.png" alt="Logo" style="height: 100px;">
|
||||
|
||||
<!-- Centered Logo -->
|
||||
<div class="logo-container">
|
||||
<img src="./img/Logo.png" alt="Logo">
|
||||
</div>
|
||||
|
||||
<!-- Navigation Bar -->
|
||||
<nav>
|
||||
<div class="nav-links">
|
||||
<a href="index.html">Home</a>
|
||||
<a href="about_us.html">About Us</a>
|
||||
<a href="eis_project.html">Project</a>
|
||||
<a href="contact.html">Contact</a>
|
||||
<a href="imprint.html">Imprint</a>
|
||||
<a href="notenrechner.html">Notenrechner</a>
|
||||
</div>
|
||||
|
||||
<button id="dark-mode-toggle">Dark Mode</button>
|
||||
</nav>
|
||||
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<h1>JavaScript</h1>
|
||||
<h1>Wilkommen beim Lernprojekt EIS!</h1>
|
||||
<p>My first page on the server.</p>
|
||||
|
||||
<p>Auf dieser Website stellen wir unser Projekt im Rahmen der Lehrveranstaltung
|
||||
Entwicklung interaktiver Softwareanwendungen vor.</p>
|
||||
|
||||
<p>
|
||||
<a href="assets/projektinfo.pdf" download>Projektinfo herunterladen (PDF)</a>
|
||||
</p>
|
||||
<!-- Your page content goes here -->
|
||||
<p>Welcome to the page!</p>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>© 2026 Lernprojekt EIS</p>
|
||||
<p>© 2026 – EIS Learning Project</p>
|
||||
</footer>
|
||||
|
||||
<!-- Externe JavaScript-Datei (Aufgabe Schritt 2) -->
|
||||
<script src="js/example2.js"></script>
|
||||
<script src="js/textanalyse.js"></script>
|
||||
<script>
|
||||
const toggle = document.getElementById('dark-mode-toggle');
|
||||
toggle.addEventListener('click', () => {
|
||||
document.body.classList.toggle('dark');
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,70 +1,79 @@
|
|||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const input = document.getElementById("punkte");
|
||||
const button = document.getElementById("berechnen");
|
||||
const ergebnis = document.getElementById("ergebnis");
|
||||
const balken = document.getElementById("balken");
|
||||
const input = document.getElementById("punkte");
|
||||
const button = document.getElementById("berechnen");
|
||||
const ergebnis = document.getElementById("ergebnis");
|
||||
const balken = document.getElementById("balken");
|
||||
const darkToggle = document.getElementById("darkmode-toggle");
|
||||
|
||||
// Dark Mode Toggle
|
||||
const darkToggle = document.getElementById("darkmode-toggle");
|
||||
// -----------------------------
|
||||
// Dark Mode Toggle
|
||||
// -----------------------------
|
||||
if (darkToggle) {
|
||||
// gespeicherten Modus laden
|
||||
if (localStorage.getItem("darkmode") === "on") {
|
||||
document.body.classList.add("dark");
|
||||
darkToggle.textContent = "☀️ Light Mode";
|
||||
} else {
|
||||
darkToggle.textContent = "🌙 Dark Mode";
|
||||
}
|
||||
|
||||
// gespeicherten Modus laden
|
||||
if (localStorage.getItem("darkmode") === "on") {
|
||||
document.body.classList.add("dark-mode");
|
||||
darkToggle.textContent = "☀️ Light Mode";
|
||||
}
|
||||
darkToggle.addEventListener("click", () => {
|
||||
document.body.classList.toggle("dark");
|
||||
|
||||
darkToggle.addEventListener("click", () => {
|
||||
document.body.classList.toggle("dark-mode");
|
||||
|
||||
if (document.body.classList.contains("dark-mode")) {
|
||||
if (document.body.classList.contains("dark")) {
|
||||
localStorage.setItem("darkmode", "on");
|
||||
darkToggle.textContent = "☀️ Light Mode";
|
||||
} else {
|
||||
} else {
|
||||
localStorage.setItem("darkmode", "off");
|
||||
darkToggle.textContent = "🌙 Dark Mode";
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function berechneNote() {
|
||||
const value = input.value.trim();
|
||||
const zahl = Number(value);
|
||||
// -----------------------------
|
||||
// Notenrechner Logik
|
||||
// -----------------------------
|
||||
function berechneNote() {
|
||||
const value = input.value.trim();
|
||||
const zahl = Number(value);
|
||||
|
||||
const isValid =
|
||||
value !== "" &&
|
||||
!Number.isNaN(zahl) &&
|
||||
zahl >= 0 &&
|
||||
zahl <= 100;
|
||||
const isValid =
|
||||
value !== "" &&
|
||||
!Number.isNaN(zahl) &&
|
||||
zahl >= 0 &&
|
||||
zahl <= 100;
|
||||
|
||||
// Eingabeprüfung
|
||||
input.style.borderColor = isValid ? "" : "red";
|
||||
// Eingabeprüfung
|
||||
input.style.borderColor = isValid ? "" : "red";
|
||||
|
||||
if (!isValid) {
|
||||
ergebnis.textContent =
|
||||
"Bitte eine gültige Punktzahl zwischen 0 und 100 eingeben.";
|
||||
balken.style.width = "0";
|
||||
balken.style.backgroundColor = "transparent";
|
||||
return;
|
||||
}
|
||||
|
||||
const prozent = zahl;
|
||||
let note;
|
||||
|
||||
if (prozent >= 90) note = "sehr gut";
|
||||
else if (prozent >= 75) note = "gut";
|
||||
else if (prozent >= 60) note = "befriedigend";
|
||||
else if (prozent >= 50) note = "ausreichend";
|
||||
else note = "nicht bestanden";
|
||||
|
||||
ergebnis.textContent = `Punkte: ${zahl} (${prozent}%) – Note: ${note}`;
|
||||
|
||||
// Balken aktualisieren
|
||||
balken.style.width = prozent + "%";
|
||||
|
||||
if (prozent >= 75) balken.style.backgroundColor = "green";
|
||||
else if (prozent >= 50) balken.style.backgroundColor = "orange";
|
||||
else balken.style.backgroundColor = "red";
|
||||
if (!isValid) {
|
||||
ergebnis.textContent =
|
||||
"Bitte eine gültige Punktzahl zwischen 0 und 100 eingeben.";
|
||||
balken.style.width = "0";
|
||||
balken.style.backgroundColor = "transparent";
|
||||
return;
|
||||
}
|
||||
|
||||
const prozent = zahl;
|
||||
let note;
|
||||
|
||||
if (prozent >= 90) note = "sehr gut";
|
||||
else if (prozent >= 75) note = "gut";
|
||||
else if (prozent >= 60) note = "befriedigend";
|
||||
else if (prozent >= 50) note = "ausreichend";
|
||||
else note = "nicht bestanden";
|
||||
|
||||
ergebnis.textContent = `Punkte: ${zahl} (${prozent}%) – Note: ${note}`;
|
||||
|
||||
// Balken aktualisieren
|
||||
balken.style.width = prozent + "%";
|
||||
|
||||
if (prozent >= 75) balken.style.backgroundColor = "green";
|
||||
else if (prozent >= 50) balken.style.backgroundColor = "orange";
|
||||
else balken.style.backgroundColor = "red";
|
||||
}
|
||||
|
||||
if (button) {
|
||||
button.addEventListener("click", berechneNote);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -19,8 +19,9 @@
|
|||
<li><a href="notenrechner.html" class="active">Notenrechner</a></li>
|
||||
|
||||
</ul>
|
||||
<button id="darkmode-toggle" class="darkmode-button">🌙 Dark Mode</button>
|
||||
</nav>
|
||||
<button id="darkmode-toggle" class="darkmode-button">🌙 Dark Mode</button>
|
||||
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
|
|
|||
Loading…
Reference in a new issue