Der Sommer der neigt sich dem Ende zu und in den Läden weihnachtet es bereits. Damit ihr Weihnachten nicht vergesst und immer wisst wie viele Tage es noch bis Weihnachten sind – bauen wir heute einen kleinen Rechner. Dieser Rechner sagt uns immer genau wie lange es noch dauert bis es heiligen Abend also den 24.12 ist.
Somit habt ihr keine Ausrede mehr, wenn ihr in den Weihnachtsstress geratet weil ihr keine Geschenke gekauft habt.
Wie immer ich erkläre im Video ausführlich welcher CSS / JS Befehl was macht – also viel Spass mit meinem heutigen Video
Video
HTML
1 2 3 4 5 6 | <div class="container"> <div class="time"> <h2 id="tage">00</h2> <div class="weihnachten">Tage bis Heilig Abend / Weihnachten</div> </div> </div> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | body {
background-color: #22577a;
}
.container {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.time {
text-align: center;
}
#tage {
color: #ffddd2;
font-size: 6rem;
}
.weihnachten {
color: #57cc99;
font-size: 30px;
} |
Javascript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | const tage = document.getElementById("tage");
const heute = new Date()
//console.log(heute);
const aktuellesJahr = heute.getFullYear();
let weihnachten = new Date(aktuellesJahr, 11, 24);
if (heute > weihnachten){
weihnachten = new Date(aktuellesJahr +1, 11, 24);
}
const entfernungMilisek = weihnachten - heute;
//console.log(entfernungMilisek);
const anzahlTage = Math.ceil(entfernungMilisek / (1000 * 60 * 60 * 24));
tage.textContent = anzahlTage; |
0 Kommentare