Countdown
HTML
<html lang="de">
<head>
</head>
<body>
<div class="wrapper">
<div class="left">
<img src="#" alt="#">
</div>
<div class="right">
<h2>Sommerfest</h2>
<p>Am 31.07.2023 um 18 Uhr</p>
<p class="blocksatz">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<img src="#" alt="#jsToClipboard" class="timer">
<div class="countdown">
<div class="wrapperDate">
<p>Tage</p>
<div class="tage"></div>
</div>
<div class="wrapperDate">
<p>Stunden</p>
<div class="stunden"></div>
</div>
<div class="wrapperDate">
<p>Minuten</p>
<div class="minuten"></div>
</div>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
CSS
body {
font-family: sans-serif;
margin: 0;
}
.wrapper {
background: lightblue;
padding: 5%;
}
.left {
width: 90%;
padding: 5%;
}
.left img {
width: 100%;
border-radius: 10px;
}
.right {
width: 80%;
padding: 5%;
margin: 5%;
background: lightgrey;
box-shadow: inset 0 -3em 3em rgba(0, 0, 0, 0.1),
0.3em 0.3em 1em rgba(0, 0, 0, 0.3);
}
.tage,
.minuten,
.stunden {
font-size: 55px;
height: 75px;
background: darkblue;
color: white;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
}
.countdown {
display: flex;
justify-content: space-between;
}
.countdownP {
font-size: 1.2em;
text-align: center;
}
.blocksatz {
text-align: justify;
}
.timer {
width: 100px;
}
@media (min-width:500px) {
.countdown {
justify-content: flex-start;
}
.wrapperDate {
margin-right: 25px;
}
}
@media (min-width:800px) {
.left img {
width: 70%;
margin: 0 15%;
}
}
@media (min-width:1000px) {
.left img {
width: 50%;
margin: 0 25%;
}
}
@media (min-width:1200px) {
.wrapper {
display: flex;
}
.left {
display: flex;
align-items: center;
justify-content: center;
width: 40%;
}
.right {
width: 55%;
margin: 0;
padding: 2.5%;
}
.left img {
width:100%;
}
}
JS
let heute = new Date();
let termin = new Date(2023, 6, 31, 18);
let differenz = termin - heute;
let arrayLange = [];
if (differenz <= 0) {
let divCountdown =
document.querySelector(".countdown");
divCountdown.innerHTML = "Countdown abgelaufen!";
}
else {
let tage = Math.floor(differenz / 1000 / 60 / 60 / 24);
let stunden = Math.floor(differenz / 1000 / 60 / 60 % 24);
let minuten = Math.ceil(differenz / 1000 / 60 % 60);
let divTage =
document.querySelector(".tage");
divTage.textContent = tage;
arrayLange.push(divTage.textContent.length * 38);
let divStunden =
document.querySelector(".stunden");
divStunden.textContent = stunden;
arrayLange.push(divStunden.textContent.length * 38);
let divMinuten =
document.querySelector(".minuten");
divMinuten.textContent = minuten;
arrayLange.push(divMinuten.textContent.length * 38);
var maxWert = Math.max(...arrayLange);
divTage.style.width = maxWert + "px";
divStunden.style.width = maxWert + "px";
divMinuten.style.width = maxWert + "px";
}