However after seeing this awesome post by Alvaro Motoro on how much Jeff Bezos makes per second (and with the useful comment by Temani Afif) I realised I could fake it!
I have shamelessly stolen about 90% of the mark-up for Alvaro's post, I hope he doesn't mind!
Click on the black boxes to generate your password. Click again to start the randomiser going again to pick another password! Simple.
Note: as many of you know I advocate for accessibility, the below is not accessible, it is a silly experiment NOT to be used in the real world.
[フレーム]
The chance of generating the same password is actually very low due to human reaction times, rendering times etc.
Obviously as I said earlier, I wouldn't recommend this for production.....it isn't actually random, it isn't accessible and you can't copy and paste the generated password.
In fact it is pretty rubbish as a password generator!
However the principle of "faking" random could be used for all sorts of things such as a random colour picker, dice etc.
Anyway, as it isn't usable in production I am not even going to explain it, just thought I would lay claim to the title of the first person to create a CSS only password generator (as I don't think anyone has done it before)!
(Ok I will explain a little).
We toggle a checkbox and use CSS to grab the checked state. When the checkbox is unchecked (we start checked) we use animation-play-state: paused; to stop all animations. When it is checked we unpause all the animations..
input:checked + label span.number::before {
animation-play-state: running;
}
As for the animations - each box is simply jumping between letters and numbers at a super fast pace, with a different timing for each box so you get the appearance of randomness.
Update
For anyone who likes CSS witch craft / voodoo here is Temani Afif)'s "single element" version (it is two elements...I have to get a dig in somewhere 🤣).
[フレーム]
It doesn't work in anything other than Chromium based browsers (at the moment) but how can you possibly not be impressed with the creativity, I think I learned at least 5 new CSS tricks just from that fiddle alone!
I am going to say mine is better just because it uses 62 characters instead of 26...😋