Compare commits
No commits in common. "090d4f14c66a4ced00422699c560712772642db6" and "e14f69f45ce585cadf9a1e261f29b690a91bdcd5" have entirely different histories.
090d4f14c6
...
e14f69f45c
@ -41,25 +41,3 @@ 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);
|
|
||||||
}
|
|
||||||
@ -8,17 +8,9 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<h1 id="main-title">Das ist meine hunderste Webseite</h1>
|
<h1>Das ist meine hunderste Webseite</h1>
|
||||||
<h2 id="greeting">Schön, dass du da bist!</h2>
|
<h2>Schön, dass du da bist!</h2>
|
||||||
<h3 id="fun-text">Have fun on here</h3>
|
<h3>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
34
script.js
@ -1,34 +0,0 @@
|
|||||||
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";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Loading…
x
Reference in New Issue
Block a user