Clock
Assignment 4:
Finish making a clock!!
We put together a page that sets up the basics of an analog clock, but feel free to make any kind of clock you want, or to customize the style of analog clock we started. Add any details you like and feel free to go wild! However please no digital clocks :)
Please turn in as an attachment to an email, or on Microsoft teams.
Here is the code from class:
index.html
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>Clock</title>
8 <link rel="stylesheet" href="style.css">
9 </head>
10 <body>
11 <div id="clock">
12 <div id="hours"></div>
13 <div id="minutes"></div>
14 <div id="seconds"></div>
15 </div>
16 <script src="script.js"></script>
17 </body>
18</html>script.js
1let hours = document.querySelector("#hours");
2let minutes = document.querySelector("#minutes");
3let seconds = document.querySelector("#seconds");
4
5let getTime = () => {
6 let fullDate = Date();
7 let time = fullDate.split(" ");
8 let timeComponents = time[4].split(":")
9 return [
10 parseInt(timeComponents[0]),
11 parseInt(timeComponents[1]),
12 parseInt(timeComponents[2])
13 ]
14}
15
16let updateClock = () => {
17 let time = getTime();
18 console.log(time);
19 //add code here
20
21 //Hint!
22 seconds.style.transform = "rotate(5deg)"
23}
24
25setInterval(updateClock,1000);style.css
1#clock {
2 width: 500px;
3 height: 500px;
4 border: solid black 1px;
5 border-radius: 50%;
6 position: relative;
7}
8
9#hours, #minutes, #seconds {
10 position: absolute;
11 bottom: 50%;
12 transform-origin: bottom;
13}
14
15#hours {
16 background: red;
17 height: 30%;
18 width: 16px;
19 left: calc(50% - 8px);
20}
21
22#minutes {
23 background: green;
24 height: 40%;
25 width: 10px;
26 left: calc(50% - 5px);
27}
28
29#seconds {
30 background: blue;
31 height: 50%;
32 width: 2px;
33 left: calc(50% - 1px);
34}