# GSG REACT TASKS
## TASK 1
* Open git bash on your desktop.
* Create a new directory called git-test.
* Create an index.html file inside this directory using the terminal and create a simple page with HTML tags.
* Create a new repo on GitHub.
* Initialize git in your directory on your PC.
* Use git commands to push your folder to the GitHub repo.
* Create a new branch on the local repo called styling.
* Add a new file called style.css in the new branch and push changes in the new branch.
* Try to clone this repo in another folder.
* Open GitHub and merge the new branch to the main branch on GitHub, then remove it after merging.
* Pull the changes into the second folder from the remote and see what happens.
* open the last slide in HTML and do this task on the repo and insert the repo link here

## TASK 2
* create an account on freecodecamp and start working on HTML and forms.

## TASK 3
* start learning flex box by yourself, and finish this game:
https://flexboxfroggy.com/

## TASK 4
**Create a Google home page using HTML and CSS:**
* Create a new repo on GitHub with a readme file
* * clone it and then work on it.
* Use comments and semantic HTML tags.
* Create a commit for every step.
* Push your changes to GitHub.
* Use GitHub pages and attach the repo link and the deployed page link.
***Note: do not use bootstrap or grid, use flexbox.***


## TASK 5
* open the grid garden game and play all levels.
https://cssgridgarden.com/

## TASK 6

* create a clone of the google search page as the attached one
* please make sure you are using the same colors and sizes as much as possible.
* use ONLY GRID for the layouts.
* do not use bootstrap or flexbox.
* Use comments and semantic HTML tags.
* Create a commit for every step.
* Push your changes to GitHub.
* Use GitHub pages and attach the repo link and the deployed page link.
***NOTE: After finishing all parts try to make the design responsive with the mobile and tablet, using media query.***


## TASK 7
* Finish everything in the first part of freeCodeCamp:
* Learn HTML by Building a Cat Photo App.
* Learn Basic CSS by Building a Cafe Menu.
* Learn CSS Colors by Building a Set of Colored Markers.
* Learn HTML Forms by Building a Registration Form.

## TASK 8
* Create an account on code wars
* start solving the problems in kata 8 and 7 with javascript

***our goal is 6kyu 💪🏻💪🏻***

## TASK 9
* Create this page using HTML, CSS, and JavaScript:
* When you click on the button, the colour of the div should be changed to random hex colour and show it on the input.
* When you type a hex colour in the input, it should apply it to the div as well.
**Notes:**
* Create a GitHub repo and push your code, use meaningful commits.
* Create a GitHub page's deployment for this page.
**Optional:**
When you move the mouse to inside the div it will change the colour every 500ms until you move it outside.

