Forum Contest: Create an Analog Clock

Good luck to all participates! Looking forward to seeing your designs.

Challenge accepted!!!

Done mine! http://codepen.io/lematy/pen/JmeEb

but i photoshopped some images for the hands and the clock. Is that allowed or does it all have to be in css?

Thanks :D and i tried without images but that didnt look as good lol

The game is afoot!!!

Here's my first iteration: Full Page / Code.

I have the basic mechanics working, but I'll need to get my second iteration done before week's end (for the first time ever) if I am to beat Daniel.

--- later ---

Here's my second iteration: Full / Code

-- much later --

Final submission: Full Page / CodePen

I don't know if moderators are allowed to compete in these or not, but I wanted to participate. I've probably disqualified myself by using SVG, but I realised I have never experimented with SVG and this seemed like a nice opportunity to do so.

I opted for a simple, minimal design because I didn't want to complicate the SVG too much. I used CSS as little as possible — I'm only centering the container div on the page.

All the colors are defined in the SVG, including the clock shadow gradient. The background color of the page is set in JavaScript as it's dynamic — it changes according to the time of day (it gets lighter towards noon and darker towards midnight).

The shadow that the clock throws also moves during daytime, travelling from left to right as the "Sun" moves across the sky. It also changes intensity (opacity). I picked arbitrary sunrise (5am) and sunset times (7pm) to keep the code as simple as possible.

During "night" the shadow is fixed at an angle of -45deg, and its opacity is set to 0.2, due to some imaginary static light source.

All the functions that calculate hand and shadow data were declared as methods on the Date.prototype property. I chose to extend the built-in object to add analog clock functionality to it. It seemed appropriate in the context of the contest.

Finally, this currently doesn't work in Firefox, as Firefox doesn't have transform-origin support for SVG.

Okay, here's the clock: Full page/Code

Here's my entry: Full / Code

Went a totally different direction with mine.

Word Clock -- fullscreen & code

Here comes my (wait for it) second iteration:

Full / Code

There are a few "known issues," not the least of which is that the responsive design went out the window. Oh, and I only have webkit imlementation, so you'll need Chrome or Safari. Hopefully I'll have this all cleaned up right quick.

-- much later --

Final submission: Full Page / CodePen

Nice! I like the badges idea :)

Okay, here's my second version: Full / Code

Wait! That looks like my first version! Well, yes... visually, it's identical, but I've made significant under the hood changes.

First of all, only the shadow is an SVG. The clock itself is a collection of divs.

I grabbed the clock functionality from my first version and turned it into a JavaScript clock library called mikulas.js. I named it after the Czech clockmaker who co-created the Prague astronomical clock.

I am no longer extending the Date object, I have a new Mikulas object that contains a date property.

It will work both on divs and SVG as all you need to do is pass it the ids of the elements representing clock hands. Optionally, you can pass it a callback function which will get executed every time the clock is updated (I use this for the shadow and background changes):

var c = new Mikulas("h", "m", "s", function() {
  console.log("Clock updated!");
});

You can set the time to a particular time or let it run normally:

c.setClockTime(someDateObject); // setting it to particular time
c.start(); // letting the clock work normally based on local time

If you wish, you can also stop the clock at some point:

c.stop();

Basically, as long as you have a bunch of elements resembling clock hands (set at 12 o'clock), it'll work. The transform-origin property is set programatically on the hand elements.

This version also works in Firefox because I'm not rotating the SVG path, instead, I'm rotating the div containing the SVG.

I'm importing mikulas.js from my GitHub page inside the CodePen, but you can see what it looks like here or on Github.

The shadow and background dynamics aren't a part of mikulas, instead they are custom functions called in the optional callback argument.

I created this using HTML5 Canvas which goes hand in hand with Javascript. There are no images or external libraries :) I must say this was quite fun!

Full screen: http://codepen.io/joshsanger/full/yAFpa/ Code: http://codepen.io/joshsanger/pen/yAFpa

Left my answer as a comment on the post. Oops.

Here ya go, hope you like it:

http://codepen.io/jvincilione/full/gakLF

After looking at some of the others, I decided to change mine a bit.

Full Page With Editor

Comments/Critiques are appreciated. Entire analog clock built with canvas.

My first creation ever :D

code / Full

v2 code / Full

Modifications: replaced the golden hand pointer image replaced outer ring image

Hope it's okay for me to keep tweaking after I post.

http://codepen.io/ashlynnpai/full/Cphar

http://codepen.io/ashlynnpai/pen/Cphar/

My clock is based on the Astronomical Clock in Prague. I wanted to work on something Czech so luckily this project came along because I was going to make something beer related. I did nearly all the work today so there may be some mistakes I can't see from being too tired, so feel free to let me know.

Functions of the clock:

Outer ring -- This is an approximation of old Czech time and show the hours until sunset, with the golden number 24 marking the time of sunset. It doesn't use the proper algorithms because I didn't want to get bogged down here (http://www.mysundial.ca/files/H2SSManual040801.pdf). Instead from Dec 12, the ring rotates clockwise .42 degrees per day. From June 21, it rotates counterclockwise .42 degrees per day. These are the days of earliest and latest sunset in Prague this year. Maybe later I will fix the algorithm, but not today =).

Main ring -- This shows the hour according to astronomical time, with noon at 0 degrees and midnight at 180 degrees. The golden hand points to the current hour. I added the minute and second hand (which is not authentic) so people could see something in motion as everything else doesn't move often.

Inner ring -- This shows the signs of the Zodiac and the position of the sun on the hand pointer is supposed to identify the current Zodiac sign, so it rotates along with the hour hand. Right now it's 30 days behind so I'll have to redo my calculations later. If anyone spots my error that would be great. I'm too tired to see it.

Sorry no figurine show! I was going to make one then decided not to.

Hey Guys, here is my Clock. I have used Canvas and some Math to develop this.

Pen - Full

I have added a button to increase speed of time, so you can move forward to see all states of this clock.

Thanks

Here's mine: Full page on Codepen. I used Dino Paškvan's library mikulas.js. Thanks Dino!

needed help with javascript so ty to Dino for your explanations, I have never participated in any contest before but here is my attempt:

full page: http://codepen.io/jangofett/full/zutcv

code: http://codepen.io/jangofett/pen/zutcv?editors=001

This is made in pure CSS3, no Javascript: Full | Code

Here's Mine: http://codepen.io/pooley182/full/cnCep

Final submission: Full Page / CodePen

In the end, simplicity won the day. There were too many bells and whistles with the badges ... and they looked ugly.

Here's mine!

http://codepen.io/Talmarei/pen/vmxcb

This is my first contest entry, had lots of fun with this - hope you like it. Looking forward to taking part in more!

Hi everyone,

Wow! Once again, there are tons of amazing entries. We went through all of them several times today and you certainly didn't make it easy to decide a winner. :) You should all feel proud of the work you've done here, because now you have that much more experience and another item to include in your portfolio.

This week's winner is Christine Dawson! She put together this amazing grandfather clock using HTML, CSS, and JavaScript. Like most of the designs here, this wouldn't quite make semantic sense on a webpage, but it certainly looks very well polished. Congrats, Christine!

Our next forum contest is all about creating a responsive data table.

Congrat, Christine!!!

Here's my solution mostly CSS based solution. Took me 18 minutes. Would work only in modern browsers because of CSS3 and querySelector.

http://codepen.io/viktorbezdek/full/HdeGt/