Frontend Quiz app with HTML, CSS, JavaScript

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

✅ Proud of:

• 🎉 Successfully modularizing the JavaScript code into separate files (data.js, navigation.js, quiz.js, and main.js), making it more maintainable and readable.
• ♻️ Keeping code clean and structured, following best practices like DRY (Don’t Repeat Yourself) and writing small, reusable functions.
• 🎮 Implementing keyboard navigation and dark mode toggle, improving accessibility and user experience.
• 💾 Storing quiz progress and scores using localStorage, so users can see their results even after refreshing the page.

🔄 What would I do differently next time?:

• 🏗️ Consider using a state management approach (like an object to hold quizData, currentQuiz, currentQuestionIndex, and userScore) instead of separate variables.
• ⚠️ Improve error handling to display user-friendly messages when quiz data fails to load.
• 🧪 Write unit tests for key functions like loadCurrentQuestion() and submitAnswer() to catch issues early.

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

❓ Managing state across modules: Initially, currentQuiz was undefined in some modules.

• ✅ Solution: Ensured variables like quizData and currentQuiz were properly initialized and updated at the right time, avoiding unnecessary global state.

🔁 Event listener duplication: In loadCurrentQuestion(), answer buttons retained old event listeners, causing unexpected behavior.

• ✅ Solution: Used button.cloneNode(true) to remove old event listeners before adding new ones.

🎮 Handling keyboard navigation: Managing focus and selection dynamically across different pages was tricky.

• ✅ Solution: Implemented separate functions for handling navigation on different pages, ensuring smooth transitions between UI elements.

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

⚡ State Management: Are there better ways to manage and update quizData, currentQuiz, and userScore without using global variables?

🚨 Error Handling: How can I improve error handling for cases where the quiz data fails to load or the user navigates incorrectly?

🚀 Performance: Are there any areas where I could optimize my DOM manipulation for better performance?

🧑‍💻 Unit Testing: What are the best strategies to write tests for key functions like loadCurrentQuestion() and submitAnswer()?