Share your repls and programming experiences

← Back to all posts
⌚ Pure CSS clock ⏱ [UPDATED!!]
codingjlu (481)

This is an accurate realistic clock I made with pure CSS (originally with SCSS). My original pen is here (yes I do use codepen xD).

And let me tell you one thing:

It's awesome!!

Screenshot:

Thanks guys.

Update

Now with dark mode!! Just click on the background and it will change colors :)


AND that’s still pure CSS

Comments
hotnewtop
Vandesm14 (2752)

The search is over! We found the god of CSS!

codingjlu (481)

@Vandesm14 lol thanks I wouldn't say god though

ShaneAtReplit (5)

@codingjlu Better than I could ever do: https://clock.vandesm14.repl.co (if you pardon the self-promotion)

Oops, work account lol

CyberHacker101 (136)

bro urs is equally cool n legit noice @ShaneVandegrif1

StringentDev (234)

@Vandesm14 I have something for you btw. I made a webpage that does not need to reload when clicking on a link (dynamic loading) AND popstate (back and forward) works too.

CoolCoderSJ (690)

@Vandesm14 god of CSS located didnt know you could actually do so much with CSS, this is neat!

CyberHacker101 (136)

When i saw ur username i instantly thought I got banned for some reason lol @ShaneAtReplit

Missingn0 (0)

@ShaneAtReplit I think your hour hand is decaled from real time by 90 degrees counterclockwise, so if you could fix that that would be great.

ShaneAtReplit (5)

@Missingn0 The whole thing is broken. I haven't had the time or had the knowledge to fix it.

codingjlu (481)

@ShaneAtReplit wait are you a moderator (your other account)

codingjlu (481)

@ShaneAtReplit lol no wonder why you have like at least 3 accounts

ShaneAtReplit (5)

@codingjlu I have 2, @Vandesm14 is my personal account and this is my work account. I recently changed it from @ShaneVandegrif1 to @ShaneAtReplit

codingjlu (481)

@ShaneAtReplit what do you mean work account? You work for replit?

ShaneAtReplit (5)

@codingjlu Yep! I'm an intern for their support team!

codingjlu (481)

@ShaneAtReplit oh cool! I think I got an email from you xD Do you get paid or is it just work? (if you don't mind me asking)

ShaneAtReplit (5)

@codingjlu I think we should continue this via email so we don't spam this amazing post! Email me at [email protected] and I'll be there!

CyberHacker101 (136)

oke ima leave for the whole summer cya guys later @ShaneAtReplit

CyberHacker101 (136)

bro i opened it at the exact right time n its my forever clock lol @codingjlu

P0GCHAMPB0i (56)

i thought you also had to use script.js

TalinSharma (77)

No you don't have to use JavaScript. Replit just adds that to the project as most websites use JavaScript. But this is made with css and js is not needed so @codingjlu could delete. @P0GCHAMPB0i

P0GCHAMPB0i (56)

uwu this is actully gud!!!!!!

ASHstudioZ (1)

This is sick😍!!!! bro i didnt understand the line wrapper part what is it.And plz explain why did u put those characters at the starting.\

codingjlu (481)

@ASHstudioZ characters at the starting for fun; it's just a comment, and gets ignored by the computer.

For line wrappers, it's for rotation. See, when you rotate something (in CSS at least), the axis is at the center. So we have a wrapper that we spin, and inside the wrapper the lines rotate, but not at the center. I hope that makes sense (definitely not)?

cuber1515 (90)

Oh yes, the dark mode is great!

sojs (352)

click event in CSS??? How.....

codingjlu (481)

@sojs lookie my magic just look at the code xD. jkjkjk
trade secret (that I now announce to the whole world)

ANNOUNCING TO THE WHOLE WORLD!!!

but do keep it secret

an invisible checkbox, then:

.my-input:checked + .another-el {
   /* stylessssssss */
}

quick easy demo: https://codepen.io/codingjlu/pen/RwpexJX

sojs (352)

wow thats pretty brains. @codingjlu

codeitfast (58)

Technically, there is also HTML. Does that mean it isn't pure css?

RahulChoubey1 (183)

@codeitfast big brain

plus the button events are js

RahulChoubey1 (183)

@codingjlu like the onclick event. Isn't that JS?

codingjlu (481)

@RahulChoubey1 nope! It's magic CSS :) I manipulated it with a invisible checkbox :)

codingjlu (481)

@codeitfast we refer to just HTML and CSS as pure CSS :) no JS at all

