@skanthanvijay
Posted
Notes to those seeing the solution (OUTDATED):
-The radio buttons do not have labels as they are supposed to be invisible. If there is a more efficient way to create the toggle however (potentially using libraries like jQuery), that would be awesome to hear
-There are spaces between the numbers above the toggle, but they do not show up on the generated screenshot
EDIT: The code for the toggle was revamped, the above notes can be ignored
@skanthanvijay you need labels on those radios, it's essential. The design does have visible labels in 1-2-3. Those controls need to be in a field set, the word theme should be a legend, and the numbers should be labels for their corresponding radio input.
I haven't tested out functionality on the calculator, but with styling you need to center it on the page via a different method. It shouldn't be fixed. Use flex or grid on the parent instead of fixed and transform translate. Some of the calculator is cut off my screen on mobile
Good luck with it
@skanthanvijay
Posted
@grace-snow Thank you very much for the information, I fixed all the mentioned issues with the code.
@skanthanvijay good job!
I suggest you look into css custom properties to help with the theme colors. You could declare all color variables at the top of your stylesheet and toggle one class on the body to update all those those variables. That would be a more modern and maintainable way to handle it ☺
