countdown-timer/countdowntimer.html at main · Aditya-modi20/countdown-timer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE HTML>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>
        count down timer
    </title>
    <link href="https://fonts.googleapis.com/css?family=Bungee|Bungee+Shade|Covered+By+Your+Grace" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Palette+Mosaic&display=swap" rel="stylesheet">
    <style>
        body {
            background-image: url("https://images.unsplash.com/photo-1577853599982-4d7a1ef7906a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=767&q=80");
            background-size: cover;
            color: white;
            text-align: center;
            align-items: center;
            justify-content: center;

        }

        h1 {
            font-family: Palette, Bungee shade, cursive;
            color: rgb(231, 74, 74);
            font-size: 3.9em;
        }

        #timer {
            display: flex;
            flex-direction: row;
            margin-left: 18.5em;
            font-size: 1.49em;
            font-family: Palette, cursive;
            color: rgb(255, 255, 255);
            position: absolute;
            top:5em;

        }

        #countdown-hours {
            margin-right: 1em;
        }

        #countdown-seconds {
            margin-left: 1.5em;
        }

        #countdown-days {
            margin-right: 1.4em;
        }

        p {
            font-size: 2.5em
        }
        span{
            font-size:1.3em;
        }
    </style>

</head>

<body>
    <div id="countdown-container">
        <h1>NEW YEAR EVE</h1>
        <div id=timer>
            <div id="countdown-days">
                <p id="days">0</p>
                <span>Days</span>
            </div>
            <div id=countdown-hours>
                <p id="hours">0</p>
                <span>Hours</span>
            </div>
            <div id="countdown-minute">
                <p id="minutes">0
                </p>
                <span>Minute</span>
            </div>
            <div id="countdown-seconds">
                <p id="seconds">0</p>
                <span>Seconds</span>
            </div>
        </div>


    </div>

    <script>

        const daysEl = document.getElementById('days');
        const hoursEl = document.getElementById('hours');
        const minutesEl = document.getElementById('minutes');
        const secondsEl = document.getElementById('seconds');

     //new year eve //
     const newyear = "1 jan 2023";

     function countdown() {
     const newyeardate = new Date(newyear);
     const date = new Date();

     const totalseconds = (newyeardate - date) / 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;


     }

     countdown();

     setInterval(countdown,1000);


    </script>
</body>


</html>