Responsive frontend quiz app
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.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @immdipu
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 helpful - @Ragudos
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 helpful - @Yashi-Singh-9
hey great work on this can you provide the zip file for this challenge to me?
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