codingjlu (481)

@RahulChoubey1 there is no onclick event. It's pure CSS majic.

Coder100 (18882)

well
only problem is it doesn't tell time

codingjlu (481)

@Coder100 I think I've found a solution for the user to do it manually, but it's very hard xD

RahulChoubey1 (183)

@codingjlu start it up at exactly 12:00, right?

[deleted]

What is SCSS?

codingjlu (481)

@LeSensei it's a CSS preprocessor (Like Pug is to HTML) that reduces repetition :)

[deleted]

@codingjlu ok thx for the info

goosebag (0)

i don't think its accurate though

[deleted]

@goosebag CSS can't perform that action. It doesn't have the ability to do that.

MaximilianLiceo (0)

This is awesome, there is no way to display the correct date with only css right?

TalinSharma (77)

Yeah... Sadly that is not possible. But i makes sense as CSS is a styling language and is not meant to do the calculations that would be required.

@MaximilianLiceo

tussiez (1676)

:(
Nice clock though!

codingjlu (481)

@tussiez :( lol what security threat?

tankerguy1917 (179)

@tussiez They don't want us doing anything, do they?

codingjlu (481)

@tussiez whoever your administrator is that's a bit too tight

tussiez (1676)

@codingjlu It happens really quickly - I was working on a Repl, reloaded, then BOOM! Blocked. :/

GhostKing007 (142)

@SudhanshuMishra u have watched loki?!? I have watched loki, it is amazing!

SudhanshuMishra (252)

@GhostKing007 AAA

I have'nt watched it yet ... But I will soon

Whippingdot (678)

awesome css...I will admit though that the time is wrong, and that you might be able to make the image more clearer. Still awesome work!

codingjlu (481)

@Whippingdot sorry, I can't make it accurate time with pure CSS...

Whippingdot (678)

Yeah wait I just realized that lol. You need JS for that right...

Awesome anyway for pure CSS. How did you do it? (RHETORICAL) @codingjlu

nilanshu96 (0)

Amazing! Thanks to your work I got to learn a lot

codingjlu (481)

@nilanshu96 wow I'm honored!! Thank you so much!

nbash (7)

@nbash btw i will vote up! :)

[deleted]

Cool!

SilvermoonCat (458)

coollll
but the time is wrong :’D

codingjlu (481)

@SilvermoonCat it's pure CSS. What can you expect?

SilvermoonCat (458)

oh ok I read it [email protected] I thougth by realistic you meant looks realistic and acts right too xD

[deleted]

[deleted]

/$$$$$$ /$$$$$$ /$$$$$$
/$$ $$ /$$ $$ /$$ $$
| $$ __/| $$ __/| $$ __/
| $$ | $$$$$$ | $$$$$$
| $$ __
$$ __ $$
| $$ $$ /$$ \ $$ /$$ \ $$
| $$$$$$/| $$$$$$/| $$$$$$/
____
/ __/ __/

codingjlu (481)

@daddie that looks a bit messed up... put it in a code block

trueuser0 (0)

@codingjlu

  /$$$$$$   /$$$$$$   /$$$$$$ 
 /$$__  $$ /$$__  $$ /$$__  $$
| $$  \__/| $$  \__/| $$  \__/
| $$      |  $$$$$$ |  $$$$$$ 
| $$       \____  $$ \____  $$
| $$    $$ /$$  \ $$ /$$  \ $$
|  $$$$$$/|  $$$$$$/|  $$$$$$/
 \______/  \______/  \______/ 
cuber1515 (90)
  /$$$$$$   /$$$$$$   /$$$$$$ 
 /$$__  $$ /$$__  $$ /$$__  $$
| $$  \__/| $$  \__/| $$  \__/
| $$      |  $$$$$$ |  $$$$$$ 
| $$       \____  $$ \____  $$
| $$    $$ /$$  \ $$ /$$  \ $$
|  $$$$$$/|  $$$$$$/|  $$$$$$/
 \______/  \______/  \______/ 

why is this cool?

JameRussell (0)

This is an awesome project, and there is no upvote button on this page; I did upvote on the opened one though with a comment.
But I do have a question, how do you set the clock to the right time?

codingjlu (481)

@JameRussell unfortunately that's not possible with pure CSS...