├── README.md
├── index.html
├── script.js
└── style.css
/README.md:
--------------------------------------------------------------------------------
1 | # JavaScript Analog Clock
2 |
3 | _Link to Analog Clock:_ [GH Pages](https://dgray0229.github.io/javascript-analog-clock/)
4 |
5 | This is a clock that runs on purely JavaScript, HTML, and CSS. It takes an SVG as the basic HTML and CSS layout, then uses CSS animations to rotate the hands on the clock. The JavaScript provides the logic to move the hands according to the number of hours, minutes, and seconds there are in the time of the browser.
6 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | A Digital Analog Clock
8 |
14 |
15 |
16 |
17 |
21 |
22 |
25 |
26 |
29 |
30 |
33 |
34 |
36 |
37 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | const HOURHAND = document.querySelector("#hour");
2 | const MINUTEHAND = document.querySelector("#minute");
3 | const SECONDHAND = document.querySelector("#second");
4 |
5 | var date = new Date();
6 |
7 | let hr = date.getHours();
8 | let min = date.getMinutes();
9 | let sec = date.getSeconds();
10 |
11 | let hrPosition = (hr*360/12 + (min*(360/60)/12)), minPosition = ((min*360/60) + (sec*(360/60)/60)), secPosition = sec*360/60;
12 |
13 | function runTheClock() {
14 |
15 | secPosition += 6;
16 | minPosition += (6/60);
17 | hrPosition += (3/360);
18 |
19 | HOURHAND.style.transform = "rotate(" + hrPosition + "deg)";
20 | MINUTEHAND.style.transform = "rotate(" + minPosition + "deg)";
21 | SECONDHAND.style.transform = "rotate(" + secPosition + "deg)";
22 |
23 | }
24 |
25 | var interval = setInterval(runTheClock, 1000);
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | /* Layout */
2 | .main {
3 | display: flex;
4 | padding: 2em;
5 | height: 90vh;
6 | justify-content: center;
7 | align-items: middle;
8 | }
9 |
10 | .clockbox,
11 | #clock {
12 | width: 100%;
13 | }
14 |
15 | /* Clock styles */
16 | .circle {
17 | fill: none;
18 | stroke: #000;
19 | stroke-width: 9;
20 | stroke-miterlimit: 10;
21 | }
22 |
23 | .mid-circle {
24 | fill: #000;
25 | }
26 | .hour-marks {
27 | fill: none;
28 | stroke: #000;
29 | stroke-width: 9;
30 | stroke-miterlimit: 10;
31 | }
32 |
33 | .hour-arm {
34 | fill: none;
35 | stroke: #000;
36 | stroke-width: 17;
37 | stroke-miterlimit: 10;
38 | }
39 |
40 | .minute-arm {
41 | fill: none;
42 | stroke: #000;
43 | stroke-width: 11;
44 | stroke-miterlimit: 10;
45 | }
46 |
47 | .second-arm {
48 | fill: none;
49 | stroke: #000;
50 | stroke-width: 4;
51 | stroke-miterlimit: 10;
52 | }
53 |
54 | /* Transparent box ensuring arms center properly. */
55 | .sizing-box {
56 | fill: none;
57 | }
58 |
59 | /* Make all arms rotate around the same center point. */
60 | /* Optional: Use transition for animation. */
61 | #hour,
62 | #minute,
63 | #second {
64 | transform-origin: 300px 300px;
65 | transition: transform .5s ease-in-out;
66 | }
67 |
--------------------------------------------------------------------------------