gcg/countdown
Archived
Template
2
0
Fork 0
Code

Add files via upload

Browse Source
This commit is contained in:
King-Mide-1 2022-01-31 15:11:11 +01:00 committed by GitHub
commit c5b3151b8a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 112 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
Index.html Normal file
View File

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
<title>Countdown Timer</title>
</head>
<body>
<h1>countdown Timer</h1>
<div class="countdown-container">
<div class="countdown-el days-c">
<p class="big-text" id="days">0</p>
<span>Days</span>
</div>
<div class="countdown-el hours-c">
<p class="big-text" id="hours">0</p>
<span>Hours</span>
</div>
<div class="countdown-el minutes-c">
<p class="big-text" id="minutes">0</p>
<span>Minutes</span>
</div>
<div class="countdown-el seconds-c">
<p class="big-text" id="seconds">0</p>
<span>Seconds</span>
</div>
</div>
</body>
</html>

BIN
image.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 MiB

31
script.js Normal file
View File

@ -0,0 +1,31 @@
const daysEl =document.getElementById ('days');
const hoursEl =document.getElementById ('hours');
const minutesEl =document.getElementById ('minutes');
const secondsEl =document.getElementById ('seconds');
const newYears = '1 Jan 2023';
function countdown() {
const newYearsDate = new Date(newYears);
const currentDate = new Date();
const totalSeconds = new Date(newYearsDate - currentDate) / 1000;
const days = Math.floor(totalSeconds / 3600 / 24);
const hours = Math.floor(totalSeconds / 3600) % 24;
const minutes = Math.floor(totalSeconds / 60) % 60;
const seconds =Math.floor(totalSeconds) % 60;
daysEl.innerHTML = days;
hoursEl.innerHTML = hours;
minutesEl.innerHTML = minutes;
secondsEl.innerHTML = seconds;
}
//Initial call
countdown();
setInterval(countdown, 1000);

48
style.css Normal file
View File

@ -0,0 +1,48 @@
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap');
*{
box-sizing: border-box;
}
body{
background-image: url(image.jpg);
background-size: cover;
background-position: center;
min-height: 100vh;
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
}
h1{
font-size: 3rem;
margin-top: -10rem;
text-transform: uppercase;
font-weight: normal;
margin-top: 5rem;
font-family: 'Poppins', sans-serif;
}
.countdown-container{
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.big-text{
font-weight: bold;
font-size: 6rem;
line-height: 1;
margin: 0 2rem;
color: #fff;
}
.countdown-el {
text-align: center;
color: #fff;
}
.countdown-el span{
font-size: 1.5rem;
}