Web clock not working?

1

For some reason my web clock is not loading on the page - I have no idea why. Source code is here: https://github.com/GiacomoLaw/clock

Live site is here: https://giacomolaw.github.io/clock/

I followed this tutorial, but as you can tell it didn’t turn out as it did on the tutorial: https://cssanimation.rocks/clocks/

I’ve checked over, no mistakes as far as I can see. I tried the code on Codepen, also didn’t work.

Thank you!

2

In the live version it has an error calling the script in console. When I placed it in my code editor I put the js file in the footer the hands move for me now
footer
script type=“text/javascript” src="js/time.js"
footer

3

I’ll give it a go now, thank you!

4

Nope, still not working. I don’t see anything - the page is just blank for me. :confused:

5

I sent you something on github let me know if it works. Just made html changes and linked css straight to the web page. I hope it helps or give you some more ideas

6

I can see it now, but the hour and minute hands don’t move. Also the white circle is way to large :slight_smile:
https://giacomolaw.github.io/clock/

Thanks for your help though!

7

Cool It gets you back on track :slight_smile:
I think minute hand does move I just watched it for a minute and it moved lol

1 Like
8

Okay, thanks. It seems the local user time js isn’t working correctly :confused:

https://github.com/GiacomoLaw/clock/blob/master/js/time.js

Thanks for your help!

9

I’ve checked the js and initLocalClocks() function is not being called.

I’ve added a git hub that just calles initLocalClocks(); after the initLocalClocks() function.

Hope it helps.

1 Like
10

Awesome, it works!

I just have one problem - the hand sizes are huge! I tried editing the percentages, but then it went insane. The css file is here:

Thanks so much for your help!

11

I’ve played height and top values, these might work give them a go, if not fiddle with the top height values.

.hours {
background: #000;
height: 10%;
left: 48.75%;
position: absolute;
top: 40%;
transform-origin: 50% 100%;
width: 2.5%;
}

.minutes {
background: #000;
height: 20%;
left: 49%;
position: absolute;
top: 30%;
transform-origin: 50% 100%;
width: 2%;
}

.seconds {
background: #000;
height: 25%;
left: 49.5%;
position: absolute;
top: 30%;
transform-origin: 50% 80%;
width: 1%;
z-index: 8;
}

1 Like
12

Thanks, I’ll test them now!