{"id":28445350,"url":"https://github.com/suptarr/fetchexercise","last_synced_at":"2025-07-08T14:07:17.046Z","repository":{"id":104399748,"uuid":"511082286","full_name":"SupTarr/fetchExercise","owner":"SupTarr","description":"Axios get from API","archived":false,"fork":false,"pushed_at":"2025-05-03T07:59:26.000Z","size":95,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-29T22:38:30.082Z","etag":null,"topics":["axios","html","javascript"],"latest_commit_sha":null,"homepage":"https://suptarr.github.io/fetchExercise/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SupTarr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-07-06T09:59:27.000Z","updated_at":"2025-05-03T07:59:29.000Z","dependencies_parsed_at":"2025-05-03T07:36:54.788Z","dependency_job_id":null,"html_url":"https://github.com/SupTarr/fetchExercise","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/SupTarr/fetchExercise","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SupTarr%2FfetchExercise","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SupTarr%2FfetchExercise/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SupTarr%2FfetchExercise/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SupTarr%2FfetchExercise/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SupTarr","download_url":"https://codeload.github.com/SupTarr/fetchExercise/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SupTarr%2FfetchExercise/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264284353,"owners_count":23584675,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["axios","html","javascript"],"created_at":"2025-06-06T10:12:34.534Z","updated_at":"2025-07-08T14:07:17.041Z","avatar_url":"https://github.com/SupTarr.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# JS-07 - Fetch \u0026 Web Storage APIs\n\n![Company Logo](https://media-exp1.licdn.com/dms/image/C4E0BAQF7BYCCZt5epw/company-logo_200_200/0?e=2159024400\u0026v=beta\u0026t=qUAFP9bUgBEEXGVQYpUXW1J_OiP8e0r4rFBpqp8OrxA)\n\n## Example data\n\n```json\n{\n    \"page\": 1,\n    \"per_page\": 6,\n    \"total\": 12,\n    \"total_pages\": 2,\n    \"data\": [...],\n}    \n ```\n\n## Part 1: Using the Axios\n\n1. Try sending `GET` request to `https://reqres.in/api/data` and observe the response.\n2. Each request will contain only 6 items. You will have to request multiple times to get all items.\n3. Add `axios` script to `index.html`\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js\"\u003e\u003c/script\u003e\n```\n\n4. Update `fetchColorsList` to use `axios` to get data from `https://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.\n5. If everything are correct, when go to `index.html` in browser. It should show all color in it.\n\n## Part 2: Using the Web Storage API\n\n1. Modify the *fetchColorsList* function so when the data is downloaded from the API, the colors list is stored using the local storage.\n2. Implement the *loadColorsFromStorage* function so the color values are loaded from the local storage.\n3. Open the developer tools and verify that the data is stored in the local storage.\n4. Test your application without connection to the internet and verify that the colors list is loaded.\n\n## Challenge Yourself\n\n1. Add a clear button that removes all the elements from the list.\n2. Add a load button that calls the *fetchColorsList* function and loads the colors again.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsuptarr%2Ffetchexercise","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsuptarr%2Ffetchexercise","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsuptarr%2Ffetchexercise/lists"}