wrap the radio and the text label (like a span) inside a label and style the actual label with label:focus-within and/or label:has([type="radio"]:focus) and label:has([type="radio"]:user-invalid)
How does one go about thinking about typography for a website. By this I mean when do you use h1, h2, h3, h4, h5 , h6. Here is the approach I used for mine
Your Result -> h2
- 76 -> (p -> strong)
- Great -> h3
Summary -> h2
Reaction -> h4
Memory -> h4
Verbal -> h4
Visual -> h4
What is the best way to organize your CSS files for a project. I broke my down based on. I broke mine down into.
Usually headlines are chosen by hierarchy of the document to create levels of importance and accessibility. In modern designs this often is not really feasible. Generally you always want exactly one h1, for seo reasons, accessibility, and schematic html.
For this project i personally used h1 for "Your Result" as is describes the purpose of the page pretty well. The downside is that it breaks the visual "flow" of the headlines from h1 - h6 (h2 is bigger and looks more important then h1)
As for splitting the css files there really isn't a single correct solution. The more you can split it up in a meaningful way the cleaner it will look, but this can make it cumbersome if someone doesn't have the same mindset as you and has to scan multiple files so find the part they want to change. I think you did pretty well in this regard.
i didn't do the update each minute because i think it looks better for short times if it moves smooth (although it wouldn't be that hard to implement, just store the current minute as previous minute, if it's less update the progress bar to the current percent which can still be smooth)
i also implemented a reset button which is shown on pause because i think it's a very important feature in a real world app (what if a user changes the time midway or starts a long pause by accident)
and i noticed somehow it's the only one (or one of very few) submissions that persist the current time, selected timer and settings