Design comparison
SolutionDesign
Solution retrospective
I am not sure if there is a better way to implement keyboard navigation than this:
useEffect(() => {
const submitKeyboard = (e: KeyboardEvent): void => {
const key = e.key;
if (key === "q")
setGameStatus((prev) => ({ ...prev, isDarkMode: !prev.isDarkMode }));
};
window.addEventListener("keydown", submitKeyboard);
return () => {
window.removeEventListener("keydown", submitKeyboard);
};
}, [setGameStatus]);
Keyboard navigation:
- Toggle Dark / Light Mode - q
- Answer A / First category - a
- Answer B / Second category - b
- Answer C / Third category - c
- Answer D / Fourth category - d
- Process to the next question / Restart after quiz ends - Enter
Community feedback
Please log in to post a comment
Log in with GitHubJoin 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