├── README.md ├── index.html ├── index.js └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # Analog_Clock-using-html-css-js -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | ANALOG CLOCK 8 | 9 | 10 | 11 | 12 |
13 |
14 | 15 |
16 |
17 |
18 | 19 | 20 | 21 | 1 22 | 2 23 | 3 24 | 4 25 | 5 26 | 6 27 | 7 28 | 8 29 | 9 30 | 10 31 | 11 32 | 12 33 | 34 | 35 |
36 |
37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | let hr = document.getElementById('hour'); 2 | let min = document.getElementById('min'); 3 | let sec = document.getElementById('sec'); 4 | 5 | 6 | function displayTime() { 7 | let date = new Date(); 8 | 9 | let hh = date.getHours(); 10 | let mm = date.getMinutes(); 11 | let ss = date.getSeconds(); 12 | 13 | let hRotation = 30 * hh + mm / 2; 14 | let mRotation = 6 * mm; 15 | let sRotation = 6 * ss; 16 | 17 | hr.style.transform = `rotate(${hRotation}deg)`; 18 | min.style.transform = `rotate(${mRotation}deg)`; 19 | sec.style.transform = `rotate(${sRotation}deg)`; 20 | 21 | 22 | } 23 | setInterval(displayTime, 1000); 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: sans-serif; 6 | color: #ffffff; 7 | } 8 | 9 | body { 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | min-height: 100vh; 14 | background-color: #212121; 15 | } 16 | 17 | .container { 18 | position: relative; 19 | 20 | } 21 | 22 | .clock { 23 | width: 300px; 24 | height: 300px; 25 | background-color: rgb(255, 255, 255, 0.1); 26 | border-radius: 50%; 27 | border: 2px solid rgb(255, 255, 255, 0.25); 28 | box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.9); 29 | display: flex; 30 | justify-content: center; 31 | align-items: center; 32 | 33 | } 34 | 35 | .clock span { 36 | position: absolute; 37 | transform: rotate(calc(30deg * var(--i))); 38 | inset: 12px; 39 | text-align: center; 40 | } 41 | 42 | .clock span b { 43 | transform: rotate(calc(-30deg * var(--i))); 44 | display: inline-block; 45 | font-size: 20px; 46 | 47 | } 48 | 49 | .clock::before { 50 | position: absolute; 51 | content: ''; 52 | width: 8px; 53 | height: 8px; 54 | border-radius: 50%; 55 | background-color: #ffffff; 56 | z-index: 2; 57 | 58 | } 59 | 60 | .hand { 61 | position: absolute; 62 | display: flex; 63 | align-items: flex-end; 64 | justify-content: center; 65 | } 66 | 67 | .hand i { 68 | position: absolute; 69 | background-color: var(--clr); 70 | width: var(--w); 71 | height: var(--h); 72 | border-radius: 50%; 73 | 74 | 75 | } --------------------------------------------------------------------------------