|
| 1 | +# Programming Basic Tutorial |
| 2 | + |
| 3 | +The repository you just opened contains a practice project |
| 4 | +for the Programming Basics course at HZ University of Applied Sciences. |
| 5 | +It uses all the concepts covered during the course. |
| 6 | +The repository contains a start and an end folder, |
| 7 | +which contain the starter code and a potential solution to the assignment. |
| 8 | + |
| 9 | +## The Assignment |
| 10 | + |
| 11 | +A front-end developer has been hard at work to create an interface for a Pokédex. |
| 12 | +The plan is to turn this into a working website that |
| 13 | +allows people to get basic information on the different Pokémon. |
| 14 | +But there is some work to do that the they can't do. That is where you come in! |
| 15 | + |
| 16 | + |
| 17 | + |
| 18 | +Data on each pokémon has been downloaded and stored in a |
| 19 | +`.json` file in `js/pokemon.json`. |
| 20 | +The same folder contains a JavaScript file that should contain the logic. |
| 21 | +By writing the rights functions, you're going to turn the application from the example above, |
| 22 | +to what's displayed in the example below. The things you have to do are: |
| 23 | + |
| 24 | +1. Make a list of all the pokémon and display them on the right. |
| 25 | +2. Make sure that the user can select a pokémon from the list. |
| 26 | +3. Highlight the selection. |
| 27 | +4. Display the image of the selected pokémon on the left. |
| 28 | +5. Display the name and description of the selected pokémon on the bodem. |
| 29 | +6. Make sure the user can search for a pokémon by name. |
| 30 | +7. Make sure the user can search for a pokémon by number. |
| 31 | + |
| 32 | +There is no need for you to write HMTL and CSS. |
| 33 | +Use the following classes: `list-group-item`, |
| 34 | +`list-group-item-action`, `clickable`, `active`. |
| 35 | +It is up to you to determine where and how to use them. The HTML-elements that should be dynamically generated should be inferred from the HTML-file. |
| 36 | + |
| 37 | + |
| 38 | + |
| 39 | +## Hints |
| 40 | + |
| 41 | +<details> |
| 42 | + <summary>Hint 1: Required event handlers</summary> |
| 43 | + |
| 44 | + You need a two types of event handlers. |
| 45 | + |
| 46 | + The onclick event is used for selecting pokémon. |
| 47 | + The oninput event is used for the 'dynamic' searching. |
| 48 | +</details> |
| 49 | + |
| 50 | +<details> |
| 51 | + <summary>Hint 2: Recommended functions</summary> |
| 52 | + |
| 53 | + In the example solution, six functions were added. |
| 54 | + |
| 55 | + 1. search |
| 56 | + 2. generatePokemonList |
| 57 | + 3. generateListItem |
| 58 | + 4. selectPokemonFromList |
| 59 | + 5. displayPokemonData |
| 60 | + 6. getPokemonNumberAndName |
| 61 | +</details> |
0 commit comments