Compare commits
6 Commits
aa75b48558
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| eccc48ca25 | |||
| 8036316314 | |||
|
d71a866380 | ||
|
|
81597a94d2 | ||
|
|
21304b8925 | ||
|
|
b1f289ba4f |
@@ -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);
|
||||
|
||||
88
style.css
88
style.css
@@ -1,78 +1,100 @@
|
||||
/* Basis-Styling für den gesamten Body */
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: linear-gradient(135deg, #f4f8ff, #d9eaff);
|
||||
color: #333;
|
||||
background: linear-gradient(135deg, #e9f0ff, #c9dbff);
|
||||
color: #2c2c2c;
|
||||
padding-bottom: 50px;
|
||||
transition: background 0.4s ease;
|
||||
}
|
||||
|
||||
/* Header*/
|
||||
header {
|
||||
background: #4a85ff;
|
||||
background: linear-gradient(135deg, #ebebeb, #fd98dd );
|
||||
color: white;
|
||||
padding: 20px 40px;
|
||||
font-size: 26px;
|
||||
font-weight: bold;
|
||||
padding: 25px 40px;
|
||||
font-size: 28px;
|
||||
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 {
|
||||
max-width: 900px;
|
||||
margin: 40px auto;
|
||||
background: white;
|
||||
padding: 30px;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 5px 20px rgba(0,0,0,0.15);
|
||||
margin: 50px auto;
|
||||
background: #ffffff;
|
||||
padding: 40px;
|
||||
border-radius: 18px;
|
||||
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 {
|
||||
font-size: 24px;
|
||||
font-size: 26px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
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 {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
padding: 15px 30px;
|
||||
margin: 0 auto 20px auto;
|
||||
padding: 15px 35px;
|
||||
font-size: 18px;
|
||||
background: #4a85ff;
|
||||
color: white;
|
||||
background: linear-gradient(135deg, #4a85ff, #eeeeee, #fd98dd #6aa1ff);
|
||||
color: rgb(253, 144, 195);
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
transition: 0.2s;
|
||||
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
|
||||
transition: 0.25s;
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.25);
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: #3467d8;
|
||||
transform: scale(1.03);
|
||||
background: linear-gradient(135deg, #3c6fd1, #5b8fff);
|
||||
transform: translateY(-3px) scale(1.05);
|
||||
box-shadow: 0 8px 20px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
button:active {
|
||||
transform: scale(0.98);
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
|
||||
#rabbitContainer {
|
||||
margin-top: 30px;
|
||||
margin-top: 35px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
gap: 14px;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
/* Kaninchen */
|
||||
.rabbit {
|
||||
font-size: 36px;
|
||||
background: #eef4ff;
|
||||
padding: 10px 14px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 3px 8px rgba(0,0,0,0.15);
|
||||
font-size: 40px;
|
||||
background: #f4f8ff;
|
||||
padding: 14px 18px;
|
||||
border-radius: 14px;
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.15);
|
||||
transition: 0.2s ease;
|
||||
user-select: none;
|
||||
transition: transform 0.15s;
|
||||
}
|
||||
|
||||
.rabbit:hover {
|
||||
transform: scale(1.15) rotate(3deg);
|
||||
transform: scale(1.2) rotate(4deg);
|
||||
background: white
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user