⌚ Pure CSS clock ⏱ [UPDATED!!]
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!!
Thanks guys.
Update
Now with dark mode!! Just click on the background and it will change colors :)
bro i opened it at the exact right time n its my forever clock lol @codingjlu
@CyberHacker101 lolol nice
i thought you also had to use script.js
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
uwu this is actully gud!!!!!!
@P0GCHAMPB0i thanks! :)
Nice!
AMAZING BRO
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.\
@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)?
Oh yes, the dark mode is great!
click event in CSS??? How.....
@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
wow thats pretty brains. @codingjlu
NP! @codingjlu
Technically, there is also HTML. Does that mean it isn't pure css?
@codeitfast big brain
plus the button events are js
@codingjlu like the onclick event. Isn't that JS?
@RahulChoubey1 nope! It's magic CSS :) I manipulated it with a invisible checkbox :)
@codingjlu noice
@codeitfast we refer to just HTML and CSS as pure CSS :) no JS at all
@RahulChoubey1 there is no onclick event. It's pure CSS majic.
Noice
well
only problem is it doesn't tell time
@codingjlu this is really cool!
What is SCSS?
@codingjlu ok thx for the info
This is awesome, there is no way to display the correct date with only css right?
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.
@codingjlu :thonk:
@tussiez They don't want us doing anything, do they?
@tankerguy1917 *During school hours
@codingjlu It happens really quickly - I was working on a Repl, reloaded, then BOOM! Blocked. :/
is loki alive ?
@SudhanshuMishra u have watched loki?!? I have watched loki, it is amazing!
@GhostKing007 AAA
I have'nt watched it yet ... But I will soon
looks beautiful
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!
@Whippingdot sorry, I can't make it accurate time with pure CSS...
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
Amazing! Thanks to your work I got to learn a lot
@nilanshu96 wow I'm honored!! Thank you so much!
Cool!
coollll
but the time is wrong :’D
@SilvermoonCat it's pure CSS. What can you expect?
oh ok I read it [email protected] I thougth by realistic you meant looks realistic and acts right too xD
/$$$$$$ /$$$$$$ /$$$$$$
/$$__ $$ /$$__ $$ /$$__ $$
| $$ _/| $$ _/| $$ _/
| $$ | $$$$$$ | $$$$$$
| $$ ___ $$ ____ $$
| $$ $$ /$$ \ $$ /$$ \ $$
| $$$$$$/| $$$$$$/| $$$$$$/
_/ _/ ______/
/$$$$$$ /$$$$$$ /$$$$$$ /$$__ $$ /$$__ $$ /$$__ $$ | $$ \__/| $$ \__/| $$ \__/ | $$ | $$$$$$ | $$$$$$ | $$ \____ $$ \____ $$ | $$ $$ /$$ \ $$ /$$ \ $$ | $$$$$$/| $$$$$$/| $$$$$$/ \______/ \______/ \______/
/$$$$$$ /$$$$$$ /$$$$$$ /$$__ $$ /$$__ $$ /$$__ $$ | $$ \__/| $$ \__/| $$ \__/ | $$ | $$$$$$ | $$$$$$ | $$ \____ $$ \____ $$ | $$ $$ /$$ \ $$ /$$ \ $$ | $$$$$$/| $$$$$$/| $$$$$$/ \______/ \______/ \______/
why is this cool?
@cuber1515 because it is??
@codingjlu ok
@cuber1515 lol
@codingjlu good answer.
this is super cool
@Bunnytoes thanks :)
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?
@JameRussell unfortunately that's not possible with pure CSS...
omg it is so cool!
wow this is awesome!
@ruiwenge2 thanks :)
The search is over! We found the god of CSS!
@Vandesm14 lol thanks I wouldn't say god though
@codingjlu Better than I could ever do: https://clock.vandesm14.repl.co (if you pardon the self-promotion)
Oops, work account lol
@ShaneVandegrif1 lol "ShaneVandegrif1" xD
@ShaneVandegrif1 nice
bro urs is equally cool n legit noice @ShaneVandegrif1
@CyberHacker101 Lol thanks!
@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.
@StringentDev That's neat!
@StringentDev wow can you show me?
haha @Vandesm14
@Vandesm14 god of CSS located didnt know you could actually do so much with CSS, this is neat!
When i saw ur username i instantly thought I got banned for some reason lol @ShaneAtReplit
@CyberHacker101 Lol
@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.
@Missingn0 The whole thing is broken. I haven't had the time or had the knowledge to fix it.
@ShaneAtReplit wait are you a moderator (your other account)
@codingjlu Yes, @Vandesm14 (also me) is a moderator
@ShaneAtReplit lol no wonder why you have like at least 3 accounts
@codingjlu I have 2, @Vandesm14 is my personal account and this is my work account. I recently changed it from @ShaneVandegrif1 to @ShaneAtReplit
@ShaneAtReplit what do you mean work account? You work for replit?
@codingjlu Yep! I'm an intern for their support team!
@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)
@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!
@ShaneAtReplit cool thanks!
oke ima leave for the whole summer cya guys later @ShaneAtReplit