Design comparison
Solution retrospective
One of the challenges I faced arose from the fact that i was changing the display property of divs using javascript. This was overwriting my CSS styles since javascript inserts styles inline. To get around this, I refactored my code so that the javascript would simply toggle a ".visible" class. The properties of this class I manipulated in my CSS.
One thing I'm insure of is how to best organize my CSS file, I will be looking into best practices on how this is done, but would love some feedback too.
Community feedback
- @immdipuPosted about 1 year ago
Everything is perfect. One way to enhance the user experience is by eliminating the shift in the DOM element position when an option button is clicked. Currently, when a user clicks on any option, a border appears, causing a slight shift in DOM elements. One solution to address this issue is to maintain the border by default for all options, setting its color as transparent initially to keep it invisible. Upon a user click, the border color can be changed from transparent to any other color, thus preventing the noticeable shift in DOM elements.
Marked as helpful1@rainSaxPosted about 1 year ago@immdipu Ohh yes, maintaining a border and simply changing it's color makes a lot of sense. Thank you.
1 - @RagudosPosted about 1 year ago
Good day, Navine! I like your solution. For your troubles, yes, I personally recommend using CSS properties to avoid the styling conflicts we get from inline styles since CSS prioritizes those styles unless an !important was declared in one of the declarations specified.
Great job for trying to be clean! It's honestly hard to organize things, especially when you just want to build a small project, and I recommend that you have separate files for each purpose. For example, you can move the CSS declarations responsible for resets and another for fonts, pretty much the same as in JavaScript where you separate logic for better readability.
One tip: Try saving current state of the quiz to sessionStorage to keep track of the progress when the page just for fun.
Awesome job!
Marked as helpful1@rainSaxPosted about 1 year ago@Ragudos Ah yes, moving the CSS resets and declarations to other files is something I hadn't considered. Thank you.
0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord