Skip to content

Commit 5e2b805

Browse files
author
Petra Gulicher
committed
Implemented exercise 02: clock
1 parent f0f4056 commit 5e2b805

File tree

3 files changed

+175
-74
lines changed

3 files changed

+175
-74
lines changed

‎02 - JS + CSS Clock/index-START.html‎

Lines changed: 0 additions & 73 deletions
This file was deleted.

‎02 - JS + CSS Clock/index.html‎

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>JS + CSS Clock</title>
6+
</head>
7+
<body>
8+
9+
<div class="clock">
10+
<div class="clock-face">
11+
<div class="hand hour-hand"></div>
12+
<div class="hand min-hand"></div>
13+
<div class="hand second-hand"></div>
14+
</div>
15+
</div>
16+
17+
<style>
18+
html {
19+
background:#018DED url(http://unsplash.it/1500/1000?image=881&blur=50);
20+
background-size:cover;
21+
font-family:'helvetica neue';
22+
text-align: center;
23+
font-size: 10px;
24+
}
25+
26+
body {
27+
font-size: 2rem;
28+
display:flex;
29+
flex:1;
30+
min-height: 100vh;
31+
align-items: center;
32+
}
33+
34+
.clock {
35+
width: 30rem;
36+
height: 30rem;
37+
border:20px solid white;
38+
border-radius:50%;
39+
margin:50px auto;
40+
position: relative;
41+
padding:2rem;
42+
box-shadow:
43+
0 0 0 4px rgba(0,0,0,0.1),
44+
inset 0 0 0 3px #EFEFEF,
45+
inset 0 0 10px black,
46+
0 0 10px rgba(0,0,0,0.2);
47+
}
48+
49+
.clock-face {
50+
position: relative;
51+
width: 100%;
52+
height: 100%;
53+
}
54+
55+
.clock-face:before {
56+
content: "";
57+
display: block;
58+
width: 3px;
59+
height: 3px;
60+
background: teal;
61+
position: absolute;
62+
top: 50%;
63+
left: 50%;
64+
transform: translate(-50%, -50%);
65+
z-index: 1000;
66+
border-radius: 50%;
67+
}
68+
69+
.interval-marker {
70+
width: 0;
71+
height: 50%;
72+
position: absolute;
73+
top: 0;
74+
left: 50%;
75+
transform: translateX(-50%);
76+
transform-origin: center bottom;
77+
}
78+
79+
.interval-marker:before {
80+
content: "";
81+
display: block;
82+
width: 0;
83+
height: 0;
84+
position: absolute;
85+
top: 0;
86+
left: 50%;
87+
transform: translateX(-50%);
88+
z-index: 1000;
89+
border: 6px solid transparent;
90+
border-top-color: black;
91+
}
92+
93+
.hand {
94+
width:6px;
95+
height: 50%;
96+
background:black;
97+
position: absolute;
98+
top: 5%;
99+
left: calc(50% - 3px);
100+
transform-origin: center 90%;
101+
opacity: 1;
102+
box-shadow: 2px 2px 2px rgba(0, 0, 0, .25);
103+
}
104+
105+
.second-hand {
106+
opacity: .3;
107+
}
108+
109+
.hour-hand {
110+
height: 25%;
111+
top: 27.75%;
112+
}
113+
114+
</style>
115+
116+
<script>
117+
118+
const HANDS = [
119+
{
120+
name: 'hours',
121+
elem: document.querySelector('.hour-hand'),
122+
intervals: 12
123+
},
124+
{
125+
name: 'minutes',
126+
elem: document.querySelector('.min-hand'),
127+
intervals: 60
128+
},
129+
{
130+
name: 'seconds',
131+
elem: document.querySelector('.second-hand'),
132+
intervals: 60
133+
}
134+
];
135+
136+
function placeMarkers() {
137+
let clock = document.querySelector('.clock-face');
138+
let intervals = 12;
139+
for (let step = 0; step < intervals; step++) {
140+
let marker = document.createElement('i');
141+
marker.classList.add('interval-marker');
142+
marker.setAttribute('style', `transform: rotate(${step * 360 / intervals}deg);`)
143+
clock.appendChild(marker);
144+
}
145+
}
146+
147+
function getCurrentTime() {
148+
let now = new Date;
149+
return {
150+
seconds: now.getSeconds(),
151+
minutes: now.getMinutes(),
152+
hours: now.getHours()
153+
}
154+
}
155+
156+
function updateHands() {
157+
let time = getCurrentTime();
158+
HANDS.forEach(function(hand) {
159+
let rotation = (time[hand.name] % hand.intervals) * (360/hand.intervals);
160+
hand.elem.setAttribute('style', `transform: rotate(${rotation}deg)`);
161+
});
162+
}
163+
164+
function updateClock() {
165+
updateHands();
166+
requestAnimationFrame(updateClock);
167+
}
168+
169+
placeMarkers();
170+
requestAnimationFrame(updateClock);
171+
172+
</script>
173+
</body>
174+
</html>

‎readme.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ While I've aimed to keep my code tidy and readable, I'm not spending a lot of ti
1818
## Exercises
1919

2020
* [x] 01 - JavaScript Drum Kit
21-
* [ ] 02 - JS + CSS Clock
21+
* [x] 02 - JS + CSS Clock
2222
* [ ] 03 - CSS Variables
2323
* [ ] 04 - Array Cardio Day 1
2424
* [ ] 05 - Flex Panel Gallery

0 commit comments

Comments
 (0)