Skip to content

Commit c78e786

Browse files
timsneathtimsneath
committed
Completed exercise 2
1 parent bd5f10d commit c78e786

File tree

2 files changed

+82
-57
lines changed

2 files changed

+82
-57
lines changed

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

Lines changed: 31 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,47 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<title>JS + CSS Clock</title>
7+
<link rel="stylesheet" href="styles.css">
68
</head>
7-
<body>
89

10+
<style>
11+
</style>
912

10-
<div class="clock">
11-
<div class="clock-face">
12-
<div class="hand hour-hand"></div>
13-
<div class="hand min-hand"></div>
14-
<div class="hand second-hand"></div>
15-
</div>
13+
<body>
14+
<div class="clock">
15+
<div class="clock-face">
16+
<div class="hand hour-hand"></div>
17+
<div class="hand min-hand"></div>
18+
<div class="hand second-hand"></div>
1619
</div>
20+
</div>
21+
</body>
1722

23+
<script>
24+
const hourHand = document.querySelector('.hour-hand')
25+
const minuteHand = document.querySelector('.min-hand')
26+
const secondHand = document.querySelector('.second-hand')
1827

19-
<style>
20-
html {
21-
background:#018DED url(http://unsplash.it/1500/1000?image=881&blur=50);
22-
background-size:cover;
23-
font-family:'helvetica neue';
24-
text-align: center;
25-
font-size: 10px;
26-
}
27-
28-
body {
29-
font-size: 2rem;
30-
display:flex;
31-
flex:1;
32-
min-height: 100vh;
33-
align-items: center;
34-
}
35-
36-
.clock {
37-
width: 30rem;
38-
height: 30rem;
39-
border:20px solid white;
40-
border-radius:50%;
41-
margin:50px auto;
42-
position: relative;
43-
padding:2rem;
44-
box-shadow:
45-
0 0 0 4px rgba(0,0,0,0.1),
46-
inset 0 0 0 3px #EFEFEF,
47-
inset 0 0 10px black,
48-
0 0 10px rgba(0,0,0,0.2);
49-
}
50-
51-
.clock-face {
52-
position: relative;
53-
width: 100%;
54-
height: 100%;
55-
transform: translateY(-3px); /* account for the height of the clock hands */
56-
}
28+
function setTime() {
29+
const now = new Date()
5730

58-
.hand {
59-
width:50%;
60-
height:6px;
61-
background:black;
62-
position: absolute;
63-
top:50%;
64-
}
31+
const seconds = now.getSeconds()
32+
const secondsAsDegrees = seconds * 6
33+
secondHand.style.transform = `rotate(${secondsAsDegrees + 90}deg)`
6534

66-
</style>
35+
const minutes = now.getMinutes()
36+
const minutesAsDegrees = (minutes * 6) + (seconds / 6)
37+
minuteHand.style.transform = `rotate(${minutesAsDegrees + 90}deg)`
6738

68-
<script>
39+
const hours = now.getHours()
40+
const hoursAsDegrees = (hours * 30) + (minutes / 6)
41+
hourHand.style.transform = `rotate(${hoursAsDegrees + 90}deg)`
42+
}
6943

44+
setInterval(setTime, 1000);
45+
</script>
7046

71-
</script>
72-
</body>
73-
</html>
47+
</html>

‎02 - JS + CSS Clock/styles.css‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
html {
2+
background: #018DED url(http://unsplash.it/1500/1000?image=881&blur=50);
3+
background-size: cover;
4+
font-family: 'helvetica neue';
5+
text-align: center;
6+
font-size: 10px;
7+
}
8+
9+
body {
10+
font-size: 2rem;
11+
display: flex;
12+
flex: 1;
13+
min-height: 100vh;
14+
align-items: center;
15+
}
16+
17+
.clock {
18+
width: 30rem;
19+
height: 30rem;
20+
border: 20px solid white;
21+
border-radius: 50%;
22+
margin: 50px auto;
23+
position: relative;
24+
padding: 2rem;
25+
box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1), inset 0 0 0 3px #EFEFEF, inset 0 0 10px black, 0 0 10px rgba(0, 0, 0, 0.2);
26+
}
27+
28+
.clock-face {
29+
position: relative;
30+
width: 100%;
31+
height: 100%;
32+
transform: translateY(-3px);
33+
/* account for the height of the clock hands */
34+
}
35+
36+
.hand {
37+
width: 50%;
38+
height: 6px;
39+
background: black;
40+
position: absolute;
41+
top: 50%;
42+
transform: rotate(90deg);
43+
transition: all 0.25s;
44+
transition-timing-function: ease-in-out;
45+
transform-origin: 100%;
46+
}
47+
48+
.second-hand {
49+
background: red;
50+
height: 2px;
51+
}

0 commit comments

Comments
 (0)