Skip to content

Commit 2cf2b0d

Browse files
cecstarcecstar
committed
completed html clock with in-line css stlying. Future iterations: Add conditional to transitions to improve quality.
1 parent a7ee758 commit 2cf2b0d

File tree

3 files changed

+39
-213
lines changed

3 files changed

+39
-213
lines changed

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

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

‎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: 39 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,22 @@
11
<!DOCTYPE html>
22
<html lang="en">
33
<head>
4-
<meta charset="UTF-8">
5-
<title>JS + CSS Clock</title>
4+
<meta charset="utf-8">
5+
<title> JS + CSS Clock</title>
66
</head>
77
<body>
88

9-
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>
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>
1614
</div>
17-
15+
</div>
1816

1917
<style>
2018
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;
19+
background: #018DED url(http://unsplash.it/1500/1000?image=881&blur=50);
2620
}
2721

2822
body {
@@ -36,7 +30,7 @@
3630
.clock {
3731
width: 30rem;
3832
height: 30rem;
39-
border:20px solid white;
33+
border:20px solid hotpink;
4034
border-radius:50%;
4135
margin:50px auto;
4236
position: relative;
@@ -52,45 +46,48 @@
5246
position: relative;
5347
width: 100%;
5448
height: 100%;
55-
transform: translateY(-3px); /* account for the height of the clock hands */
49+
transform: translateY(-3px);
5650
}
5751

5852
.hand {
59-
width:50%;
60-
height:6px;
61-
background:black;
53+
width: 50%;
54+
height: 6px;
55+
background: black;
6256
position: absolute;
63-
top:50%;
57+
top: 50%;
6458
transform-origin: 100%;
6559
transform: rotate(90deg);
6660
transition: all 0.05s;
61+
/*add 'if' stateement to above transition to remove glitch when clock hits 60*/
6762
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
6863
}
69-
</style>
7064

71-
<script>
72-
const secondHand = document.querySelector('.second-hand');
73-
const minsHand = document.querySelector('.min-hand');
74-
const hourHand = document.querySelector('.hour-hand');
65+
</style>
66+
<script>
67+
const secondHand = document.querySelector('.second-hand');
68+
const minuteHand = document.querySelector('.min-hand');
69+
const hourHand = document.querySelector('.hour-hand');
7570

76-
function setDate() {
77-
const now = new Date();
71+
function setDate() {
72+
const now = new Date();
7873

79-
const seconds = now.getSeconds();
80-
const secondsDegrees = ((seconds / 60) * 360) + 90;
81-
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
74+
const seconds = now.getSeconds();
75+
const secondsDegrees = ((seconds / 60) * 360 + 90 );
76+
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
77+
console.log("seconds", seconds);
8278

83-
const mins = now.getMinutes();
84-
const minsDegrees = ((mins / 60) * 360) + 90;
85-
minsHand.style.transform = `rotate(${minsDegrees}deg)`;
79+
const minutes = now.getMinutes();
80+
const minuteDegrees = ((minutes / 60) * 360 + 90);
81+
minuteHand.style.transform = `rotate(${minuteDegrees}deg)`;
82+
console.log("mins", minutes);
8683

87-
const hour = now.getMinutes();
88-
const hourDegrees = ((mins / 12) * 360) + 90;
89-
hourHand.style.transform = `rotate(${hourDegrees}deg)`;
90-
}
91-
92-
setInterval(setDate, 1000);
84+
const hours = now.getHours();
85+
const hourDegrees = ((hours / 60) * 360 + 90);
86+
hourHand.style.transform = `rotate(${hourDegrees}deg)`;
87+
console.log("hours", hours);
88+
}
9389

94-
</script>
90+
setInterval(setDate, 1000);
91+
</script>
9592
</body>
96-
</html>
93+
</html>

0 commit comments

Comments
 (0)