Skip to content

Instantly share code, notes, and snippets.

@BuddhaBing
Last active November 30, 2022 11:29
Show Gist options
  • Save BuddhaBing/498144ac7c81fe586d137541c7b24673 to your computer and use it in GitHub Desktop.
Save BuddhaBing/498144ac7c81fe586d137541c7b24673 to your computer and use it in GitHub Desktop.
Frontend Challenge

Frontend Challenge

This test will make use of the Chuck Norris Jokes API. Feel free to read through the documentation to familiarise yourself with it before beginning.

Throughout the challenge, please feel free to:

  • ask questions (we're here to help you, not drill you).
  • use Google/search engines (you won't be penalised for forgetting some syntax - it happens to us all).
  • code in the IDE/development environment of your choosing (using whatever tools and packages/libraries you would usually use in your day-to-day work).

The brief

  1. Spin up a React application using Create React App (or any other React based FE framework of your choosing).
  2. Build a simple page containing:
    • a button that fetches a random joke when clicked.
    • a list of all unique jokes that have been fetched.
  3. Allow the user to select the category of the joke they want to fetch when they press the button.

Stretch goals

  1. Error handling: display an error when the API response is unsuccessful
  2. Automically fetch a new joke on fetch of a duplicate joke
  3. Apply some styling to the page
  4. Write one (or more) meaningful unit test

Bonus points

  • Typescript
  • Use semantic HTML elements and apply any applicable accessibility attributes to elements, to ensure a good user experience using for users using screen readers
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment