Playing with colours
rjlevy (306)

This dial changes colour and rotates with each number. All made with CSS - no JS used

You are viewing a single comment. View All
python88 (138)

u did it without js? idk what it means but it sounds hard because people say that not using js is hard

rjlevy (306)

Hi @python88, this is a common trick where you use the state of the radio button to control the CSS.

In the CSS you will see the :checked pseudo-class selector being used. So when you click on a number, the hidden radio button gets selected and the CSS controls the position of the arrow and colour of the circular dial.

It took me a long time to work this out. I saw someone doing something like this on Twitter and thought it would be a good challenge.

Whenever possible, I try achieve things with CSS alone - without any JS.

rjlevy (306)

Hey @python88, have you seen the new game I created? It's called Solitaire. Have a look here: https://repl.it/talk/share/GAME-Play-SOLITAIRE-another-awesome-game/54194

python88 (138)

@rjlevy i hope it gets trending!

rjlevy (306)

@python88 me too! Will you tell your coding friends about it?