Compare commits
3 Commits
81597a94d2
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| eccc48ca25 | |||
| 8036316314 | |||
|
d71a866380 |
@@ -11,13 +11,13 @@
|
||||
<body>
|
||||
|
||||
<header>
|
||||
Hasen-Simulator des Zoo Herr Richtigmacher
|
||||
Hasen-Simulator des Zoo Herr Richtigmacher.
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div id="monthDisplay">Monat: 1</div>
|
||||
|
||||
<button id="nextMonthButton">Nächster Monat</button>
|
||||
<button id="nextMonthButton">Nächster Monat.</button>
|
||||
|
||||
<div id="rabbitContainer"></div>
|
||||
</main>
|
||||
|
||||
45
readme.md
Normal file
45
readme.md
Normal 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.
|
||||
|
||||
---
|
||||
@@ -1,4 +1,4 @@
|
||||
|
||||
// Aktuelle Mondatszahl - beginnt bei 1.
|
||||
let currentMonth = 1;
|
||||
|
||||
|
||||
@@ -16,7 +16,7 @@ function getFibonacci(n) {
|
||||
return b;
|
||||
}
|
||||
|
||||
|
||||
// Zeigt die aktuelle Mondatszahl im DOM an.
|
||||
function showMonth(month) {
|
||||
document.getElementById("monthDisplay").textContent = "Monat: " + month;
|
||||
}
|
||||
@@ -44,7 +44,7 @@ function showRabbits(count) {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Zum nächsten Monat wechseln und Anzeige aktualisieren.
|
||||
function nextMonth() {
|
||||
currentMonth++;
|
||||
showMonth(currentMonth);
|
||||
|
||||
15
style.css
15
style.css
@@ -1,4 +1,4 @@
|
||||
|
||||
/* Basis-Styling für den gesamten Body */
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
||||
@@ -8,9 +8,9 @@ body {
|
||||
transition: background 0.4s ease;
|
||||
}
|
||||
|
||||
|
||||
/* Header*/
|
||||
header {
|
||||
background: linear-gradient(135deg, #eeeeee, #fd98dd );
|
||||
background: linear-gradient(135deg, #ebebeb, #fd98dd );
|
||||
color: white;
|
||||
padding: 25px 40px;
|
||||
font-size: 28px;
|
||||
@@ -32,7 +32,7 @@ main {
|
||||
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); }
|
||||
@@ -48,7 +48,7 @@ main {
|
||||
text-shadow: 0 2px 6px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
|
||||
/* Button */
|
||||
button {
|
||||
display: block;
|
||||
margin: 0 auto 20px auto;
|
||||
@@ -83,7 +83,7 @@ button:active {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
|
||||
/* Kaninchen */
|
||||
.rabbit {
|
||||
font-size: 40px;
|
||||
background: #f4f8ff;
|
||||
@@ -96,4 +96,5 @@ button:active {
|
||||
|
||||
.rabbit:hover {
|
||||
transform: scale(1.2) rotate(4deg);
|
||||
background: #e7eef
|
||||
background: white
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user