Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Michael Bredthauer
Michael Bredthauer
13,429 Points

How to make a working analog clock?

I want to make a working analog clock, designing the clock with illustrator and making it work either on a website and an app. What would be the best way to do this?

1 Answer

Iain Simmons
MOD
Iain Simmons
Treehouse Moderator 32,305 Points
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

I think either with CSS animations (you can 'step' the animations if you want to tick for each second, or otherwise have the hands smoothly rotate), or using SVG (which if you're comfortable with Illustrator, might make more sense to you...).

Just do a Google search on either one and look at how others have done it and see what makes more sense to you.

Michael Bredthauer
Michael Bredthauer
13,429 Points

thanks, I had thought about using css animations, but thought I might need javascript to make the different hands work together.

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

You don't need JavaScript for the animations, but you would for getting the actual time, and potentially for making it work continually, rather than for a specific amount of time.

Some of the articles/demos I found when searching for 'css3 analog clock' were from as far back as 2008/2009, so there's tons of different ways to accomplish this!