Visitar URL original
Day two - JS clock, and moved CSS styles out of body into separate file. · wesbos/JavaScript30@f8d0c87 · GitHub
Skip to content

Commit f8d0c87

Browse files
weberjacobweberjacob
committed
Day two - JS clock, and moved CSS styles out of body into separate file.
1 parent 4763526 commit f8d0c87

2 files changed

Lines changed: 69 additions & 44 deletions

File tree

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

Lines changed: 21 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<head>
44
<meta charset="UTF-8">
55
<title>JS + CSS Clock</title>
6+
<link rel="stylesheet" href="styles.css">
67
</head>
78
<body>
89

@@ -17,57 +18,33 @@
1718

1819

1920
<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-
}
21+
2722

28-
body {
29-
font-size: 2rem;
30-
display:flex;
31-
flex:1;
32-
min-height: 100vh;
33-
align-items: center;
34-
}
23+
</style>
3524

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-
}
25+
<script>
26+
const secondHand = document.querySelector('.second-hand');
27+
const minuteHand = document.querySelector('.min-hand');
28+
const hoursHand = document.querySelector('.hour-hand');
5029

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-
}
30+
function setDate() {
31+
const now = new Date();
32+
33+
const seconds = now.getSeconds();
34+
const secondsDegrees = ((seconds / 60) * 360) + 90;
35+
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
5736

58-
.hand {
59-
width:50%;
60-
height:6px;
61-
background:black;
62-
position: absolute;
63-
top:50%;
64-
}
37+
const minutes = now.getMinutes();
38+
const minutesDegrees = ((minutes / 60) * 360) + 90;
39+
minuteHand.style.transform = `rotate(${minutesDegrees}deg)`;
6540

66-
</style>
67-
68-
<script>
41+
const hours = now.getHours();
42+
const hoursDegrees = ((hours / 12) * 360) + 90;
43+
hoursHand.style.transform = `rotate(${hoursDegrees}deg)`;
6944

45+
}
7046

47+
setInterval(setDate, 1000);
7148
</script>
7249
</body>
7350
</html>

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

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
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:
26+
0 0 0 4px rgba(0,0,0,0.1),
27+
inset 0 0 0 3px #EFEFEF,
28+
inset 0 0 10px black,
29+
0 0 10px rgba(0,0,0,0.2);
30+
}
31+
32+
.clock-face {
33+
position: relative;
34+
width: 100%;
35+
height: 100%;
36+
transform: translateY(-3px); /* account for the height of the clock hands */
37+
}
38+
39+
.hand {
40+
width:50%;
41+
height:6px;
42+
background:black;
43+
position: absolute;
44+
top:50%;
45+
transform-origin: 100%;
46+
transform: rotate(90deg);
47+
transition: transform 0.05s cubic-bezier(0.1, 2.7, 0.58, 1);
48+
}

0 commit comments

Comments
 (0)