Skip to content
Submitted 3 months ago

Frontend Quiz with Dark/Light Theme

Purnama S Rahayuβ€’250
@catreedle
Preview site (opens in new tab)View code (opens in new tab)
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?

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.

Community feedback

  • markusβ€’2,250
    @markuslewinPosted 3 months ago

    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
    0
    Purnama S Rahayuβ€’250
    @catreedlePosted 3 months ago

    thank you. your insight is very much appreciated :) @markuslewin

    0
  • MikDra1β€’6,980
    @MikDra1Posted 3 months ago

    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
    0
    Purnama S Rahayuβ€’250
    @catreedlePosted 3 months ago

    thank you so much @MikDra1

    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