Frontend Quiz App with SCSS and JavaScript

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

I’m proud of making an accessible light/dark theme toggle. The icons change color depending on the theme, and the app adapts to the system’s default color scheme using window.matchMedia("(prefers-color-scheme: dark)"). It also remembers the user’s last selected theme through localStorage, which makes the experience more consistent.

Next time, I’d like to challenge myself with a more complex project. I feel confident about handling a theme toggle now, and I think working on something bigger will push me to improve further.

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

The quiz logic was the most challenging part. I needed to find the correct quiz when a subject was selected on the home page, so I created a startQuiz function with a subject parameter to load the right quiz. From there, I had to display the first question and its answers, starting with currentQuestionIndex = 0.

Each time the user selects an answer and clicks the submit button, the app checks if the answer is correct, shows the feedback, then increments the currentQuestionIndex to load the next question. This continues until all questions are finished. Breaking the problem into smaller steps like this helped me build the logic successfully.

What specific areas of your project would you like help with?

I’d like to improve the structure of my SCSS files. Right now, they work, but I don’t think they’re very well organized. I want to learn better ways to structure and maintain styles for larger projects.