Skip to content

Commit 5b4b2db

Browse files
vidhimakani74vidhimakani74
committed
add new project
1 parent d3c6e3c commit 5b4b2db

File tree

3 files changed

+198
-0
lines changed

3 files changed

+198
-0
lines changed

‎projects/countdown-timer/app.js

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

‎projects/countdown-timer/index.html

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Countdown Timertitle>
9+
<link rel="stylesheet" href="style.css">
10+
head>
11+
12+
<body>
13+
<p class="title">Countdown Timerp>
14+
<div class="dateTime">
15+
<table>
16+
<tr>
17+
<td><label for="date">Enter Date:label>td>
18+
<td> <input type="date" id="enterDate" required>td>
19+
tr>
20+
<br>
21+
<tr>
22+
<td><label for="date">Enter Time:label>td>
23+
<td><input type="time" id="enterTime" required>td>
24+
tr>
25+
table>
26+
27+
div>
28+
29+
<button id="button">calculatebutton>
30+
<button id="stop">stopbutton>
31+
<button id="reset">resetbutton>
32+
33+
<div class="container">
34+
<div class="innerContainer" id="day">
35+
<input type="text" class="select" id="day" readonly>
36+
<br>
37+
<p>Dayp>
38+
div>
39+
<div class="innerContainer" id="hour">
40+
<input type="text" class="select" id="hour" readonly>
41+
<br>
42+
<p>Hourp>
43+
div>
44+
<div class="innerContainer" id="min">
45+
<input type="text" class="select" id="min" readonly>
46+
<br>
47+
<p>Minutesp>
48+
div>
49+
<div class="innerContainer" id="sec">
50+
<input type="text" class="select" id="sec" readonly>
51+
<br>
52+
<p>Secondsp>
53+
div>
54+
div>
55+
<script src="app.js">script>
56+
body>
57+
58+
html>

‎projects/countdown-timer/style.css

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
html
2+
{
3+
height: 100%;
4+
font-weight: bolder;
5+
}
6+
7+
body
8+
{
9+
text-align: center;
10+
background-image: url("https://img.freepik.com/free-photo/neutral-tone-abstract-invitation-card_53876-97500.jpg?w=360&t=st=1678787861~exp=1678788461~hmac=ddf4b178837a6bad7c846053fe79fdfbc1e65bb4e3ee5c298f828b653335b6ed");
11+
background-position: center;
12+
background-repeat: no-repeat;
13+
background-size: 100%;
14+
color:black;
15+
}
16+
table{
17+
margin: auto;
18+
}
19+
tr, td{
20+
text-align: left;
21+
}
22+
23+
.title
24+
{
25+
font-size: 40px;
26+
padding:1rem ;
27+
border: 1px solid #ffdfdd;
28+
}
29+
30+
.dateTime label
31+
{
32+
font-size: 20px;
33+
margin: 10px;
34+
}
35+
36+
.dateTime input
37+
{
38+
font-size: 20px;
39+
margin: 10px;
40+
padding: 5px 10px;
41+
border: 2px solid #ffdfdd ;
42+
background-color: #ffdfdd;
43+
border-radius: 10px;
44+
box-shadow: 3px 3px 3px #307d7e;
45+
}
46+
47+
button
48+
{
49+
margin: 20px 5px;
50+
padding: 5px 10px;
51+
font-size: 20px;
52+
background-color: #ffdfdd;
53+
border: 1px solid #ffdfdd;
54+
box-shadow: 3px 3px 3px #307d7e;
55+
border-radius: 5px;
56+
}
57+
58+
.container
59+
{
60+
display: flex;
61+
justify-content: center;
62+
}
63+
64+
.innerContainer
65+
{
66+
margin: 5px;
67+
}
68+
69+
.innerContainer input
70+
{
71+
height: 8vw;
72+
width: 8vw;
73+
border-radius: 200px;
74+
color: black;
75+
background-color: #ffdfdd;
76+
/* background: transparent; */
77+
text-align: center;
78+
font-size: 5vw;
79+
}

0 commit comments

Comments
 (0)