itenmarcalex/msc-uxd-fs26-test
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Merge pull request 'Add javascript functions' (#23) from feature-hasicicsalih into feature-amanda-nielsen

Browse Source 
Reviewed-on: #23
This commit is contained in:
Amanda Nielsen 2026-03-12 11:15:53 +01:00
commit 090d4f14c6
3 changed files with 67 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
salih-hasicic-app.css
View File

@ -41,3 +41,25 @@ h3 {
font-weight: 300; font-weight: 300;
opacity: 0.9; opacity: 0.9;
} }
.buttons {
margin-top: 25px;
display: flex;
flex-direction: column;
gap: 12px;
}
button {
padding: 12px;
border: none;
border-radius: 10px;
font-size: 1rem;
cursor: pointer;
background: white;
color: #333;
transition: 0.3s;
}
button:hover {
transform: scale(1.03);
}

14
salih-hasicic.html
View File

@ -8,9 +8,17 @@
</head> </head>
<body> <body>
<div class="card"> <div class="card">
<h1>Das ist meine hunderste Webseite</h1> <h1 id="main-title">Das ist meine hunderste Webseite</h1>
<h2>Schön, dass du da bist!</h2> <h2 id="greeting">Schön, dass du da bist!</h2>
<h3>Have fun on here</h3> <h3 id="fun-text">Have fun on here</h3>
<div class="buttons">
<button onclick="changeGreeting()">Begrüssung ändern</button>
<button onclick="changeBackground()">Hintergrund ändern</button>
<button onclick="toggleText()">Text verstecken / zeigen</button>
</div>
</div> </div>
<script src="script.js"></script>
</body> </body>
</html> </html>

34
script.js Normal file
View File

@ -0,0 +1,34 @@
function changeGreeting() {
const greeting = document.getElementById("greeting");
const hour = new Date().getHours();
if (hour < 12) {
greeting.textContent = "Guten Morgen und willkommen!";
} else if (hour < 18) {
greeting.textContent = "Guten Tag und schön, dass du da bist!";
} else {
greeting.textContent = "Guten Abend und viel Spass hier!";
}
}
function changeBackground() {
const colors = [
"linear-gradient(135deg, #74ebd5, #9face6)",
"linear-gradient(135deg, #ff9a9e, #fad0c4)",
"linear-gradient(135deg, #a18cd1, #fbc2eb)",
"linear-gradient(135deg, #f6d365, #fda085)"
];
const randomColor = colors[Math.floor(Math.random() * colors.length)];
document.body.style.background = randomColor;
}
function toggleText() {
const text = document.getElementById("fun-text");
if (text.style.display === "none") {
text.style.display = "block";
} else {
text.style.display = "none";
}
}