Compare commits
No commits in common. "090d4f14c66a4ced00422699c560712772642db6" and "e14f69f45ce585cadf9a1e261f29b690a91bdcd5" have entirely different histories.
090d4f14c6
...
e14f69f45c
@ -41,25 +41,3 @@ h3 {
|
||||
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);
|
||||
}
|
||||
@ -8,17 +8,9 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="card">
|
||||
<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>
|
||||
<h1>Das ist meine hunderste Webseite</h1>
|
||||
<h2>Schön, dass du da bist!</h2>
|
||||
<h3>Have fun on here</h3>
|
||||
</div>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</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