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

Grundgerüst

Browse Source
This commit is contained in:
Kevin Dietze
2025-11-26 14:11:06 +01:00
commit 9e9bf2ec5e
3 changed files with 164 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
Index.html Normal file
View File

@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hasen-Simulator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
Hasen-Simulator des Zoo Herr Richtigmacher
</header>
<main>
<div id="monthDisplay">Monat: 1</div>
<button id="nextMonthButton">Nächster Monat ➜</button>
<div id="rabbitContainer"></div>
</main>
<script src="hasen.js"></script>
</body>
</html>

58
script.js Normal file
View File

@@ -0,0 +1,58 @@
let currentMonth = 1;
function getFibonacci(n) {
if (n <= 2) return 1;
let a = 1, b = 1;
for (let i = 3; i <= n; i++) {
let next = a + b;
a = b;
b = next;
}
return b;
}
function showMonth(month) {
document.getElementById("monthDisplay").textContent = "Monat: " + month;
}
function clearRabbits() {
document.getElementById("rabbitContainer").innerHTML = "";
}
function createRabbitPair() {
const pair = document.createElement("div");
pair.classList.add("rabbit");
pair.textContent = "🐇🐇";
return pair;
}
function showRabbits(count) {
clearRabbits();
const container = document.getElementById("rabbitContainer");
for (let i = 0; i < count; i++) {
container.appendChild(createRabbitPair());
}
}
function nextMonth() {
currentMonth++;
showMonth(currentMonth);
const rabbitCount = getFibonacci(currentMonth);
showRabbits(rabbitCount);
}
document.getElementById("nextMonthButton")
.addEventListener("click", nextMonth);

78
style.css Normal file
View File

@@ -0,0 +1,78 @@
body {
margin: 0;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #f4f8ff, #d9eaff);
color: #333;
}
header {
background: #4a85ff;
color: white;
padding: 20px 40px;
font-size: 26px;
font-weight: bold;
text-align: center;
box-shadow: 0 3px 8px rgba(0,0,0,0.2);
}
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);
}
#monthDisplay {
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
text-align: center;
}
button {
display: block;
margin: 0 auto;
padding: 15px 30px;
font-size: 18px;
background: #4a85ff;
color: white;
border: none;
border-radius: 10px;
cursor: pointer;
transition: 0.2s;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
button:hover {
background: #3467d8;
transform: scale(1.03);
}
button:active {
transform: scale(0.98);
}
#rabbitContainer {
margin-top: 30px;
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
padding: 10px;
}
.rabbit {
font-size: 36px;
background: #eef4ff;
padding: 10px 14px;
border-radius: 12px;
box-shadow: 0 3px 8px rgba(0,0,0,0.15);
user-select: none;
transition: transform 0.15s;
}
.rabbit:hover {
transform: scale(1.15) rotate(3deg);
}