{"id":15316501,"url":"https://github.com/doemser/hh-web-24-4-recap-3-solution","last_synced_at":"2025-03-20T00:46:58.673Z","repository":{"id":235214510,"uuid":"790308395","full_name":"doemser/hh-web-24-4-recap-3-solution","owner":"doemser","description":null,"archived":false,"fork":false,"pushed_at":"2024-04-22T17:05:12.000Z","size":15,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-16T19:52:39.505Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/doemser.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}},"created_at":"2024-04-22T16:39:01.000Z","updated_at":"2024-04-22T17:05:15.000Z","dependencies_parsed_at":"2024-04-22T18:19:12.286Z","dependency_job_id":null,"html_url":"https://github.com/doemser/hh-web-24-4-recap-3-solution","commit_stats":null,"previous_names":["doemser/hh-web-24-4-recap-3-solution"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doemser%2Fhh-web-24-4-recap-3-solution","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doemser%2Fhh-web-24-4-recap-3-solution/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doemser%2Fhh-web-24-4-recap-3-solution/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doemser%2Fhh-web-24-4-recap-3-solution/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/doemser","download_url":"https://codeload.github.com/doemser/hh-web-24-4-recap-3-solution/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":226286935,"owners_count":17600705,"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":[],"created_at":"2024-10-01T08:54:16.938Z","updated_at":"2024-11-25T06:48:02.318Z","avatar_url":"https://github.com/doemser.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Recap Project 3: Rick and Morty App\n\nIn this recap project, you are going to create a single page app for browsing all the characters of the famous tv show \"Rick and Morty\".\n\nYou are going to work in a group. Create **only one project per group** using the [guide in the template section](./README.md#template) below!\n\n---\n\n## API\n\nWe are going to fetch all necessary information about the characters from a REST API specifically\ndesigned for Rick and Morty. Check out the [API](https://rickandmortyapi.com/). You find all the\ninformation you need in the docs.\n\n\u003e ❗️ This API has pagination, that means that you can fetch only 20 characters at a time.\n\n---\n\n## Template\n\n- Open your terminal and navigate to the folder where all your projects are located.\n- Execute the following command to create a new project based on a template:\n\n```\nnpx ghcd@latest neuefische/web-exercises/tree/main/sessions/recap-project-3/rick-and-morty-app\n```\n\n- Create a new empty repository on GitHub and add everybody in your group as collaborator.\n- Link your remote repository to the created repository on your computer and push the code.\n- Each member of the group clones the repository to their local machine.\n- Follow the instructions given in the `README.md` file.\n\n\u003e 💡 Don't forget to work on feature branches, otherwise you might run into merge conflicts!\n\n---\n\n## Tasks\n\n### Character Card Component\n\nFor now you have only one hard coded character card for Rick Sanchez in your HTML. We want to create\nthem dynamically in our JavaScript.\n\n- Write a function `CharacterCard` inside the `CharacterCard.js` file and export it.\n- You can use `innerHTML` to generate the HTML of the card. Cut and paste the relevant HTML code of the card from the `index.html` and use it in your function.\n- The following elements of the card need to be dynamic and change for each character:\n  - the `src` of the image\n  - the name of the character\n  - the status, type and occurrences values\n- HINT: go to the docs and look where you can find all the information in the character objects you\n  will receive from the API.\n- Think about which input parameter(s) this function will need.\n- The function finally returns the created `li` HTML element.\n\n### Fetch the Data\n\nNow we can fetch the character data from the API and generate our cards with it.\n\n- Inside of the `index.js` create a function called `fetchCharacters`.\n- Use your knowledge about fetching to get the first 20 characters from the API. You can find the\n  correct API endpoint in the docs.\n- Import the `CharacterCard` function.\n- After successfully fetching the character data, use array methods to create an HTML card for each\n  character and append it to the `cardContainer`.\n- Make sure that the `cardContainer` is emptied every time new characters are fetched (HINT: you can\n  use `innerHTML = ''` for that).\n- Call the function inside the `index.js`. Now you should see 20 cards in your app.\n\n### Pagination\n\nGreat Job! But we want to see not only 20 characters, we want all of them! So lets implement the\npagination.\n\n- By adding the string `?page=\u003cpageIndex\u003e` to the end of the fetch URL, you can receive the\n  respective page of characters.\n- Use here the state variable `page` to keep track of the current page index.\n- Inside of the `info` part of the received data you can find the max page count.\n- Add an event listener on each of the next and prev buttons which do the following\n  - it is prevented that the page index could go higher than the max page index or below 1\n  - the page index is increased / decreased\n  - the `fetchCharacters` function is called\n- Update the pagination display each time characters are fetched to show the current page index and\n  the current max page index.\n\n### The Search Bar\n\nNow we want even more functionality in our app. We want to find individual characters by typing\ntheir name into the search bar.\n\n- Create a 'submit' event listener on the search bar.\n- Update the state variable `searchQuery` with the current text inside the search bar every time\n  this event is triggered.\n- Modify the fetch URL again by adding another url encoded attribute `name`: append\n  `\u0026name=\u003csearchQuery\u003e` to the url. If the search query is an empty string, it will be ignored by\n  the API, so don't worry about that.\n- Now trigger the function `fetchCharacters` whenever a submit event happens.\n\n\u003e 💡 You might run into some bugs at this point. Think about how the page and max page index might\n\u003e have to change when you start searching for only subsets of all characters.\n\n### Extra: Refactoring your Code\n\nYou've done it: your app is working as expected. 🚀✨\n\nHowever, we want to tidy up our code so that not everything is written in a single javascript file.\n\n- The next and prev button as well as the pagination and the search bar are currently hard coded in\n  the `index.html`. Remove the HTML code and generate them via JavaScript. Use the respective\n  JavaScript component files for that.\n- The component functions should be called `NavButton`, `NavPagination`, and `SearchBar`\n  and should return the created elements.\n- HINT: It is challenging to get the event listener functions right for these components. Use an\n  extra input parameter `onClick` or `onSubmit` in your components.\n- Use the create functions inside your `index.js` to generate the UI components. You'll need to\n  specify the event listener callback functions here either as anonymous arrow functions or as named\n  functions. Use them as the argument for `onClick` or `onSubmit`, respectively.\n- Append the created components at the right places in your HTML. All container elements are already\n  available in the `index.js`.\n\n---\n\n## Development\n\n### Local Development\n\nTo work locally, please install the dependencies using `npm i` first.\n\nRun `npm run start` to start a development server and open [localhost:3000](http://localhost:3000) in a browser.\n\n\u003e Alternatively you can use the Live Preview Extension for Visual Studio Code to view this project.  \n\u003e Select the HTML file you want to view, press \u003ckbd\u003e⇧\u003c/kbd\u003e\u003ckbd\u003e⌘\u003c/kbd\u003e\u003ckbd\u003eP\u003c/kbd\u003e, search for `Live Preview: Show Preview` and confirm with \u003ckbd\u003eEnter\u003c/kbd\u003e.\n\nUse `npm run test` to run the tests.\n\n### CodeSandbox Cloud\n\nSelect the \"Preview: 3000\" tab to view this project.\n\nSelect the \"Tests: logs\" tab to view the tests.\n\n\u003e The `npm run start` and `npm run test` scripts run automatically.\n\n### Scripts\n\nYou can use the following commands:\n\n- `npm run start` to start a development server\n- `npm run test` to run the tests\n- `npm run lint` to run the linter\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdoemser%2Fhh-web-24-4-recap-3-solution","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdoemser%2Fhh-web-24-4-recap-3-solution","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdoemser%2Fhh-web-24-4-recap-3-solution/lists"}