Responsive-digital-clock-using-HTML-CSS-JavaScript/index.html at main · atkishork/Responsive-digital-clock-using-HTML-CSS-JavaScript · 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
<!DOCTYPE html>
<html>
    <head>
        <meta charset ="utf-8">
        <title>Digital Clock</title>
        <link rel ="stylesheet" href="style.css">
    </head>
    <body>
        <div id = "time">
            <div class ="circle" style="--clr:#ff2972;">
                <div class = "dots hr_dots"></div>
               <svg>
                   <circle cx = "70" cy = "70"  r="70"></circle>
                   <circle cx = "70" cy = "70"  r="70" id = "hh"></circle>
               </svg>
                <div id = "hours">00</div>
            </div>
            <div class ="circle" style="--clr:#fee800;">
                <div class = "dots min_dots"></div>
                <svg>
                    <circle cx = "70" cy = "70"  r="70"></circle>
                    <circle cx = "70" cy = "70"  r="70" id = "mm"></circle>
                </svg>
                <div id = "minutes">00</div>
            </div>
            <div class ="circle" style="--clr:#04fc43;">
                <div class = "dots sec_dots"></div>
                <svg>
                    <circle cx = "70" cy = "70"  r="70"></circle>
                    <circle cx = "70" cy = "70"  r="70" id = "ss"></circle>
                </svg>
                <div id = "seconds">00</div>
            </div>
            <div class ="ap">
                <div id = "ampm">AM</div>
            </div>
        </div>

        <script>

            setInterval(() =>{
                let hours = document.getElementById('hours');
                let minutes = document.getElementById('minutes');
                let seconds = document.getElementById('seconds');
                let ampm = document.getElementById('ampm');

                let hh = document.getElementById('hh');
                let mm = document.getElementById('mm');
                let ss = document.getElementById('ss');

                let hr_dots = document.querySelector('.hr_dots ');
                let min_dots = document.querySelector('.min_dots ');
                let sec_dots = document.querySelector('.sec_dots ');

                let h = new Date().getHours();
                let m = new Date().getMinutes();
                let s = new Date().getSeconds();
                let am = h >= 12 ? "PM" : "AM";

                // convert 24 hr clock to 12 hr clock
                if (h > 12){
                    h = h - 12;
                }

                // add zero  berfore a single digit
                h = (h < 10) ? "0" + h : h;
                m = (m < 10) ? "0" + m : m;
                s = (s < 10) ? "0" + s : s;

                hours.innerHTML = h + "<br><span>Hours</span>";
                minutes.innerHTML = m + "<br><span>Minutes</span>";
                seconds.innerHTML = s + "<br><span>Seconds</span>";
                ampm.innerHTML = am;

                hh.style.strokeDashoffset = 440 -(440 * h) / 12;
                // 12 hr clock
                mm.style.strokeDashoffset = 440 -(440 * m) / 60;
                // 60 minutes in 1 hr
                ss.style.strokeDashoffset = 440 -(440 * s) / 60;
                // 60 seconds in 1 min

                hr_dots.style.transform = `rotate(${h*30}deg)`;
                // 360/12 = 30 deg
                min_dots.style.transform = `rotate(${m*6}deg)`;
                // 360/60 = 6 deg
                sec_dots.style.transform = `rotate(${s*6}deg)`;
                // 360/60 = 6 deg


            })

        </script>
    </body>
</html>