Skip to content

Commit 133a528

Browse files
author
John Walker
committed
Day 2 complete
1 parent a41aea1 commit 133a528

File tree

1 file changed

+87
-62
lines changed

1 file changed

+87
-62
lines changed

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

Lines changed: 87 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,99 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
4-
<meta charset="UTF-8">
5-
<title>JS + CSS Clock</title>
5+
<meta charset="UTF-8">
6+
<title>JS + CSS Clock</title>
67
</head>
8+
79
<body>
810

911

1012
<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+
<div class="clock-face">
14+
<div class="hand hour-hand"></div>
15+
<div class="hand min-hand"></div>
16+
<div class="hand second-hand"></div>
17+
</div>
1618
</div>
1719

1820

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-
margin: 0;
30-
font-size: 2rem;
31-
display:flex;
32-
flex:1;
33-
min-height: 100vh;
34-
align-items: center;
35-
}
36-
37-
.clock {
38-
width: 30rem;
39-
height: 30rem;
40-
border:20px solid white;
41-
border-radius:50%;
42-
margin:50px auto;
43-
position: relative;
44-
padding:2rem;
45-
box-shadow:
46-
0 0 0 4px rgba(0,0,0,0.1),
47-
inset 0 0 0 3px #EFEFEF,
48-
inset 0 0 10px black,
49-
0 0 10px rgba(0,0,0,0.2);
50-
}
51-
52-
.clock-face {
53-
position: relative;
54-
width: 100%;
55-
height: 100%;
56-
transform: translateY(-3px); /* account for the height of the clock hands */
57-
}
58-
59-
.hand {
60-
width:50%;
61-
height:6px;
62-
background:black;
63-
position: absolute;
64-
top:50%;
65-
}
66-
67-
</style>
68-
69-
<script>
70-
71-
72-
</script>
21+
<style>
22+
html {
23+
background: #018DED url(http://unsplash.it/1500/1000?image=881&blur=50);
24+
background-size: cover;
25+
font-family: 'helvetica neue';
26+
text-align: center;
27+
font-size: 10px;
28+
}
29+
30+
body {
31+
margin: 0;
32+
font-size: 2rem;
33+
display: flex;
34+
flex: 1;
35+
min-height: 100vh;
36+
align-items: center;
37+
}
38+
39+
.clock {
40+
width: 30rem;
41+
height: 30rem;
42+
border: 20px solid white;
43+
border-radius: 50%;
44+
margin: 50px auto;
45+
position: relative;
46+
padding: 2rem;
47+
box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1),
48+
inset 0 0 0 3px #EFEFEF,
49+
inset 0 0 10px black,
50+
0 0 10px rgba(0, 0, 0, 0.2);
51+
}
52+
53+
.clock-face {
54+
position: relative;
55+
width: 100%;
56+
height: 100%;
57+
transform: translateY(-3px);
58+
/* account for the height of the clock hands */
59+
}
60+
61+
.hand {
62+
width: 50%;
63+
height: 6px;
64+
background: black;
65+
position: absolute;
66+
top: 50%;
67+
transform-origin: 100%;
68+
transform: rotate(90deg);
69+
transition: all 0.05ms;
70+
transition-timing-function: ease-in-out;
71+
}
72+
</style>
73+
74+
<script>
75+
const secondHand = document.querySelector('.second-hand');
76+
const minuteHand = document.querySelector('.min-hand');
77+
const hourHand = document.querySelector('.hour-hand');
78+
79+
function setDate() {
80+
const now = new Date();
81+
82+
const seconds = now.getSeconds();
83+
const secondsDegrees = ((seconds / 60) * 360) + 90;
84+
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
85+
86+
const minutes = now.getMinutes();
87+
const minutesDegrees = ((minutes / 60) * 360) + 90;
88+
minuteHand.style.transform = `rotate(${minutesDegrees}deg)`;
89+
90+
const hours = now.getHours();
91+
const hoursDegrees = ((hours / 12) * 360) + 90;
92+
hourHand.style.transform = `rotate(${hoursDegrees}deg)`;
93+
}
94+
95+
setInterval(setDate, 1000);
96+
</script>
7397
</body>
74-
</html>
98+
99+
</html>

0 commit comments

Comments
 (0)