Skip to content

Commit 4ec0bff

Browse files
TusharKesarwaniTusharKesarwani
authored
Merge pull request #1641 from Keyuri-19/Countdown_Timer
Countdown Timer Added
2 parents 900bf55 + d0bde4f commit 4ec0bff

6 files changed

Lines changed: 214 additions & 0 deletions

File tree

‎Projects/Countdown Timer/README.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# PROJECT NAME AND INTRODUCTION :
2+
## Countdown Timer - A website for counting down the time:
3+
A webpage made using html , css ,and javascript for the countdown of time.Overall it will be able to calculate how much days, hours, minutes, seconds left for the entered time by the user.
4+
5+
# TECH STACK:
6+
HTML , CSS , JAVASCRIPT
7+
8+
9+
# Can Have Your Own List :
10+
<br>(https://keyuri-19.github.io/CountDown-Timer/)
11+
12+
13+
# CONTRIBUTED BY:
14+
KEYURI PATEL
15+
<br>
16+
Hope this would be really useful to Countdown the Time!!

‎Projects/Countdown Timer/bgvideo.mp4‎

331 KB
Binary file not shown.

‎Projects/Countdown Timer/index.html‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Countdown Timer</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
<video autoplay muted loop id="bgVideo">
12+
<source src="bgvideo.mp4" >
13+
</video>
14+
<div class="content">
15+
<h1 class="heading">COUNTDOWN TIMER</h1>
16+
<div class="dateTime">
17+
<label>Enter the date:
18+
<input type="date" id="enterDate" required></label><br>
19+
<br>
20+
<label>Enter the Time:
21+
<input type="time" id="enterTime" required></label>
22+
</div>
23+
<div>
24+
<button id="button">Let's Begin the Countdown</button>
25+
</div>
26+
27+
<button id="stop" onclick="myFunction()">Stop Timer</button>
28+
<button id="reset">Reset Timer</button>
29+
30+
<div class="container">
31+
<div class="innerContainer" id="day">
32+
<input type="text" class="select" id="day" readonly>
33+
<br>
34+
<p class="name">Days</p>
35+
</div>
36+
<div class="innerContainer" id="hour">
37+
<input type="text" class="select" id="hour" readonly>
38+
<br>
39+
<p class="name">Hours</p>
40+
</div>
41+
<div class="innerContainer" id="min">
42+
<input type="text" class="select" id="min" readonly>
43+
<br>
44+
<p class="name">Minutes</p>
45+
</div>
46+
<div class="innerContainer" id="sec">
47+
<input type="text" class="select" id="sec" readonly>
48+
<br>
49+
<p class="name">Seconds</p>
50+
</div>
51+
</div>
52+
</div>
53+
<script src="script.js"></script>
54+
</body>
55+
</html>

‎Projects/Countdown Timer/script.js‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
var button = document.getElementById("button");
2+
var video = document.getElementById("bgVideo");
3+
const input = document.querySelectorAll(".select");
4+
5+
button.addEventListener('click', ()=> {
6+
var enterDate = document.getElementById("enterDate").value;
7+
var enterTime = document.getElementById("enterTime").value;
8+
9+
const last = enterDate + " " + enterTime;
10+
const end = new Date(last);
11+
calculate(end);
12+
const myInterval = setInterval(
13+
() => {
14+
calculate(end);
15+
},
16+
1000
17+
)
18+
var stop = document.getElementById("stop");
19+
stop.addEventListener('click', () => {
20+
clearInterval(myInterval);
21+
})
22+
})
23+
24+
const calculate = (end) => {
25+
const now = new Date();
26+
27+
if(end > now)
28+
{
29+
const diff = (end - now)/1000;
30+
31+
// convert into day
32+
var day = Math.floor(diff / (3600 * 24));
33+
input[0].value = day;
34+
35+
// convert into hour
36+
var hour = Math.floor((diff / 3600) % 24);
37+
input[1].value = hour;
38+
39+
// convert into min
40+
var min = Math.floor((diff / 60) % 60);
41+
input[2].value = min;
42+
43+
//convert into sec
44+
var sec = Math.floor(diff % 60);
45+
input[3].value = sec;
46+
}
47+
else
48+
{
49+
input[0].value = 0;
50+
input[1].value = 0;
51+
input[2].value = 0;
52+
input[3].value = 0;
53+
}
54+
}
55+
var reset = document.getElementById("reset");
56+
reset.addEventListener('click', () => {
57+
window.location.reload();
58+
})

‎Projects/Countdown Timer/style.css‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
body
2+
{
3+
text-align: center;
4+
color: white;
5+
}
6+
7+
.heading
8+
{
9+
margin-top: 3px;
10+
font-size: 45px;
11+
padding-bottom: 10px;
12+
}
13+
14+
.dateTime label
15+
{
16+
font-size: 20px;
17+
margin: 3px;
18+
padding-bottom: 5px;
19+
}
20+
.dateTime input
21+
{
22+
font-size: 10px;
23+
margin: 5px;
24+
padding: 5px 7px;
25+
border: 1.5px solid black;
26+
border-radius: 5px;
27+
}
28+
button
29+
{
30+
height: 23px;
31+
width: 245px;
32+
font-size:medium;
33+
padding: 1px 3px;
34+
margin: 15px 5px 3px 5px;
35+
border: 1px solid black;
36+
border-radius: 5px;
37+
}
38+
#stop, #reset{
39+
height: 25px;
40+
width: 150px;
41+
padding: 1px 5px;
42+
}
43+
button:hover{
44+
color: deeppink;
45+
font-style: italic;
46+
}
47+
.container
48+
{
49+
display: flex;
50+
justify-content: center;
51+
}
52+
.innerContainer
53+
{
54+
margin: 25px 10px 10px 10px;
55+
}
56+
.innerContainer input
57+
{
58+
height: 10vw;
59+
width: 10vw;
60+
color: white;
61+
border-radius: 20rem;
62+
background: transparent;
63+
border: 1.5px solid black;
64+
text-align: center;
65+
font-size: 50px;
66+
}
67+
.name{
68+
font-size: 15px;
69+
}
70+
71+
#bgVideo {
72+
position: fixed;
73+
right: 0;
74+
bottom: 0;
75+
min-width: 100%;
76+
min-height: 100%;
77+
}
78+
79+
.content {
80+
position: fixed;
81+
color: #ffffff;
82+
width: 100%;
83+
padding: 10px;
84+
align-items: center;
85+
}

‎img/projects/Countdown Timer.png‎

659 KB
Loading

0 commit comments

Comments
 (0)