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

Add javascript functions

Browse Source
This commit is contained in:
Salih Hasicic 2026-03-12 11:14:20 +01:00
parent 0298124d01
commit 3599826f4c
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

@ -40,4 +40,26 @@ h3 {
font-size: 1.1rem;
font-weight: 300;
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>
<body>
<div class="card">
<h1>Das ist meine hunderste Webseite</h1>
<h2>Schön, dass du da bist!</h2>
<h3>Have fun on here</h3>
<h1 id="main-title">Das ist meine hunderste Webseite</h1>
<h2 id="greeting">Schön, dass du da bist!</h2>
<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>
<script src="script.js"></script>
</body>
</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";
}
}