Submitted 3 months ago

Overly Complicated Quiz App in JavaScript and CSS

Austin•430

@astnio

Preview site View code

This is a solution for...Frontend Quiz app

HTML
CSS
JS

3intermediate

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

This project was a huge challenge for me, and not for quite the right reasons. I learned a lot about proper planning for a project, and considering the architecture more thoughtfully ahead of time. This project really shouldn't have been very complicated, and yet my lack of planning and forethought made it quite the challenge.

In my defense, I tried to create a more robust system that is dynamically expandable. You should be able to add more quizzes and questions to each quiz, and the code should take care of the rest in generating the questions and everything for you.

What challenges did you encounter, and how did you overcome them?

I feel as though both my CSS and JavaScript are overly complicated for this project. I ended up throwing in all kinds of things into my CSS to account for edge cases, while I probably could have simplified the logic for a lot of this had I been more thoughtful.

Same thing with my JavaScript. In fact, the final product is much simpler than what I had midway through the project. I did quite a bit of refactoring that slimmed down the logic a bit here.

Overall, in the future, I will take more careful consideration of my projects, and probably write out an outline or draft in pseudo code to attempt to make things easier.

Community feedback

ikitamalarose•400
@ikitamalarosePosted 2 months ago
First of all, congratulations for thw work done and here is my contribution.

1-Add the hover effect on the question with a colour on the boxes, check the figma model

2-The warning message changes its coulour in light mode to make it red

3-As you say, the code is loaded and you could have made sure that the js loads the content of each step automatically ( your first idea of coursse).

For my part, i separated a file loadData.js that takes care of recovering the data data.json which we need. A file utils.js that takes care of creation of each component. And finally the file quiz.js that targets and adds the element in the html files as we progress.

I hope i was helpful :)

And otherwise it's great job
Marked as helpful
1
Austin•430
@astnioPosted 2 months ago
@ikitamalarose Thank you, I really appreciate the feedback. I only really realized how overly verbose my code was once I was almost done, but I want to touch this project again in the future and will take your feedback into consideration.
0

Please log in to post a comment

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