# WEEK 0 - Career Accelerator - Assesment Task
###### tags: `Career-Accelerator` `WEB` `JS` `DIGITALIZE` `FRONTEND` `REACTJS`


## Introduction
The main purpose of this task is assesment, you may be a "not bad" programmer, a "good", or a "monster one", this task has 3 main requirements that you have to solve.
Requirement A equivalent to Level A (Not bad)
Requirement B equivalent to Level B (Good)
Requirement C equivalent to Level C (Monster)

Now you have to create a react application from scratch using cra-template of facebook, and try to implement feel and look as drawn in UI/UX, you can wirte it with pure CSS or you can get help using whatever CSS framework/library you b need.

## Understaning
The idea of the application is simple, there are 2 pages (Home, Jokes), Ignore `About` page. `Home` page is designed to enable the user to enter his/her name and let the application predicts the genderity based on his/her name using a free online Rest API (https://genderize.io/)

You will collect the name from the input and send the value to the API as illustrated in their website, then you will get a response with (name, count, etc), all we need and care is Name, Predicted Gender and count, finally you have to print the results to the user.

The user also can enjoy with another feature in your website, he/she can navigate to another page `Jokes` at route `/jokes`, this page enable the user to choose kind of random jokes he/she wish to read, and then request it by using Random Joke API https://github.com/15Dkatz/official_joke_api.

Kindly note this application is SPA, then you have to route the user with react-router-dom at front-side.

Kinds/Types list:
- General
- Programming
- knock-knock
- food

## Requirements
- Requirement A
- Create a cra-template and remove default components
- Design and imlpement `Home` page exactly as in UI/UX (1)
UI/UX (1)
- Requirement B
- Implement search by name functonality by Http request to the genderize Rest API
- Show information below search input.
- Show alert `not found` box in case there is no match.
UI/UX (2)
- Requirement C
- Enable `Joker` item in the top navigation
- Route user to `/jokes` when the user click on `Joker` item.
- Let the user select kind of jokes, then Grab ten (10) random jokes from the API and display them as a rendered list as illustrated in UI/UX.
- Since you started use react-router and you implement SPA, then you have to use a layout to make the header appears at every page you visit.
UI/UX (3)

## Resources
### UI/UX
#50D2C9 : Green
#CAF1EF : Light Green + Opacity: 45%
#FFC95D : Green Light Opactiy: 23%

1

2

3

**XD Design File**
[Visit](https://drive.google.com/file/d/1y2ktuYKPSSAdqUGf2i_bQl9Z9p0G_HLp/view?usp=sharing
)
## Hints
Packages you may need to use:
- cra
- axios
- react-router-dom

CSS framework:
- tailwind
- bootstrap

Free Rest API (Jokes and Genderize):
https://github.com/15Dkatz/official_joke_api
https://genderize.io/