style multiple choice interface with css

tangway commented 6 months ago

[x] select a suitable gradient that doesnt clash with the usual colors used by flags
[x] style the choice buttons
[x] style the Next button

it was difficult getting started on this as i havnt been doing css for quite a few months. as always it helps to just start writing the simplest version of it i knew and it would start a natural feedback loop where you keep iterating upon it.

was also a good reminder of the process of using devtools to debug css problems:

always go up through the html structure to see which property is affecting the behaviour of the problematic element
looking through the Styles tab to see which rules are affecting it
using built-in layout tools of Firefox and Chrome to debug flexbox issues

tangway commented 5 months ago

chose a neutral gradient for background from https://cssgradient.io/gradient-backgrounds/ it had to not clash with the colors most used in flags so the flags would stand out

tangway commented 5 months ago

button was chosen from button no. 30 here: https://getcssscan.com/css-buttons-examples

the Next button was done by flipping the colors of this

tangway commented 5 months ago

kept .next-button-container div class as having this container in the html structure somehow prevents the bug where the choices never get removed from the page when you click Next and they keep on accumulating on the page

tangway / flag-guessing-game-frontend

style multiple choice interface with css #2