Compare commits
3 Commits
81597a94d2
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| eccc48ca25 | |||
| 8036316314 | |||
|
d71a866380 |
@@ -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
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;
|
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);
|
||||||
|
|||||||
15
style.css
15
style.css
@@ -1,4 +1,4 @@
|
|||||||
|
/* 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;
|
||||||
@@ -8,9 +8,9 @@ body {
|
|||||||
transition: background 0.4s ease;
|
transition: background 0.4s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Header*/
|
||||||
header {
|
header {
|
||||||
background: linear-gradient(135deg, #eeeeee, #fd98dd );
|
background: linear-gradient(135deg, #ebebeb, #fd98dd );
|
||||||
color: white;
|
color: white;
|
||||||
padding: 25px 40px;
|
padding: 25px 40px;
|
||||||
font-size: 28px;
|
font-size: 28px;
|
||||||
@@ -32,7 +32,7 @@ main {
|
|||||||
box-shadow: 0 10px 30px rgba(0,0,0,0.12);
|
box-shadow: 0 10px 30px rgba(0,0,0,0.12);
|
||||||
animation: fadeIn 0.7s ease;
|
animation: fadeIn 0.7s ease;
|
||||||
}
|
}
|
||||||
|
/* Animationen*/
|
||||||
@keyframes fadeIn {
|
@keyframes fadeIn {
|
||||||
from { opacity: 0; transform: translateY(25px); }
|
from { opacity: 0; transform: translateY(25px); }
|
||||||
to { opacity: 1; transform: translateY(0); }
|
to { opacity: 1; transform: translateY(0); }
|
||||||
@@ -48,7 +48,7 @@ main {
|
|||||||
text-shadow: 0 2px 6px rgba(0,0,0,0.1);
|
text-shadow: 0 2px 6px rgba(0,0,0,0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Button */
|
||||||
button {
|
button {
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0 auto 20px auto;
|
margin: 0 auto 20px auto;
|
||||||
@@ -83,7 +83,7 @@ button:active {
|
|||||||
padding: 10px;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Kaninchen */
|
||||||
.rabbit {
|
.rabbit {
|
||||||
font-size: 40px;
|
font-size: 40px;
|
||||||
background: #f4f8ff;
|
background: #f4f8ff;
|
||||||
@@ -96,4 +96,5 @@ button:active {
|
|||||||
|
|
||||||
.rabbit:hover {
|
.rabbit:hover {
|
||||||
transform: scale(1.2) rotate(4deg);
|
transform: scale(1.2) rotate(4deg);
|
||||||
background: #e7eef
|
background: white
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user