Add exercises (Notenrechner, Textanalyse) and Dark Mode feature with localStorage persistence
This commit is contained in:
DylanBarnes
parent
97c73490e7
commit
aecd16d906
17 changed files with 1201 additions and 6 deletions
201
css/notenrechner-dom.css
Normal file
201
css/notenrechner-dom.css
Normal file
|
|
@ -0,0 +1,201 @@
|
|||
/* ====================== GRADE CALCULATOR DOM STYLES ====================== */
|
||||
|
||||
.grade-form {
|
||||
background: #f5f5f5;
|
||||
padding: 2rem;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
border: 2px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
|
||||
}
|
||||
|
||||
.form-input.error {
|
||||
border-color: #ef4444;
|
||||
background-color: #fee2e2;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
display: block;
|
||||
color: #ef4444;
|
||||
font-size: 0.875rem;
|
||||
margin-top: 0.5rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
#calculateBtn {
|
||||
width: 100%;
|
||||
padding: 0.75rem 1.5rem;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
#calculateBtn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
#calculateBtn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Result Container */
|
||||
.result-container {
|
||||
background: linear-gradient(135deg, #f0f4ff 0%, #f5f0ff 100%);
|
||||
padding: 2rem;
|
||||
border-radius: 8px;
|
||||
border-left: 4px solid #667eea;
|
||||
}
|
||||
|
||||
.result-container h3 {
|
||||
color: #1e293b;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
#resultText {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: #1e293b;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
/* Progress Bar */
|
||||
.progress-bar-container {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
background: #e2e8f0;
|
||||
border-radius: 15px;
|
||||
overflow: hidden;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%);
|
||||
border-radius: 15px;
|
||||
transition: width 0.5s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding-right: 0.5rem;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.progress-bar.ausreichend {
|
||||
background: linear-gradient(90deg, #eab308 0%, #ca8a04 100%);
|
||||
}
|
||||
|
||||
.progress-bar.befriedigend {
|
||||
background: linear-gradient(90deg, #f97316 0%, #d97706 100%);
|
||||
}
|
||||
|
||||
.progress-bar.nicht-bestanden {
|
||||
background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%);
|
||||
}
|
||||
|
||||
.percentage-text {
|
||||
color: #666;
|
||||
font-size: 0.9rem;
|
||||
margin-top: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Dark Mode Adjustments */
|
||||
body.dark .grade-form {
|
||||
background: #2d3748;
|
||||
}
|
||||
|
||||
body.dark .form-group label {
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
body.dark .form-input {
|
||||
background: #1a202c;
|
||||
color: #e2e8f0;
|
||||
border-color: #4a5568;
|
||||
}
|
||||
|
||||
body.dark .form-input:focus {
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
|
||||
}
|
||||
|
||||
body.dark .form-input.error {
|
||||
background: #742a2a;
|
||||
border-color: #ef4444;
|
||||
}
|
||||
|
||||
body.dark .error-message {
|
||||
color: #fca5a5;
|
||||
}
|
||||
|
||||
body.dark .result-container {
|
||||
background: linear-gradient(135deg, #1e3a4d 0%, #2a1f4d 100%);
|
||||
border-left-color: #667eea;
|
||||
}
|
||||
|
||||
body.dark .result-container h3 {
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
body.dark #resultText {
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
body.dark .progress-bar-container {
|
||||
background: #4a5568;
|
||||
}
|
||||
|
||||
body.dark .percentage-text {
|
||||
color: #a0aec0;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.grade-form {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.result-container {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
#resultText {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.progress-bar-container {
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
341
css/style.css
341
css/style.css
|
|
@ -70,6 +70,19 @@ header {
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-menu li {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Dropdown menu styles */
|
||||
.nav-menu li ul {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-menu li:hover ul {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav-menu a {
|
||||
text-decoration: none;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
|
|
@ -860,4 +873,332 @@ footer {
|
|||
|
||||
.galerie img:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* ====================== DARK MODE ====================== */
|
||||
|
||||
#dark-mode-toggle {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: white;
|
||||
border: 2px solid rgba(255, 255, 255, 0.5);
|
||||
padding: 0.6rem 1.2rem;
|
||||
border-radius: 20px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
#dark-mode-toggle:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
body.dark {
|
||||
background-color: #1e293b;
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
body.dark header {
|
||||
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
|
||||
}
|
||||
|
||||
body.dark .nav-menu a {
|
||||
color: rgba(226, 232, 240, 0.8);
|
||||
}
|
||||
|
||||
body.dark .nav-menu a:hover {
|
||||
background: rgba(226, 232, 240, 0.1);
|
||||
color: white;
|
||||
}
|
||||
|
||||
body.dark .nav-menu a.active {
|
||||
background: rgba(102, 126, 234, 0.3);
|
||||
}
|
||||
|
||||
body.dark nav {
|
||||
border-color: #334155;
|
||||
}
|
||||
|
||||
body.dark a {
|
||||
color: #60a5fa;
|
||||
}
|
||||
|
||||
body.dark a:hover {
|
||||
color: #93c5fd;
|
||||
}
|
||||
|
||||
body.dark main {
|
||||
background-color: #1e293b;
|
||||
}
|
||||
|
||||
body.dark .hero {
|
||||
background: linear-gradient(135deg, rgba(30, 41, 59, 0.5) 0%, rgba(15, 23, 42, 0.5) 100%);
|
||||
}
|
||||
|
||||
body.dark .hero h1 {
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
body.dark .hero p {
|
||||
color: #a0aec0;
|
||||
}
|
||||
|
||||
body.dark .page-header {
|
||||
background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.8) 100%);
|
||||
border-left-color: #667eea;
|
||||
}
|
||||
|
||||
body.dark .page-header h1 {
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
body.dark .page-header p {
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
body.dark .content-section {
|
||||
background: #334155;
|
||||
color: #e2e8f0;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
body.dark .content-section h2 {
|
||||
color: #e2e8f0;
|
||||
border-bottom-color: #667eea;
|
||||
}
|
||||
|
||||
body.dark .content-section h3 {
|
||||
color: #cbd5e1;
|
||||
}
|
||||
|
||||
body.dark .content-section p {
|
||||
color: #a0aec0;
|
||||
}
|
||||
|
||||
body.dark .content-section li {
|
||||
color: #a0aec0;
|
||||
}
|
||||
|
||||
body.dark .feature-card {
|
||||
background: linear-gradient(135deg, #2d3e5f 0%, #1e3a4d 100%);
|
||||
border-left-color: #667eea;
|
||||
}
|
||||
|
||||
body.dark .feature-card h3 {
|
||||
color: #60a5fa;
|
||||
}
|
||||
|
||||
body.dark .feature-card p {
|
||||
color: #a0aec0;
|
||||
}
|
||||
|
||||
body.dark .btn {
|
||||
color: white;
|
||||
}
|
||||
|
||||
body.dark .btn-primary {
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
|
||||
}
|
||||
|
||||
body.dark .btn-secondary {
|
||||
background: #334155;
|
||||
color: #60a5fa;
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
body.dark .btn-secondary:hover {
|
||||
background: #475569;
|
||||
}
|
||||
|
||||
body.dark .cta-section {
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
|
||||
}
|
||||
|
||||
body.dark .cta-section h2 {
|
||||
color: white;
|
||||
}
|
||||
|
||||
body.dark .tech-card {
|
||||
background: #334155;
|
||||
border-color: #475569;
|
||||
}
|
||||
|
||||
body.dark .tech-card:hover {
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
|
||||
}
|
||||
|
||||
body.dark .tech-card h3 {
|
||||
color: #60a5fa;
|
||||
}
|
||||
|
||||
body.dark .tech-card li {
|
||||
color: #a0aec0;
|
||||
}
|
||||
|
||||
body.dark .team-member {
|
||||
background: #334155;
|
||||
border-color: #475569;
|
||||
}
|
||||
|
||||
body.dark .team-member:hover {
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 8px 16px rgba(102, 126, 234, 0.15);
|
||||
}
|
||||
|
||||
body.dark .team-member h3 {
|
||||
color: #60a5fa;
|
||||
}
|
||||
|
||||
body.dark .team-member p {
|
||||
color: #a0aec0;
|
||||
}
|
||||
|
||||
body.dark .values-list li {
|
||||
background: #2d3e5f;
|
||||
border-left-color: #667eea;
|
||||
}
|
||||
|
||||
body.dark .values-list strong {
|
||||
color: #60a5fa;
|
||||
}
|
||||
|
||||
body.dark .feature-list li:before {
|
||||
color: #667eea;
|
||||
}
|
||||
|
||||
body.dark .learning-goals li:before {
|
||||
background: #667eea;
|
||||
}
|
||||
|
||||
body.dark .contact-info {
|
||||
background: #334155;
|
||||
border-color: #475569;
|
||||
}
|
||||
|
||||
body.dark .contact-info h3 {
|
||||
color: #60a5fa;
|
||||
}
|
||||
|
||||
body.dark .contact-info p {
|
||||
color: #a0aec0;
|
||||
}
|
||||
|
||||
body.dark .contact-form {
|
||||
background: #334155;
|
||||
border-color: #475569;
|
||||
}
|
||||
|
||||
body.dark .form-group label {
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
body.dark .form-group input,
|
||||
body.dark .form-group textarea {
|
||||
background: #1e293b;
|
||||
border-color: #475569;
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
body.dark .form-group input:focus,
|
||||
body.dark .form-group textarea:focus {
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
|
||||
}
|
||||
|
||||
body.dark .form-group.error input,
|
||||
body.dark .form-group.error textarea {
|
||||
border-color: #ef4444;
|
||||
}
|
||||
|
||||
body.dark .legal-content h3 {
|
||||
color: #60a5fa;
|
||||
}
|
||||
|
||||
body.dark footer {
|
||||
background: linear-gradient(135deg, #0f172a 0%, #0f172a 100%);
|
||||
border-top: 1px solid #334155;
|
||||
}
|
||||
|
||||
body.dark .footer-section h3 {
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
body.dark .footer-section a {
|
||||
color: #60a5fa;
|
||||
}
|
||||
|
||||
body.dark .footer-section a:hover {
|
||||
color: #93c5fd;
|
||||
}
|
||||
|
||||
body.dark .galerie img {
|
||||
border: 1px solid #475569;
|
||||
}
|
||||
|
||||
body.dark .exercise-card {
|
||||
background: #334155;
|
||||
border: 2px solid #475569;
|
||||
}
|
||||
|
||||
body.dark .exercise-card h2 {
|
||||
color: #e2e8f0;
|
||||
border-bottom-color: #667eea;
|
||||
}
|
||||
|
||||
body.dark .exercise-card p {
|
||||
color: #a0aec0;
|
||||
}
|
||||
|
||||
body.dark .exercise-card table {
|
||||
border-color: #475569;
|
||||
}
|
||||
|
||||
body.dark .exercise-card th,
|
||||
body.dark .exercise-card td {
|
||||
border-color: #475569;
|
||||
color: #a0aec0;
|
||||
}
|
||||
|
||||
body.dark .exercise-card th {
|
||||
background-color: #2d3e5f;
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
/* ====================== EXERCISE CARDS ====================== */
|
||||
|
||||
.exercise-card {
|
||||
background: white;
|
||||
border: 2px solid #e2e8f0;
|
||||
padding: 2rem;
|
||||
border-radius: 10px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.exercise-card:hover {
|
||||
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
.exercise-card h2 {
|
||||
color: #0f172a;
|
||||
border-bottom: 3px solid #667eea;
|
||||
padding-bottom: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.exercise-card p {
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.exercise-card ul {
|
||||
margin-left: 1.5rem;
|
||||
}
|
||||
|
||||
.exercise-card table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
|
@ -18,10 +18,20 @@
|
|||
<ul class="nav-menu">
|
||||
<li><a href="index.html">Start</a></li>
|
||||
<li><a href="ueber_uns.html">Über uns</a></li>
|
||||
<li><a href="team.html">Team</a></li>
|
||||
<li><a href="eis_projekt.html" class="active">Projekt</a></li>
|
||||
<li><a href="kontakt.html">Kontakt</a></li>
|
||||
<li><a href="impressum.html">Impressum</a></li>
|
||||
<li style="position: relative;">
|
||||
<a href="#" style="padding: 0.4rem 0.8rem;">Übungen ▼</a>
|
||||
<ul style="position: absolute; top: 100%; left: 0; background: rgba(0, 0, 0, 0.1); border-radius: 8px; min-width: 200px; list-style: none; padding: 0.5rem 0; margin: 0.5rem 0 0 0; display: none;">
|
||||
<li><a href="notenrechner.html" style="display: block; padding: 0.5rem 1rem; white-space: nowrap;">Notenrechner</a></li>
|
||||
<li><a href="textanalyse.html" style="display: block; padding: 0.5rem 1rem; white-space: nowrap;">Textanalyse</a></li>
|
||||
<li><a href="notenrechner-dom.html" style="display: block; padding: 0.5rem 1rem; white-space: nowrap;">Notenrechner (DOM)</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="assets/projektinfo.pdf" download class="btn-download">PDF ↓</a></li>
|
||||
<li><button id="dark-mode-toggle">🌙 Dark Mode</button></li>
|
||||
</ul>
|
||||
<div class="hamburger">
|
||||
<span></span>
|
||||
|
|
|
|||
BIN
img/dylanAvatar.webp
Normal file
BIN
img/dylanAvatar.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.5 KiB |
BIN
img/leonAvatar.webp
Normal file
BIN
img/leonAvatar.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6 KiB |
|
|
@ -18,10 +18,20 @@
|
|||
<ul class="nav-menu">
|
||||
<li><a href="index.html">Start</a></li>
|
||||
<li><a href="ueber_uns.html">Über uns</a></li>
|
||||
<li><a href="team.html">Team</a></li>
|
||||
<li><a href="eis_projekt.html">Projekt</a></li>
|
||||
<li><a href="kontakt.html">Kontakt</a></li>
|
||||
<li><a href="impressum.html" class="active">Impressum</a></li>
|
||||
<li style="position: relative;">
|
||||
<a href="#" style="padding: 0.4rem 0.8rem;">Übungen ▼</a>
|
||||
<ul style="position: absolute; top: 100%; left: 0; background: rgba(0, 0, 0, 0.1); border-radius: 8px; min-width: 200px; list-style: none; padding: 0.5rem 0; margin: 0.5rem 0 0 0; display: none;">
|
||||
<li><a href="notenrechner.html" style="display: block; padding: 0.5rem 1rem; white-space: nowrap;">Notenrechner</a></li>
|
||||
<li><a href="textanalyse.html" style="display: block; padding: 0.5rem 1rem; white-space: nowrap;">Textanalyse</a></li>
|
||||
<li><a href="notenrechner-dom.html" style="display: block; padding: 0.5rem 1rem; white-space: nowrap;">Notenrechner (DOM)</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="assets/projektinfo.pdf" download class="btn-download">PDF ↓</a></li>
|
||||
<li><button id="dark-mode-toggle">🌙 Dark Mode</button></li>
|
||||
</ul>
|
||||
<div class="hamburger">
|
||||
<span></span>
|
||||
|
|
@ -45,8 +55,8 @@
|
|||
<div class="legal-content">
|
||||
<h3>Inhaltlich Verantwortliche</h3>
|
||||
<p>
|
||||
<strong>Name:</strong> [Hier Namen der Studierenden einfügen]<br>
|
||||
<strong>E-Mail:</strong> <a href="mailto:info@beispiel.de">info@beispiel.de</a><br>
|
||||
<strong>Name:</strong> Dylan Barnes & Leon Walter <br>
|
||||
<strong>E-Mail:</strong> <a href="mailto:info@beispiel.de">dylan.barnes-weiland@stud.ph-weingarten.de</a><br>
|
||||
<strong>Telefon:</strong> <a href="tel:+49123456789">+49 123 456789</a>
|
||||
</p>
|
||||
|
||||
|
|
|
|||
12
index.html
12
index.html
|
|
@ -14,7 +14,7 @@
|
|||
<header>
|
||||
<nav class="navbar">
|
||||
<div class="nav-container">
|
||||
<div class="logo">EIS Mayonaize Projekt</div>
|
||||
<div class="logo">EIS Projekt</div>
|
||||
<ul class="nav-menu">
|
||||
<li><a href="index.html" class="active">Start</a></li>
|
||||
<li><a href="ueber_uns.html">Über uns</a></li>
|
||||
|
|
@ -22,7 +22,16 @@
|
|||
<li><a href="eis_projekt.html">Projekt</a></li>
|
||||
<li><a href="kontakt.html">Kontakt</a></li>
|
||||
<li><a href="impressum.html">Impressum</a></li>
|
||||
<li style="position: relative;">
|
||||
<a href="#" style="padding: 0.4rem 0.8rem;">Übungen ▼</a>
|
||||
<ul style="position: absolute; top: 100%; left: 0; background: rgba(0, 0, 0, 0.1); border-radius: 8px; min-width: 200px; list-style: none; padding: 0.5rem 0; margin: 0.5rem 0 0 0; display: none;">
|
||||
<li><a href="notenrechner.html" style="display: block; padding: 0.5rem 1rem; white-space: nowrap;">Notenrechner</a></li>
|
||||
<li><a href="textanalyse.html" style="display: block; padding: 0.5rem 1rem; white-space: nowrap;">Textanalyse</a></li>
|
||||
<li><a href="notenrechner-dom.html" style="display: block; padding: 0.5rem 1rem; white-space: nowrap;">Notenrechner (DOM)</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="assets/projektinfo.pdf" download class="btn-download">PDF ↓</a></li>
|
||||
<li><button id="dark-mode-toggle">🌙 Dark Mode</button></li>
|
||||
</ul>
|
||||
<div class="hamburger">
|
||||
<span></span>
|
||||
|
|
@ -81,6 +90,7 @@
|
|||
<ul>
|
||||
<li><a href="impressum.html">Impressum</a></li>
|
||||
<li><a href="ueber_uns.html">Über uns</a></li>
|
||||
<li><a href="team.html">Team</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
|
|
|
|||
149
js/notenrechner-dom.js
Normal file
149
js/notenrechner-dom.js
Normal file
|
|
@ -0,0 +1,149 @@
|
|||
// ====================== AUFGABE 3: NOTENRECHNER DOM-VERSION ======================
|
||||
|
||||
/**
|
||||
* Berechnet die Note basierend auf der Prozentpunktzahl
|
||||
* @param {number} prozentsatz - Der Prozentsatz (0-100)
|
||||
* @returns {string} Die entsprechende Note als Text
|
||||
*/
|
||||
function berechneNoteDom(prozentsatz) {
|
||||
if (prozentsatz >= 90) {
|
||||
return "sehr gut";
|
||||
} else if (prozentsatz >= 75) {
|
||||
return "gut";
|
||||
} else if (prozentsatz >= 60) {
|
||||
return "befriedigend";
|
||||
} else if (prozentsatz >= 50) {
|
||||
return "ausreichend";
|
||||
} else {
|
||||
return "nicht bestanden";
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Gibt die Farbe basierend auf der Note zurück
|
||||
* @param {string} note - Die Note
|
||||
* @returns {string} Der CSS-Klassennamen für die Farbe
|
||||
*/
|
||||
function getFarbeKlasse(note) {
|
||||
switch (note) {
|
||||
case "sehr gut":
|
||||
case "gut":
|
||||
return "";
|
||||
case "befriedigend":
|
||||
return "befriedigend";
|
||||
case "ausreichend":
|
||||
return "ausreichend";
|
||||
case "nicht bestanden":
|
||||
return "nicht-bestanden";
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialisiert den Notenrechner und registriert Event Listener
|
||||
*/
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const form = document.getElementById("notenForm");
|
||||
const calculateBtn = document.getElementById("calculateBtn");
|
||||
const inputField = document.getElementById("punkte");
|
||||
const errorMessage = document.getElementById("errorMessage");
|
||||
const resultatDiv = document.getElementById("ergebnis");
|
||||
const resultText = document.getElementById("resultText");
|
||||
const progressBar = document.getElementById("progressBar");
|
||||
const percentageText = document.getElementById("percentageText");
|
||||
|
||||
if (!form || !calculateBtn) {
|
||||
return; // Nur auf notenrechner-dom.html verfügbar
|
||||
}
|
||||
|
||||
/**
|
||||
* Validiert die Eingabe
|
||||
* @returns {boolean} true wenn die Eingabe gültig ist, sonst false
|
||||
*/
|
||||
function validateInput() {
|
||||
const value = inputField.value.trim();
|
||||
|
||||
// Prüfung: Ist das Feld leer?
|
||||
if (value === "") {
|
||||
errorMessage.textContent = "Fehler: Bitte geben Sie eine Punktzahl ein.";
|
||||
inputField.classList.add("error");
|
||||
inputField.style.borderColor = "red";
|
||||
return false;
|
||||
}
|
||||
|
||||
// Prüfung: Ist es eine Zahl?
|
||||
const punkte = parseFloat(value);
|
||||
if (isNaN(punkte)) {
|
||||
errorMessage.textContent = "Fehler: Bitte geben Sie eine gültige Zahl ein.";
|
||||
inputField.classList.add("error");
|
||||
inputField.style.borderColor = "red";
|
||||
return false;
|
||||
}
|
||||
|
||||
// Prüfung: Ist die Zahl zwischen 0 und 100?
|
||||
if (punkte < 0 || punkte > 100) {
|
||||
errorMessage.textContent = "Fehler: Die Punktzahl muss zwischen 0 und 100 liegen.";
|
||||
inputField.classList.add("error");
|
||||
inputField.style.borderColor = "red";
|
||||
return false;
|
||||
}
|
||||
|
||||
// Validierung erfolgreich
|
||||
errorMessage.textContent = "";
|
||||
inputField.classList.remove("error");
|
||||
inputField.style.borderColor = "";
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Berechnet die Note und zeigt das Ergebnis an
|
||||
*/
|
||||
function calculateGrade() {
|
||||
if (!validateInput()) {
|
||||
resultatDiv.style.display = "none";
|
||||
return;
|
||||
}
|
||||
|
||||
const punkte = parseFloat(inputField.value);
|
||||
const note = berechneNoteDom(punkte);
|
||||
const farbeKlasse = getFarbeKlasse(note);
|
||||
|
||||
// Ergebnis anzeigen
|
||||
resultText.textContent = `${punkte} Punkte = ${note}`;
|
||||
|
||||
// Progress Bar aktualisieren
|
||||
progressBar.style.width = `${punkte}%`;
|
||||
progressBar.textContent = `${punkte}%`;
|
||||
progressBar.className = `progress-bar ${farbeKlasse}`;
|
||||
|
||||
// Prozentsatz-Text aktualisieren
|
||||
percentageText.textContent = `${punkte}% erreicht`;
|
||||
|
||||
// Resultat-Container anzeigen
|
||||
resultatDiv.style.display = "block";
|
||||
}
|
||||
|
||||
// Event Listener: Button Click
|
||||
calculateBtn.addEventListener("click", (e) => {
|
||||
e.preventDefault();
|
||||
calculateGrade();
|
||||
});
|
||||
|
||||
// Event Listener: Enter-Taste
|
||||
inputField.addEventListener("keypress", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
calculateGrade();
|
||||
}
|
||||
});
|
||||
|
||||
// Event Listener: Input ändern (Fehler löschen)
|
||||
inputField.addEventListener("input", () => {
|
||||
if (inputField.value.trim() !== "") {
|
||||
errorMessage.textContent = "";
|
||||
inputField.classList.remove("error");
|
||||
inputField.style.borderColor = "";
|
||||
}
|
||||
});
|
||||
});
|
||||
75
js/notenrechner.js
Normal file
75
js/notenrechner.js
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
// ====================== AUFGABE 1: NOTENRECHNER ======================
|
||||
|
||||
/**
|
||||
* Berechnet die Note basierend auf der Punktzahl
|
||||
* @param {number} punkte - Die erreichte Punktzahl
|
||||
* @returns {string} Die entsprechende Note als Text
|
||||
*/
|
||||
function berechneNote(punkte) {
|
||||
if (punkte >= 90) {
|
||||
return "sehr gut";
|
||||
} else if (punkte >= 75) {
|
||||
return "gut";
|
||||
} else if (punkte >= 60) {
|
||||
return "befriedigend";
|
||||
} else if (punkte >= 50) {
|
||||
return "ausreichend";
|
||||
} else {
|
||||
return "nicht bestanden";
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Startet den interaktiven Notenrechner
|
||||
* Fragt nach Punktzahl und maximaler Punktzahl
|
||||
*/
|
||||
function startNotenrechner() {
|
||||
// Punkte abfragen
|
||||
const punkteInput = prompt("Geben Sie Ihre Punktzahl ein:");
|
||||
|
||||
// Prüfung auf Abbruch oder leere Eingabe
|
||||
if (punkteInput === null || punkteInput.trim() === "") {
|
||||
alert("Abgebrochen.");
|
||||
return;
|
||||
}
|
||||
|
||||
const punkte = parseFloat(punkteInput);
|
||||
|
||||
// Validierung: Zahl
|
||||
if (isNaN(punkte)) {
|
||||
alert("Fehler: Bitte geben Sie eine gültige Zahl ein!");
|
||||
return;
|
||||
}
|
||||
|
||||
// Maximale Punktzahl abfragen
|
||||
const maxPunkteInput = prompt("Geben Sie die maximale Punktzahl ein:");
|
||||
|
||||
// Prüfung auf Abbruch oder leere Eingabe
|
||||
if (maxPunkteInput === null || maxPunkteInput.trim() === "") {
|
||||
alert("Abgebrochen.");
|
||||
return;
|
||||
}
|
||||
|
||||
const maxPunkte = parseFloat(maxPunkteInput);
|
||||
|
||||
// Validierung: Zahl
|
||||
if (isNaN(maxPunkte) || maxPunkte <= 0) {
|
||||
alert("Fehler: Bitte geben Sie eine gültige Zahl ein!");
|
||||
return;
|
||||
}
|
||||
|
||||
// Prozentsatz berechnen
|
||||
const prozentsatz = (punkte / maxPunkte) * 100;
|
||||
|
||||
// Note berechnen (basierend auf Prozentsatz)
|
||||
const note = berechneNote(prozentsatz);
|
||||
|
||||
// Ergebnis formatieren
|
||||
const ergebnis = `${punkte} von ${maxPunkte} Punkten (${prozentsatz.toFixed(2)}%) = ${note}`;
|
||||
|
||||
// Ausgabe auf Konsole
|
||||
console.log(ergebnis);
|
||||
|
||||
// Ausgabe als Alert
|
||||
alert(ergebnis);
|
||||
}
|
||||
25
js/script.js
25
js/script.js
|
|
@ -282,4 +282,27 @@ document.querySelectorAll('.content-section').forEach(section => {
|
|||
// ====================== UTILITY: CONSOLE MESSAGE ======================
|
||||
|
||||
console.log('%c🎉 Welcome to EIS Project!', 'color: #2563eb; font-size: 20px; font-weight: bold;');
|
||||
console.log('%cThis website is a learning project for interactive software development at PH Weingarten.', 'color: #475569; font-size: 14px;');
|
||||
console.log('%cThis website is a learning project for interactive software development at PH Weingarten.', 'color: #475569; font-size: 14px;');
|
||||
|
||||
// ====================== DARK MODE TOGGLE ======================
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const toggle = document.getElementById("dark-mode-toggle");
|
||||
|
||||
if (!toggle) return;
|
||||
|
||||
// Beim Laden: gespeicherten Zustand wiederherstellen
|
||||
if (localStorage.getItem("darkMode") === "true") {
|
||||
document.body.classList.add("dark");
|
||||
toggle.textContent = "☀️ Light Mode";
|
||||
}
|
||||
|
||||
// Beim Klick: Zustand umschalten und speichern
|
||||
toggle.addEventListener("click", (e) => {
|
||||
e.preventDefault();
|
||||
document.body.classList.toggle("dark");
|
||||
const isDark = document.body.classList.contains("dark");
|
||||
localStorage.setItem("darkMode", isDark);
|
||||
toggle.textContent = isDark ? "☀️ Light Mode" : "🌙 Dark Mode";
|
||||
});
|
||||
});
|
||||
52
js/textanalyse.js
Normal file
52
js/textanalyse.js
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
// ====================== AUFGABE 2: TEXTANALYSE ======================
|
||||
|
||||
/**
|
||||
* Analysiert einen gegebenen Text
|
||||
* @param {string} text - Der zu analysierende Text
|
||||
* @returns {string} Ein formatierter String mit den Analyseergebnissen (oder Fehlermeldung)
|
||||
*/
|
||||
function analyseText(text) {
|
||||
// Prüfung: Ist der Text leer?
|
||||
if (text.trim() === "") {
|
||||
return "Fehler: Der Text darf nicht leer sein!";
|
||||
}
|
||||
|
||||
// Berechnung
|
||||
const anzahlZeichen = text.length;
|
||||
const anzahlWoerter = text.split(" ").length;
|
||||
const grossbuchstaben = text.toUpperCase();
|
||||
|
||||
// Ergebnis als Template Literal formatieren
|
||||
return `
|
||||
Textanalyse:
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
Anzahl der Zeichen: ${anzahlZeichen}
|
||||
Anzahl der Wörter: ${anzahlWoerter}
|
||||
Großbuchstaben: ${grossbuchstaben}
|
||||
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
|
||||
`.trim();
|
||||
}
|
||||
|
||||
/**
|
||||
* Startet die interaktive Textanalyse
|
||||
* Fragt den Benutzer nach einem Text und gibt die Analyse aus
|
||||
*/
|
||||
function startTextanalyse() {
|
||||
// Text abfragen
|
||||
const text = prompt("Geben Sie einen Text ein:");
|
||||
|
||||
// Prüfung auf Abbruch
|
||||
if (text === null) {
|
||||
alert("Abgebrochen.");
|
||||
return;
|
||||
}
|
||||
|
||||
// Text analysieren
|
||||
const ergebnis = analyseText(text);
|
||||
|
||||
// Ausgabe auf Konsole
|
||||
console.log(ergebnis);
|
||||
|
||||
// Ausgabe als Alert
|
||||
alert(ergebnis);
|
||||
}
|
||||
13
kontakt.html
13
kontakt.html
|
|
@ -10,18 +10,27 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<nav class="navbar">
|
||||
<div class="nav-container">
|
||||
<div class="logo">fuckshitstack</div>
|
||||
<div class="logo">EIS Projekt</div>
|
||||
<ul class="nav-menu">
|
||||
<li><a href="index.html">Start</a></li>
|
||||
<li><a href="ueber_uns.html">Über uns</a></li>
|
||||
<li><a href="team.html">Team</a></li>
|
||||
<li><a href="eis_projekt.html">Projekt</a></li>
|
||||
<li><a href="kontakt.html" class="active">Kontakt</a></li>
|
||||
<li><a href="impressum.html">Impressum</a></li>
|
||||
<li style="position: relative;">
|
||||
<a href="#" style="padding: 0.4rem 0.8rem;">Übungen ▼</a>
|
||||
<ul style="position: absolute; top: 100%; left: 0; background: rgba(0, 0, 0, 0.1); border-radius: 8px; min-width: 200px; list-style: none; padding: 0.5rem 0; margin: 0.5rem 0 0 0; display: none;">
|
||||
<li><a href="notenrechner.html" style="display: block; padding: 0.5rem 1rem; white-space: nowrap;">Notenrechner</a></li>
|
||||
<li><a href="textanalyse.html" style="display: block; padding: 0.5rem 1rem; white-space: nowrap;">Textanalyse</a></li>
|
||||
<li><a href="notenrechner-dom.html" style="display: block; padding: 0.5rem 1rem; white-space: nowrap;">Notenrechner (DOM)</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="assets/projektinfo.pdf" download class="btn-download">PDF ↓</a></li>
|
||||
<li><button id="dark-mode-toggle">🌙 Dark Mode</button></li>
|
||||
</ul>
|
||||
<div class="hamburger">
|
||||
<span></span>
|
||||
|
|
|
|||
118
notenrechner-dom.html
Normal file
118
notenrechner-dom.html
Normal file
|
|
@ -0,0 +1,118 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Notenrechner DOM - EIS Projekt</title>
|
||||
<link rel="icon" href="img/favicon.png" type="image/png">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<link rel="stylesheet" href="css/notenrechner-dom.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<nav class="navbar">
|
||||
<div class="nav-container">
|
||||
<div class="logo">EIS Projekt</div>
|
||||
<ul class="nav-menu">
|
||||
<li><a href="index.html">Start</a></li>
|
||||
<li><a href="ueber_uns.html">Über uns</a></li>
|
||||
<li><a href="team.html">Team</a></li>
|
||||
<li><a href="eis_projekt.html">Projekt</a></li>
|
||||
<li><a href="kontakt.html">Kontakt</a></li>
|
||||
<li><a href="impressum.html">Impressum</a></li>
|
||||
<li><a href="assets/projektinfo.pdf" download class="btn-download">PDF ↓</a></li>
|
||||
</ul>
|
||||
<div class="hamburger">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="content-section">
|
||||
<div class="container">
|
||||
<h1>Notenrechner DOM-Version (Aufgabe 3)</h1>
|
||||
<p>Ein interaktiver Notenrechner direkt auf der Webseite – ohne prompt() und alert().</p>
|
||||
|
||||
<div class="exercise-card">
|
||||
<h2>Punkte eingeben und Note berechnen</h2>
|
||||
|
||||
<form id="notenForm" class="grade-form">
|
||||
<div class="form-group">
|
||||
<label for="punkte">Punktzahl (0-100):</label>
|
||||
<input
|
||||
type="number"
|
||||
id="punkte"
|
||||
name="punkte"
|
||||
min="0"
|
||||
max="100"
|
||||
placeholder="z.B. 85"
|
||||
class="form-input"
|
||||
>
|
||||
<span id="errorMessage" class="error-message"></span>
|
||||
</div>
|
||||
|
||||
<button type="button" id="calculateBtn" class="btn">Berechnen</button>
|
||||
</form>
|
||||
|
||||
<div id="ergebnis" class="result-container" style="display: none;">
|
||||
<h3>Ergebnis</h3>
|
||||
<p id="resultText"></p>
|
||||
<div class="progress-bar-container">
|
||||
<div id="progressBar" class="progress-bar"></div>
|
||||
</div>
|
||||
<p id="percentageText" class="percentage-text"></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="exercise-card" style="margin-top: 2rem;">
|
||||
<h2>Notenskala</h2>
|
||||
<table style="width: 100%; border-collapse: collapse;">
|
||||
<tr style="background-color: #f0f0f0;">
|
||||
<th style="border: 1px solid #ddd; padding: 0.5rem;">Punkte</th>
|
||||
<th style="border: 1px solid #ddd; padding: 0.5rem;">Note</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="border: 1px solid #ddd; padding: 0.5rem;">90–100</td>
|
||||
<td style="border: 1px solid #ddd; padding: 0.5rem;">🟢 Sehr gut</td>
|
||||
</tr>
|
||||
<tr style="background-color: #f9f9f9;">
|
||||
<td style="border: 1px solid #ddd; padding: 0.5rem;">75–89</td>
|
||||
<td style="border: 1px solid #ddd; padding: 0.5rem;">🟢 Gut</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="border: 1px solid #ddd; padding: 0.5rem;">60–74</td>
|
||||
<td style="border: 1px solid #ddd; padding: 0.5rem;">🟡 Befriedigend</td>
|
||||
</tr>
|
||||
<tr style="background-color: #f9f9f9;">
|
||||
<td style="border: 1px solid #ddd; padding: 0.5rem;">50–59</td>
|
||||
<td style="border: 1px solid #ddd; padding: 0.5rem;">🟡 Ausreichend</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="border: 1px solid #ddd; padding: 0.5rem;">Unter 50</td>
|
||||
<td style="border: 1px solid #ddd; padding: 0.5rem;">🔴 Nicht bestanden</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="footer-content">
|
||||
<p>© 2026 EIS Projekt. Alle Rechte vorbehalten.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/notenrechner-dom.js"></script>
|
||||
<script src="js/script.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
96
notenrechner.html
Normal file
96
notenrechner.html
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Notenrechner - EIS Projekt</title>
|
||||
<link rel="icon" href="img/favicon.png" type="image/png">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<nav class="navbar">
|
||||
<div class="nav-container">
|
||||
<div class="logo">EIS Projekt</div>
|
||||
<ul class="nav-menu">
|
||||
<li><a href="index.html">Start</a></li>
|
||||
<li><a href="ueber_uns.html">Über uns</a></li>
|
||||
<li><a href="team.html">Team</a></li>
|
||||
<li><a href="eis_projekt.html">Projekt</a></li>
|
||||
<li><a href="kontakt.html">Kontakt</a></li>
|
||||
<li><a href="impressum.html">Impressum</a></li>
|
||||
<li><a href="assets/projektinfo.pdf" download class="btn-download">PDF ↓</a></li>
|
||||
</ul>
|
||||
<div class="hamburger">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="content-section">
|
||||
<div class="container">
|
||||
<h1>Notenrechner (Aufgabe 1)</h1>
|
||||
<p>Ein einfacher Notenrechner, der Punkte in Noten umrechnet.</p>
|
||||
|
||||
<div class="exercise-card">
|
||||
<h2>Notenrechner mit prompt() und alert()</h2>
|
||||
<p>Klicken Sie auf den Button, um den Notenrechner zu starten:</p>
|
||||
<button onclick="startNotenrechner()" class="btn">Notenrechner starten</button>
|
||||
<p style="margin-top: 1rem; font-size: 0.9rem; color: #666;">
|
||||
Das Programm fragt Sie nach Ihrer Punktzahl und der maximalen Punktzahl,
|
||||
berechnet den Prozentsatz und gibt die entsprechende Note aus.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="exercise-card" style="margin-top: 2rem;">
|
||||
<h2>Notenskala</h2>
|
||||
<table style="width: 100%; border-collapse: collapse;">
|
||||
<tr style="background-color: #f0f0f0;">
|
||||
<th style="border: 1px solid #ddd; padding: 0.5rem;">Punkte</th>
|
||||
<th style="border: 1px solid #ddd; padding: 0.5rem;">Note</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="border: 1px solid #ddd; padding: 0.5rem;">90–100</td>
|
||||
<td style="border: 1px solid #ddd; padding: 0.5rem;">Sehr gut</td>
|
||||
</tr>
|
||||
<tr style="background-color: #f9f9f9;">
|
||||
<td style="border: 1px solid #ddd; padding: 0.5rem;">75–89</td>
|
||||
<td style="border: 1px solid #ddd; padding: 0.5rem;">Gut</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="border: 1px solid #ddd; padding: 0.5rem;">60–74</td>
|
||||
<td style="border: 1px solid #ddd; padding: 0.5rem;">Befriedigend</td>
|
||||
</tr>
|
||||
<tr style="background-color: #f9f9f9;">
|
||||
<td style="border: 1px solid #ddd; padding: 0.5rem;">50–59</td>
|
||||
<td style="border: 1px solid #ddd; padding: 0.5rem;">Ausreichend</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td style="border: 1px solid #ddd; padding: 0.5rem;">Unter 50</td>
|
||||
<td style="border: 1px solid #ddd; padding: 0.5rem;">Nicht bestanden</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="footer-content">
|
||||
<p>© 2026 EIS Projekt. Alle Rechte vorbehalten.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/notenrechner.js"></script>
|
||||
<script src="js/script.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -153,7 +153,16 @@
|
|||
<li><a href="eis_projekt.html">Projekt</a></li>
|
||||
<li><a href="kontakt.html">Kontakt</a></li>
|
||||
<li><a href="impressum.html">Impressum</a></li>
|
||||
<li style="position: relative;">
|
||||
<a href="#" style="padding: 0.4rem 0.8rem;">Übungen ▼</a>
|
||||
<ul style="position: absolute; top: 100%; left: 0; background: rgba(0, 0, 0, 0.1); border-radius: 8px; min-width: 200px; list-style: none; padding: 0.5rem 0; margin: 0.5rem 0 0 0; display: none;">
|
||||
<li><a href="notenrechner.html" style="display: block; padding: 0.5rem 1rem; white-space: nowrap;">Notenrechner</a></li>
|
||||
<li><a href="textanalyse.html" style="display: block; padding: 0.5rem 1rem; white-space: nowrap;">Textanalyse</a></li>
|
||||
<li><a href="notenrechner-dom.html" style="display: block; padding: 0.5rem 1rem; white-space: nowrap;">Notenrechner (DOM)</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="assets/projektinfo.pdf" download class="btn-download">PDF ↓</a></li>
|
||||
<li><button id="dark-mode-toggle">🌙 Dark Mode</button></li>
|
||||
</ul>
|
||||
<div class="hamburger">
|
||||
<span></span>
|
||||
|
|
|
|||
82
textanalyse.html
Normal file
82
textanalyse.html
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Textanalyse - EIS Projekt</title>
|
||||
<link rel="icon" href="img/favicon.png" type="image/png">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<nav class="navbar">
|
||||
<div class="nav-container">
|
||||
<div class="logo">EIS Projekt</div>
|
||||
<ul class="nav-menu">
|
||||
<li><a href="index.html">Start</a></li>
|
||||
<li><a href="ueber_uns.html">Über uns</a></li>
|
||||
<li><a href="team.html">Team</a></li>
|
||||
<li><a href="eis_projekt.html">Projekt</a></li>
|
||||
<li><a href="kontakt.html">Kontakt</a></li>
|
||||
<li><a href="impressum.html">Impressum</a></li>
|
||||
<li><a href="assets/projektinfo.pdf" download class="btn-download">PDF ↓</a></li>
|
||||
</ul>
|
||||
<div class="hamburger">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="content-section">
|
||||
<div class="container">
|
||||
<h1>Textanalyse (Aufgabe 2)</h1>
|
||||
<p>Ein einfaches Tool zur Analyse von Texten.</p>
|
||||
|
||||
<div class="exercise-card">
|
||||
<h2>Text analysieren</h2>
|
||||
<p>Klicken Sie auf den Button, um einen Text zu analysieren:</p>
|
||||
<button onclick="startTextanalyse()" class="btn">Text analysieren</button>
|
||||
<p style="margin-top: 1rem; font-size: 0.9rem; color: #666;">
|
||||
Das Programm fragt Sie nach einem Text und zeigt dann:
|
||||
<ul style="margin-top: 0.5rem;">
|
||||
<li>Die Anzahl der Zeichen</li>
|
||||
<li>Die Anzahl der Wörter</li>
|
||||
<li>Den Text in Großbuchstaben</li>
|
||||
</ul>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="exercise-card" style="margin-top: 2rem;">
|
||||
<h2>Beispiel</h2>
|
||||
<p style="color: #666; font-style: italic;">
|
||||
Input: "Hallo Welt"<br>
|
||||
<br>
|
||||
Output:<br>
|
||||
Zeichen: 10<br>
|
||||
Wörter: 2<br>
|
||||
Großbuchstaben: HALLO WELT
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="footer-content">
|
||||
<p>© 2026 EIS Projekt. Alle Rechte vorbehalten.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="js/textanalyse.js"></script>
|
||||
<script src="js/script.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -18,10 +18,20 @@
|
|||
<ul class="nav-menu">
|
||||
<li><a href="index.html">Start</a></li>
|
||||
<li><a href="ueber_uns.html" class="active">Über uns</a></li>
|
||||
<li><a href="team.html">Team</a></li>
|
||||
<li><a href="eis_projekt.html">Projekt</a></li>
|
||||
<li><a href="kontakt.html">Kontakt</a></li>
|
||||
<li><a href="impressum.html">Impressum</a></li>
|
||||
<li style="position: relative;">
|
||||
<a href="#" style="padding: 0.4rem 0.8rem;">Übungen ▼</a>
|
||||
<ul style="position: absolute; top: 100%; left: 0; background: rgba(0, 0, 0, 0.1); border-radius: 8px; min-width: 200px; list-style: none; padding: 0.5rem 0; margin: 0.5rem 0 0 0; display: none;">
|
||||
<li><a href="notenrechner.html" style="display: block; padding: 0.5rem 1rem; white-space: nowrap;">Notenrechner</a></li>
|
||||
<li><a href="textanalyse.html" style="display: block; padding: 0.5rem 1rem; white-space: nowrap;">Textanalyse</a></li>
|
||||
<li><a href="notenrechner-dom.html" style="display: block; padding: 0.5rem 1rem; white-space: nowrap;">Notenrechner (DOM)</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="assets/projektinfo.pdf" download class="btn-download">PDF ↓</a></li>
|
||||
<li><button id="dark-mode-toggle">🌙 Dark Mode</button></li>
|
||||
</ul>
|
||||
<div class="hamburger">
|
||||
<span></span>
|
||||
|
|
|
|||
Loading…
Reference in a new issue