PBT3H24ADI/CSW-Projekt2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: PBT3H24ADI:aa75b485582be99c772ebb3f55929b3be91a1e6c
Branches Tags
PBT3H24ADI:main
...
compare: PBT3H24ADI:main
Branches Tags
PBT3H24ADI:main

6 Commits
aa75b48558 ... main

Author SHA1 Message Date
Kevin Dietze
eccc48ca25 readme.md hinzugefügt 2025-11-26 15:08:45 +01:00
PBT3H24ALE
8036316314 new commit 2025-11-26 21:00:41 +07:00
ily05ass
d71a866380 gg 2025-11-26 14:42:16 +01:00
ily05ass
81597a94d2 Merge branch 'main' of https://git.bib.de/PBT3H24ADI/CSW-Projekt2 2025-11-26 14:33:53 +01:00
ily05ass
21304b8925 Merge branch 'main' of https://git.bib.de/PBT3H24ADI/CSW-Projekt2 2025-11-26 14:28:19 +01:00
ily05ass
b1f289ba4f jackboys2 2025-11-26 14:27:47 +01:00
4 changed files with 105 additions and 38 deletions
Expand all files Collapse all files

4
Index.html
View File

@@ -11,13 +11,13 @@
<body> <body>
<header> <header>
Hasen-Simulator des Zoo Herr Richtigmacher Hasen-Simulator des Zoo Herr Richtigmacher.
</header> </header>
<main> <main>
<div id="monthDisplay">Monat: 1</div> <div id="monthDisplay">Monat: 1</div>
<button id="nextMonthButton">Nächster Monat</button> <button id="nextMonthButton">Nächster Monat.</button>
<div id="rabbitContainer"></div> <div id="rabbitContainer"></div>
</main> </main>

45
readme.md Normal file
View File

@@ -0,0 +1,45 @@
# 🐇 Hasen-Simulator – Zoo Herr Richtigmacher
## 🎯 Projektziel
Auf dieser Unterseite können Besucher sehen, wie sich Hasen nach der Fibonacci-Folge vermehren.
Per Klick auf einen Button wird der Monat erhöht und automatisch die passende Anzahl von Hasen-Paaren angezeigt.
---
## 🛠️ Verwendete Technologien
- **HTML** – Grundaufbau der Seite
- **CSS** – Design und Layout
- **JavaScript** – Monatslogik, Fibonacci und Hasendarstellung
- **Git** – Zusammenarbeit im Team
---
## 👥 Aufgabenverteilung (je 25 %)
### Kevin – HTML & Grundgerüst
- Struktur der Webseite
- Header, Monatsanzeige, Button
- Hasen-Container
- Einbindung von CSS & JS
### Ilyass – CSS
- Gestaltung der Seite
- Layout, Farben, Typografie
- Styling der Hasen-Paar-Karten und Buttons
### Abdelaziz – JavaScript Logik
- Fibonacci-Berechnung
- Monatszähler
- Funktionsaufbau der Simulation
### Duy – JavaScript DOM-Anzeige
- Hasen-Paare erstellen und anzeigen
- Klick-Funktion für den Button
- DOM-Manipulation (Elemente erzeugen, löschen, anzeigen)
---
## 📌 Ergebnis
Eine funktionsfähige, moderne Zoo-Unterseite, die anschaulich zeigt, wie sich Hasen Monat für Monat vermehren.
---

6
script.js
View File

