Frontend Mentor - Frontend quiz app solution

This is a solution to the Frontend quiz app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

The challenge

Users should be able to:

• Select a quiz subject
• Select a single answer from each question from a choice of four
• See an error message when trying to submit an answer without making a selection
• See if they have made a correct or incorrect choice when they submit an answer
• Move on to the next question after seeing the question result
• See a completed state with the score after the final question
• Play again to choose another subject
• View the optimal layout for the interface depending on their device's screen size
• See hover and focus states for all interactive elements on the page
• Navigate the entire app only using their keyboard
• Bonus: Change the app's theme between light and dark

Screenshot

Links

• Solution URL: [https://github.com/Darko96/react-quiz-app]
• Live Site URL: [https://frontend-quiz-app-ivory.vercel.app/]

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• React - JS library

Note: These are just examples. Delete this note and replace the list above with your own choices

What I learned

I learned how to use useReducer.

Continued development

I'll keep learing react and continue making project so I can practice what I learn, so I can make even bigger projects with React.

Useful resources

• A Complete Guide to Grid - This helped me a lot ot understand CSS Grid.
• A Complete Guide to Flexbox - This helped me a lot ot understand flex-box.
• A Complete Guide to CSS Media Queries - This helped me a lot to understand media queries.
• React Documentation - This helped me a lot to understand react.

Author

• Portfolio Darko Mijatovic
• LinkedIn - Darko Mijatovic
• Frontend Mentor - @Darko96
• Instagram - darkomiijatovic

Acknowledgments

I want to thank a lot to everyone in Frontend Mentor team. Because they made an awesome website where we can practice what we learn.

Thank you so much for checking my project and Any feedback is highly appreciated.