Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Wristwatch in only HTML/CSS

codepen.io

Post reply on HN
Print view View original

31–37 of 37 posts

Re: Wristwatch in only HTML/CSS

#31

Post by biturd »

DigitalSea wrote: post #29

A little disappointed to see Javascript being used even if it's only for getting a users local time. Seems like a trivial thing to me when just having a CSS wristwatch is awesome enough without having to make it accurate. Besides that, this is awesome. Funny to see that a lot of the CSS is in-fact browser prefixed CSS and that if all browsers supported the same properties it would be much smaller. Aside: the CSS anim…

I don't know much about CPU's and which ones are better than others. They all seem fast enough to run a text editor and a browser for my needs.

That being said — I seem to have no issues viewing a fully functional watch on an iPhone 4S. The areas I actually have trouble with seem to be the usual suspects — the code display doesn't translate to touch at all so I can't scroll vertically to see how this was done beyond what is shown as a "page" worth of code.

Call me impressed in general with the work that was done. Call me doubly impressed that it works on a computer that fits in my pocket and had a primary purpose at one time of making telephone calls.

Re: Wristwatch in only HTML/CSS

#33

Post by rurounijones »

sprobertson wrote: post #28
rurounijones wrote: post #27

Is it generally accepted that "only HTML/CSS" really means "HTML/CSS/JS"? To me the title is inaccurate but no one else seems to have mentioned it so...

the comment in the JS states: The following JS is only added to start the time at your local time.

Welp, that is me looking like an idiot, I totally missed that.

Re: Wristwatch in only HTML/CSS

#34

Post by Flam »

hnriot wrote: post #26
Flam wrote: post #19

Earlier quoted context omitted.

I removed the image completely now courtesy of another commenter. Anyhow, wouldn't base64 be cheating? ;)

well, technically you're using javascript, so it's already cheating. Obviously, you have to use it, but it does break the claim of using only html/css

The javascript was added much later by popular demand to make the time accurate. Remove it and it remains functional.

Re: Wristwatch in only HTML/CSS

#35

Post by Flam »

DigitalSea wrote: post #29

A little disappointed to see Javascript being used even if it's only for getting a users local time. Seems like a trivial thing to me when just having a CSS wristwatch is awesome enough without having to make it accurate. Besides that, this is awesome. Funny to see that a lot of the CSS is in-fact browser prefixed CSS and that if all browsers supported the same properties it would be much smaller. Aside: the CSS anim…

I added the JS much after the fact that I posted this here due to popular demand to make it accurate.

Remove the JS and it remains functional, as in the first version.

Re: Wristwatch in only HTML/CSS

#36

Post by Flam »

bkyan wrote: post #25

The exposed CSS source code seems to be missing the following: #glass #center #smallHand, #glass #center #midHand, #glass #center #bigHand { -webkit-transform-origin: 0% 50%; } It's working in your demo, so I'm guessing you simply forgot to copy it over to the exposed CSS source code? Awesome work, by the way! :)

Maybe I misunderstood but isn't it right there on line 222?

Re: Wristwatch in only HTML/CSS

#37

Post by bkyan »

Flam wrote: post #36
bkyan wrote: post #25

The exposed CSS source code seems to be missing the following: #glass #center #smallHand, #glass #center #midHand, #glass #center #bigHand { -webkit-transform-origin: 0% 50%; } It's working in your demo, so I'm guessing you simply forgot to copy it over to the exposed CSS source code? Awesome work, by the way! :)

Maybe I misunderstood but isn't it right there on line 222?

For line 222, I see: transform-origin: 0% 50%;

I needed: -webkit-transform-origin: 0% 50%;

It didn't work in my chrome browser without the "-webkit-" one.

Post reply on HN