Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Frontend Quiz with Dark/Light Theme

P
Purnama S Rahayuβ€’ 250

@catreedle

Desktop design screenshot for the Frontend Quiz app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

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

P
markusβ€’ 1,940

@markuslewin

Posted

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

P
Purnama S Rahayuβ€’ 250

@catreedle

Posted

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

0
MikDra1β€’ 5,990

@MikDra1

Posted

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

Please log in to post a comment

Log in with GitHub
Discord logo

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