Dad-Joke API Project | Day 18
Tags: javascript, webdev, beginners, react
Published: 2022-01-25 19:53:45

## Dad Jokes React App

It is an app that lets people view and vote on cheesy jokes. To generate jokes, I have use the ICanHazDadJoke API .

![Dad Jokes React App](https://user-images.githubusercontent.com/85480558/151039323-c72ad77d-e489-4515-ace8-32c3b976b74f.png)


When the page loads, it will fetch 10 jokes.

The application lists the jokes, along with a “vote-up” button, a “vote-down” button, and the net score for each joke. Users can vote, and the net score should update.

When jokes are loading, It displays a loading spinner notifying the user that the jokes are being loaded. It also hide once the jokes have finished loading.
It will take of that no sorted jokes came.

It Shows the jokes sorted by net score, and update this as the scores change.
It also Stores the list of jokes, with votes in local storage. When users visit the app, it will show saved jokes, rather than fetching new jokes. However, the user should still be able to generate new jokes via the button, and these new jokes should replace the ones in local storage.

### My Learnings 

**1) Use of Local Storage**
Local-storage is used to store that the Data in the Browser, The Data Remain saved even if we close the Browser.
local Storage holds the data with no expiry date, which is available to the user even after closing the browser window. It is useful in various ways, such as remembering the shopping cart data or user login on any website.

`**How to store the Data in the LocalStorage**`
```jsx
window.localStorage.setItem(<key>,<pair>)
// It can only able to store the data of string type only, to store any other type of data u have to parse it.
```

![React](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ma32h2pu95x9040fe3k.png)

**`We can fetch the data by using this`**

```jsx
window.localStorage.getItem(<key>)
//We can fetch the data using the key.

```

![React](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rgrqoulz5ey7l04sf7p6.png)

**We can Clear the Local Storage by using this 👇**
![React](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wf2owezg2l93pxd71g5s.png)

Also we can remove a Particular Item using its key

![React](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cudgty6jhboi1qoyv49u.png)


**2.) How to use the Array.sort()**

The `sort()` sorts the elements of an array.

The `sort()` overwrites the original array.
  **By default, it sorts in the ascending order, if u want to sort in  the decending order u should use `reverse()`  **
- Sort() works best with Strings if u want to sort any number it will give different Result
**Like for Ex , 👇**
![React](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aew9pzs4ylx5vx9hei7j.png)

**As u can clearly see the answer should be `[40,100]` but it came out wrong cuz it only calculates the 1st letter i.e 4 > 1**
 
So to avoid this type of problem we can compare them.

```jsx
Array.sort((a,b)=>{
  return (a-b); 
  // Or 
  // return(b-a) -> To sort in descending order
})
```

When sort() compares two values, it sends the values to the compare function, and sorts the values according to the returned (negative, zero, positive) value.

 ![React](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z9kdgqcn6bgblut9lfqp.png)

The a will be the next value and the b will the current value.
![React](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nvbbclzg6woxhvpy62zw.png)

**But how this is Working **

Take example of 1st case where we are sorting in ascending order.

- 1st case a=100 b= 40 
- a-b = 60 (positive, means a>b so no swapping)
- 2nd Case a=89 b=100
- a-b = -11(-ve , means a<b so swap then)

Arr[] = [40,89,100]

**`If they are not yet sorted the we again repeat the loop`**
If the value came 0 then also we didn't swap

**Happy coding 😃**