1 parent 59826fa commit 751b641Copy full SHA for 751b641
2 files changed
01 - JavaScript Drum Kit/style.css
@@ -1,4 +1,4 @@
1
-html {
+/*html {*/
2
font-size: 10px;
3
background:url(http://i.imgur.com/b9r5sEL.jpg) bottom center;
4
background-size: cover;
02 - JS + CSS Clock/index-START.html
@@ -61,13 +61,48 @@
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
+
70
+ .second-hand {
71
+ background:yellow;
72
73
74
+ .min-hand {
75
+ background:blue;
76
77
78
+ .hour-hand {
79
80
}
81
82
</style>
83
84
<script>
85
+ const secondHand = document.querySelector('.second-hand');
86
+ const minHand = document.querySelector('.min-hand');
87
+ const hourHand = document.querySelector('.hour-hand')
88
+ function setDate(){
89
+ const now = new Date();
90
+ const seconds = now.getSeconds();
91
+ const secondsDegrees = ((seconds / 60) * 360) + 90;
92
+ secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
93
94
+ const minutes = now.getMinutes();
95
+ const minutesDegrees = ((minutes / 60) * 360) + 90;
96
+ minHand.style.transform = `rotate(${minutesDegrees}deg)`;
97
98
+ const hours = (now.getMinutes() / 60);
99
+ console.log(hours);
100
+ const hoursDegrees = ((hours / 12) * 360) + 180;
101
+ // console.log(hoursDegrees);
102
+ hourHand.style.transform = `rotate(${hoursDegrees}deg)`;
103
104
105
+ setInterval(setDate, 1000);
106
</script>
107
</body>
108
</html>
0 commit comments