**[PAGE DESCRIPTION](https://drive.google.com/file/d/11JbZnfAYd9dA-SJB1nhkM-aPQoo08Qld/view)**

## TASK 10
* Create Google timer with Html, CSS, JavaScript.
* you can use UI library.

Optional: create stop watch in another tab in same page, same as Google.

**[TIMER PAGE](https://www.google.com/search?q=timer&rlz=1C5CHFA_enAE1026AE1026&oq=timer&aqs=chrome.0.69i59l2j69i60l4j69i65j69i60.837j0j7&sourceid=chrome&ie=UTF-8)**

## TASK 11
* Create the attached design using HTML, CSS, JavaScript:
* Use jsonplaceholder fake API to implement (read) request using Ajax.
* Use jsonplaceholder fake API another time to implement (create) request using fetch.
* When you press on the (add) icon below, the form should be displayed on the screen and when you submit, it should create a new to-do.
**Note: the design should be pixel perfect (colours, sizes, ...).**

**[FIGMA DESIGN](https://www.figma.com/file/lnq1T4PPl589V4KYSBwDBW/Todo-List-(Community)?node-id=4%3A1574&t=ZXRlt9xFYIw65D8y-0)**

## TASK 12
* Continue solving the problems in kata 6 and 5 with JavaScript

**our goal now is 5kyu 💪🏻💪🏻**

## TASK 13
* Have a look at the attached design and implement it:
* Take an overview of the design and analyze everything inside it.
* Create 3 folders inside the src folder (pages, components, sections)
* Divide the design into small parts and reusable components (button, card, ...) and use props to change the content.
* Create a home page and use it in the app component; then all your work should be inside the home page.
* Create a container component and use it in the sections that need to be centralized.
* Every section should be in a new component.
**Don't repeat yourself.**
**The design should be pixel-perfect.**

**[FIGMA DESIGN](https://www.figma.com/file/cXOOtmCWwf5vFUaCBeN3fs/Vegan-Restaurtant-website-(Community)?node-id=109%3A139&t=qUgm0UL6qZlXpT3m-0)**

## TASK 14
* There are 2 components in this application: Counter and App. The steps below will take you through modifying and adding components to change functionality and implementation.
* Update the Counter component to take onIncrement and onDecrement callbacks as props and ensure they update the counter's values independently. Each callback should take a single, integer value as a parameter, which is the amount to increment the counter's existing value by.
* Render a fourth Counter component and ensure its value is updated independently of the others.
* Extra Credit: Create a Total component, which should display below the Counter components and always display the running total of all the Counter values.
**Note: DON'T USE FUNCTIONAL COMPONENT!, USE CLASS COMPONENT AND ITS STATE**


## TASK 15
* Use the last task and move the state from the counter to be in the parent component.
* Every counter value should be updated independently of the others.
* Render a fourth Counter component (by adding a new object inside the initial state array)and ensure its value is updated independently of the others.
* Extra Credit: Create a Total component, which should display below the Counter components and always display the running total of all the Counter values.
**Note: DON'T USE FUNCTIONAL COMPONENT!, USE CLASS COMPONENT AND ITS STATE**

## TASK 16
* Create and implements sign up and login forms following this UI Figma design:
* The design should be pixel-perfect.
* Create a separate file for each page.
* Create reusable components and use them.
* All input types should be controlled components.
* Add the validation by yup to the forms that you implemented.

**[FIGMA DESIGN](https://www.figma.com/file/EY9Z67LbWSAE8WjpFkT36S/Sign-up-redesign-(Community)-(Copy)?node-id=0%3A1&t=fTWsEOD1SoChE5e3-0)**

## TASK 17
* Create and implement this UI Figma design inside the last project (the forms) as a new page:
* read some articles about best practices and use them in your work
* create reusable components
* implement react-router in your website and have a look at (NavLink, useParams, useNavigate) in the documentation.
* Create just the light theme.
* Use meaningful commits.
* NEVER use a functional component if it's not necessary.
* Create new branches for the new work and don't remove it after merging.
**Happy new year :)**

**[FIGMA DESIGN](https://www.figma.com/file/6Co5vT8rQcKTpPS9nlJ2nf/Game-Layout-PS-GAMES-(Community)?node-id=0%3A1&t=nzI3F3irprV9WoRq-0)**

## TASK 18
**Continue working on the last project as below:**
**Story, At all, there will be those pages:**
* signup: all users can access this page if they are not authorized yet, it's a form that you can create new account using it.
* login: all users can access this page if they are not authorized yet, it's a form that you can log in with your account using it.
* home: (users, admins) it's the main page that show overview of the website.
* profile: (users, admins) when you click on your name on the top of home page this page will be displayed, it has all your profile details.
* users list: (only admins) it will show list of users, create the UI by your self.
* user details: when you click on one of the users, it will display this page with his details (you should get the user data using its id from params)
* The user should sign in using one of the accounts that are already created before, or sign up with new account, and then he will be allowed to go to home page and other pages.
* If the user has {isAdmin: true} in his object, then he can access some other pages (users list, user details).
**Use this API to integrate auth forms with:**
https://react-tt-api.onrender.com/

**end points:**
* register:
* path: /api/users/signup
* method: post
* body: ```{name: string, email: string, password: string}```
* login:
* path: /api/users/login
* method: post
* body: ```{email: string, password: string}```
* profile:
* path: /api/users/profile
* method: get
* headers: Authorization with token
* all users
* path: /api/users
* method: get
* headers: Authorization with token (just admin)
* single user
* path: /api/users/:id
* method: get
* headers: Authorization with token (just admin)
* delete user:
* path: /api/users/:id
* method: delete
* headers: Authorization with token (just admin)
this endpoint with respond with message only (it won't delete the user from database).
user body:

{
  "_id": "63bc3a9d1d522708170ef68b",
  "name": "user",
  "email": "[e-mail]",
  "isAdmin": false,
  "token":   "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjYzYmMzYTlkMWQ1MjI3MDgxNzBlZjY4YiIsImlhdCI6MTY3MzI4NDI3NiwiZXhwIjoxNjc1ODc2Mjc2fQ.ytegrJzknPz6HWvc7Wc-NCvuRcbz_bm-agC6R8TxK6M"
}

**user in database:**
username: [e-mail]
password: user123
**admin in database:**
username: [e-mail]
password: admin123

**notes:**
* Use only class component for all pages.
* Create protected routes for all roles.
* Use local storage to storage the needed data like token.
* Add button for logout and use it to clear local storage from account data.
* Additional: implement the toggle theme using className.
**Happy hacking :)**

## TASK 19
* Create only the UI of the assigned Figma design:
* all forms should be with validation
* Use only functional component and hooks for all pages.
* Create protected routes.
* Don't use CSS files, use styled-components instead in all styling, and don't use any third party library for UI all notifications or anything else.
* Use global styles and global components, and everything in style (colours, fonts sizes ...) should be in the theme.
* Implement the toggle theme (dark and light at least) and save the current theme in the local storage to keep it when you refresh.
**Happy hacking :)**

**[FIGMA DESIGN](https://www.figma.com/file/igNRsMaeanE79pypNy8XzH/ecommerce-web-%26-mobile-UI-(Community)?node-id=0%3A1&t=hKxI6XNNzJwcOt0S-0)**

## TASK 20
* Project 2 should be finished with all requirements:
* Full UI design with all pages and components.
* All pages and designs should be full responsive.
* Integrate all auth pages with API (the same api in **TASK 18**).
* Create protected routes, context, reducer, custom hooks.
* Using mock data with the products and everything.
* All logical behaviours should be working fine (navigation and routing, like and unlike, add to cart and remove from cart, ....).
* Note: all new work should be in a new branch.

**Happy Hacking :)**

## TASK 21
* build the following dashboard, note team consists of (3-4 team member)
**[FIGMA DESIGN](https://www.figma.com/file/nEDFhVnanFFEYDAbM8Q0ZD/Admin-(Community))**