Skip to content

Commit efcdf2f

Browse files
committed
setup
1 parent 31977db commit efcdf2f

File tree

3 files changed

+31
-31
lines changed

3 files changed

+31
-31
lines changed

02 - JS + CSS Clock/index.html

Lines changed: 5 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -60,37 +60,14 @@
6060
height:6px;
6161
background:black;
6262
position: absolute;
63-
top:50%;
6463
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);
64+
top:50%;
6865
}
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-
}
9166

92-
setInterval(setDate, 1000);
67+
</style>
68+
<script>
69+
9370

94-
</script>
71+
</script>
9572
</body>
9673
</html>
File renamed without changes.
Lines changed: 26 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -61,13 +61,36 @@
6161
background:black;
6262
position: absolute;
6363
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);
6468
}
69+
</style>
6570

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

68-
<script>
76+
function setDate() {
77+
const now = new Date();
6978

79+
const seconds = now.getSeconds();
80+
const secondsDegrees = ((seconds / 60) * 360) + 90;
81+
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
7082

71-
</script>
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>
7295
</body>
7396
</html>

0 commit comments

Comments
 (0)