Share your repls and programming experiences

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

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 (2729)

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

codingjlu (176)

@Vandesm14 lol thanks I wouldn't say god though

ShaneAtReplit (0)

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

Oops, work account lol

CyberHacker101 (126)

bro urs is equally cool n legit noice @ShaneVandegrif1

StringentDev (224)

@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 (596)

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

CyberHacker101 (126)

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

P0GCHAMPB0i (52)

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 (52)

uwu this is actully gud!!!!!!

cuber1515 (57)

Oh yes, the dark mode is great!

ASHstudioZ (0)

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 (176)

@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)?

Coder100 (18089)

well
only problem is it doesn't tell time

codingjlu (176)

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

RahulChoubey1 (172)

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

codingjlu (176)

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

goosebag (0)

i don't think its accurate though

LeSensei (24)

@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

CyberHacker101 (126)

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

tussiez (1645)

:(
Nice clock though!

codingjlu (176)

@tussiez :( lol what security threat?

tankerguy1917 (182)

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

codingjlu (176)

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

tussiez (1645)

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

GhostKing007 (139)

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

SudhanshuMishra (250)

@GhostKing007 AAA

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

Whippingdot (652)

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 (176)

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

Whippingdot (652)

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 (176)

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

nbash (0)

what is this?

nbash (0)

@nbash btw i will vote up! :)

codingjlu (176)

@nbash a clock... ? thanks!

SilvermoonCat (435)

coollll
but the time is wrong :’D

codingjlu (176)

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

SilvermoonCat (435)

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

[deleted]

[deleted]

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

codingjlu (176)

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

trueuser0 (0)

@codingjlu

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

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 (176)

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

cuber1515 (57)

This is cool! Obviously the coolest thing is the CSS picture on the top of the index.html file. lol.

codingjlu (176)

@cuber1515 lol...

CONFESSION:

I just used a generator thing I found online xD

IMightBeMe (33)

Can I have the link for that plz, I have been trying to do things like that from scratch and my brain is dying. Great site btw CSS is one of the hardest langs because it's mostly guesswork, so anyone who is good at it is a master programmer in my opinion. (Yes ik that css technically isn't a lang but wtv) @codingjlu

IMightBeMe (33)

I just noticed that ur bio is a reference to Migraine by TOP lol @cuber1515

cuber1515 (57)

@IMightBeMe Yoooooooooooo! Yes it is! Your the first person to notice that ever! Are you a fan?

IMightBeMe (33)

Of course! Migraine used to be my fav song but now it's either Mulberry Street or The Outside both from their new albumn @cuber1515

cuber1515 (57)

@IMightBeMe My current favorite is probably The Outside, No Chances, or Redecorate, overall album is really good, in my opinion it's tied with BLURRYFΛCE for their best album. twenty øne piløts though is undoubtably the best!

IMightBeMe (33)

Ye Blurryface and Scaled and Icy are both their best albums @cuber1515

cuber1515 (57)

@IMightBeMe Do you know the story the songs create (even a lot of fans don't know so if you don't, don't be embarrassed)?

IMightBeMe (33)

Yea i do. I don't know as much as my sister but i know some things @cuber1515

cuber1515 (57)

@IMightBeMe Cool! I'm planning on making a website that goes through each of there songs and gives like the meaning behind it someday, but idk bc it will take a long time.

EdwardBentler (34)

That's amazing! I tried looking at the code to see what properties you used to animate it and the majority of the properties I didn't even know about.

codingjlu (176)

@EdwardBentler lol you'll get better soon. Thanks!