Skip to content

Commit f88a7a9

Browse files
fthebaudfthebaud
committed
Ex2 - Clock
1 parent 991926b commit f88a7a9

File tree

3 files changed

+118
-24
lines changed

3 files changed

+118
-24
lines changed

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

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Document</title>
6+
</head>
7+
<body>
8+
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>
16+
</div>
17+
18+
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 0px 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+
}
57+
58+
.hand {
59+
width:50%;
60+
height:6px;
61+
background:black;
62+
position: absolute;
63+
top:50%;
64+
transform-origin: 100%;
65+
transform: rotate(90deg);
66+
transition: all 0.05s;
67+
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
68+
}
69+
</style>
70+
71+
<script>
72+
const secondHand = document.querySelector('.second-hand');
73+
const minsHand = document.querySelector('.min-hand');
74+
const hourHand = document.querySelector('.hour-hand');
75+
76+
function setDate() {
77+
const now = new Date();
78+
79+
const seconds = now.getSeconds();
80+
const secondsDegrees = ((seconds / 60) * 360) + 90;
81+
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
82+
83+
const mins = now.getMinutes();
84+
const minsDegrees = ((mins / 60) * 360) + 90;
85+
minsHand.style.transform = `rotate(${minsDegrees}deg)`;
86+
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);
93+
94+
</script>
95+
</body>
96+
</html>

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

Lines changed: 1 addition & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -67,30 +67,7 @@
6767
transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1);
6868
}
6969
</style>
70+
<script src="./script.js" charset="utf-8"></script>
7071

71-
<script>
72-
const secondHand = document.querySelector('.second-hand');
73-
const minsHand = document.querySelector('.min-hand');
74-
const hourHand = document.querySelector('.hour-hand');
75-
76-
function setDate() {
77-
const now = new Date();
78-
79-
const seconds = now.getSeconds();
80-
const secondsDegrees = ((seconds / 60) * 360) + 90;
81-
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
82-
83-
const mins = now.getMinutes();
84-
const minsDegrees = ((mins / 60) * 360) + 90;
85-
minsHand.style.transform = `rotate(${minsDegrees}deg)`;
86-
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);
93-
94-
</script>
9572
</body>
9673
</html>

‎02 - JS + CSS Clock/script.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
'use strict';
2+
3+
const secondHand = document.querySelector('.second-hand');
4+
const minuteHand = document.querySelector('.min-hand');
5+
const hourHand = document.querySelector('.hour-hand');
6+
7+
function setTime() {
8+
const now = new Date();
9+
console.log(now);
10+
const seconds = now.getSeconds();
11+
const minutes = now.getMinutes();
12+
const hours = now.getHours();
13+
const secondsDegrees = seconds * 6 + 90; // seconds / 60 * 360 => 360/60=6
14+
const minutesDegrees = minutes * 6 + 90;
15+
const hoursDegrees = hours *15 + 90; //360/24=15
16+
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
17+
minuteHand.style.transform = `rotate(${minutesDegrees}deg)`;
18+
hourHand.style.transform = `rotate(${hoursDegrees}deg)`;
19+
}
20+
21+
setInterval(setTime, 1000);

0 commit comments

Comments
 (0)