Add files via upload
This commit is contained in:
commit
c5b3151b8a
33
Index.html
Normal file
33
Index.html
Normal 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
BIN
image.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 3.1 MiB |
31
script.js
Normal file
31
script.js
Normal 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
48
style.css
Normal 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;
|
||||
}
|
Reference in New Issue
Block a user