Für heute habe ich mir wieder was spassiges ausgedacht und zwar bauen wir uns heute einen Kalender, den man danach in die eigen Webseite einbauen kann, oder zum Beispiel als Overlay für Livestreams / Videos verwenden kann.
Video
HTML
Als erstes brauchen wir das Grundgerüst. Hier seht ihr das es eine linke wie rechte Hälfte gibt, die sogar noch ein paar Dummydaten enthält die durch das JS später danach angepasst werden.
1 2 3 4 5 6 7 8 9 10 11 12 | <div class="seite">
<div class="kalender">
<div class="links">
<p id="datum">01</p>
<p id="tag">Sonntag</p>
</div>
<div class="rechts">
<p id="monat">Januar</p>
<p id="jahr">2030</p>
</div>
</div>
</div> |
CSS
Hier der CSS Bereich – ihr seht sehr schnell, dass hier nichts spezielles passiert.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | * {
margin: 0;
padding: 1;
box-sizing: border-box;
}
.seite {
width: 100%;
min-height: 100vh;
background: #003049;
display: flex;
align-items: center;
justify-content: center;
}
.kalender {
width: 300px;
height: 250px;
background: #fdf0d5;
display: flex;
align-items: center;
border-radius: 10px;
}
.links,
.rechts {
width: 50%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 24px;
}
.rechts {
background: #c1121f;
color: #fff;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.links {
} |
Javascript
Hier kommt nun der Javascript Bereich und ihr seht sehr schnell, dass hier die Namen der Wochentage und der Monate auf Deutsch übersetzt worden sind. Ihr könnt die natürlich weglassen aber dann wird der Kalender auf englisch sein.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | const datum = document.getElementById("datum");
const tag = document.getElementById("tag");
const monat = document.getElementById("monat");
const jahr = document.getElementById("jahr");
const heute = new Date();
/* Wenn ihr diese Console.Log Aktion aktiviert, dann seht ihr was für eine Ausgabe in der Log Datei sichtbar ist
console.log(heute);
*/
const wochentage = [
"Sonntag",
"Montag",
"Dienstag",
"Mittwoch",
"Donnerstag",
"Freitag",
"Samstag",
];
const monate = [
"Januar",
"Februar",
"März",
"April",
"Mai",
"Juni",
"Juli",
"August",
"September",
"Oktober",
"November",
"Dezember",
];
datum.innerHTML = heute.getDate();
tag.innerHTML = wochentage[heute.getDay()];
monat.innerHTML = monate[heute.getMonth()];
jahr.innerHTML = heute.getFullYear(); |
0 Kommentare