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

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

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • JavaScript

What I learned

With this one app i learned a lot, i learned the level i am at, and how to improve it.

Author

Acknowledgments

I aknowledge myself for creating this app. And FEM for this project.