@@ -1,4 +1,4 @@
// Aktuelle Mondatszahl - beginnt bei 1.
let currentMonth = 1; let currentMonth = 1;
@@ -16,7 +16,7 @@ function getFibonacci(n) {
return b; return b;
} }
// Zeigt die aktuelle Mondatszahl im DOM an.
function showMonth(month) { function showMonth(month) {
document.getElementById("monthDisplay").textContent = "Monat: " + month; document.getElementById("monthDisplay").textContent = "Monat: " + month;
} }
@@ -44,7 +44,7 @@ function showRabbits(count) {
} }
} }
// Zum nächsten Monat wechseln und Anzeige aktualisieren.
function nextMonth() { function nextMonth() {
currentMonth++; currentMonth++;
showMonth(currentMonth); showMonth(currentMonth);

88
style.css
View File

@@ -1,78 +1,100 @@
/* Basis-Styling für den gesamten Body */
body { body {
margin: 0; margin: 0;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #f4f8ff, #d9eaff); background: linear-gradient(135deg, #e9f0ff, #c9dbff);
color: #333; color: #2c2c2c;
padding-bottom: 50px;
transition: background 0.4s ease;
} }
/* Header*/
header { header {
background: #4a85ff; background: linear-gradient(135deg, #ebebeb, #fd98dd );
color: white; color: white;
padding: 20px 40px; padding: 25px 40px;
font-size: 26px; font-size: 28px;
font-weight: bold;
text-align: center; text-align: center;
box-shadow: 0 3px 8px rgba(0,0,0,0.2); font-weight: 700;
letter-spacing: 1px;
box-shadow: 0 4px 15px rgba(0,0,0,0.25);
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
} }
main { main {
max-width: 900px; max-width: 900px;
margin: 40px auto; margin: 50px auto;
background: white; background: #ffffff;
padding: 30px; padding: 40px;
border-radius: 15px; border-radius: 18px;
box-shadow: 0 5px 20px rgba(0,0,0,0.15); box-shadow: 0 10px 30px rgba(0,0,0,0.12);
animation: fadeIn 0.7s ease;
} }
/* Animationen*/
@keyframes fadeIn {
from { opacity: 0; transform: translateY(25px); }
to { opacity: 1; transform: translateY(0); }
}
#monthDisplay { #monthDisplay {
font-size: 24px; font-size: 26px;
font-weight: bold; font-weight: bold;
margin-bottom: 20px;
text-align: center; text-align: center;
margin-bottom: 25px;
background: linear-gradient(135deg, #4a85ff, #eeeeee, #fd98dd #6aa1ff);
text-shadow: 0 2px 6px rgba(0,0,0,0.1);
} }
/* Button */
button { button {
display: block; display: block;
margin: 0 auto; margin: 0 auto 20px auto;
padding: 15px 30px; padding: 15px 35px;
font-size: 18px; font-size: 18px;
background: #4a85ff; background: linear-gradient(135deg, #4a85ff, #eeeeee, #fd98dd #6aa1ff);
color: white; color: rgb(253, 144, 195);
border: none; border: none;
border-radius: 10px; border-radius: 12px;
cursor: pointer; cursor: pointer;
transition: 0.2s; transition: 0.25s;
box-shadow: 0 4px 10px rgba(0,0,0,0.2); box-shadow: 0 5px 15px rgba(0,0,0,0.25);
} }
button:hover { button:hover {
background: #3467d8; background: linear-gradient(135deg, #3c6fd1, #5b8fff);
transform: scale(1.03); transform: translateY(-3px) scale(1.05);
box-shadow: 0 8px 20px rgba(0,0,0,0.3);
} }
button:active { button:active {
transform: scale(0.98); transform: scale(0.95);
} }
#rabbitContainer { #rabbitContainer {
margin-top: 30px; margin-top: 35px;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 12px; gap: 14px;
justify-content: center; justify-content: center;
padding: 10px; padding: 10px;
} }
/* Kaninchen */
.rabbit { .rabbit {
font-size: 36px; font-size: 40px;
background: #eef4ff; background: #f4f8ff;
padding: 10px 14px; padding: 14px 18px;
border-radius: 12px; border-radius: 14px;
box-shadow: 0 3px 8px rgba(0,0,0,0.15); box-shadow: 0 5px 15px rgba(0,0,0,0.15);
transition: 0.2s ease;
user-select: none; user-select: none;
transition: transform 0.15s;
} }
.rabbit:hover { .rabbit:hover {
transform: scale(1.15) rotate(3deg); transform: scale(1.2) rotate(4deg);
background: white
} }