Skip to content

Commit b69ca63

Browse files
sabinarusieliksabinarusielik
committed
Complete wesbos#2 challenge
1 parent f5f92cc commit b69ca63

File tree

1 file changed

+71
-54
lines changed

1 file changed

+71
-54
lines changed

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

Lines changed: 71 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<title>JS + CSS Clock</title>
6-
</head>
7-
<body>
8-
9-
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>JS + CSS Clock</title>
6+
</head>
7+
<body>
108
<div class="clock">
119
<div class="clock-face">
1210
<div class="hand hour-hand"></div>
@@ -15,60 +13,79 @@
1513
</div>
1614
</div>
1715

16+
<style>
17+
html {
18+
background: #018ded url(https://unsplash.it/1500/1000?image=881&blur=5);
19+
background-size: cover;
20+
font-family: "helvetica neue";
21+
text-align: center;
22+
font-size: 10px;
23+
}
1824

19-
<style>
20-
html {
21-
background: #018DED url(https://unsplash.it/1500/1000?image=881&blur=5);
22-
background-size: cover;
23-
font-family: 'helvetica neue';
24-
text-align: center;
25-
font-size: 10px;
26-
}
25+
body {
26+
margin: 0;
27+
font-size: 2rem;
28+
display: flex;
29+
flex: 1;
30+
min-height: 100vh;
31+
align-items: center;
32+
}
2733

28-
body {
29-
margin: 0;
30-
font-size: 2rem;
31-
display: flex;
32-
flex: 1;
33-
min-height: 100vh;
34-
align-items: center;
35-
}
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: 0 0 0 4px rgba(0, 0, 0, 0.1), inset 0 0 0 3px #efefef,
43+
inset 0 0 10px black, 0 0 10px rgba(0, 0, 0, 0.2);
44+
}
3645

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-
}
46+
.clock-face {
47+
position: relative;
48+
width: 100%;
49+
height: 100%;
50+
transform: translateY(
51+
-3px
52+
); /* account for the height of the clock hands */
53+
}
5154

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-
}
55+
.hand {
56+
width: 50%;
57+
height: 6px;
58+
background: black;
59+
position: absolute;
60+
top: 50%;
61+
transform-origin: 100%;
62+
transform: rotate(90deg);
63+
transition: all 0.05s;
64+
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
65+
}
66+
</style>
5867

59-
.hand {
60-
width: 50%;
61-
height: 6px;
62-
background: black;
63-
position: absolute;
64-
top: 50%;
65-
}
68+
<script>
69+
const secondHand = document.querySelector(".second-hand");
70+
const minutesHand = document.querySelector(".min-hand");
71+
const hoursHand = document.querySelector(".hour-hand");
6672

67-
</style>
73+
function setDate() {
74+
const now = new Date();
75+
const seconds = now.getSeconds();
76+
const secondsDegrees = (seconds / 60) * 360 + 90;
77+
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
6878

69-
<script>
79+
const minutes = now.getMinutes();
80+
const minutesDegrees = (minutes / 60) * 360 + 90;
81+
minutesHand.style.transform = `rotate(${minutesDegrees}deg)`;
7082

83+
const hours = now.getHours();
84+
const hoursDegrees = (hours / 12) * 360 + 90;
85+
hoursHand.style.transform = `rotate(${hoursDegrees}deg)`;
86+
}
7187

72-
</script>
73-
</body>
88+
setInterval(setDate, 1000);
89+
</script>
90+
</body>
7491
</html>

0 commit comments

Comments
 (0)