Chuck Norris Jokes App - Assignment

Overview

This is an assignment project designed to test React skills by implementing a joke-fetching application using the Chuck Norris Jokes API. The project includes functionality to fetch random jokes, search for jokes, filter jokes by category, and save/remove jokes from local storage.

Objectives

Your task is to complete the missing logic in the React components by following the provided TODO comments.

API Endpoints

The application fetches data from the Chuck Norris Jokes API:

• Get random joke: GET https://api.chucknorris.io/jokes/random
• Get random joke by category: GET https://api.chucknorris.io/jokes/random?category={category}
• Get joke categories: GET https://api.chucknorris.io/jokes/categories
• Search jokes: GET https://api.chucknorris.io/jokes/search?query={query}

TODOs (Tasks to Complete)

Each file has TODO comments marking the areas where implementation is required.

Home.tsx

• Implement fetchCategories to retrieve joke categories from the API.
• Implement fetchRandomJoke to fetch a random joke or a joke based on the selected category.
• Implement searchJokes to fetch jokes matching the search query.
• Implement saveJoke to store jokes in local storage.
• Implement removeSavedJoke to delete a saved joke from local storage.

Navbar.tsx

• Add dynamic button text based on showSaved state.
• Add additional navbar items (links, dropdown, etc.) if needed.

Controls.tsx

• Implement logic to handle category selection.
• Implement logic to fetch a joke when clicking the "Get Joke" button.
• Implement logic to perform a joke search when clicking the "Search" button.

JokesList.tsx

• Display a list of jokes from either the random joke or search results.
• Ensure that jokes are properly passed to the JokeCard component.
• Handle saving/removing jokes using the provided functions.

JokeCard.tsx

• Display the joke text properly.
• Implement the "Save" button to add jokes to the saved list.
• Implement the "Remove" button to delete a joke from the saved list.

SavedJokes.tsx

• Display a message if no jokes are found.
• Map over savedJokes and render the JokeCard component for each saved joke.

Screenshots

Home Page (Fetching Random Joke)

public/Home.png

Viewing Saved Jokes

public/Saved.png

Submission

Once you've completed the assignment, submit the repository link.

Happy coding! 🚀