Skip to content
Submitted 11 months ago

Frontend Quiz with Dark/Light Theme

bem
P
Purnama S Rahayu•250
@catreedle
A solution to the Frontend Quiz app challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

I am just glad this is done but the code is rather messy. I should've planned this better and need more practice writing clean codes. I also like the chance to learn how to use theme with CSS and make elements navigatable with the keyboard.

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

Many details go into this project, making it challenging to keep the code clean.

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

There's a bug that sometimes the toggle doesn't work with the keyboard. If you could help me figure out why that is, that'd be great haha.

Code

Please log in to post a comment

Log in

Community feedback

  • P
    markus•2,760
    @markuslewin

    Hey!

    The clickOnKeyPress function adds an event listener to the theme toggle every time the function is called. Since the function is called every time a question is set up, the toggle will have multiple event listeners, and so one click will toggle the theme multiple times!

    I'd use a <button> element for this toggle, but another solution would be to create a unique setup function for the theme toggle. It shouldn't need the || event.key === " " part of the function since the browser handles space presses by default.

    Marked as helpful
  • P
    MikDra1•7,450
    @MikDra1

    WOW! Your app looks amazing!

    One thing that I would change is in the question in JavaScript about for loop. We don't have to but we can do sth like down here:

    We just add the let keyword (it's not a must have)

    NOT: for(i = 0; i <= 10; i++);

    BUT: for(let i = 0; i <=10; i++);

    Hope you found this comment useful 💗

    Good job and keep going 😁😊😉

    Marked as helpful

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