{
"page": 1,
"per_page": 6,
"total": 12,
"total_pages": 2,
"data": [...],
}
- Try sending
GET
request tohttps://reqres.in/api/data
and observe the response. - Each request will contain only 6 items. You will have to request multiple times to get all items.
- Add
axios
script toindex.html
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
- Update
fetchColorsList
to useaxios
to get data fromhttps://reqres.in/api/data
. Remember, You should check the "total_pages" in the first request then make more request to get more items from other pages then put all in "allColors" variable. - If everything are correct, when go to
index.html
in browser. It should show all color in it.
- Modify the fetchColorsList function so when the data is downloaded from the API, the colors list is stored using the local storage.
- Implement the loadColorsFromStorage function so the color values are loaded from the local storage.
- Open the developer tools and verify that the data is stored in the local storage.
- Test your application without connection to the internet and verify that the colors list is loaded.
- Add a clear button that removes all the elements from the list.
- Add a load button that calls the fetchColorsList function and loads the colors again.