1+ // Prepare a variable to store Pokémon data
2+ let pokedex = [ ] ;
3+ let selectedPokemon = '000' ;
4+
5+ // Wait for the webpage to load and execute the main program
6+ window . addEventListener ( 'load' , async function ( ) {
7+ // Load the Pokémon data
8+ pokedex = await loadPokemon ( ) ;
9+
10+ // Fill the list with all Pokémon
11+ generatePokémonList ( pokedex ) ;
12+
13+ // Assign the search function
14+ document . getElementById ( 'search' ) . oninput = search ;
15+ } ) ;
16+
17+ /**
18+ * This function filters the Pokémon list based on the input of the user inside the search box.
19+ *
20+ * @param {* } event The event that triggered the function.
21+ */
22+ function search ( event ) {
23+ // Get the current search term
24+ const term = event . target . value . toLowerCase ( ) ;
25+
26+ // Filter the Pokémon based on the term
27+ const filteredPokemon = pokedex . filter ( pokemon => {
28+ return pokemon . name . toLowerCase ( ) . includes ( term ) || pokemon . number . includes ( term )
29+ } ) ;
30+
31+ // Generate the new Pokémon list
32+ generatePokémonList ( filteredPokemon )
33+ }
34+
35+ /**
36+ * Generate a list of Pokémon for the user to choose from.
37+ * @param {[{name, number, description, category, imageurl, length, weight, abilities, typing}] } pokemon The pokémon to put in the list.
38+ */
39+ function generatePokémonList ( pokemon ) {
40+ // Select the list from the HTML DOM
41+ const pokemonList = document . getElementById ( 'pokemon' ) ;
42+
43+ // Clear the content of the list
44+ pokemonList . innerHTML = '' ;
45+
46+ // Loop over all the Pokémon
47+ pokemon . forEach ( function ( singlePokemon ) {
48+ // Add a list item to the list
49+ document . getElementById ( 'pokemon' ) . appendChild ( generateListItem ( singlePokemon ) ) ;
50+ } ) ;
51+ }
52+
53+ /**
54+ * Create a single list item.
55+ *
56+ * @param {{name, number, description, category, imageurl, length, weight, abilities, typing} } pokemon the pokemon to create a list item for.
57+ */
58+ function generateListItem ( pokemon ) {
59+ // Create the list item
60+ const listitem = document . createElement ( 'li' ) ;
61+
62+ // Set the attributes
63+ listitem . innerHTML = getPokemonNumberAndName ( pokemon )
64+ listitem . className = 'list-group-item list-group-item-action clickable' ;
65+
66+ // Check whether this Pokémon is selected
67+ if ( pokemon . number === selectedPokemon ) {
68+ // Add the active class
69+ listitem . className += ' active' ;
70+ }
71+
72+ // Assign the on-click function
73+ listitem . onclick = selectPokemonFromList ;
74+
75+ // Return the list item
76+ return listitem ;
77+ }
78+
79+ /**
80+ * Event: When clicked on a single Pokémon, this function loads the data of that Pokémon.
81+ *
82+ * @param {* } event The event that triggered the function.
83+ */
84+ function selectPokemonFromList ( event ) {
85+ // Get the Pokémon number & save it
86+ const number = event . target . innerHTML . split ( ' ' ) [ 0 ] ;
87+ selectedPokemon = number ;
88+
89+ // Check there is an active field
90+ if ( document . querySelector ( '.active' ) ) {
91+ // Remove the active class from that field
92+ document . querySelector ( '.active' ) . classList . remove ( 'active' ) ;
93+ }
94+
95+ // Add the active field to the list item that was clicked
96+ event . target . className += ' active' ;
97+
98+ // Display the data for the current Pokémon
99+ DisplayPokémonData ( pokedex . find ( pokemon => pokemon . number === number ) ) ;
100+ }
101+
102+ /**
103+ * Display the data of a single Pokémon object.
104+ *
105+ * @param {{name, number, description, category, imageurl, length, weight, abilities, typing} } pokemon the pokemon object to display.
106+ */
107+ function DisplayPokémonData ( pokemon ) {
108+ // Display all the data on the DOM of the provided Pokémon
109+ document . getElementById ( 'name-and-number' ) . innerHTML = getPokemonNumberAndName ( pokemon ) ;
110+ document . getElementById ( 'description' ) . innerHTML = pokemon . description ;
111+ document . querySelector ( 'img' ) . src = pokemon . imageurl ;
112+ }
113+
114+ /**
115+ * Get the number and the name of a single Pokémon in the following format:
116+ * '{number} {name}'.
117+ *
118+ * @param {{name, number, description, category, imageurl, length, weight, abilities, typing} } pokemon the pokemon to get the data from.
119+ * @returns The formatted string.
120+ */
121+ function getPokemonNumberAndName ( pokemon ) {
122+ return `${ pokemon . number } ${ pokemon . name } ;
123+ }
124+
125+ /**
126+ * Load all the data on all Pokémon available in ./js/pokemon.json.
127+ * @returns {Promise<[{name, number, description, category, imageurl, length, weight, abilities, typing}]> } An array of Pokémon data available.
128+ */
129+ async function loadPokemon ( ) {
130+ return await fetch ( './js/pokemon.json' )
131+ . then ( response => response . json ( ) ) ;
132+ }
0 commit comments