html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!-- Created by Kumah Kwadwo Roland -->
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div class = "clock">
<div class = "number">
<div class = "twelve">12</div>
<div class = "three">3</div>
<div class = "six">6</div>
<div class = "nine">9</div>
</div>
<div class = "arrow">
<div class = "hour"></div>
<div class = "minute"></div>
<div class = "second"></div>
</div>
<img src="https://www.freepnglogos.com/uploads/rolex-png-logo/rolex-png-logo-0.png" width="200" alt="rolex png logo" />
</div>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/* Created by Kumah Kwadwo Roland */
body {
margin:0;
padding:0;
background: salmon;
height:100vh;
display:flex;
justify-content:center ;
align-items:center ;
}
img{
width:70px;
position:absolute ;
left:50%;
transform:translate(-50%);
top:60px;
z-index:2;
}
.clock{
background: lightgray;
width:350px;
height:350px;
border-radius:50%;
border:5px solid darkgray;
box-shadow:1px 1px 4px rgba(0,0,0,.7);
position:relative ;
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// Created by Kumah Kwadwo Roland
window.onload = function() {
setInterval(updateClock, 1000)
}
function updateClock(){
//console.log('hi')
const currentDate = new Date();
// setTimeout(updateClock ,1000);
const hour = currentDate.getHours();
const minute = currentDate.getMinutes();
const second = currentDate.getSeconds();
const hourEl = document.querySelector(".hour");
const minuteEl = document.querySelector(".minute");
const secondEl = document.querySelector(".second");
const hourDeg = (hour / 12) * 360;
hourEl.style.transform = `rotate(${hourDeg}deg)`;
const minuteDeg = (minute / 60) * 360;
minuteEl.style.transform = `rotate(${minuteDeg}deg)`;
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run