Auch wenn viele Menschen keine grosse Fans von Javascript sind – mit dieser „Sprache“ kann man sehr spassiges Zeug machen. So zeige ich euch heute wie eure Webseitenbesucher eure Designelemente kontrollieren können. Mit einem Klick kann so die Hintergrundfarbe eurer Webseite ausgetauscht werden und ganze Schriftfarben usw. Mit diesem kleinen Trick könnt ihr auch einen Darkmode Wechsel in eure Webseite einbauen. Anstatt das ihr 20 verschiedene Farben in eure Liste einbaut, könnt ihr nur 2 Farben einbauen und zack wird das schön ausgetauscht.
Ich hoffe ihr habt mit diesem kleinen Projekt genausoviel Spass wie ich beim vorbereiten.
Video
HTML
1
2
3
| <div class="container">
<button id="btn" onclick="farbwechsel()">Hintergrundfarbe wechseln</button>
</div> |
<div class="container">
<button id="btn" onclick="farbwechsel()">Hintergrundfarbe wechseln</button>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| .container {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
button {
font-family: "Montserrat", sans-serif;
padding: 20px;
font-weight: 700;
font-size: 22px;
background-color: transparent;
border: 5px solid #111;
cursor: pointer;
outline: none;
border-radius: 10px;
} |
.container {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}button {
font-family: "Montserrat", sans-serif;
padding: 20px;
font-weight: 700;
font-size: 22px;
background-color: transparent;
border: 5px solid #111;
cursor: pointer;
outline: none;
border-radius: 10px;
}
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| function farbwechsel(){
//hintergrund farbe
document.body.style.backgroundColor = 'rgb(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255)+ ','+ Math.round(Math.random() * 255) + ')';
//button schriftfarbe
let farben = ['#ffffff', '#000000', '#6459a5', '#e4611a'];
let randomAuswahl = Math.floor(Math.random() * farben.length);
var button = document.getElementById("btn");
button.style.color = farben[randomAuswahl];
button.style.borderColor = farben[randomAuswahl];
} |
function farbwechsel(){
//hintergrund farbe
document.body.style.backgroundColor = 'rgb(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255)+ ','+ Math.round(Math.random() * 255) + ')';//button schriftfarbe
let farben = ['#ffffff', '#000000', '#6459a5', '#e4611a'];let randomAuswahl = Math.floor(Math.random() * farben.length);var button = document.getElementById("btn");button.style.color = farben[randomAuswahl];
button.style.borderColor = farben[randomAuswahl];
}
0 Kommentare