Frontend Quiz with Dark Theme 😈

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

I liked the way that I initially load the data in for this project with one fetch call:

const fetchData = async () => {
    try {
        const response = await fetch("/data.json");
        if (!response.ok) {
            throw new Error("Unable to fetch data");
        }
        const result = await response.json();
        quizzes = result.quizzes;
        renderQuizzes();
    } catch (error) {
        menuList.innerHTML = `<li class="fetch__error">${error.message}</li>`;
    }
};

I could possibly handle the error clause by calling a function instead of manually adding an error, however, this does work.

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

Initially, I was overwhelmed with where to start when developing the JavaScript for the quiz app's logic. However, I thought it through and decided that I needed to load the data in for the initial page. From there, the logic for the other pages followed naturally.

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

First, I'd like help on loading data into the project. I'm not positive that the way I did it is the best. Second, the conditional styling for the theme is based on toggling a css class on the root element:

const handleThemeClick = (e) => {
    root.classList.toggle("dark");
};

.dark {
    --primary: var(--dark-navy);
    --primary-accent: var(--navy);
    --secondary: var(--pure-white);
    --secondary-accent: var(--light-bluish);
}

Are there better approaches to this?